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

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -13,6 +13,8 @@ var _propTypes = require("./props/propTypes");
 
 var _defaultProps = require("./props/defaultProps");
 
+var _constants = require("./constants");
+
 var _Loader = _interopRequireDefault(require("@zohodesk/svg/lib/Loader/Loader"));
 
 var _Popup = _interopRequireDefault(require("../Popup/Popup"));
@@ -266,7 +268,9 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleSelectedOptionIdChange",
     value: function handleSelectedOptionIdChange(selectedGroupOptions, normalizedFormatOptions, normalizedSelectedOptions) {
-      var allowValueFallback = this.props.allowValueFallback;
+      var _this$props = this.props,
+          allowValueFallback = _this$props.allowValueFallback,
+          limit = _this$props.limit;
       var newSelectedOptions = selectedGroupOptions.map(function (option) {
         return (0, _dropDownUtils.optionIdGrouping)(option.id, option.groupId);
       });
@@ -279,16 +283,17 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
         selectedOptions: newSelectedOptions,
         normalizedFormatOptions: formatOptions,
         selectedOptionsLength: selectedOptionsLength,
-        allowValueFallback: allowValueFallback
+        allowValueFallback: allowValueFallback,
+        limit: limit
       });
     }
   }, {
     key: "togglePopup",
     value: function togglePopup(e) {
-      var _this$props = this.props,
-          togglePopup = _this$props.togglePopup,
-          defaultDropBoxPosition = _this$props.defaultDropBoxPosition,
-          isReadOnly = _this$props.isReadOnly;
+      var _this$props2 = this.props,
+          togglePopup = _this$props2.togglePopup,
+          defaultDropBoxPosition = _this$props2.defaultDropBoxPosition,
+          isReadOnly = _this$props2.isReadOnly;
       !isReadOnly && togglePopup(e, defaultDropBoxPosition ? "".concat(defaultDropBoxPosition, "Center") : null);
     }
   }, {
@@ -463,12 +468,13 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           lastHighLightedSelectOption = _this$state5.lastHighLightedSelectOption,
           shiftKeyPressHighLighted = _this$state5.shiftKeyPressHighLighted,
           selectedOptions = _this$state5.selectedOptionIds;
-      var _this$props2 = this.props,
-          isNextOptions = _this$props2.isNextOptions,
-          getNextOptions = _this$props2.getNextOptions,
-          isPopupOpen = _this$props2.isPopupOpen,
-          isPopupOpenOnEnter = _this$props2.isPopupOpenOnEnter,
-          onKeyDown = _this$props2.onKeyDown;
+      var _this$props3 = this.props,
+          isNextOptions = _this$props3.isNextOptions,
+          getNextOptions = _this$props3.getNextOptions,
+          isPopupOpen = _this$props3.isPopupOpen,
+          isPopupOpenOnEnter = _this$props3.isPopupOpenOnEnter,
+          onKeyDown = _this$props3.onKeyDown,
+          limit = _this$props3.limit;
       var highLightedSelectOptionsLen = highLightedSelectOptions.length;
 
       if (isPopupOpen && (keyCode === 38 || keyCode === 40 || keyCode === 13 || keyCode === 27)) {
@@ -519,7 +525,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             hoverIndex: hoverIndex + 1
           });
         }
