@zohodesk/components 1.4.8 → 1.4.10-exp.1

package/README.md

@@ -2,6 +2,17 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+# 1.4.10
+
+- **Select, MultiSelect**
+  - Searching with leading spaces is not reflected the results correctly. Issue Fixed.
+
+# 1.4.9
+
+- **MultiSelect , MultiSelectWithAvatar, AdvancedMultiSelect, AdvancedGroupMultiSelect**
+  - `limit` prop supported
+  - `limitReachedMessage` prop supported in i18nKeys
+
 # 1.4.8
 
 - Added UNSAFE_ prefix to deprecated lifecycle methods: componentWillMount, componentWillReceiveProps, and componentWillUpdate.

package/es/AppContainer/AppContainer.js

@@ -9,6 +9,7 @@ import '@zohodesk/variables/assets/dotVariables.module.css';
 import '@zohodesk/variables/assets/sizeVariables.module.css';
 import '@zohodesk/variables/assets/fontsizeVariables.module.css';
 import '@zohodesk/variables/es/fontFamilyVariables.module.css';
+import '@zohodesk/variables/es/fontWeightVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';
 import '@zohodesk/variables/assets/no_transitionVariables.module.css';
 import "../common/a11y.module.css";

package/es/AppContainer/AppContainer.module.css

@@ -8,8 +8,9 @@
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
 }
