@zohodesk/components 1.0.0-temp-240 → 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

@@ -1,7 +1,7 @@
 [data-mode='pureDark'][data-theme='yellow'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgb(33,33,33);
-	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(33,33,33);
@@ -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/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,

package/lib/Select/Select.js

@@ -169,6 +169,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
     _this.handleExposePopupHandlers = _this.handleExposePopupHandlers.bind(_assertThisInitialized(_this));
     _this.handleGetAddNewOptionText = _this.handleGetAddNewOptionText.bind(_assertThisInitialized(_this));
     _this.getVirtualizerPublicMethods = _this.getVirtualizerPublicMethods.bind(_assertThisInitialized(_this));
+    _this.scrollToHighlightedIndex = _this.scrollToHighlightedIndex.bind(_assertThisInitialized(_this));
     _this.setSuggestionsVirtualizerContainerRefFunction = _this.setSuggestionsVirtualizerContainerRefFunction.bind(_assertThisInitialized(_this));
     _this.valueInputTypeString = '';
     _this.valueInputSearchString = '';
@@ -234,13 +235,42 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         selectedValueIndex: hoverIndex
       });
     }
+  }, {
+    key: "scrollToHighlightedIndex",
+    value: function scrollToHighlightedIndex() {
+      var suggestionContainer = this.suggestionContainer,
+          optionsOrder = this.optionsOrder;
+
+      if (!suggestionContainer) {
+        return;
+      }
+
+      var hoverIndex = this.state.hoverIndex;
+      var isVirtualizerEnabled = this.props.isVirtualizerEnabled;
+      var hoverId = (0, _Common.getIsEmptyValue)(optionsOrder[hoverIndex]) ? '' : optionsOrder[hoverIndex];
+      var selSuggestion = this["suggestion_".concat(hoverId)];
+
+      if (selSuggestion) {
+        (0, _Common.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: function onComplete() {
+              (0, _Common.scrollTo)(suggestionContainer, selSuggestion);
+            }
+          });
+        }
+      }
+    }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
+    value: function componentDidUpdate(prevProps) {
       var _this2 = this;
 
       var _this$state = this.state,
-          hoverIndex = _this$state.hoverIndex,
           searchStr = _this$state.searchStr,
           selectedValueIndex = _this$state.selectedValueIndex;
       var _this$props = this.props,
@@ -250,28 +280,15 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           needSearch = _this$props.needSearch,
           onSearch = _this$props.onSearch,
           isPopupOpen = _this$props.isPopupOpen,
-          isSearchClearOnClose = _this$props.isSearchClearOnClose,
-          isVirtualizerEnabled = _this$props.isVirtualizerEnabled;
+          isSearchClearOnClose = _this$props.isSearchClearOnClose;
 
-      if (isVirtualizerEnabled && !!this.virtualizerMethods) {
-        var position = prevState.hoverIndex > hoverIndex ? 'top' : 'bottom';
-        this.virtualizerMethods.getElementVisiblePercentage(hoverIndex) < 50 && this.virtualizerMethods.scrollToIndex(hoverIndex, position);
-      } else {
-        var suggestionContainer = this.suggestionContainer,
-            optionsOrder = this.optionsOrder;
-        var hoverId = (0, _Common.getIsEmptyValue)(optionsOrder[hoverIndex]) ? '' : optionsOrder[hoverIndex];
-        var selSuggestion = this["suggestion_".concat(hoverId)];
-        isPopupOpen && (0, _Common.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(function () {
             _this2.searchInput && _this2.searchInput.focus({
               preventScroll: true
@@ -764,6 +781,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           getTargetRef = _this$props11.getTargetRef,
           getContainerRef = _this$props11.getContainerRef,
           removeClose = _this$props11.removeClose,
+          isAnimate = _this$props11.isAnimate,
           isPopupOpen = _this$props11.isPopupOpen,
           isPopupReady = _this$props11.isPopupReady,
           animationStyle = _this$props11.animationStyle,
@@ -953,7 +971,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           boxPosition: position || "".concat(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/lib/Select/props/defaultProps.js

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

package/lib/Select/props/propTypes.js

@@ -44,6 +44,7 @@ var Select_propTypes = {
     noMoreText: _propTypes["default"].string,
     searchEmptyText: _propTypes["default"].string
   }),
+  isAnimate: _propTypes["default"].bool,
   isDefaultSelectValue: _propTypes["default"].bool,
   isDisabled: _propTypes["default"].bool,
   isNextOptions: _propTypes["default"].bool,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-240",
+  "version": "1.0.0-temp-241",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -26,7 +26,7 @@
     "dubCheck": "node ./node_modules/@zohodesk-private/node-plugins/es/dublication_css_file_finder  node_modules/@zohodesk/icons/es node_modules/@zohodesk/variables/es",
     "init": "npm run clean && cd ../assets && npm run componentsassets && cd ../components && npm run build:variables",
     "build:variables": "react-cli clean ./assets && node ./preprocess/index",
-    "rtl": "react-cli rtl ./src ./lib && react-cli rtl ./src ./es && react-cli rtl ./assets ./assets",
+    "rtl": "react-cli rtl ./src ./lib && react-cli rtl ./src ./es",
     "common_package_build": "cd ../common && npm run build && cd ../components",
     "start": "react-cli start",
     "docs": "npm run css:review && react-cli docs",
@@ -39,7 +39,7 @@
     "build:css:umd": "npm run clean &&  npm run init && react-cli build:css:umd",
     "coverage": "react-cli coverage",
     "prepare": "npm run init &&  npm run css:build ",
-    "prepublishOnly": "node prePublish.js && npm run download_only && npm run css:review && npm run review:props ",
+    "prepublishOnly": "node prePublish.js && npm run download_only",
     "postpublish": "node postPublish.js",
     "report": "react-cli publish:report",
     "test": "react-cli test",
@@ -74,7 +74,7 @@
     "@testing-library/react": "^11.2.5",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.0.10",
-    "@zohodesk-private/color-variable-preprocessor": "1.2.0",
+    "@zohodesk-private/color-variable-preprocessor": "1.0.0-temp-13",
     "@zohodesk-private/css-variable-migrator": "1.0.9",
     "@zohodesk-private/node-plugins": "1.1.13",
     "@zohodesk-private/react-prop-validator": "1.2.3",
@@ -93,7 +93,6 @@
     "@zohodesk/react-cli": "1.1.27"
   },
   "dependencies": {
-    "@zohodesk/react-cli": "^1.1.27",
     "hoist-non-react-statics": "3.0.1",
     "react-transition-group": "2.5.0",
     "reselect": "4.0.0",
@@ -111,9 +110,5 @@
     "@zohodesk/a11y": "2.3.8",
     "@zohodesk/layout": "3.1.0",
     "@zohodesk/dotkit": "1.0.3"
-  },
-  "volta": {
-    "node": "16.16.0",
-    "npm": "6.14.18"
   }
 }