-      } else if (keyCode === 13) {
+      } else if (keyCode === 13 && selectedOptions.length < limit) {
         //enter key
         var id = suggestions[hoverIndex] || {};
         isPopupOpen && !(0, _Common.getIsEmptyValue)(id) && this.handleSelectOption(id, null, null, e);
@@ -678,9 +684,9 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
     value: function handleSearch(value, e) {
       var _this4 = this;
 
-      var _this$props3 = this.props,
-          onSearch = _this$props3.onSearch,
-          isPopupOpen = _this$props3.isPopupOpen;
+      var _this$props4 = this.props,
+          onSearch = _this$props4.onSearch,
+          isPopupOpen = _this$props4.isPopupOpen;
       !isPopupOpen && e && this.togglePopup(e);
       var _this$state$searchStr = this.state.searchStr,
           searchStr = _this$state$searchStr === void 0 ? '' : _this$state$searchStr;
@@ -747,11 +753,11 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
     value: function handleChange() {
       var selectedOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
       var e = arguments.length > 1 ? arguments[1] : undefined;
-      var _this$props4 = this.props,
-          onChange = _this$props4.onChange,
-          needToCloseOnSelect = _this$props4.needToCloseOnSelect,
-          togglePopup = _this$props4.togglePopup,
-          isSearchClearOnSelect = _this$props4.isSearchClearOnSelect;
+      var _this$props5 = this.props,
+          onChange = _this$props5.onChange,
+          needToCloseOnSelect = _this$props5.needToCloseOnSelect,
+          togglePopup = _this$props5.togglePopup,
+          isSearchClearOnSelect = _this$props5.isSearchClearOnSelect;
       var searchStr = this.state.searchStr;
       var newSelectedOptions = selectedOptions.map(function (option) {
         return (0, _dropDownUtils.extractOptionId)(option);
@@ -816,9 +822,9 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleInputFocus",
     value: function handleInputFocus() {
-      var _this$props5 = this.props,
-          isDisabled = _this$props5.isDisabled,
-          isReadOnly = _this$props5.isReadOnly;
+      var _this$props6 = this.props,
+          isDisabled = _this$props6.isDisabled,
+          isReadOnly = _this$props6.isReadOnly;
       this.searchInput && !isDisabled && !isReadOnly && this.searchInput.focus({
         preventScroll: true
       });
@@ -836,13 +842,13 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this$props6 = this.props,
-          groupedOptions = _this$props6.groupedOptions,
-          selectedGroupOptions = _this$props6.selectedGroupOptions,
-          isPopupOpen = _this$props6.isPopupOpen,
-          selectedOptionDetails = _this$props6.selectedOptionDetails,
-          searchStr = _this$props6.searchStr,
-          notifyPopupToggle = _this$props6.notifyPopupToggle;
+      var _this$props7 = this.props,
+          groupedOptions = _this$props7.groupedOptions,
+          selectedGroupOptions = _this$props7.selectedGroupOptions,
+          isPopupOpen = _this$props7.isPopupOpen,
+          selectedOptionDetails = _this$props7.selectedOptionDetails,
+          searchStr = _this$props7.searchStr,
+          notifyPopupToggle = _this$props7.notifyPopupToggle;
       var _this$state8 = this.state,
           normalizedFormatOptions = _this$state8.normalizedFormatOptions,
           hoverIndex = _this$state8.hoverIndex;
@@ -895,10 +901,10 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
       var selSuggestion = this["suggestion_".concat(hoverId)];
       isPopupOpen && (0, _Common.scrollTo)(this.suggestionContainer, selSuggestion); //When suggestions length less than 5, getNextOptions function call
 
-      var _this$props7 = this.props,
-          isNextOptions = _this$props7.isNextOptions,
-          getNextOptions = _this$props7.getNextOptions,
-          needLocalSearch = _this$props7.needLocalSearch;
+      var _this$props8 = this.props,
+          isNextOptions = _this$props8.isNextOptions,
+          getNextOptions = _this$props8.getNextOptions,
+          needLocalSearch = _this$props8.needLocalSearch;
 
       var _this$handleFilterSug3 = this.handleFilterSuggestions(),
           suggestions = _this$handleFilterSug3.suggestionOptionIds;
@@ -928,56 +934,59 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this5 = this;
 
-      var _this$props8 = this.props,
-          size = _this$props8.size,
-          textBoxSize = _this$props8.textBoxSize,
-          selectedGroupOptions = _this$props8.selectedGroupOptions,
-          placeHolder = _this$props8.placeHolder,
-          dataId = _this$props8.dataId,
-          dataSelectorId = _this$props8.dataSelectorId,
-          isReadOnly = _this$props8.isReadOnly,
-          isDisabled = _this$props8.isDisabled,
-          isPopupOpen = _this$props8.isPopupOpen,
-          isPopupReady = _this$props8.isPopupReady,
-          defaultDropBoxPosition = _this$props8.defaultDropBoxPosition,
-          removeClose = _this$props8.removeClose,
-          needResponsive = _this$props8.needResponsive,
-          animationStyle = _this$props8.animationStyle,
-          needSelectAll = _this$props8.needSelectAll,
-          selectAllText = _this$props8.selectAllText,
-          dropBoxSize = _this$props8.dropBoxSize,
-          position = _this$props8.position,
-          getContainerRef = _this$props8.getContainerRef,
-          isAbsolutePositioningNeeded = _this$props8.isAbsolutePositioningNeeded,
-          positionsOffset = _this$props8.positionsOffset,
-          targetOffset = _this$props8.targetOffset,
-          isRestrictScroll = _this$props8.isRestrictScroll,
-          emptyMessage = _this$props8.emptyMessage,
-          searchEmptyMessage = _this$props8.searchEmptyMessage,
-          title = _this$props8.title,
-          variant = _this$props8.variant,
-          children = _this$props8.children,
-          listItemSize = _this$props8.listItemSize,
-          isDataLoaded = _this$props8.isDataLoaded,
-          needBorder = _this$props8.needBorder,
-          isNextOptions = _this$props8.isNextOptions,
-          getFooter = _this$props8.getFooter,
-          customClass = _this$props8.customClass,
-          borderColor = _this$props8.borderColor,
-          isPadding = _this$props8.isPadding,
-          htmlId = _this$props8.htmlId,
-          i18nKeys = _this$props8.i18nKeys,
-          a11y = _this$props8.a11y,
-          palette = _this$props8.palette,
-          needEffect = _this$props8.needEffect,
-          autoComplete = _this$props8.autoComplete,
-          getTargetRef = _this$props8.getTargetRef,
-          isFocus = _this$props8.isFocus;
+      var _this$props9 = this.props,
+          size = _this$props9.size,
+          textBoxSize = _this$props9.textBoxSize,
+          selectedGroupOptions = _this$props9.selectedGroupOptions,
+          placeHolder = _this$props9.placeHolder,
+          dataId = _this$props9.dataId,
+          dataSelectorId = _this$props9.dataSelectorId,
+          isReadOnly = _this$props9.isReadOnly,
+          isDisabled = _this$props9.isDisabled,
+          isPopupOpen = _this$props9.isPopupOpen,
+          isPopupReady = _this$props9.isPopupReady,
+          defaultDropBoxPosition = _this$props9.defaultDropBoxPosition,
+          removeClose = _this$props9.removeClose,
+          needResponsive = _this$props9.needResponsive,
+          animationStyle = _this$props9.animationStyle,
+          needSelectAll = _this$props9.needSelectAll,
+          selectAllText = _this$props9.selectAllText,
+          dropBoxSize = _this$props9.dropBoxSize,
+          position = _this$props9.position,
+          getContainerRef = _this$props9.getContainerRef,
+          isAbsolutePositioningNeeded = _this$props9.isAbsolutePositioningNeeded,
+          positionsOffset = _this$props9.positionsOffset,
+          targetOffset = _this$props9.targetOffset,
+          isRestrictScroll = _this$props9.isRestrictScroll,
+          emptyMessage = _this$props9.emptyMessage,
+          searchEmptyMessage = _this$props9.searchEmptyMessage,
+          title = _this$props9.title,
+          variant = _this$props9.variant,
+          children = _this$props9.children,
+          listItemSize = _this$props9.listItemSize,
+          isDataLoaded = _this$props9.isDataLoaded,
+          needBorder = _this$props9.needBorder,
+          isNextOptions = _this$props9.isNextOptions,
+          getFooter = _this$props9.getFooter,
+          customClass = _this$props9.customClass,
+          borderColor = _this$props9.borderColor,
+          isPadding = _this$props9.isPadding,
+          htmlId = _this$props9.htmlId,
+          i18nKeys = _this$props9.i18nKeys,
+          a11y = _this$props9.a11y,
+          palette = _this$props9.palette,
+          needEffect = _this$props9.needEffect,
+          autoComplete = _this$props9.autoComplete,
+          getTargetRef = _this$props9.getTargetRef,
+          isFocus = _this$props9.isFocus,
+          limit = _this$props9.limit;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
-          clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
+          clearText = _i18nKeys$clearText === void 0 ? _constants.MULTISELECT_I18N_KEYS.clearText : _i18nKeys$clearText,
+          _i18nKeys$limitReache = _i18nKeys.limitReachedMessage,
+          limitReachedMessage = _i18nKeys$limitReache === void 0 ? _constants.MULTISELECT_I18N_KEYS.limitReachedMessage : _i18nKeys$limitReache;
       var _a11y$clearLabel = a11y.clearLabel,
-          clearLabel = _a11y$clearLabel === void 0 ? 'Clear all' : _a11y$clearLabel;
+          clearLabel = _a11y$clearLabel === void 0 ? _constants.MULTISELECT_I18N_KEYS.clearText : _a11y$clearLabel;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -1110,7 +1119,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
         }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
           customClass: "".concat(_MultiSelectModule["default"].box, " ").concat(_MultiSelectModule["default"]["".concat(palette, "Box")]),
           onScroll: _this5.handleScroll
-        }, needSelectAll ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
+        }, needSelectAll && !(limit >= 0) ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
           onSelect: _this5.handleSelectAll,
           selectAllText: selectAllText,
           suggestions: suggestionOptionIds,
@@ -1148,6 +1157,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             a11y: {
               role: 'option'
             },
+            limit: limit,
+            limitReachedMessage: limitReachedMessage,
             dataId: "".concat(dataId, "_Options")
           }));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -13,6 +13,8 @@ var _propTypes = require("./props/propTypes");
 
 var _defaultProps = require("./props/defaultProps");
 