-.container {
-  font-family: var(--zd_regular);
+.container, .container button, .container input, .container textarea ,.container select {
+  /* font-family: var(--zd_regular); */
+  font-family: var(--zd-font-family, ZDLato);
 }
 .tooltip {
   height: 0 ;

package/es/Button/css/Button.module.css

@@ -5,7 +5,7 @@
   --button_cursor: pointer;
   --button_font_size: var(--zd_font_size13);
   --button_text_color: var(--zdt_button_default_text);
-  --button_font_family: var(--zd_regular);
+  --button_font_weight: var(--zd-fw-normal);
   --button_text_transform: capitalize;
   --button_bg_color: var(--zdt_button_default_bg);
   --button_border_radius: 4px;
@@ -49,7 +49,7 @@
   position: relative;
   font-size: var(--button_font_size);
   color: var(--button_text_color);
-  font-family: var(--button_font_family);
+  font-weight: var(--button_font_weight);
   text-transform: var(--button_text_transform);
   min-width: var(--button_min_width);
   height: var(--button_height);
@@ -63,7 +63,7 @@
 }
 
 .bold {
-  --button_font_family: var(--zd_semibold);
+  --button_font_weight: var(--zd-fw-semibold);
   composes: ftsmooth from '../../common/common.module.css';
 }
 
@@ -569,7 +569,7 @@
 }
 
 .loader {
-  color: var(--dot_mirror)
+  color: var(--dot_mirror);
 }
 
 [dir=ltr] .strike {
@@ -579,34 +579,43 @@
 [dir=rtl] .strike {
   background-image: repeating-linear-gradient(-120deg, var(--button_strike_color) 0 1px, transparent 1px 8px);
 }
+
 .primaryStrike {
   --button_strike_color: var(--zdt_button_primary_strike);
 }
+
 .primaryfilledStrike {
   --button_strike_color: var(--zdt_button_primaryFilled_strike);
   --button_border_color: var(--zdt_button_primaryfill_bg);
 }
+
 .dangerStrike {
   --button_strike_color: var(--zdt_button_danger_strike);
 }
+
 .dangerfilledStrike {
   --button_strike_color: var(--zdt_button_dangerFilled_strike);
   --button_border_color: var(--zdt_button_dangerfill_bg);
 }
+
 .secondaryStrike {
   --button_strike_color: var(--zdt_button_secondary_border);
 }
+
 .secondaryfilledStrike {
   --button_strike_color: var(--zdt_button_secondaryFilled_strike);
   --button_border_color: var(--zdt_button_secondaryfill_bg);
 }
+
 .tertiaryfilledStrike {
   --button_strike_color: var(--zdt_button_tertiaryFilled_strike);
   --button_border_color: var(--zdt_button_tertiaryfill_bg);
 }
+
 .successStrike {
   --button_strike_color: var(--zdt_button_success_strike);
 }
+
 .successfilledStrike {
   --button_strike_color: var(--zdt_button_successFilled_strike);
   --button_border_color: var(--zdt_button_successfill_bg);

package/es/DateTime/DateTime.module.css

@@ -1,5 +1,5 @@
 .semibold {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
 }
 
 [dir=ltr] .boxPadding {
@@ -29,7 +29,7 @@
 }
 
 .datesStr {
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
 }
 
 .grid {
@@ -122,7 +122,8 @@
   color: var(--zdt_datetime_invalid_text);
 }
 
-.invalidDate.holiday,.inActiveDate.holiday:hover {
+.invalidDate.holiday,
+.inActiveDate.holiday:hover {
   color: var(--zdt_datetime_invaliddate_text);
 }
 
@@ -147,15 +148,17 @@
   background-color: var(--zdt_datetime_selected_bg);
   border-radius: 50%;
 }
-.inActiveDate{
-color: var(--zdt_datetime_invalid_text);
-cursor: no-drop;
+
+.inActiveDate {
+  color: var(--zdt_datetime_invalid_text);
+  cursor: no-drop;
 }
-.inActiveDate:hover
-{
+
+.inActiveDate:hover {
   color: var(--zdt_datetime_invalid_text);
 }
-.inActiveDate:hover, .inActiveDate.holiday:hover{
+
+.inActiveDate:hover, .inActiveDate.holiday:hover {
   background-color: var(--zdt_datetime_inactivedate_hover_bg);
 
 }

package/es/DateTime/YearView.module.css

@@ -61,7 +61,7 @@
 }
 
 .isActive .yearText {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   color: var(--zdt_yearview_year_hover_text);
   font-size: var(--zd_font_size11) ;
 }

package/es/Heading/Heading.module.css

@@ -1,5 +1,4 @@
 .reset {
   font-size: inherit ;
-  font-weight: initial;
   margin: initial ;
 }

package/es/Label/Label.module.css

@@ -2,7 +2,7 @@
   /* label default variables */
   --label_font_size: var(--zd_font_size14);
   --label_text_color: var(--zdt_label_default_text);
-  --label_font_family: var(--zd_regular);
+  --label_font_weight: var(--zd-fw-normal);
   --label_cursor: default;
   --label_line_height: 1.286;
 }
@@ -13,24 +13,24 @@
   line-height: var(--label_line_height);
   font-size: var(--label_font_size);
   color: var(--label_text_color);
-  font-family: var(--label_font_family);
+  font-weight: var(--label_font_weight);
   cursor: var(--label_cursor);
 }
 .xsmall {
   --label_font_size: var(--zd_font_size12);
-  --label_line_height:1.5;
+  --label_line_height: 1.5;
 }
 .small {
   --label_font_size: var(--zd_font_size13);
-  --label_line_height:1.385;
+  --label_line_height: 1.385;
 }
 .medium {
   --label_font_size: var(--zd_font_size14);
-  --label_line_height:1.286;
+  --label_line_height: 1.286;
 }
 .large {
   --label_font_size: var(--zd_font_size26);
-  --label_line_height:0.6923;
+  --label_line_height: 0.6923;
   composes: semibold from '../common/common.module.css';
 }
 .pointer {
@@ -46,10 +46,10 @@
   display: inline-block;
 }
 .font_default {
-  --label_font_family: var(--zd_regular);
+  --label_font_weight: var(--zd-fw-normal);
 }
 .font_primary {
-  --label_font_family: var(--zd_semibold);
+  --label_font_weight: var(--zd-fw-semibold);
   composes: ftsmooth from '../common/common.module.css';
 }
 .dotted {

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { AdvancedGroupMultiSelect_propTypes } from "./props/propTypes";
 import { AdvancedGroupMultiSelect_defaultProps } from "./props/defaultProps";
+import { MULTISELECT_I18N_KEYS } from "./constants";
 /**** Components ****/
 
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
@@ -185,7 +186,8 @@ class AdvancedGroupMultiSelect extends React.Component {
 
   handleSelectedOptionIdChange(selectedGroupOptions, normalizedFormatOptions, normalizedSelectedOptions) {
     const {
-      allowValueFallback
+      allowValueFallback,
+      limit
     } = this.props;
     let newSelectedOptions = selectedGroupOptions.map(option => optionIdGrouping(option.id, option.groupId));
     let selectedOptionsLength = newSelectedOptions.length;
@@ -197,7 +199,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       selectedOptions: newSelectedOptions,
       normalizedFormatOptions: formatOptions,
       selectedOptionsLength,
-      allowValueFallback
+      allowValueFallback,
+      limit
     });
   }
 
@@ -390,7 +393,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       getNextOptions,
       isPopupOpen,
       isPopupOpenOnEnter,
-      onKeyDown
+      onKeyDown,
+      limit
     } = this.props;
     let highLightedSelectOptionsLen = highLightedSelectOptions.length;
 
@@ -442,7 +446,7 @@ class AdvancedGroupMultiSelect extends React.Component {
           hoverIndex: hoverIndex + 1
         });
       }
