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

package/es/MultiSelect/MultiSelect.js

@@ -82,6 +82,7 @@ export class MultiSelectComponent extends React.Component {
     this.handleScroll = this.handleScroll.bind(this);
     this.handleScrollFuncCall = debounce(this.handleScrollFuncCall.bind(this), 500);
     this.getVirtualizerPublicMethods = this.getVirtualizerPublicMethods.bind(this);
+    this.scrollToHighlightedIndex = this.scrollToHighlightedIndex.bind(this);
     this.setSuggestionsVirtualizerContainerRefFunction = this.setSuggestionsVirtualizerContainerRefFunction.bind(this);
   }
 
@@ -141,11 +142,49 @@ export class MultiSelectComponent extends React.Component {
     }
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  scrollToHighlightedIndex() {
+    const {
+      suggestionContainer,
+      selectedOptionContainer,
+      suggestionsOrder
+    } = this;
+
+    if (!suggestionContainer) {
+      return;
+    }
+
     const {
       hoverOption,
       highLightedSelectOptions,
-      selectedOptions,
+      selectedOptions
+    } = this.state;
+    const {
+      isVirtualizerEnabled
+    } = this.props;
+    const hoverId = suggestionsOrder[hoverOption] || '';
+    const lastHighLightedSelectOption = highLightedSelectOptions.slice(-1).length ? highLightedSelectOptions.slice(-1)[0] : null;
+    const selectedOption = this[`selectedOption_${lastHighLightedSelectOption}`];
+    selectedOptions.length && selectedOption && scrollTo(selectedOptionContainer, selectedOption);
+    const selectedSuggestion = this[`suggestion_${hoverId}`];
+
+    if (selectedSuggestion) {
+      scrollTo(suggestionContainer, selectedSuggestion);
+    } else {
+      // Hack: Virtualizer not having options order properly all the time, so scrollToIndex method used here.
+      if (isVirtualizerEnabled && !!this.virtualizerMethods) {
+        this.virtualizerMethods.scrollToIndex(hoverOption, 'auto', {
+          speed: 0,
+          duration: 0,
+          onComplete: () => {
+            scrollTo(suggestionContainer, selectedSuggestion);
+          }
+        });
+      }
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const {
       searchStr
     } = this.state;
     const {
@@ -153,8 +192,7 @@ export class MultiSelectComponent extends React.Component {
       isPopupOpen,
       onDropBoxClose,
       onDropBoxOpen,
-      isSearchClearOnClose,
-      isVirtualizerEnabled
+      isSearchClearOnClose
     } = this.props; //handle dropbox open & close
 
     if (prevProps.isPopupOpen !== isPopupOpen) {
@@ -167,24 +205,10 @@ export class MultiSelectComponent extends React.Component {
         isSearchClearOnClose && searchStr && this.handleSearch('');
         onDropBoxClose && onDropBoxClose();
       }
-    } //scrollTo handling
-
+    }
 
-    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);
+    if (isPopupOpen) {
+      this.scrollToHighlightedIndex();
     } //When suggestions length less than 5, getNextOptions function call
 
 
@@ -225,6 +249,7 @@ export class MultiSelectComponent extends React.Component {
       options,
       valueField,
       textField,
+      secondaryField,
       prefixText,
       disabledOptions,
       allowValueFallback,
@@ -238,6 +263,7 @@ export class MultiSelectComponent extends React.Component {
       optionType: 'default',
       disabledOptions,
       allowValueFallback,
+      secondaryField,
       searchFields
     });
   }
@@ -1061,6 +1087,7 @@ export class MultiSelectComponent extends React.Component {
       isLoading,
       selectAllText,
       needSelectAll,
+      customProps,
       isVirtualizerEnabled,
       limit
     } = this.props;
@@ -1085,6 +1112,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}`,
@@ -1097,7 +1127,8 @@ export class MultiSelectComponent extends React.Component {
       boxPosition: position || `${defaultDropBoxPosition}`,
       getRef: getContainerRef,
       isActive: isPopupReady,
-      isAnimate: isAnimate,
+      isAnimate: isAnimate && !isVirtualizerEnabled // Note: Virtualizer gets element height at mount itself which causes issue with options height
+      ,
       isArrow: false,
       onClick: removeClose,
       needResponsive: needResponsive,
@@ -1160,7 +1191,8 @@ export class MultiSelectComponent extends React.Component {
         role: 'option'
       },
       limit: limit,
-      limitReachedMessage: limitReachedMessage
+      limitReachedMessage: limitReachedMessage,
+      ...SuggestionsProps
     }) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,
       options: options,

package/es/MultiSelect/Suggestions.js

@@ -160,7 +160,8 @@ export default class Suggestions extends React.PureComponent {
       active: isActive,
       size: listItemSize,
       palette: palette,
-      a11y: list_a11y
+      a11y: list_a11y,
+      secondaryValue: secondaryValue
     });
   }
 

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

@@ -35,19 +35,19 @@ exports[`MultiSelectHeader rendering the basic value 1`] = `
       </div>
     </div>
     <div
-      class="grow basis shrinkOn"
+      class="leftBox grow basis shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover coldir"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
+        class="titleBox shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
       >
         <div
-          class="value shrinkOff"
+          class="value basisAuto shrinkOn"
           data-id="MultiSelectHeader_selectAll_Text"
           data-selector-id="box"
           data-test-id="MultiSelectHeader_selectAll_Text"

package/es/MultiSelect/props/propTypes.js

@@ -120,7 +120,8 @@ export const MultiSelect_propTypes = {
   allowValueFallback: PropTypes.bool,
   renderCustomClearComponent: PropTypes.func,
   renderCustomToggleIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  limit: PropTypes.number
+  limit: PropTypes.number,
+  secondaryField: PropTypes.string
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,
@@ -139,7 +140,6 @@ export const MultiSelectWithAvatar_propTypes = {
     SuggestionsProps: PropTypes.object,
     DropBoxProps: PropTypes.object
   }),
-  secondaryField: PropTypes.string,
   ...MultiSelect_propTypes
 };
 export const SelectedOptions_propTypes = {
@@ -286,7 +286,6 @@ export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   prefixText: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   //For grouping multiSelect
   optionType: PropTypes.oneOf(['default', 'avatar', 'icon']),
-  secondaryField: PropTypes.string,
   dataIdClearIcon: PropTypes.string,
   dataIdLoading: PropTypes.string,
   dataIdMultiSelectComp: PropTypes.string,