+var _constants = require("./constants");
+
 var _MultiSelect = require("./MultiSelect");
 
 var _SelectedOptions = _interopRequireDefault(require("./SelectedOptions"));
@@ -249,7 +251,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
 
       var selectedOptionsLimit = props.selectedOptionsLimit,
           selectedOptionDetails = props.selectedOptionDetails,
-          allowValueFallback = props.allowValueFallback;
+          allowValueFallback = props.allowValueFallback,
+          limit = props.limit;
       showedSelectedOptionsCount = (0, _Common.getIsEmptyValue)(showedSelectedOptionsCount) ? selectedOptionsLimit : showedSelectedOptionsCount;
 
       var _this$handleFormatSel = this.handleFormatSelectedOptions(selectedOptionDetails, props),
@@ -263,7 +266,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         selectedOptions: selectedOptions,
         normalizedFormatOptions: formatOptions,
         selectedOptionsLength: showedSelectedOptionsCount,
-        allowValueFallback: allowValueFallback
+        allowValueFallback: allowValueFallback,
+        limit: limit
       });
     }
   }, {
@@ -454,7 +458,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           positionsOffset = _this$props6.positionsOffset,
           targetOffset = _this$props6.targetOffset,
           isRestrictScroll = _this$props6.isRestrictScroll,
-          isFocus = _this$props6.isFocus;
+          isFocus = _this$props6.isFocus,
+          limit = _this$props6.limit;
       var _customProps$Suggesti = customProps.SuggestionsProps,
           SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti,
           _customProps$DropBoxP = customProps.DropBoxProps,
@@ -463,9 +468,11 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           containerClass = _customClass$containe === void 0 ? '' : _customClass$containe;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
-          clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
+          clearText = _i18nKeys$clearText === void 0 ? _constants.MULTISELECT_I18N_KEYS.clearText : _i18nKeys$clearText,
+          _i18nKeys$limitReache = _i18nKeys.limitReachedMessage,
+          limitReachedMessage = _i18nKeys$limitReache === void 0 ? _constants.MULTISELECT_I18N_KEYS.limitReachedMessage : _i18nKeys$limitReache;
       var _a11y$clearLabel = a11y.clearLabel,
-          clearLabel = _a11y$clearLabel === void 0 ? 'Clear all' : _a11y$clearLabel;
+          clearLabel = _a11y$clearLabel === void 0 ? _constants.MULTISELECT_I18N_KEYS.clearText : _a11y$clearLabel;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         noMoreText: i18nKeys.noMoreText || noMoreOptionsMessage,
@@ -604,7 +611,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
           customClass: _MultiSelectModule["default"].box,
           onScroll: _this4.handleScroll
-        }, needSelectAll ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
+        }, needSelectAll && !(limit >= 0) ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
           onSelect: _this4.handleSelectAll,
           selectAllText: selectAllText,
           suggestions: suggestions,
