@zohodesk/components 1.0.0-temp-256 → 1.0.0-temp-257.1

package/lib/MultiSelect/EmptyState.js

@@ -17,6 +17,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _constants = require("./constants");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -82,13 +84,13 @@ var EmptyState = /*#__PURE__*/function (_React$PureComponent) {
       var _a11y$role = a11y.role,
           role = _a11y$role === void 0 ? 'alert' : _a11y$role;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isLoading ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: className,
+        className: (0, _cssUtility.cn)(className),
         "data-id": "".concat(dataId, "_Loading"),
         "data-test-id": "".concat(dataId, "_Loading"),
         role: role,
         id: htmlId
       }, loadingText) : searchString.length && suggestions.length === 0 ? getCustomEmptyState ? getCustomEmptyState() : /*#__PURE__*/_react["default"].createElement("div", {
-        className: className,
+        className: (0, _cssUtility.cn)(className),
         "data-id": "".concat(dataId, "_srchEmptyMsg"),
         "data-test-id": "".concat(dataId, "_srchEmptyMsg"),
         role: role,
@@ -100,7 +102,7 @@ var EmptyState = /*#__PURE__*/function (_React$PureComponent) {
         htmlId: htmlId,
         className: className
       }) : /*#__PURE__*/_react["default"].createElement("div", {
-        className: className,
+        className: (0, _cssUtility.cn)(className),
         "data-id": "".concat(dataId, "_noOptnsMsg"),
         "data-test-id": "".concat(dataId, "_noOptnsMsg"),
         role: role,
@@ -112,7 +114,7 @@ var EmptyState = /*#__PURE__*/function (_React$PureComponent) {
         htmlId: htmlId,
         className: className
       }) : /*#__PURE__*/_react["default"].createElement("div", {
-        className: className,
+        className: (0, _cssUtility.cn)(className),
         "data-id": "".concat(dataId, "_NoMoreOptionMsg"),
         "data-test-id": "".concat(dataId, "_NoMoreOptionMsg"),
         role: role,

package/lib/MultiSelect/MobileHeader/MobileHeader.js

@@ -15,6 +15,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _MobileHeaderModule = _interopRequireDefault(require("./MobileHeader.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -32,7 +34,7 @@ function MobileHeader(props) {
       mobileHeaderText = i18nText.mobileHeaderText;
   var showMobileHeader = i18nKeys.mobileHeaderText || !i18nKeys.mobileHeaderText && selectedOptions.length >= 1;
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: _MobileHeaderModule["default"].container
+    className: (0, _cssUtility.cn)(_MobileHeaderModule["default"].container)
   }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     isCover: false,
     align: "vertical",

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`MobileHeader rendering the defult props 1`] = `
 <DocumentFragment>
@@ -6,25 +6,25 @@ exports[`MobileHeader rendering the defult props 1`] = `
     class="container"
   >
     <div
-      class="header flex rowdir alignBetween vCenter"
+      class="flex row alignContent_spaceBetween alignItems_center header"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="cardHeading grow basis shrinkOff"
+        class="flexible basis_zero noShrink cardHeading"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="shrinkOn"
+        class="shrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <button
-          class="buttonText bold plainprimary medium"
+          class="bold plainprimary medium buttonText"
           data-id="buttonComp"
           data-selector-id="button"
           data-test-id="buttonComp"

package/lib/MultiSelect/MultiSelect.js

@@ -45,6 +45,8 @@ var _isMobilePopover = _interopRequireDefault(require("../DropBox/utils/isMobile
 
 var _icons = require("@zohodesk/icons");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.module.css"));
 
 var _Common = require("../utils/Common.js");
@@ -270,7 +272,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 +283,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 +295,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 +371,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 +392,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 +425,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 +651,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 +773,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 +930,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 +1028,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,
@@ -1047,7 +1052,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",
-        className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(needBorder ? !disableAction ? _MultiSelectModule["default"]["borderColor_".concat(borderColor)] : _MultiSelectModule["default"].borderColor_transparent : '', " ").concat(isActive && needBorder || isResponsive || isEditable && isFocus && needBorder ? _MultiSelectModule["default"].active : '', " ").concat(textBoxClass, " ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : ''),
+        className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(needBorder ? !disableAction ? _MultiSelectModule["default"]["borderColor_".concat(borderColor)] : _MultiSelectModule["default"].borderColor_transparent : '', " ").concat(isActive && needBorder || isResponsive || isEditable && isFocus && needBorder ? _MultiSelectModule["default"].active : '', " ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : '', " ").concat(textBoxClass, " "),
         eleRef: this.selectedOptionContainerRef,
         wrap: "wrap"
       }, /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
@@ -1070,7 +1075,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         adjust: true,
         shrink: true
       }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: " ".concat(_MultiSelectModule["default"].custmSpan, " ").concat(textBoxSize === 'xmedium' ? _MultiSelectModule["default"].custmSpanXmedium : _MultiSelectModule["default"].custmSpanMedium, " ").concat(isShowClearIcon ? _MultiSelectModule["default"].clearIconSpace : '', "\n          ").concat(customChildrenClass ? customChildrenClass : '')
+        className: (0, _cssUtility.cn)(" ".concat(_MultiSelectModule["default"].custmSpan, " ").concat(textBoxSize === 'xmedium' ? _MultiSelectModule["default"].custmSpanXmedium : _MultiSelectModule["default"].custmSpanMedium, " ").concat(isShowClearIcon ? _MultiSelectModule["default"].clearIconSpace : '', "\n          ").concat(customChildrenClass ? customChildrenClass : ''))
       }, searchStr), /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
         isDisabled: isDisabled,
         inputRef: this.searchInputRef,
@@ -1170,18 +1175,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,8 +1203,9 @@ 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 : ''),
+        className: (0, _cssUtility.cn)("".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),
         "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-title": isDisabled ? title : null,
@@ -1240,13 +1247,13 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         i18nKeys: i18nKeys,
         onClick: this.handlePopupClose
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: _MultiSelectModule["default"].effect
+        className: (0, _cssUtility.cn)(_MultiSelectModule["default"].effect)
       }, this.getSelectionUI(true))) : null, needSelectAll && !(limit >= 0) ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
         onSelect: this.handleSelectAll,
         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, {
@@ -1254,7 +1261,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         customClass: !isModel && dropBoxSize ? _MultiSelectModule["default"][dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
       }, isSearching ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _MultiSelectModule["default"][palette]
+        className: (0, _cssUtility.cn)(_MultiSelectModule["default"][palette])
       }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
         a11y: a11yProps,
         needBorder: false,
