@zohodesk/components 1.6.19 → 1.6.21

package/lib/MultiSelect/MultiSelect.js

@@ -270,7 +270,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
-      var searchStr = this.state.searchStr;
+      var _this$state2 = this.state,
+          searchStr = _this$state2.searchStr,
+          hoverOption = _this$state2.hoverOption;
       var _this$props2 = this.props,
           needLocalSearch = _this$props2.needLocalSearch,
           isPopupOpen = _this$props2.isPopupOpen,
@@ -279,9 +281,10 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isSearchClearOnClose = _this$props2.isSearchClearOnClose; //handle dropbox open & close
 
       if (prevProps.isPopupOpen !== isPopupOpen) {
-        isPopupOpen && onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
-
-        if (!isPopupOpen) {
+        if (isPopupOpen) {
+          this.scrollToHighlightedIndex();
+          onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
+        } else {
           this.setState({
             hoverOption: 0
           });
@@ -290,7 +293,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         }
       }
 
-      if (isPopupOpen) {
+      if (prevState.hoverOption !== hoverOption && isPopupOpen) {
         this.scrollToHighlightedIndex();
       } //When suggestions length less than 5, getNextOptions function call
 
@@ -366,10 +369,10 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
     key: "handleInputCick",
     value: function handleInputCick(e) {
       var removeClose = this.props.removeClose;
-      var _this$state2 = this.state,
-          highLightedSelectOptions = _this$state2.highLightedSelectOptions,
-          _this$state2$searchSt = _this$state2.searchStr,
-          searchStr = _this$state2$searchSt === void 0 ? '' : _this$state2$searchSt;
+      var _this$state3 = this.state,
+          highLightedSelectOptions = _this$state3.highLightedSelectOptions,
+          _this$state3$searchSt = _this$state3.searchStr,
+          searchStr = _this$state3$searchSt === void 0 ? '' : _this$state3$searchSt;
 
       if (highLightedSelectOptions.length) {
         this.setState({
@@ -387,11 +390,11 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleFilterSuggestions",
     value: function handleFilterSuggestions() {
-      var _this$state3 = this.state,
-          _this$state3$options = _this$state3.options,
-          options = _this$state3$options === void 0 ? dummyArray : _this$state3$options,
-          _this$state3$searchSt = _this$state3.searchStr,
-          searchStr = _this$state3$searchSt === void 0 ? '' : _this$state3$searchSt;
+      var _this$state4 = this.state,
+          _this$state4$options = _this$state4.options,
+          options = _this$state4$options === void 0 ? dummyArray : _this$state4$options,
+          _this$state4$searchSt = _this$state4.searchStr,
+          searchStr = _this$state4$searchSt === void 0 ? '' : _this$state4$searchSt;
       var _this$props4 = this.props,
           selectedOptions = _this$props4.selectedOptions,
           needLocalSearch = _this$props4.needLocalSearch,
@@ -420,13 +423,13 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           metaKey = e.metaKey,
           shiftKey = e.shiftKey;
       var suggestions = [];
-      var _this$state4 = this.state,
-          hoverOption = _this$state4.hoverOption,
-          searchStr = _this$state4.searchStr,
-          highLightedSelectOptions = _this$state4.highLightedSelectOptions,
-          lastHighLightedSelectOption = _this$state4.lastHighLightedSelectOption,
-          shiftKeyPressHighLighted = _this$state4.shiftKeyPressHighLighted,
-          selectedOptions = _this$state4.selectedOptionIds;
+      var _this$state5 = this.state,
+          hoverOption = _this$state5.hoverOption,
+          searchStr = _this$state5.searchStr,
+          highLightedSelectOptions = _this$state5.highLightedSelectOptions,
+          lastHighLightedSelectOption = _this$state5.lastHighLightedSelectOption,
+          shiftKeyPressHighLighted = _this$state5.shiftKeyPressHighLighted,
+          selectedOptions = _this$state5.selectedOptionIds;
       var _this$props5 = this.props,
           isNextOptions = _this$props5.isNextOptions,
           getNextOptions = _this$props5.getNextOptions,
@@ -646,10 +649,10 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       var _this$props7 = this.props,
           selectedOptions = _this$props7.selectedOptions,
           isReadOnly = _this$props7.isReadOnly;
-      var _this$state5 = this.state,
-          highLightedSelectOptions = _this$state5.highLightedSelectOptions,
-          lastHighLightedSelectOption = _this$state5.lastHighLightedSelectOption,
-          shiftKeyPressHighLighted = _this$state5.shiftKeyPressHighLighted;
+      var _this$state6 = this.state,
+          highLightedSelectOptions = _this$state6.highLightedSelectOptions,
+          lastHighLightedSelectOption = _this$state6.lastHighLightedSelectOption,
+          shiftKeyPressHighLighted = _this$state6.shiftKeyPressHighLighted;
 
       if (newOptions.length && !isReadOnly) {
         var newSelectedOptions = selectedOptions.filter(function (option) {
@@ -768,9 +771,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
       var e = arguments.length > 1 ? arguments[1] : undefined;
       var selectedOptions = this.props.selectedOptions;
-      var _this$state6 = this.state,
-          highLightedSelectOptions = _this$state6.highLightedSelectOptions,
-          lastHighLightedSelectOption = _this$state6.lastHighLightedSelectOption;
+      var _this$state7 = this.state,
+          highLightedSelectOptions = _this$state7.highLightedSelectOptions,
+          lastHighLightedSelectOption = _this$state7.lastHighLightedSelectOption;
       var metaKey = e.metaKey,
           ctrlKey = e.ctrlKey,
           shiftKey = e.shiftKey;
@@ -925,9 +928,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleActive",
     value: function handleActive(e) {
-      var _this$state7 = this.state,
-          searchStr = _this$state7.searchStr,
-          isActive = _this$state7.isActive;
+      var _this$state8 = this.state,
+          searchStr = _this$state8.searchStr,
+          isActive = _this$state8.isActive;
 
       if (!isActive) {
         this.setState({
@@ -1023,11 +1026,11 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isPopupReady = _this$props14.isPopupReady,
           renderCustomClearComponent = _this$props14.renderCustomClearComponent,
           renderCustomToggleIndicator = _this$props14.renderCustomToggleIndicator;
-      var _this$state8 = this.state,
-          isActive = _this$state8.isActive,
-          selectedOptions = _this$state8.selectedOptions,
-          highLightedSelectOptions = _this$state8.highLightedSelectOptions,
-          searchStr = _this$state8.searchStr;
+      var _this$state9 = this.state,
+          isActive = _this$state9.isActive,
+          selectedOptions = _this$state9.selectedOptions,
+          highLightedSelectOptions = _this$state9.highLightedSelectOptions,
+          searchStr = _this$state9.searchStr;
       var _i18nKeys$clearText = i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? _constants.MULTISELECT_I18N_KEYS.clearText : _i18nKeys$clearText;
       var _a11y$clearLabel = a11y.clearLabel,
@@ -1170,18 +1173,19 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           needEffect = _this$props15.needEffect,
           boxSize = _this$props15.boxSize,
           isLoading = _this$props15.isLoading,
+          shouldUseInternalLoader = _this$props15.shouldUseInternalLoader,
           selectAllText = _this$props15.selectAllText,
           needSelectAll = _this$props15.needSelectAll,
           isVirtualizerEnabled = _this$props15.isVirtualizerEnabled,
           limit = _this$props15.limit,
           customProps = _this$props15.customProps;
-      var _this$state9 = this.state,
-          selectedOptions = _this$state9.selectedOptions,
-          searchStr = _this$state9.searchStr,
-          hoverOption = _this$state9.hoverOption,
-          options = _this$state9.options,
-          isFetchingOptions = _this$state9.isFetchingOptions,
-          selectedOptionIds = _this$state9.selectedOptionIds;
+      var _this$state10 = this.state,
+          selectedOptions = _this$state10.selectedOptions,
+          searchStr = _this$state10.searchStr,
+          hoverOption = _this$state10.hoverOption,
+          options = _this$state10.options,
+          isFetchingOptions = _this$state10.isFetchingOptions,
+          selectedOptionIds = _this$state10.selectedOptionIds;
       var _i18nKeys = i18nKeys,
           _i18nKeys$searchText = _i18nKeys.searchText,
           searchText = _i18nKeys$searchText === void 0 ? _constants.MULTISELECT_I18N_KEYS.searchText : _i18nKeys$searchText,
@@ -1197,6 +1201,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       });
       var isModel = (0, _isMobilePopover["default"])(needResponsive);
       var SuggestionsProps = customProps.SuggestionsProps;
+      var isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
       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),
@@ -1246,7 +1251,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         selectAllText: selectAllText,
         suggestions: suggestions,
         dataId: dataId
-      })) : null, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      })) : null, (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both",
         className: _MultiSelectModule["default"].loader
       }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
@@ -1282,7 +1287,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         palette: palette,
         i18nKeys: i18nKeys,
         htmlId: ariaErrorId
-      }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      }), (shouldUseInternalLoader ? isFetchingOptions : isLoading && !isInitialEmptyOptions) && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isCover: false,
         align: "both"
       }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : null))) : null);