-    } else if (keyCode === 13) {
+    } else if (keyCode === 13 && selectedOptions.length < limit) {
       //enter key
       let id = suggestions[hoverIndex] || {};
       isPopupOpen && !getIsEmptyValue(id) && this.handleSelectOption(id, null, null, e);
@@ -884,13 +888,15 @@ class AdvancedGroupMultiSelect extends React.Component {
       needEffect,
       autoComplete,
       getTargetRef,
-      isFocus
+      isFocus,
+      limit
     } = this.props;
     let {
-      clearText = 'Clear all'
+      clearText = MULTISELECT_I18N_KEYS.clearText,
+      limitReachedMessage = MULTISELECT_I18N_KEYS.limitReachedMessage
     } = i18nKeys;
     let {
-      clearLabel = 'Clear all'
+      clearLabel = MULTISELECT_I18N_KEYS.clearText
     } = a11y;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -1026,7 +1032,7 @@ class AdvancedGroupMultiSelect extends React.Component {
       }, /*#__PURE__*/React.createElement(Card, {
         customClass: `${style.box} ${style[`${palette}Box`]}`,
         onScroll: this.handleScroll
-      }, needSelectAll ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
+      }, needSelectAll && !(limit >= 0) ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
         onSelect: this.handleSelectAll,
         selectAllText: selectAllText,
         suggestions: suggestionOptionIds,
@@ -1065,6 +1071,8 @@ class AdvancedGroupMultiSelect extends React.Component {
           a11y: {
             role: 'option'
           },
+          limit: limit,
+          limitReachedMessage: limitReachedMessage,
           dataId: `${dataId}_Options`
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import { AdvancedMultiSelect_propTypes } from "./props/propTypes";
 import { AdvancedMultiSelect_defaultProps } from "./props/defaultProps";
+import { MULTISELECT_I18N_KEYS } from "./constants";
 /**** Components ****/
 
 import { MultiSelectComponent } from "./MultiSelect";
@@ -177,7 +178,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     const {
       selectedOptionsLimit,
       selectedOptionDetails,
-      allowValueFallback
+      allowValueFallback,
+      limit
     } = props;
     showedSelectedOptionsCount = getIsEmptyValue(showedSelectedOptionsCount) ? selectedOptionsLimit : showedSelectedOptionsCount;
     const {
@@ -191,7 +193,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       selectedOptions,
       normalizedFormatOptions: formatOptions,
       selectedOptionsLength: showedSelectedOptionsCount,
-      allowValueFallback: allowValueFallback
+      allowValueFallback,
+      limit
     });
   }
 
@@ -385,7 +388,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       positionsOffset,
       targetOffset,
       isRestrictScroll,
-      isFocus
+      isFocus,
+      limit
     } = this.props;
     let {
       SuggestionsProps = {},
@@ -395,10 +399,11 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       containerClass = ''
     } = customClass;
     const {
-      clearText = 'Clear all'
+      clearText = MULTISELECT_I18N_KEYS.clearText,
+      limitReachedMessage = MULTISELECT_I18N_KEYS.limitReachedMessage
     } = i18nKeys;
     const {
-      clearLabel = 'Clear all'
+      clearLabel = MULTISELECT_I18N_KEYS.clearText
     } = a11y;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -541,7 +546,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       }, /*#__PURE__*/React.createElement(Card, {
         customClass: style.box,
         onScroll: this.handleScroll
-      }, needSelectAll ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
+      }, needSelectAll && !(limit >= 0) ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
         onSelect: this.handleSelectAll,
         selectAllText: selectAllText,
         suggestions: suggestions,
@@ -563,6 +568,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
           role: 'option'
         },
         dataId: `${dataIdMultiSelectComp}_Options`,
+        limit: limit,
+        limitReachedMessage: limitReachedMessage,
         ...SuggestionsProps
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,

package/es/MultiSelect/EmptyState.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import { EmptyState_propTypes } from "./props/propTypes";
 import { EmptyState_defaultProps } from "./props/defaultProps";
+import { MULTISELECT_I18N_KEYS } from "./constants";
 /**** CSS ****/
 
 import style from "./MultiSelect.module.css";
