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

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
 
 
@@ -309,6 +330,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       var options = props.options,
           valueField = props.valueField,
           textField = props.textField,
+          secondaryField = props.secondaryField,
           prefixText = props.prefixText,
           disabledOptions = props.disabledOptions,
           allowValueFallback = props.allowValueFallback,
@@ -321,6 +343,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         optionType: 'default',
         disabledOptions: disabledOptions,
         allowValueFallback: allowValueFallback,
+        secondaryField: secondaryField,
         searchFields: searchFields
       });
     }
@@ -1140,6 +1163,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isLoading = _this$props15.isLoading,
           selectAllText = _this$props15.selectAllText,
           needSelectAll = _this$props15.needSelectAll,
+          customProps = _this$props15.customProps,
           isVirtualizerEnabled = _this$props15.isVirtualizerEnabled,
           limit = _this$props15.limit;
       var _this$state9 = this.state,
@@ -1163,6 +1187,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         noMoreText: i18nKeys.noMoreText || noMoreOptionsMessage
       });
       var isModel = (0, _isMobilePopover["default"])(needResponsive);
+      var SuggestionsProps = customProps.SuggestionsProps;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
@@ -1175,7 +1200,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,
@@ -1220,7 +1246,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         eleRef: this.suggestionContainerRef
       }, isSearching ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _MultiSelectModule["default"][palette]
-      }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
         key: searchStr.trim(),
         suggestions: suggestions,
         isVirtualizerEnabled: isVirtualizerEnabled,
@@ -1239,7 +1265,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         },
         limit: limit,
         limitReachedMessage: limitReachedMessage
-      }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+      }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,

package/lib/MultiSelect/Suggestions.js

@@ -213,7 +213,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
         active: isActive,
         size: listItemSize,
         palette: palette,
-        a11y: list_a11y
+        a11y: list_a11y,
+        secondaryValue: secondaryValue
       }));
     }
   }, {

package/lib/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/lib/MultiSelect/props/propTypes.js

@@ -139,7 +139,8 @@ var MultiSelect_propTypes = {
   allowValueFallback: _propTypes["default"].bool,
   renderCustomClearComponent: _propTypes["default"].func,
   renderCustomToggleIndicator: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
-  limit: _propTypes["default"].number
+  limit: _propTypes["default"].number,
+  secondaryField: _propTypes["default"].string
 };
 exports.MultiSelect_propTypes = MultiSelect_propTypes;
 var MultiSelectHeader_propTypes = {
@@ -160,8 +161,7 @@ var MultiSelectWithAvatar_propTypes = _objectSpread({
   customProps: _propTypes["default"].shape({
     SuggestionsProps: _propTypes["default"].object,
     DropBoxProps: _propTypes["default"].object
-  }),
-  secondaryField: _propTypes["default"].string
+  })
 }, MultiSelect_propTypes);
 
 exports.MultiSelectWithAvatar_propTypes = MultiSelectWithAvatar_propTypes;
@@ -309,7 +309,6 @@ var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_
   prefixText: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   //For grouping multiSelect
   optionType: _propTypes["default"].oneOf(['default', 'avatar', 'icon']),
-  secondaryField: _propTypes["default"].string,
   dataIdClearIcon: _propTypes["default"].string,
   dataIdLoading: _propTypes["default"].string,
   dataIdMultiSelectComp: _propTypes["default"].string,