@zohodesk/components 1.0.0-temp-239 → 1.0.0-temp-241

package/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkTheme.module.css

@@ -1,36 +1,36 @@
 [data-mode='pureDark'][data-theme='yellow'] {
 	/* CTA variables */
-	--zdt_cta_primary_text: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_primary_hover_text: hsla(37, 66.48%, calc(64.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_primary_bg: hsla(37, 66.94%, calc(52.55% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_primary_hover_bg: hsla(39, 90.18%, calc(31.96% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_primary_border: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_primary_hover_border: hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_text: hsla(37, calc(var(--zd-mc) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_hover_text: hsla(37, calc(var(--zd-mc) * 66.48%), calc(64.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_bg: hsla(37, calc(var(--zd-mc) * 66.94%), calc(52.55% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_hover_bg: hsla(39, calc(var(--zd-mc) * 90.18%), calc(31.96% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_border: hsla(37, calc(var(--zd-mc) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_hover_border: hsla(39, calc(var(--zd-mc) * 90.18%), calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_cta_primary_box_shadow: rgba(232, 185, 35, 0.2);
 	--zdt_cta_primary_hover_box_shadow: rgba(181, 145, 0, 0.25);
-	--zdt_cta_primary_light_bg: hsla(35, 15.00%, calc(15.69% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_primary_light_hover_bg: hsla(37, 12.70%, calc(24.71% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_primary_light_border: hsla(37, 12.70%, calc(24.71% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_secondary_bg: hsla(37, 66.94%, calc(52.55% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_secondary_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter_high)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_secondary_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_medium)), calc( 0.15 + var(--zdc_alpha_low)));
-	--zdt_cta_secondary_light_border: hsla(38, 30.19%, calc(20.78% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_secondary_light_bg: hsla(38, 30.19%, calc(20.78% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_alpha_text: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_alpha_hover_text: hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_alpha_border: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_alpha_hover_border: hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_alpha_bg: hsla(220, 2.75%, calc(21.37% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_beta_border: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_grey_10_bg: hsla(0, 0.00%, calc(14.90% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_10_border: hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_grey_15_bg: hsla(0, 2.33%, calc(8.43% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_15_border: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_grey_20_bg: hsla(217, 22.81%, calc(11.18% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_35_bg: hsla(0, 0.00%, calc(34.51% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_35_text: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_35_border: hsla(0, 0.00%, calc(21.96% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_grey_40_bg: hsla(0, 0.00%, calc(34.51% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_40_text: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_40_border: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_light_bg: hsla(35, calc(var(--zd-mc) * 15.00%), calc(15.69% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_primary_light_hover_bg: hsla(37, calc(var(--zd-mc) * 12.70%), calc(24.71% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_primary_light_border: hsla(37, calc(var(--zd-mc) * 12.70%), calc(24.71% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_secondary_bg: hsla(37, calc(var(--zd-mc) * 66.94%), calc(52.55% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_secondary_text: hsla(0, calc(var(--zd-mc) * 0.00%), calc(100.00% + var(--zdc_lighter_high)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_secondary_border: hsla(0, calc(var(--zd-mc) * 0.00%), calc(100.00% + var(--zdc_default_inverse_medium)), calc( 0.15 + var(--zdc_alpha_low)));
+	--zdt_cta_secondary_light_border: hsla(38, calc(var(--zd-mc) * 30.19%), calc(20.78% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_secondary_light_bg: hsla(38, calc(var(--zd-mc) * 30.19%), calc(20.78% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_alpha_text: hsla(37, calc(var(--zd-mc) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_hover_text: hsla(39, calc(var(--zd-mc) * 90.18%), calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_border: hsla(37, calc(var(--zd-mc) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_hover_border: hsla(39, calc(var(--zd-mc) * 90.18%), calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_bg: hsla(220, calc(var(--zd-mc) * 2.75%), calc(21.37% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_beta_border: hsla(37, calc(var(--zd-mc) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_grey_10_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(14.90% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_10_border: hsla(0, calc(var(--zd-mc) * 0.00%), calc(14.90% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_grey_15_bg: hsla(0, calc(var(--zd-mc) * 2.33%), calc(8.43% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_15_border: hsla(0, calc(var(--zd-mc) * 2.33%), calc(8.43% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_grey_20_bg: hsla(217, calc(var(--zd-mc) * 22.81%), calc(11.18% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_35_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(34.51% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_35_text: hsla(0, calc(var(--zd-mc) * 0.00%), calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_35_border: hsla(0, calc(var(--zd-mc) * 0.00%), calc(21.96% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_grey_40_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(34.51% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_40_text: hsla(0, calc(var(--zd-mc) * 0.00%), calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_40_border: hsla(0, calc(var(--zd-mc) * 0.00%), calc(34.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css

@@ -44,7 +44,7 @@
 	--zdt_a11y_focusScope_focus_border: rgb(215,152,53);
 	
 	/* button */
-	--zdt_button_primary_strike: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc( 0.33 + var(--zdc_alpha_low)));
-	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
-	--zdt_button_secondaryFilled_strike: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc( 0.7 + var(--zdc_alpha_high)));
+	--zdt_button_primary_strike: hsla(37, calc(var(--zd-mc) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc( 0.33 + var(--zdc_alpha_low)));
+	--zdt_button_primaryFilled_strike: hsla(0, calc(var(--zd-mc) * 0.00%), calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
+	--zdt_button_secondaryFilled_strike: hsla(0, calc(var(--zd-mc) * 0.00%), calc(34.51% + var(--zdc_default_inverse)), calc( 0.7 + var(--zdc_alpha_high)));
 }

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
 
 
@@ -1097,7 +1121,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,

package/es/Popup/Popup.js

@@ -159,7 +159,6 @@ const Popup = function (Component) {
       this.handleScrollAndBlockEvents = this.handleScrollAndBlockEvents.bind(this);
       this.handleIframeEventListeners = this.handleIframeEventListeners.bind(this);
       this.handleDropElementStyleUpdate = this.handleDropElementStyleUpdate.bind(this);
-      this.waitForDropElement = this.waitForDropElement.bind(this);
       this.positionRef = /*#__PURE__*/React.createRef();
       this.rootElement = Registry.getRootElement();
       this.popupObserver = new ResizeObserver(this.handlePopupResize);
@@ -385,25 +384,6 @@ const Popup = function (Component) {
       });
     }
 
-    waitForDropElement(callback) {
-      let maxRetries = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
-      let delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 100;
-
-      if (this.dropElement) {
-        callback();
-        return;
-      }
-
-      if (maxRetries <= 0) {
-        console.warn('Popup: dropElement not available after maximum retries');
-        return;
-      }
-
-      setTimeout(() => {
-        this.waitForDropElement(callback, maxRetries - 1, Math.min(delay * 1.5, 1000));
-      }, delay);
-    }
-
     setContainerDynamicPositioning(betterPosition, needArrow) {
       const {
         dropElement
@@ -411,39 +391,32 @@ const Popup = function (Component) {
       const {
         isMobile
       } = this.state;
+      const {
+        view,
+        viewsOffset
+      } = betterPosition || DUMMY_OBJECT;
+      const styleToApply = selectn(`${view}`, viewsOffset);
+
+      if (isMobile) {
+        this.handleDropElementStyleUpdate({
+          top: '',
+          left: '',
+          right: '',
+          bottom: ''
+        });
+      } else {
+        this.handleDropElementStyleUpdate(styleToApply);
 
-      if (!dropElement) {
-        // Wait for dropElement to be available (in case it's being loaded from a chunk)
-        this.waitForDropElement(() => {
-          const {
-            view,
-            viewsOffset
-          } = betterPosition || DUMMY_OBJECT;
-          const styleToApply = selectn(`${view}`, viewsOffset);
-
-          if (isMobile) {
-            this.handleDropElementStyleUpdate({
-              top: '',
-              left: '',
-              right: '',
-              bottom: ''
-            });
-          } else {
-            this.handleDropElementStyleUpdate(styleToApply);
-
-            if (this.positionRef.current !== view) {
-              dropElement.setAttribute('data-position', `${view}`);
-              dropElement.setAttribute('data-box-direction', selectn(`${view}.direction`, positionMapping));
-
-              if (needArrow) {
-                dropElement.setAttribute('data-arrow-position', selectn(`${view}.arrowPosition`, positionMapping));
-              }
+        if (this.positionRef.current !== view) {
+          dropElement.setAttribute('data-position', `${view}`);
+          dropElement.setAttribute('data-box-direction', selectn(`${view}.direction`, positionMapping));
 
-              this.positionRef.current = view;
-            }
+          if (needArrow) {
+            dropElement.setAttribute('data-arrow-position', selectn(`${view}.arrowPosition`, positionMapping));
           }
-        });
-        return;
+
+          this.positionRef.current = view;
+        }
       }
     }
 
@@ -892,6 +865,10 @@ const Popup = function (Component) {
               this.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
             }
 
+            if (!dropElement) {
+              return;
+            }
+
             this.setContainerDynamicPositioning(betterPosition, needArrow);
           } else {
             if (position !== view || !isPopupReady) {

package/es/Select/Select.js

@@ -107,6 +107,7 @@ export class SelectComponent extends Component {
     this.handleExposePopupHandlers = this.handleExposePopupHandlers.bind(this);
     this.handleGetAddNewOptionText = this.handleGetAddNewOptionText.bind(this);
     this.getVirtualizerPublicMethods = this.getVirtualizerPublicMethods.bind(this);
+    this.scrollToHighlightedIndex = this.scrollToHighlightedIndex.bind(this);
     this.setSuggestionsVirtualizerContainerRefFunction = this.setSuggestionsVirtualizerContainerRefFunction.bind(this);
     this.valueInputTypeString = '';
     this.valueInputSearchString = '';
@@ -175,9 +176,43 @@ export class SelectComponent extends Component {
     });
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  scrollToHighlightedIndex() {
+    let {
+      suggestionContainer,
+      optionsOrder
+    } = this;
+
+    if (!suggestionContainer) {
+      return;
+    }
+
+    let {
+      hoverIndex
+    } = this.state;
+    let {
+      isVirtualizerEnabled
+    } = this.props;
+    let hoverId = getIsEmptyValue(optionsOrder[hoverIndex]) ? '' : optionsOrder[hoverIndex];
+    let selSuggestion = this[`suggestion_${hoverId}`];
+
+    if (selSuggestion) {
+      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: () => {
+            scrollTo(suggestionContainer, selSuggestion);
+          }
+        });
+      }
+    }
+  }
+
+  componentDidUpdate(prevProps) {
     let {
-      hoverIndex,
       searchStr,
       selectedValueIndex
     } = this.state;
@@ -188,31 +223,16 @@ export class SelectComponent extends Component {
       needSearch,
       onSearch,
       isPopupOpen,
-      isSearchClearOnClose,
-      isVirtualizerEnabled
+      isSearchClearOnClose
     } = this.props;
 
-    if (isVirtualizerEnabled && !!this.virtualizerMethods) {
-      let position = prevState.hoverIndex > hoverIndex ? 'top' : 'bottom';
-      this.virtualizerMethods.getElementVisiblePercentage(hoverIndex) < 50 && this.virtualizerMethods.scrollToIndex(hoverIndex, position);
-    } else {
-      let {
-        suggestionContainer,
-        optionsOrder
-      } = this;
-      let hoverId = getIsEmptyValue(optionsOrder[hoverIndex]) ? '' : optionsOrder[hoverIndex];
-      let selSuggestion = this[`suggestion_${hoverId}`];
-      isPopupOpen && 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(() => {
           this.searchInput && this.searchInput.focus({
             preventScroll: true
@@ -713,6 +733,7 @@ export class SelectComponent extends Component {
       getTargetRef,
       getContainerRef,
       removeClose,
+      isAnimate,
       isPopupOpen,
       isPopupReady,
       animationStyle,
@@ -907,7 +928,8 @@ export class SelectComponent extends Component {
         boxPosition: position || `${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/es/Select/props/defaultProps.js

@@ -28,6 +28,7 @@ export const Select_defaultProps = {
   boxSize: 'default',
   needListBorder: false,
   needCloseOnSelect: true,
+  isAnimate: true,
   isParentBased: true,
   isSearchClearOnClose: true,
   i18nKeys: {},

package/es/Select/props/propTypes.js

@@ -28,6 +28,7 @@ export const Select_propTypes = {
     noMoreText: PropTypes.string,
     searchEmptyText: PropTypes.string
   }),
+  isAnimate: PropTypes.bool,
   isDefaultSelectValue: PropTypes.bool,
   isDisabled: PropTypes.bool,
   isNextOptions: PropTypes.bool,

package/lib/MultiSelect/MultiSelect.js

@@ -163,6 +163,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
     _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.scrollToHighlightedIndex = _this.scrollToHighlightedIndex.bind(_assertThisInitialized(_this));
     _this.setSuggestionsVirtualizerContainerRefFunction = _this.setSuggestionsVirtualizerContainerRefFunction.bind(_assertThisInitialized(_this));
     return _this;
   }
@@ -227,20 +228,52 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       }
     }
   }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
+    key: "scrollToHighlightedIndex",
+    value: function scrollToHighlightedIndex() {
+      var suggestionContainer = this.suggestionContainer,
+          selectedOptionContainer = this.selectedOptionContainer,
+          suggestionsOrder = this.suggestionsOrder;
+
+      if (!suggestionContainer) {
+        return;
+      }
+
       var _this$state = this.state,
           hoverOption = _this$state.hoverOption,
           highLightedSelectOptions = _this$state.highLightedSelectOptions,
-          selectedOptions = _this$state.selectedOptions,
-          searchStr = _this$state.searchStr;
+          selectedOptions = _this$state.selectedOptions;
+      var isVirtualizerEnabled = this.props.isVirtualizerEnabled;
+      var hoverId = suggestionsOrder[hoverOption] || '';
+      var lastHighLightedSelectOption = highLightedSelectOptions.slice(-1).length ? highLightedSelectOptions.slice(-1)[0] : null;
+      var selectedOption = this["selectedOption_".concat(lastHighLightedSelectOption)];
+      selectedOptions.length && selectedOption && (0, _Common.scrollTo)(selectedOptionContainer, selectedOption);
+      var selectedSuggestion = this["suggestion_".concat(hoverId)];
+
+      if (selectedSuggestion) {
+        (0, _Common.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: function onComplete() {
+              (0, _Common.scrollTo)(suggestionContainer, selectedSuggestion);
+            }
+          });
+        }
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var searchStr = this.state.searchStr;
       var _this$props2 = this.props,
           needLocalSearch = _this$props2.needLocalSearch,
           isPopupOpen = _this$props2.isPopupOpen,
           onDropBoxClose = _this$props2.onDropBoxClose,
           onDropBoxOpen = _this$props2.onDropBoxOpen,
-          isSearchClearOnClose = _this$props2.isSearchClearOnClose,
-          isVirtualizerEnabled = _this$props2.isVirtualizerEnabled; //handle dropbox open & close
+          isSearchClearOnClose = _this$props2.isSearchClearOnClose; //handle dropbox open & close
 
       if (prevProps.isPopupOpen !== isPopupOpen) {
         isPopupOpen && onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
@@ -252,22 +285,10 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isSearchClearOnClose && searchStr && this.handleSearch('');
           onDropBoxClose && onDropBoxClose();
         }
-      } //scrollTo handling
-
+      }
 
-      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);
+      if (isPopupOpen) {
+        this.scrollToHighlightedIndex();
       } //When suggestions length less than 5, getNextOptions function call
 
 
@@ -1175,7 +1196,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         boxPosition: position || "".concat(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,