@@ -23,7 +24,7 @@ export default class EmptyState extends React.PureComponent {
       a11y
     } = this.props;
     let {
-      loadingText = 'Loading',
+      loadingText = MULTISELECT_I18N_KEYS.loadingText,
       emptyText = emptyMessage,
       noMoreText = noMoreOptionsMessage,
       searchEmptyText = searchEmptyMessage

package/es/MultiSelect/MultiSelect.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { MultiSelect_propTypes } from "./props/propTypes";
 import { MultiSelect_defaultProps } from "./props/defaultProps";
 import { defaultProps as MobileHeader_defaultProps } from "./MobileHeader/props/defaultProps";
+import { MULTISELECT_I18N_KEYS } from "./constants";
 /**** Components ****/
 
 import Popup from "../Popup/Popup";
@@ -234,12 +235,14 @@ export class MultiSelectComponent extends React.Component {
 
   handleGetSelectedOptions(selectedOptions, normalizedFormatOptions, props) {
     const {
-      allowValueFallback
+      allowValueFallback,
+      limit
     } = props;
     return this.getSelectedOptions({
       selectedOptions,
       normalizedFormatOptions,
-      allowValueFallback
+      allowValueFallback,
+      limit
     });
   }
 
@@ -313,8 +316,10 @@ export class MultiSelectComponent extends React.Component {
       getNextOptions,
       isPopupOpen,
       isPopupOpenOnEnter,
-      onKeyDown
+      onKeyDown,
+      limit
     } = this.props;
+    const allowKeyboardActions = !limit || limit && selectedOptions.length < limit;
     const highLightedSelectOptionsLen = highLightedSelectOptions.length;
 
     if (isPopupOpen && (keyCode === 38 || keyCode === 40 || keyCode === 13 || keyCode === 27 || keyCode === 9)) {
@@ -334,7 +339,7 @@ export class MultiSelectComponent extends React.Component {
 
     const 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
@@ -345,7 +350,7 @@ export class MultiSelectComponent extends 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) {
@@ -362,8 +367,8 @@ export class MultiSelectComponent extends React.Component {
           hoverOption: hoverOption + 1
         });
       }
-    } else if (keyCode === 13) {
-      //enter key
+    } else if (keyCode === 13 && allowKeyboardActions) {
+      //enter ke
       const selectedOption = suggestions[hoverOption] || {};
       const {
         id
@@ -727,14 +732,16 @@ export class MultiSelectComponent extends React.Component {
       needToCloseOnSelect,
       togglePopup,
       selectedOptions: propSelectedOptions,
-      disabledOptions = dummyArray
+      disabledOptions = dummyArray,
+      limit
     } = this.props;
     const {
       newSelectedOptions
     } = filterSelectedOptions({
       selectedOptions,
       propSelectedOptions,
-      disabledOptions
+      disabledOptions,
+      limit
     });
     const selectedOptionsLen = newSelectedOptions.length;
     const allSelectedOptionsDetails = [];
@@ -894,10 +901,10 @@ export class MultiSelectComponent extends React.Component {
       searchStr
     } = this.state;
     const {
-      clearText = 'Clear all'
+      clearText = MULTISELECT_I18N_KEYS.clearText
     } = i18nKeys;
     const {
-      clearLabel = 'Clear all',
+      clearLabel = MULTISELECT_I18N_KEYS.clearLabel,
       ariaLabelledby
     } = a11y;
     let {
@@ -1034,7 +1041,8 @@ export class MultiSelectComponent extends React.Component {
       boxSize,
       isLoading,
       selectAllText,
-      needSelectAll
+      needSelectAll,
+      limit
     } = this.props;
     const {
       selectedOptions,
@@ -1045,7 +1053,8 @@ export class MultiSelectComponent extends React.Component {
       selectedOptionIds
     } = this.state;
     const {
-      searchText = 'Searching...'
+      searchText = MULTISELECT_I18N_KEYS.searchText,
+      limitReachedMessage = MULTISELECT_I18N_KEYS.limitReachedMessage
     } = i18nKeys;
     const suggestions = this.handleFilterSuggestions();
     const setAriaId = this.getNextAriaId();
@@ -1099,7 +1108,7 @@ export class MultiSelectComponent extends React.Component {
       onClick: this.handlePopupClose
     }, /*#__PURE__*/React.createElement("div", {
       className: style.effect
-    }, this.getSelectionUI(true))) : null, needSelectAll ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
+    }, this.getSelectionUI(true))) : null, needSelectAll && !(limit >= 0) ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
       onSelect: this.handleSelectAll,
       selectAllText: selectAllText,
       suggestions: suggestions,
@@ -1125,7 +1134,9 @@ export class MultiSelectComponent extends React.Component {
       selectedOptions: selectedOptionIds,
       a11y: {
         role: 'option'
-      }
+      },
+      limit: limit,
+      limitReachedMessage: limitReachedMessage
     }) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,
       options: options,

