@zohodesk/components 1.0.0-temp-240 → 1.0.0-temp-242

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
   })
 };

package/lib/Typography/__tests__/Typography.spec.js

@@ -0,0 +1,232 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Typography = _interopRequireDefault(require("../Typography"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('Typography', function () {
+  var ui_size = ['7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '24', '25', '26', '28', '29', '30', '32', '34', '35', '36', '40', '50', 'inherit'];
+  var ui_lineClamp = ['1', '2', '3', '4', '5'];
+  var ui_lineHeight = ['0', '0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'normal', 'initial', 'inherit'];
+  var ui_display = ['block', 'inlineBlock', 'inline', 'initial'];
+  var ui_weight = ['regular', 'light', 'semibold', 'bold'];
+  var ui_typeFace = ['normal', 'italic'];
+  var ui_textAlign = ['left', 'center', 'right', 'justify'];
+  var ui_letterSpacing = ['0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'inherit'];
+  var ui_transform = ['default', 'upper', 'lower', 'capital'];
+  var ui_decoration = ['default', 'underline', 'strike', 'overline'];
+  var ui_wordBreak = ['breakAll', 'keepAll', 'breakWord'];
+  var ui_wordWrap = ['normal', 'break'];
+  var ui_whiteSpace = ['normal', 'noWrap', 'pre', 'preLine', 'preWrap'];
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the children ', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, "Test")),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering ui_tagName as h2', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_tagName: "h2"
+    }, "Heading 2 Test")),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering i18n_dataTitle', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $i18n_dataTitle: "typoDataTitle"
+    }, "Heading 2 Test")),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering testId', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      testId: "TypoTestId"
+    }, "Heading 2 Test")),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering customId', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      customId: "TypoCustomId"
+    }, "Heading 2 Test")),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering tagAttributes_text', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $tagAttributes_text: {
+        id: "TypoCustomId"
+      }
+    }, "Heading 2 Test")),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering a11yAttributes_text', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $a11yAttributes_text: {
+        'aria-haspopup': 'true',
+        'aria-expanded': true,
+        'aria-controls': 'uniqueId'
+      }
+    }, "Heading 2 Test")),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering flag_reset', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $flag_reset: true
+    }, "Heading 2 Test")),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering flag_dotted', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $flag_dotted: true
+    }, "Heading 2 Test")),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_size)('Should render ui_size - %s', function (ui_size) {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      isScrollAttribute: true,
+      $ui_size: ui_size
+    }, "Heading")),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_lineClamp)('Should render ui_lineClamp - %s', function (ui_lineClamp) {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      isScrollAttribute: true,
+      $ui_lineClamp: ui_lineClamp
+    }, "Heading")),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_lineHeight)('Should render ui_lineHeight - %s', function (ui_lineHeight) {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      isScrollAttribute: true,
+      $ui_lineHeight: ui_lineHeight
+    }, "Heading")),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_display)('Should render ui_display - %s', function (ui_display) {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      isScrollAttribute: true,
+      $ui_display: ui_display
+    }, "Heading")),
+        asFragment = _render14.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_weight)('Should render ui_weight - %s', function (ui_weight) {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      isScrollAttribute: true,
+      $ui_weight: ui_weight
+    }, "Heading")),
+        asFragment = _render15.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_typeFace)('Should render ui_typeFace - %s', function (ui_typeFace) {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      isScrollAttribute: true,
+      $ui_typeFace: ui_typeFace
+    }, "Heading")),
+        asFragment = _render16.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_textAlign)('Should render ui_textAlign - %s', function (ui_textAlign) {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      isScrollAttribute: true,
+      $ui_textAlign: ui_textAlign
+    }, "Heading")),
+        asFragment = _render17.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_letterSpacing)('Should render ui_letterSpacing - %s', function (ui_letterSpacing) {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      isScrollAttribute: true,
+      $ui_letterSpacing: ui_letterSpacing
+    }, "Heading")),
+        asFragment = _render18.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_transform)('Should render ui_transform - %s', function (ui_transform) {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      isScrollAttribute: true,
+      $ui_transform: ui_transform
+    }, "Heading")),
+        asFragment = _render19.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_decoration)('Should render ui_decoration - %s', function (ui_decoration) {
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      isScrollAttribute: true,
+      $ui_decoration: ui_decoration
+    }, "Heading")),
+        asFragment = _render20.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering ui_className', function () {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_className: "custom-class"
+    }, "Heading 2 Test")),
+        asFragment = _render21.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_wordBreak)('Should render ui_wordBreak - %s', function (ui_wordBreak) {
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      isScrollAttribute: true,
+      $ui_wordBreak: ui_wordBreak
+    }, "Heading")),
+        asFragment = _render22.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_wordWrap)('Should render ui_wordWrap - %s', function (ui_wordWrap) {
+    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      isScrollAttribute: true,
+      $ui_wordWrap: ui_wordWrap
+    }, "Heading")),
+        asFragment = _render23.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_whiteSpace)('Should render ui_whiteSpace - %s', function (ui_whiteSpace) {
+    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      isScrollAttribute: true,
+      $ui_whiteSpace: ui_whiteSpace
+    }, "Heading")),
+        asFragment = _render24.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});