@zohodesk/components 1.2.63 → 1.3.0

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -135,13 +135,16 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           _this$state$options = _this$state.options,
           options = _this$state$options === void 0 ? dummyArray : _this$state$options,
           searchStr = _this$state.searchStr;
-      var needLocalSearch = this.props.needLocalSearch;
+      var _this$props2 = this.props,
+          needLocalSearch = _this$props2.needLocalSearch,
+          searchFields = _this$props2.searchFields;
 
       var _this$getFilterSugges = this.getFilterSuggestions({
         options: options,
         selectedOptions: dummyArray,
         searchStr: (0, _Common.getSearchString)(searchStr),
-        needSearch: needLocalSearch
+        needSearch: needLocalSearch,
+        searchFields: searchFields
       }),
           suggestions = _this$getFilterSugges.suggestions,
           suggestionIds = _this$getFilterSugges.suggestionIds;
@@ -157,14 +160,14 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
       var _this$state2 = this.state,
           optionsNormalize = _this$state2.optionsNormalize,
           searchStr = _this$state2.searchStr;
-      var _this$props2 = this.props,
-          onChange = _this$props2.onChange,
-          _this$props2$needToCl = _this$props2.needToCloseOnSelect,
-          needToCloseOnSelect = _this$props2$needToCl === void 0 ? false : _this$props2$needToCl,
-          togglePopup = _this$props2.togglePopup,
-          isSearchClearOnSelect = _this$props2.isSearchClearOnSelect,
-          propSelectedOptions = _this$props2.selectedOptions,
-          disabledOptions = _this$props2.disabledOptions;
+      var _this$props3 = this.props,
+          onChange = _this$props3.onChange,
+          _this$props3$needToCl = _this$props3.needToCloseOnSelect,
+          needToCloseOnSelect = _this$props3$needToCl === void 0 ? false : _this$props3$needToCl,
+          togglePopup = _this$props3.togglePopup,
+          isSearchClearOnSelect = _this$props3.isSearchClearOnSelect,
+          propSelectedOptions = _this$props3.selectedOptions,
+          disabledOptions = _this$props3.disabledOptions;
 
       var _filterSelectedOption = (0, _dropDownUtils.filterSelectedOptions)({
         selectedOptions: selectedOptions,
@@ -219,7 +222,9 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           prefixText = props.prefixText,
           optionType = props.optionType,
           disabledOptions = props.disabledOptions,
-          allowValueFallback = props.allowValueFallback;
+          allowValueFallback = props.allowValueFallback,
+          searchFields = props.searchFields,
+          secondaryField = props.secondaryField;
       return this.formatOptions({
         options: options,
         valueField: valueField,
@@ -230,7 +235,9 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         optionType: optionType,
         iconSize: iconSize,
         disabledOptions: disabledOptions,
-        allowValueFallback: allowValueFallback
+        allowValueFallback: allowValueFallback,
+        searchFields: searchFields,
+        secondaryField: secondaryField
       });
     }
   }, {
@@ -288,11 +295,11 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
       var _this2 = this;
 
       var oldAllSelectedOptionsDetails = this.allSelectedOptionsDetails;
-      var _this$props3 = this.props,
-          selectedOptions = _this$props3.selectedOptions,
-          selectedOptionsLimit = _this$props3.selectedOptionsLimit,
-          id = _this$props3.id,
-          selectedOptionDetails = _this$props3.selectedOptionDetails;
+      var _this$props4 = this.props,
+          selectedOptions = _this$props4.selectedOptions,
+          selectedOptionsLimit = _this$props4.selectedOptionsLimit,
+          id = _this$props4.id,
+          selectedOptionDetails = _this$props4.selectedOptionDetails;
       var oldSelectedOptions = prevProps.selectedOptions,
           oldSelectedOptionsLimit = prevProps.selectedOptionsLimit;
       var oldCount = this.state.showedSelectedOptionsCount;
@@ -360,11 +367,11 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
       var _this3 = this;
 
       var showedSelectedOptionsCount = this.state.showedSelectedOptionsCount;
-      var _this$props4 = this.props,
-          selectedOptionsLimit = _this$props4.selectedOptionsLimit,
-          selectedOptions = _this$props4.selectedOptions,
-          getSelectedOptionDetails = _this$props4.getSelectedOptionDetails,
-          removeClose = _this$props4.removeClose;
+      var _this$props5 = this.props,
+          selectedOptionsLimit = _this$props5.selectedOptionsLimit,
+          selectedOptions = _this$props5.selectedOptions,
+          getSelectedOptionDetails = _this$props5.getSelectedOptionDetails,
+          removeClose = _this$props5.removeClose;
       removeClose(e);
       var selectedOptionsLen = selectedOptions.length;
 
@@ -401,53 +408,53 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
     value: function render() {
       var _this4 = this;
 
-      var _this$props5 = this.props,
-          isReadOnly = _this$props5.isReadOnly,
-          needSelectAll = _this$props5.needSelectAll,
-          searchEmptyMessage = _this$props5.searchEmptyMessage,
-          emptyMessage = _this$props5.emptyMessage,
-          noMoreOptionsMessage = _this$props5.noMoreOptionsMessage,
-          dropBoxSize = _this$props5.dropBoxSize,
-          placeHolder = _this$props5.placeHolder,
-          isPopupOpen = _this$props5.isPopupOpen,
-          isPopupReady = _this$props5.isPopupReady,
-          position = _this$props5.position,
-          defaultDropBoxPosition = _this$props5.defaultDropBoxPosition,
-          selectAllText = _this$props5.selectAllText,
-          getContainerRef = _this$props5.getContainerRef,
-          removeClose = _this$props5.removeClose,
-          isAnimate = _this$props5.isAnimate,
-          animationStyle = _this$props5.animationStyle,
-          textBoxSize = _this$props5.textBoxSize,
-          variant = _this$props5.variant,
-          size = _this$props5.size,
-          isDisabled = _this$props5.isDisabled,
-          title = _this$props5.title,
-          dataIdMultiSelectComp = _this$props5.dataIdMultiSelectComp,
-          dataIdClearIcon = _this$props5.dataIdClearIcon,
-          dataIdSelectAllEle = _this$props5.dataIdSelectAllEle,
-          dataIdLoading = _this$props5.dataIdLoading,
-          _this$props5$selected = _this$props5.selectedOptions,
-          allselectedOptionIds = _this$props5$selected === void 0 ? [] : _this$props5$selected,
-          listItemSize = _this$props5.listItemSize,
-          needBorder = _this$props5.needBorder,
-          i18nKeys = _this$props5.i18nKeys,
-          htmlId = _this$props5.htmlId,
-          a11y = _this$props5.a11y,
-          borderColor = _this$props5.borderColor,
-          isBoxPaddingNeed = _this$props5.isBoxPaddingNeed,
-          getFooter = _this$props5.getFooter,
-          customProps = _this$props5.customProps,
-          needEffect = _this$props5.needEffect,
-          disabledOptions = _this$props5.disabledOptions,
-          isLoading = _this$props5.isLoading,
-          dataSelectorId = _this$props5.dataSelectorId,
-          customClass = _this$props5.customClass,
-          isAbsolutePositioningNeeded = _this$props5.isAbsolutePositioningNeeded,
-          positionsOffset = _this$props5.positionsOffset,
-          targetOffset = _this$props5.targetOffset,
-          isRestrictScroll = _this$props5.isRestrictScroll,
-          isFocus = _this$props5.isFocus;
+      var _this$props6 = this.props,
+          isReadOnly = _this$props6.isReadOnly,
+          needSelectAll = _this$props6.needSelectAll,
+          searchEmptyMessage = _this$props6.searchEmptyMessage,
+          emptyMessage = _this$props6.emptyMessage,
+          noMoreOptionsMessage = _this$props6.noMoreOptionsMessage,
+          dropBoxSize = _this$props6.dropBoxSize,
+          placeHolder = _this$props6.placeHolder,
+          isPopupOpen = _this$props6.isPopupOpen,
+          isPopupReady = _this$props6.isPopupReady,
+          position = _this$props6.position,
+          defaultDropBoxPosition = _this$props6.defaultDropBoxPosition,
+          selectAllText = _this$props6.selectAllText,
+          getContainerRef = _this$props6.getContainerRef,
+          removeClose = _this$props6.removeClose,
+          isAnimate = _this$props6.isAnimate,
+          animationStyle = _this$props6.animationStyle,
+          textBoxSize = _this$props6.textBoxSize,
+          variant = _this$props6.variant,
+          size = _this$props6.size,
+          isDisabled = _this$props6.isDisabled,
+          title = _this$props6.title,
+          dataIdMultiSelectComp = _this$props6.dataIdMultiSelectComp,
+          dataIdClearIcon = _this$props6.dataIdClearIcon,
+          dataIdSelectAllEle = _this$props6.dataIdSelectAllEle,
+          dataIdLoading = _this$props6.dataIdLoading,
+          _this$props6$selected = _this$props6.selectedOptions,
+          allselectedOptionIds = _this$props6$selected === void 0 ? [] : _this$props6$selected,
+          listItemSize = _this$props6.listItemSize,
+          needBorder = _this$props6.needBorder,
+          i18nKeys = _this$props6.i18nKeys,
+          htmlId = _this$props6.htmlId,
+          a11y = _this$props6.a11y,
+          borderColor = _this$props6.borderColor,
+          isBoxPaddingNeed = _this$props6.isBoxPaddingNeed,
+          getFooter = _this$props6.getFooter,
+          customProps = _this$props6.customProps,
+          needEffect = _this$props6.needEffect,
+          disabledOptions = _this$props6.disabledOptions,
+          isLoading = _this$props6.isLoading,
+          dataSelectorId = _this$props6.dataSelectorId,
+          customClass = _this$props6.customClass,
+          isAbsolutePositioningNeeded = _this$props6.isAbsolutePositioningNeeded,
+          positionsOffset = _this$props6.positionsOffset,
+          targetOffset = _this$props6.targetOffset,
+          isRestrictScroll = _this$props6.isRestrictScroll,
+          isFocus = _this$props6.isFocus;
       var _customProps$Suggesti = customProps.SuggestionsProps,
           SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti,
           _customProps$DropBoxP = customProps.DropBoxProps,

package/lib/MultiSelect/MultiSelect.js

@@ -300,7 +300,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           textField = props.textField,
           prefixText = props.prefixText,
           disabledOptions = props.disabledOptions,
-          allowValueFallback = props.allowValueFallback;
+          allowValueFallback = props.allowValueFallback,
+          searchFields = props.searchFields;
       return this.formatOptions({
         options: options,
         valueField: valueField,
@@ -308,7 +309,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         prefixText: prefixText,
         optionType: 'default',
         disabledOptions: disabledOptions,
-        allowValueFallback: allowValueFallback
+        allowValueFallback: allowValueFallback,
+        searchFields: searchFields
       });
     }
   }, {
@@ -354,14 +356,16 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       var _this$props4 = this.props,
           selectedOptions = _this$props4.selectedOptions,
           needLocalSearch = _this$props4.needLocalSearch,
-          keepSelectedOptions = _this$props4.keepSelectedOptions;
+          keepSelectedOptions = _this$props4.keepSelectedOptions,
+          searchFields = _this$props4.searchFields;
 
       var _this$getFilterSugges = this.getFilterSuggestions({
         options: options,
         selectedOptions: selectedOptions,
         searchStr: (0, _Common.getSearchString)(searchStr),
         needSearch: needLocalSearch,
-        keepSelectedOptions: keepSelectedOptions
+        keepSelectedOptions: keepSelectedOptions,
+        searchFields: searchFields
       }),
           suggestions = _this$getFilterSugges.suggestions,
           suggestionIds = _this$getFilterSugges.suggestionIds;

package/lib/MultiSelect/MultiSelect.module.css

@@ -200,7 +200,15 @@
   cursor: pointer;
   margin-top: var(--zd_size5) ;
   background-color: var(--zdt_multiselect_delete_bg);
-  border: 0;
+  border: 0
+}
+
+[dir=ltr] .more {
+  margin-right:var(--zd_size3) 
+}
+
+[dir=rtl] .more {
+  margin-left:var(--zd_size3) 
 }
 
 .rightPlaceholder{

package/lib/MultiSelect/MultiSelectWithAvatar.js

@@ -100,7 +100,9 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
           textField = props.textField,
           imageField = props.imageField,
           disabledOptions = props.disabledOptions,
-          allowValueFallback = props.allowValueFallback;
+          allowValueFallback = props.allowValueFallback,
+          searchFields = props.searchFields,
+          secondaryField = props.secondaryField;
       return this.formatOptions({
         options: options,
         valueField: valueField,
@@ -108,7 +110,9 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         imageField: imageField,
         optionType: 'avatar',
         disabledOptions: disabledOptions,
-        allowValueFallback: allowValueFallback
+        allowValueFallback: allowValueFallback,
+        searchFields: searchFields,
+        secondaryField: secondaryField
       });
     }
   }, {

package/lib/MultiSelect/Suggestions.js

@@ -98,6 +98,7 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
       }, suggestions.map(function (suggestion, index) {
         var id = suggestion.id,
             value = suggestion.value,
+            secondaryValue = suggestion.secondaryValue,
             photoURL = suggestion.photoURL,
             icon = suggestion.icon,
             optionType = suggestion.optionType,
@@ -143,7 +144,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
             size: listItemSize,
             avatarPalette: avatarPalette,
             palette: palette,
-            a11y: list_a11y
+            a11y: list_a11y,
+            secondaryValue: secondaryValue
           }));
         } else if (optionType === 'icon') {
           return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({}, commonProps, {
@@ -163,7 +165,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
             iconSize: iconSize,
             size: listItemSize,
             palette: palette,
-            a11y: list_a11y
+            a11y: list_a11y,
+            secondaryValue: secondaryValue
           }));
         }
 

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