package/es/MultiSelect/MultiSelect.module.css

@@ -196,7 +196,7 @@
 .more {
   font-size: var(--zd_font_size14) ;
   color: var(--zdt_multiselect_more_text);
-  font-family: inherit;
+  font-weight: var(--zd-fw-normal);
   cursor: pointer;
   margin-top: var(--zd_size5) ;
   background-color: var(--zdt_multiselect_delete_bg);

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { MultiSelectWithAvatar_propTypes } from "./props/propTypes";
 import { MultiSelectWithAvatar_defaultProps } from "./props/defaultProps";
 import { defaultProps as MobileHeader_defaultProps } from "./MobileHeader/props/defaultProps";
+import { MULTISELECT_I18N_KEYS } from "./constants";
 /**** Components ****/
 
 import { MultiSelectComponent } from "./MultiSelect";
@@ -93,11 +94,15 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       needEffect,
       isLoading,
       keepSelectedOptions,
-      customProps
+      customProps,
+      limit
     } = this.props;
     let {
       SuggestionsProps = {}
     } = customProps;
+    let {
+      limitReachedMessage = MULTISELECT_I18N_KEYS.limitReachedMessage
+    } = i18nKeys;
     i18nKeys = Object.assign({}, MobileHeader_defaultProps.i18nKeys, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
       searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage,
@@ -158,7 +163,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       onClick: this.handlePopupClose
     }, /*#__PURE__*/React.createElement("div", {
       className: style.effect
-    }, this.getSelectionUI(true)))) : null, needSelectAll ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
+    }, this.getSelectionUI(true)))) : null, needSelectAll && !(limit >= 0) ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
       onSelect: this.handleSelectAll,
       selectAllText: selectAllText,
       suggestions: suggestions,
@@ -184,6 +189,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       a11y: {
         role: 'option'
       },
+      limit: limit,
+      limitReachedMessage: limitReachedMessage,
       ...SuggestionsProps
     }) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,

package/es/MultiSelect/SelectedOptions.js

@@ -22,10 +22,12 @@ export default class SelectedOptions extends React.PureComponent {
       onSelect,
       size,
       palette,
-      dataId
+      dataId,
+      limit
     } = this.props;
     const isDarkPalette = palette === 'dark' ? 'dark' : 'danger';
-    return /*#__PURE__*/React.createElement(React.Fragment, null, selectedOptions.map(option => {
+    const selectedData = limit && limit > 0 ? selectedOptions.slice(0, limit) : selectedOptions;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, selectedData.map(option => {
       const {
         id,
         value,

package/es/MultiSelect/Suggestions.js

@@ -28,12 +28,15 @@ export default class Suggestions extends React.PureComponent {
       palette,
       htmlId,
       a11y,
-      needMultiLineText
+      needMultiLineText,
+      limit,
+      limitReachedMessage
     } = this.props;
     const {
       ariaParentRole,
       ariaMultiselectable
     } = a11y;
+    const selectedOptionsLength = selectedOptions.length;
     return /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       role: ariaParentRole,
@@ -58,13 +61,14 @@ export default class Suggestions extends React.PureComponent {
       } = suggestion;
       const isActive = activeId === id || selectedOptions.indexOf(id) >= 0;
       const isHighlight = hoverOption === index || id === hoverId ? true : false;
+      const isLimitReached = selectedOptionsLength >= limit && !isActive;
       const list_a11y = Object.assign({}, a11y, {
         ariaSelected: isActive,
         ariaLabel: value,
         'data-a11y-list-active': isHighlight
       });
       const commonProps = {
-        isDisabled,
+        isDisabled: isDisabled ? isDisabled : isLimitReached,
         needMultiLineText,
         ...listItemCustomProps
       };
@@ -76,6 +80,10 @@ export default class Suggestions extends React.PureComponent {
         };
       }
 
+      if (isLimitReached) {
+        commonProps.disableTitle = limitReachedMessage;
+      }
+
       if (optionType === 'avatar') {
         return /*#__PURE__*/React.createElement(ListItemWithAvatar, { ...commonProps,
           autoHover: false,