package/lib/MultiSelect/MultiSelectWithAvatar.js

@@ -153,6 +153,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
           isBoxPaddingNeed = _this$props.isBoxPaddingNeed,
           needEffect = _this$props.needEffect,
           isLoading = _this$props.isLoading,
+          shouldUseInternalLoader = _this$props.shouldUseInternalLoader,
           keepSelectedOptions = _this$props.keepSelectedOptions,
           customProps = _this$props.customProps,
           limit = _this$props.limit;
@@ -178,6 +179,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
       var ariaErrorId = this.getNextAriaId();
       var popUpState = !isReadOnly && !isDisabled && !disableAction && isPopupOpen;
       var isModel = (0, _isMobilePopover["default"])(needResponsive);
+      var isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
       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),
@@ -225,7 +227,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         selectAllText: selectAllText,
         suggestions: suggestions,
         dataId: dataId
-      })) : null, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      })) : null, (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both",
         className: _MultiSelectModule["default"].loader
       }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
@@ -258,7 +260,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         palette: palette,
         i18nKeys: i18nKeys,
         htmlId: ariaErrorId
-      }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      }), (shouldUseInternalLoader ? isFetchingOptions : isLoading && !isInitialEmptyOptions) && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isCover: false,
         align: "both"
       }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)))))) : null);

package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap

@@ -9,13 +9,13 @@ exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
     data-test-id="multiSelect"
   >
     <div
-      class="container medium  hasBorder borderColor_default  flex cover rowdir wrap vCenter"
+      class="flex fullSize row wrap alignItems_center container medium  hasBorder borderColor_default"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="wrapper grow basisAuto shrinkOn"
+        class="flexible basis_auto shrink wrapper"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -25,11 +25,11 @@ exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
               "
         />
         <div
-          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
+          class="flex row varClass customContainer    effect     container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -52,13 +52,13 @@ exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
             />
           </div>
           <div
-            class="iconContainer  shrinkOff"
+            class="noShrink iconContainer"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="flex cover rowdir"
+              class="flex fullSize row"
               data-id="containerComponent"
               data-selector-id="container"
               data-test-id="containerComponent"