@@ -1282,7 +1289,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

@@ -41,6 +41,8 @@ var _MultiSelectHeader = _interopRequireDefault(require("./MultiSelectHeader"));
 
 var _isMobilePopover = _interopRequireDefault(require("../DropBox/utils/isMobilePopover"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.module.css"));
 
 var _MobileHeader = _interopRequireDefault(require("./MobileHeader/MobileHeader"));
@@ -153,6 +155,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,8 +181,9 @@ 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 : ''),
+        className: (0, _cssUtility.cn)(" ".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),
         "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-title": isDisabled ? title : null,
@@ -219,13 +223,13 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         i18nKeys: i18nKeys,
         onClick: this.handlePopupClose
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: _MultiSelectModule["default"].effect
+        className: (0, _cssUtility.cn)(_MultiSelectModule["default"].effect)
       }, this.getSelectionUI(true)))) : null, needSelectAll && !(limit >= 0) ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
         onSelect: this.handleSelectAll,
         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 +262,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

@@ -1,35 +1,34 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper  effect"
+    class="wrapper effect"
     data-id="multiSelect"
     data-selector-id="advancedGroupMultiSelect"
     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"
       >
         <span
-          class=" custmSpan custmSpanMedium 
-              "
+          class="custmSpan custmSpanMedium"
         />
         <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"
@@ -41,7 +40,7 @@ exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
               aria-haspopup="true"
               aria-owns="1"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="multiSelect_textBox"
               data-selector-id="textBoxIcon"
               data-test-id="multiSelect_textBox"
@@ -52,13 +51,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"