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

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";
@@ -80,6 +81,8 @@ export class MultiSelectComponent extends React.Component {
     this.handleSearchOptions = debounce(this.handleSearchOptions.bind(this), searchDebounceTime);
     this.handleScroll = this.handleScroll.bind(this);
     this.handleScrollFuncCall = debounce(this.handleScrollFuncCall.bind(this), 500);
+    this.getVirtualizerPublicMethods = this.getVirtualizerPublicMethods.bind(this);
+    this.setSuggestionsVirtualizerContainerRefFunction = this.setSuggestionsVirtualizerContainerRefFunction.bind(this);
   }
 
   componentDidMount() {
@@ -139,11 +142,6 @@ export class MultiSelectComponent extends React.Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    const {
-      suggestionContainer,
-      selectedOptionContainer,
-      suggestionsOrder
-    } = this;
     const {
       hoverOption,
       highLightedSelectOptions,
@@ -155,7 +153,8 @@ export class MultiSelectComponent extends React.Component {
       isPopupOpen,
       onDropBoxClose,
       onDropBoxOpen,
-      isSearchClearOnClose
+      isSearchClearOnClose,
+      isVirtualizerEnabled
     } = this.props; //handle dropbox open & close
 
     if (prevProps.isPopupOpen !== isPopupOpen) {
@@ -171,12 +170,23 @@ export class MultiSelectComponent extends React.Component {
     } //scrollTo handling
 
 
-    const hoverId = suggestionsOrder[hoverOption] || '';
-    const selectedSuggestion = this[`suggestion_${hoverId}`];
-    const lastHighLightedSelectOption = highLightedSelectOptions.slice(-1).length ? highLightedSelectOptions.slice(-1)[0] : null;
-    const selectedOption = this[`selectedOption_${lastHighLightedSelectOption}`];
-    isPopupOpen && scrollTo(suggestionContainer, selectedSuggestion);
-    selectedOptions.length && selectedOption && scrollTo(selectedOptionContainer, selectedOption); //When suggestions length less than 5, getNextOptions function call
+    if (isVirtualizerEnabled && !!this.virtualizerMethods) {
+      let position = prevState.hoverOption > hoverOption ? 'top' : 'bottom';
+      this.virtualizerMethods.getElementVisiblePercentage(hoverOption) < 50 && this.virtualizerMethods.scrollToIndex(hoverOption, position);
+    } else {
+      const {
+        suggestionContainer,
+        selectedOptionContainer,
+        suggestionsOrder
+      } = this;
+      const hoverId = suggestionsOrder[hoverOption] || '';
+      const selectedSuggestion = this[`suggestion_${hoverId}`];
+      const lastHighLightedSelectOption = highLightedSelectOptions.slice(-1).length ? highLightedSelectOptions.slice(-1)[0] : null;
+      const selectedOption = this[`selectedOption_${lastHighLightedSelectOption}`];
+      isPopupOpen && scrollTo(suggestionContainer, selectedSuggestion);
+      selectedOptions.length && selectedOption && scrollTo(selectedOptionContainer, selectedOption);
+    } //When suggestions length less than 5, getNextOptions function call
+
 
     const {
       isNextOptions,
@@ -215,6 +225,7 @@ export class MultiSelectComponent extends React.Component {
       options,
       valueField,
       textField,
+      secondaryField,
       prefixText,
       disabledOptions,
       allowValueFallback,
@@ -228,18 +239,21 @@ export class MultiSelectComponent extends React.Component {
       optionType: 'default',
       disabledOptions,
       allowValueFallback,
+      secondaryField,
       searchFields
     });
   }
 
   handleGetSelectedOptions(selectedOptions, normalizedFormatOptions, props) {
     const {
-      allowValueFallback
+      allowValueFallback,
+      limit
     } = props;
     return this.getSelectedOptions({
       selectedOptions,
       normalizedFormatOptions,
-      allowValueFallback
+      allowValueFallback,
+      limit
     });
   }
 
@@ -313,8 +327,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 +350,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 +361,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 +378,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 +743,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 = [];
@@ -791,6 +809,7 @@ export class MultiSelectComponent extends React.Component {
 
   suggestionContainerRef(el) {
     this.suggestionContainer = el;
+    typeof this.setSuggestionsVirtualizerRef === 'function' && this.setSuggestionsVirtualizerRef(el);
   }
 
   suggestionItemRef(el, index, id) {
@@ -855,6 +874,15 @@ export class MultiSelectComponent extends React.Component {
     });
   }
 
+  getVirtualizerPublicMethods(methods) {
+    this.virtualizerMethods = methods;
+  }
+
+  setSuggestionsVirtualizerContainerRefFunction(refFunc) {
+    this.setSuggestionsVirtualizerRef = refFunc;
+    this.suggestionContainer && refFunc(this.suggestionContainer);
+  }
+
   getSelectionUI() {
     let isResponsive = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     let {
@@ -882,7 +910,6 @@ export class MultiSelectComponent extends React.Component {
       isPopupOpen,
       ariaErrorId,
       customProps,
-      renderCustomSelectedValue,
       isFocus,
       isPopupReady,
       renderCustomClearComponent,
@@ -895,10 +922,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 {
@@ -927,11 +954,7 @@ export class MultiSelectComponent extends React.Component {
       onSelect: this.handleClickSelectedOption,
       size: size,
       palette: palette,
-      dataId: `${dataId}_selectedOptions`,
-      renderCustomSelectedValue: renderCustomSelectedValue,
-      isPopupReady: isPopupReady,
-      isPopupOpen: isPopupOpen,
-      isDisabled: isDisabled
+      dataId: `${dataId}_selectedOptions`
     }), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.wrapper,
@@ -1040,11 +1063,10 @@ export class MultiSelectComponent extends React.Component {
       isLoading,
       selectAllText,
       needSelectAll,
-      customProps
+      customProps,
+      isVirtualizerEnabled,
+      limit
     } = this.props;
-    let {
-      SuggestionsProps = {}
-    } = customProps;
     const {
       selectedOptions,
       searchStr,
@@ -1054,7 +1076,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();
@@ -1065,6 +1088,9 @@ export class MultiSelectComponent extends React.Component {
       noMoreText: i18nKeys.noMoreText || noMoreOptionsMessage
     });
     let isModel = isMobilePopover(needResponsive);
+    let {
+      SuggestionsProps
+    } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -1108,7 +1134,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,
@@ -1123,7 +1149,11 @@ export class MultiSelectComponent extends React.Component {
     }, isSearching ? /*#__PURE__*/React.createElement("div", {
       className: style[palette]
     }, searchText) : suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+      key: searchStr.trim(),
       suggestions: suggestions,
+      isVirtualizerEnabled: isVirtualizerEnabled,
+      getVirtualizerPublicMethods: this.getVirtualizerPublicMethods,
+      setVirtualizerContainerRefFunction: this.setSuggestionsVirtualizerContainerRefFunction,
       getRef: this.suggestionItemRef,
       hoverOption: hoverOption,
       onClick: this.handleSelectOption,
@@ -1135,6 +1165,8 @@ export class MultiSelectComponent extends React.Component {
       a11y: {
         role: 'option'
       },
+      limit: limit,
+      limitReachedMessage: limitReachedMessage,
       ...SuggestionsProps
     }) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,

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

@@ -23,13 +23,11 @@ export default class SelectedOptions extends React.PureComponent {
       size,
       palette,
       dataId,
-      renderCustomSelectedValue,
-      isPopupOpen,
-      isPopupReady,
-      isDisabled: isInputDisabled
+      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,
@@ -71,25 +69,6 @@ export default class SelectedOptions extends React.PureComponent {
           iconName: icon,
           iconSize: iconSize
         }));
-      } else if (optionType === 'custom') {
-        return /*#__PURE__*/React.createElement(Box, {
-          className: `${style.tag} ${style[size]}`,
-          key: `${id}customTag`,
-          dataId: dataId
-        }, typeof renderCustomSelectedValue == 'function' ? renderCustomSelectedValue({
-          onRemove: isDisabled || isReadOnly ? null : onRemove,
-          palette: isDarkPalette,
-          onSelectTag: isReadOnly ? null : onSelect,
-          getRef: getRef,
-          isReadOnly: isReadOnly,
-          isPopupReady: isPopupReady,
-          isPopupOpen: isPopupOpen,
-          isDisabled: isInputDisabled,
-          size,
-          highLightedSelectOptions,
-          isActive: highLightedSelectOptions.indexOf(id) >= 0,
-          option
-        }) : renderCustomSelectedValue);
       }
 
       return /*#__PURE__*/React.createElement(Box, {