@@ -625,7 +632,9 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           a11y: {
             role: 'option'
           },
-          dataId: "".concat(dataIdMultiSelectComp, "_Options")
+          dataId: "".concat(dataIdMultiSelectComp, "_Options"),
+          limit: limit,
+          limitReachedMessage: limitReachedMessage
         }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           isLoading: isFetchingOptions,
           options: options,

package/lib/MultiSelect/EmptyState.js

@@ -13,6 +13,8 @@ var _propTypes = require("./props/propTypes");
 
 var _defaultProps = require("./props/defaultProps");
 
+var _constants = require("./constants");
+
 var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -66,7 +68,7 @@ var EmptyState = /*#__PURE__*/function (_React$PureComponent) {
           htmlId = _this$props.htmlId,
           a11y = _this$props.a11y;
       var _i18nKeys$loadingText = i18nKeys.loadingText,
-          loadingText = _i18nKeys$loadingText === void 0 ? 'Loading' : _i18nKeys$loadingText,
+          loadingText = _i18nKeys$loadingText === void 0 ? _constants.MULTISELECT_I18N_KEYS.loadingText : _i18nKeys$loadingText,
           _i18nKeys$emptyText = i18nKeys.emptyText,
           emptyText = _i18nKeys$emptyText === void 0 ? emptyMessage : _i18nKeys$emptyText,
           _i18nKeys$noMoreText = i18nKeys.noMoreText,

package/lib/MultiSelect/MultiSelect.js

@@ -15,6 +15,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _defaultProps2 = require("./MobileHeader/props/defaultProps");
 
+var _constants = require("./constants");
+
 var _Popup = _interopRequireDefault(require("../Popup/Popup"));
 
 var _TextBoxIcon = _interopRequireDefault(require("../TextBoxIcon/TextBoxIcon"));
@@ -160,6 +162,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
     _this.handleSearchOptions = (0, _Common.debounce)(_this.handleSearchOptions.bind(_assertThisInitialized(_this)), searchDebounceTime);
     _this.handleScroll = _this.handleScroll.bind(_assertThisInitialized(_this));
     _this.handleScrollFuncCall = (0, _Common.debounce)(_this.handleScrollFuncCall.bind(_assertThisInitialized(_this)), 500);
+    _this.getVirtualizerPublicMethods = _this.getVirtualizerPublicMethods.bind(_assertThisInitialized(_this));
+    _this.setSuggestionsVirtualizerContainerRefFunction = _this.setSuggestionsVirtualizerContainerRefFunction.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -225,9 +229,6 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
-      var suggestionContainer = this.suggestionContainer,
-          selectedOptionContainer = this.selectedOptionContainer,
-          suggestionsOrder = this.suggestionsOrder;
       var _this$state = this.state,
           hoverOption = _this$state.hoverOption,
           highLightedSelectOptions = _this$state.highLightedSelectOptions,
@@ -238,7 +239,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isPopupOpen = _this$props2.isPopupOpen,
           onDropBoxClose = _this$props2.onDropBoxClose,
           onDropBoxOpen = _this$props2.onDropBoxOpen,
-          isSearchClearOnClose = _this$props2.isSearchClearOnClose; //handle dropbox open & close
+          isSearchClearOnClose = _this$props2.isSearchClearOnClose,
+          isVirtualizerEnabled = _this$props2.isVirtualizerEnabled; //handle dropbox open & close
 
       if (prevProps.isPopupOpen !== isPopupOpen) {
         isPopupOpen && onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
@@ -253,12 +255,21 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       } //scrollTo handling
 
 
-      var hoverId = suggestionsOrder[hoverOption] || '';
-      var selectedSuggestion = this["suggestion_".concat(hoverId)];
-      var lastHighLightedSelectOption = highLightedSelectOptions.slice(-1).length ? highLightedSelectOptions.slice(-1)[0] : null;
-      var selectedOption = this["selectedOption_".concat(lastHighLightedSelectOption)];
-      isPopupOpen && (0, _Common.scrollTo)(suggestionContainer, selectedSuggestion);
-      selectedOptions.length && selectedOption && (0, _Common.scrollTo)(selectedOptionContainer, selectedOption); //When suggestions length less than 5, getNextOptions function call
+      if (isVirtualizerEnabled && !!this.virtualizerMethods) {
+        var position = prevState.hoverOption > hoverOption ? 'top' : 'bottom';
+        this.virtualizerMethods.getElementVisiblePercentage(hoverOption) < 50 && this.virtualizerMethods.scrollToIndex(hoverOption, position);
+      } else {
+        var suggestionContainer = this.suggestionContainer,
+            selectedOptionContainer = this.selectedOptionContainer,
+            suggestionsOrder = this.suggestionsOrder;
+        var hoverId = suggestionsOrder[hoverOption] || '';
+        var selectedSuggestion = this["suggestion_".concat(hoverId)];
+        var lastHighLightedSelectOption = highLightedSelectOptions.slice(-1).length ? highLightedSelectOptions.slice(-1)[0] : null;
+        var selectedOption = this["selectedOption_".concat(lastHighLightedSelectOption)];
+        isPopupOpen && (0, _Common.scrollTo)(suggestionContainer, selectedSuggestion);
+        selectedOptions.length && selectedOption && (0, _Common.scrollTo)(selectedOptionContainer, selectedOption);
+      } //When suggestions length less than 5, getNextOptions function call
+
 
       var _this$props3 = this.props,
           isNextOptions = _this$props3.isNextOptions,
@@ -298,6 +309,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       var options = props.options,
           valueField = props.valueField,
           textField = props.textField,
+          secondaryField = props.secondaryField,
           prefixText = props.prefixText,
           disabledOptions = props.disabledOptions,
           allowValueFallback = props.allowValueFallback,
@@ -310,17 +322,20 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         optionType: 'default',
         disabledOptions: disabledOptions,
         allowValueFallback: allowValueFallback,
+        secondaryField: secondaryField,
         searchFields: searchFields
       });
     }
   }, {
     key: "handleGetSelectedOptions",
     value: function handleGetSelectedOptions(selectedOptions, normalizedFormatOptions, props) {
-      var allowValueFallback = props.allowValueFallback;
+      var allowValueFallback = props.allowValueFallback,
+          limit = props.limit;
       return this.getSelectedOptions({
         selectedOptions: selectedOptions,
         normalizedFormatOptions: normalizedFormatOptions,
-        allowValueFallback: allowValueFallback
+        allowValueFallback: allowValueFallback,
+        limit: limit
       });
     }
   }, {
@@ -393,7 +408,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           getNextOptions = _this$props5.getNextOptions,
           isPopupOpen = _this$props5.isPopupOpen,
           isPopupOpenOnEnter = _this$props5.isPopupOpenOnEnter,
-          onKeyDown = _this$props5.onKeyDown;
+          onKeyDown = _this$props5.onKeyDown,
+          limit = _this$props5.limit;
+      var allowKeyboardActions = !limit || limit && selectedOptions.length < limit;
       var highLightedSelectOptionsLen = highLightedSelectOptions.length;
 
       if (isPopupOpen && (keyCode === 38 || keyCode === 40 || keyCode === 13 || keyCode === 27 || keyCode === 9)) {
@@ -413,7 +430,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
 
       var suggestionsLen = suggestions.length;
 
-      if (suggestionsLen && isPopupOpen && keyCode === 38) {
+      if (suggestionsLen && isPopupOpen && keyCode === 38 && allowKeyboardActions) {
         //up arrow
 
         /*if (hoverOption === 0) { //disable first to last option higlight
@@ -424,7 +441,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
             hoverOption: hoverOption - 1
           });
         }
-      } else if (suggestionsLen && isPopupOpen && keyCode === 40) {
+      } else if (suggestionsLen && isPopupOpen && keyCode === 40 && allowKeyboardActions) {
         //down arrow
 
         /*else if (hoverOption === suggestionsLen - 1 || hoverOption === null) {
@@ -441,8 +458,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
             hoverOption: hoverOption + 1
           });
         }
-      } else if (keyCode === 13) {
-        //enter key
+      } else if (keyCode === 13 && allowKeyboardActions) {
+        //enter ke
         var selectedOption = suggestions[hoverOption] || {};
         var id = selectedOption.id;
         isPopupOpen && !(0, _Common.getIsEmptyValue)(id) && this.handleSelectOption(id, e);
@@ -809,12 +826,14 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           togglePopup = _this$props10.togglePopup,
           propSelectedOptions = _this$props10.selectedOptions,
           _this$props10$disable = _this$props10.disabledOptions,
-          disabledOptions = _this$props10$disable === void 0 ? dummyArray : _this$props10$disable;
+          disabledOptions = _this$props10$disable === void 0 ? dummyArray : _this$props10$disable,
+          limit = _this$props10.limit;
 
       var _filterSelectedOption = (0, _dropDownUtils.filterSelectedOptions)({
         selectedOptions: selectedOptions,
         propSelectedOptions: propSelectedOptions,
-        disabledOptions: disabledOptions
+        disabledOptions: disabledOptions,
+        limit: limit
       }),
           newSelectedOptions = _filterSelectedOption.newSelectedOptions;
 
@@ -872,6 +891,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
     key: "suggestionContainerRef",
     value: function suggestionContainerRef(el) {
       this.suggestionContainer = el;
+      typeof this.setSuggestionsVirtualizerRef === 'function' && this.setSuggestionsVirtualizerRef(el);
     }
   }, {
     key: "suggestionItemRef",
@@ -934,6 +954,17 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         openPopupOnly: openPopupOnly
       });
     }
+  }, {
+    key: "getVirtualizerPublicMethods",
+    value: function getVirtualizerPublicMethods(methods) {
+      this.virtualizerMethods = methods;
+    }
+  }, {
+    key: "setSuggestionsVirtualizerContainerRefFunction",
+    value: function setSuggestionsVirtualizerContainerRefFunction(refFunc) {
+      this.setSuggestionsVirtualizerRef = refFunc;
+      this.suggestionContainer && refFunc(this.suggestionContainer);
+    }
   }, {
     key: "getSelectionUI",
     value: function getSelectionUI() {
@@ -963,7 +994,6 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isPopupOpen = _this$props14.isPopupOpen,
           ariaErrorId = _this$props14.ariaErrorId,
           customProps = _this$props14.customProps,
-          renderCustomSelectedValue = _this$props14.renderCustomSelectedValue,
           isFocus = _this$props14.isFocus,
           isPopupReady = _this$props14.isPopupReady,
           renderCustomClearComponent = _this$props14.renderCustomClearComponent,
@@ -974,9 +1004,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           highLightedSelectOptions = _this$state8.highLightedSelectOptions,
           searchStr = _this$state8.searchStr;
       var _i18nKeys$clearText = i18nKeys.clearText,
-          clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
+          clearText = _i18nKeys$clearText === void 0 ? _constants.MULTISELECT_I18N_KEYS.clearText : _i18nKeys$clearText;
       var _a11y$clearLabel = a11y.clearLabel,
-          clearLabel = _a11y$clearLabel === void 0 ? 'Clear all' : _a11y$clearLabel,
+          clearLabel = _a11y$clearLabel === void 0 ? _constants.MULTISELECT_I18N_KEYS.clearLabel : _a11y$clearLabel,
           ariaLabelledby = a11y.ariaLabelledby;
 
       var _this$getIsShowClearI = this.getIsShowClearIcon({
@@ -1004,11 +1034,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         onSelect: this.handleClickSelectedOption,
         size: size,
         palette: palette,
-        dataId: "".concat(dataId, "_selectedOptions"),
-        renderCustomSelectedValue: renderCustomSelectedValue,
-        isPopupReady: isPopupReady,
-        isPopupOpen: isPopupOpen,
-        isDisabled: isDisabled
+        dataId: "".concat(dataId, "_selectedOptions")
       }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         className: _MultiSelectModule["default"].wrapper,
@@ -1116,9 +1142,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isLoading = _this$props15.isLoading,
           selectAllText = _this$props15.selectAllText,
           needSelectAll = _this$props15.needSelectAll,
-          customProps = _this$props15.customProps;
-      var _customProps$Suggesti = customProps.SuggestionsProps,
-          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
+          customProps = _this$props15.customProps,
+          isVirtualizerEnabled = _this$props15.isVirtualizerEnabled,
+          limit = _this$props15.limit;
       var _this$state9 = this.state,
           selectedOptions = _this$state9.selectedOptions,
           searchStr = _this$state9.searchStr,
@@ -1128,7 +1154,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           selectedOptionIds = _this$state9.selectedOptionIds;
       var _i18nKeys = i18nKeys,
           _i18nKeys$searchText = _i18nKeys.searchText,
-          searchText = _i18nKeys$searchText === void 0 ? 'Searching...' : _i18nKeys$searchText;
+          searchText = _i18nKeys$searchText === void 0 ? _constants.MULTISELECT_I18N_KEYS.searchText : _i18nKeys$searchText,
+          _i18nKeys$limitReache = _i18nKeys.limitReachedMessage,
+          limitReachedMessage = _i18nKeys$limitReache === void 0 ? _constants.MULTISELECT_I18N_KEYS.limitReachedMessage : _i18nKeys$limitReache;
       var suggestions = this.handleFilterSuggestions();
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
@@ -1138,6 +1166,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         noMoreText: i18nKeys.noMoreText || noMoreOptionsMessage
       });
       var isModel = (0, _isMobilePopover["default"])(needResponsive);
+      var SuggestionsProps = customProps.SuggestionsProps;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
@@ -1181,7 +1210,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         onClick: this.handlePopupClose
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: _MultiSelectModule["default"].effect
-      }, this.getSelectionUI(true))) : null, needSelectAll ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
+      }, this.getSelectionUI(true))) : null, needSelectAll && !(limit >= 0) ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
         onSelect: this.handleSelectAll,
         selectAllText: selectAllText,
         suggestions: suggestions,
@@ -1196,7 +1225,11 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       }, isSearching ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _MultiSelectModule["default"][palette]
       }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
+        key: searchStr.trim(),
         suggestions: suggestions,
+        isVirtualizerEnabled: isVirtualizerEnabled,
+        getVirtualizerPublicMethods: this.getVirtualizerPublicMethods,
+        setVirtualizerContainerRefFunction: this.setSuggestionsVirtualizerContainerRefFunction,
         getRef: this.suggestionItemRef,
         hoverOption: hoverOption,
         onClick: this.handleSelectOption,
@@ -1207,7 +1240,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         selectedOptions: selectedOptionIds,
         a11y: {
           role: 'option'
-        }
+        },
+        limit: limit,
+        limitReachedMessage: limitReachedMessage
       }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
         isLoading: isFetchingOptions,
         options: options,