@@ -13,27 +13,48 @@ exports[`MultiSelectHeader rendering the basic value 1`] = `
   >
     <div
       aria-hidden="true"
-      class="iconBox shrinkOff"
+      class="iconBox lhsBox lhsJustifyContent_center shrinkOff selfStart"
       data-id="MultiSelectHeader_selectAll_Icon"
       data-selector-id="box"
       data-test-id="MultiSelectHeader_selectAll_Icon"
     >
-      <i
-        aria-hidden="true"
-        class="zd_font_icons basic icon-androidd    "
-        data-id="fontIcon"
-        data-selector-id="fontIcon"
-        data-test-id="fontIcon"
-        style="--zd-iconfont-size: var(--zd_font_size15);"
-      />
+      <div
+        class="lhsBox_medium shrinkOff selfStart"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-androidd    "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size15);"
+        />
+      </div>
     </div>
     <div
-      class="value grow basis shrinkOn"
-      data-id="MultiSelectHeader_selectAll_Text"
+      class="grow basis shrinkOn"
+      data-id="boxComponent"
       data-selector-id="box"
-      data-test-id="MultiSelectHeader_selectAll_Text"
+      data-test-id="boxComponent"
     >
-      List
+      <div
+        class="flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="value shrinkOff"
+          data-id="MultiSelectHeader_selectAll_Text"
+          data-selector-id="box"
+          data-test-id="MultiSelectHeader_selectAll_Text"
+        >
+          List
+        </div>
+      </div>
     </div>
   </li>
 </DocumentFragment>

package/lib/MultiSelect/props/propTypes.js

@@ -65,6 +65,7 @@ var MultiSelect_propTypes = {
   a11y: _propTypes["default"].shape({
     clearLabel: _propTypes["default"].string
   }),
+  searchFields: _propTypes["default"].arrayOf(_propTypes["default"].string),
   isAnimate: _propTypes["default"].bool,
   isBoxPaddingNeed: _propTypes["default"].bool,
   isDisabled: _propTypes["default"].bool,
@@ -153,7 +154,8 @@ 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;
@@ -305,6 +307,7 @@ var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_
   //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']),

package/lib/Radio/props/propTypes.js

@@ -39,7 +39,7 @@ var propTypes = {
     ariaChecked: _propTypes["default"].bool,
     ariaHidden: _propTypes["default"].bool,
     role: _propTypes["default"].string,
-    tabIndex: _propTypes["default"].oneOfType(_propTypes["default"].string, _propTypes["default"].number),
+    tabIndex: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
     ariaLabelledby: _propTypes["default"].string,
     ariaLabel: _propTypes["default"].string,
     ariaReadonly: _propTypes["default"].bool

package/lib/common/common.module.css

@@ -260,6 +260,12 @@
   justify-content: space-between;
 }
 
+.justifyFstart {
+  -webkit-box-pack: flex-start;
+  -ms-flex-pack: flex-start;
+  justify-content: flex-start;
+}
+
 .justifyFend {
   -webkit-box-pack: flex-end;
   -ms-flex-pack: flex-end;
@@ -493,6 +499,10 @@
   display: -webkit-box;
   overflow: hidden;
 }
+.lineClamp {
+  composes: wbreak clamp;
+  -webkit-line-clamp: var(--line-clamp,2);
+}
 
 .offSelection {
   -webkit-user-select: none;

package/lib/utils/dropDownUtils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.optionIdGrouping = exports.makeObjectConcat = exports.makeGetSelectedValueText = exports.makeGetOptionIdChange = exports.makeGetMultiSelectSelectedOptions = exports.makeGetMultiSelectFilterSuggestions = exports.makeGetIsShowClearIcon = exports.makeGetGroupSelectOptions = exports.makeGetGroupSelectFilterSuggestions = exports.makeFormatOptions = exports.getValueField = exports.getTextField = exports.getPrefixText = exports.getOptions = exports.getOptionType = exports.getImageField = exports.getIconSize = exports.getIconName = exports.filterSelectedOptions = exports.extractOptionIdFromJson = exports.extractOptionId = exports.dummyObj = exports.dummyArray = void 0;
+exports.optionIdGrouping = exports.makeObjectConcat = exports.makeGetSelectedValueText = exports.makeGetOptionIdChange = exports.makeGetMultiSelectSelectedOptions = exports.makeGetMultiSelectFilterSuggestions = exports.makeGetIsShowClearIcon = exports.makeGetGroupSelectOptions = exports.makeGetGroupSelectFilterSuggestions = exports.makeFormatOptions = exports.getValueField = exports.getTextField = exports.getSecondaryField = exports.getPrefixText = exports.getOptions = exports.getOptionType = exports.getImageField = exports.getIconSize = exports.getIconName = exports.filterSelectedOptions = exports.extractOptionIdFromJson = exports.extractOptionId = exports.dummyObj = exports.dummyArray = void 0;
 
 var _reselect = require("reselect");
 
@@ -66,6 +66,12 @@ var getValueField = function getValueField(props) {
 
 exports.getValueField = getValueField;
 
+var getSecondaryField = function getSecondaryField(props) {
+  return props.secondaryField || '';
+};
+
+exports.getSecondaryField = getSecondaryField;
+
 var getTextField = function getTextField(props) {
   return props.textField || '';
 };
@@ -142,25 +148,38 @@ var getListItemProps = function getListItemProps(props) {
   return props.listItemProps || '';
 };
 
+var getSearchFields = function getSearchFields(props) {
+  return props.searchFields || ['value'];
+};
+
+var isObjectContainsSearchString = function isObjectContainsSearchString() {
+  var searchFields = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var obj = arguments.length > 2 ? arguments[2] : undefined;
+  var matchedFields = searchFields.filter(function (element) {
+    return (0, _Common.getSearchString)(obj[element]).indexOf(searchStr) !== -1;
+  });
+  return matchedFields.length !== 0;
+};
+
 var getAllowValueFallback = function getAllowValueFallback(props) {
   return props.allowValueFallback !== false;
 };
 
 var makeGetMultiSelectFilterSuggestions = function makeGetMultiSelectFilterSuggestions() {
-  return (0, _reselect.createSelector)([getOptions, getSelectedOptionsSel, getSearchStr, getNeedSearch, getIsStartWithSearch, getKeepSelectedOptions], function (options, selectedOptions, searchStr, needSearch, isStartsWithSearch, keepSelectedOptions) {
+  return (0, _reselect.createSelector)([getOptions, getSelectedOptionsSel, getSearchStr, getNeedSearch, getIsStartWithSearch, getKeepSelectedOptions, getSearchFields], function (options, selectedOptions, searchStr, needSearch, isStartsWithSearch, keepSelectedOptions, searchFields) {
     var suggestions = [];
     var suggestionIds = [];
     options.forEach(function (option) {
-      var id = option.id,
-          _option$value = option.value,
+      var searchString = (0, _Common.getSearchString)(searchStr);
+      var _option$value = option.value,
           value = _option$value === void 0 ? '' : _option$value;
       var valueString = (0, _Common.getSearchString)(value);
-      var searchString = (0, _Common.getSearchString)(searchStr);
-      var isMatch = needSearch ? isStartsWithSearch ? valueString.startsWith(searchString) : valueString.indexOf(searchString) !== -1 : true;
+      var isMatch = needSearch ? isStartsWithSearch ? valueString.startsWith(searchString) : isObjectContainsSearchString(searchFields, searchString, option) : true;
 
-      if (selectedOptions.indexOf(id) === -1 && isMatch || keepSelectedOptions) {
+      if (selectedOptions.indexOf(option.id) === -1 && isMatch || keepSelectedOptions) {
         suggestions.push(option);
-        suggestionIds.push(id);
+        suggestionIds.push(option.id);
       }
     });
     return {
@@ -232,7 +251,7 @@ var extractOptionIdFromJson = function extractOptionIdFromJson(id, localData) {
 exports.extractOptionIdFromJson = extractOptionIdFromJson;
 
 var makeFormatOptions = function makeFormatOptions() {
-  return (0, _reselect.createSelector)([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions, getListItemProps, getAllowValueFallback], function (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps, allowValueFallback) {
+  return (0, _reselect.createSelector)([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions, getListItemProps, getAllowValueFallback, getSearchFields, getSecondaryField], function (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps, allowValueFallback, searchFields, secondaryField) {
     var revampOptions = [];
     var remvampOptionIds = [];
     var normalizedAllOptions = {};
@@ -243,23 +262,34 @@ var makeFormatOptions = function makeFormatOptions() {
         var impValueField = option.valueField,
             impTextField = option.textField,
             impImageField = option.imageField,
+            impSecondaryField = option.secondaryField,
             impOptionType = option.optionType,
             impIconName = option.iconName,
             impIconSize = option.iconSize,
             listStyle = option.listItemProps;
         var id = _typeof(option) === 'object' ? option[impValueField || valueField] : option;
         var value = _typeof(option) === 'object' ? option[impTextField || textField] : allowValueFallback ? option : '';
+        var secondaryValue = _typeof(option) === 'object' ? option[impSecondaryField || secondaryField] : '';
         var photoURL = _typeof(option) === 'object' ? option[impImageField || imageField] : ''; // grouping options (group select/MultiSelect)
 
         id = !(0, _Common.getIsEmptyValue)(id) ? optionIdGrouping(id, prefixText) : '';
+        var additionalSearchFieldData = searchFields.reduce(function (value, item) {
+          if (_typeof(option) === 'object' && option.hasOwnProperty(item)) {
+            value[item] = option[item];
+          }
+
+          return value;
+        }, {});
 
         if (remvampOptionIds.indexOf(id) === -1 && !(0, _Common.getIsEmptyValue)(id) && !(0, _Common.getIsEmptyValue)(value)) {
           remvampOptionIds.push(id);
-          var optionDetails = {
+
+          var optionDetails = _objectSpread(_objectSpread({}, additionalSearchFieldData), {}, {
             id: id,
             value: value,
+            secondaryValue: secondaryValue,
             optionType: impOptionType || optionType
-          };
+          });
 
           if (imageField) {
             optionDetails.photoURL = photoURL;

package/lib/v1/Radio/props/propTypes.js

@@ -39,7 +39,7 @@ var propTypes = {
     ariaChecked: _propTypes["default"].bool,
     ariaHidden: _propTypes["default"].bool,
     role: _propTypes["default"].string,
-    tabIndex: _propTypes["default"].oneOfType(_propTypes["default"].string, _propTypes["default"].number),
+    tabIndex: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
     ariaLabelledby: _propTypes["default"].string,
     ariaLabel: _propTypes["default"].string,
     ariaReadonly: _propTypes["default"].bool

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.2.63",
+  "version": "1.3.0",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -38,7 +38,7 @@
     "build:css:umd": "npm run clean &&  npm run init && react-cli build:css:umd",
     "coverage": "react-cli coverage",
     "prepare": "npm run init &&  npm run build && npm run rtl && npm run cssVariableConvert ",
-    "prepublishOnly": "node prePublish.js && npm run test && npm run download && npm run css:review && npm run review:props ",
+    "prepublishOnly": "node prePublish.js && npm run test-clean && npm run test && npm run download && npm run css:review && npm run review:props ",
     "postpublish": "node postPublish.js",
     "report": "react-cli publish:report",
     "test": "react-cli test",
@@ -68,10 +68,10 @@
     "@zohodesk-private/css-variable-migrator": "^1.0.7",
     "@zohodesk-private/node-plugins": "1.1.8",
     "@zohodesk-private/react-prop-validator": "1.2.3",
-    "@zohodesk/a11y": "2.3.1",
+    "@zohodesk/a11y": "2.3.4",
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/hooks": "2.0.5",
-    "@zohodesk/icons": "1.0.72",
+    "@zohodesk/icons": "1.0.75",
     "@zohodesk/svg": "1.1.22",
     "@zohodesk/utils": "1.3.14",
     "@zohodesk/variables": "1.0.0",
@@ -86,7 +86,7 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.0.72",
+    "@zohodesk/icons": "1.0.75",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/svg": "1.1.22",
     "@zohodesk/virtualizer": "1.0.3",
@@ -94,6 +94,6 @@
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.5",
     "@zohodesk/utils": "1.3.14",
-    "@zohodesk/a11y": "2.3.1"
+    "@zohodesk/a11y": "2.3.4"
   }
 }