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

package/lib/ListItem/props/defaultProps.js

@@ -92,6 +92,7 @@ var ListItemWithIconDefaultProps = {
   needBorder: true,
   a11y: {},
   customClass: '',
+  customTitleBoxClass: '',
   customProps: {},
   dataSelectorId: 'listItemWithIcon',
   needMultiLineText: false,

package/lib/ListItem/props/propTypes.js

@@ -94,7 +94,7 @@ var ListItemWithAvatar_Props = (_ListItemWithAvatar_P = {
   active: _propTypes["default"].bool,
   autoHover: _propTypes["default"].bool,
   avatarPalette: _propTypes["default"].string
-}, _defineProperty(_ListItemWithAvatar_P, "avatarPalette", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataSelectorId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "disableTitle", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "getRef", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "highlight", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "id", _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])), _defineProperty(_ListItemWithAvatar_P, "imgSrc", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "index", _propTypes["default"].number), _defineProperty(_ListItemWithAvatar_P, "initial", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "isDisabled", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "isTeam", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "name", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "needAvatarTitle", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needBorder", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needTick", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "onClick", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "onMouseEnter", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "palette", _propTypes["default"].oneOf(['dark'])), _defineProperty(_ListItemWithAvatar_P, "size", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "title", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "value", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "secondaryValue", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "renderValueRightPlaceholderNode", _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func])), _defineProperty(_ListItemWithAvatar_P, "lhsAlignContent", _propTypes["default"].oneOf(['start', 'center', 'end'])), _defineProperty(_ListItemWithAvatar_P, "a11y", _propTypes["default"].shape({
+}, _defineProperty(_ListItemWithAvatar_P, "avatarPalette", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataSelectorId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "disableTitle", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "getRef", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "highlight", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "id", _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])), _defineProperty(_ListItemWithAvatar_P, "imgSrc", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "index", _propTypes["default"].number), _defineProperty(_ListItemWithAvatar_P, "initial", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "isDisabled", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "isTeam", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "name", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "needAvatarTitle", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needBorder", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needTick", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "onClick", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "onMouseEnter", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "palette", _propTypes["default"].oneOf(['dark'])), _defineProperty(_ListItemWithAvatar_P, "size", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "title", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "value", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "secondaryValue", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "renderValueRightPlaceholderNode", _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func])), _defineProperty(_ListItemWithAvatar_P, "renderLeftValuePlaceholderNode", _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func])), _defineProperty(_ListItemWithAvatar_P, "lhsAlignContent", _propTypes["default"].oneOf(['start', 'center', 'end'])), _defineProperty(_ListItemWithAvatar_P, "a11y", _propTypes["default"].shape({
   role: _propTypes["default"].string,
   ariaSelected: _propTypes["default"].bool,
   ariaHidden: _propTypes["default"].bool
@@ -102,7 +102,8 @@ var ListItemWithAvatar_Props = (_ListItemWithAvatar_P = {
   customListItem: _propTypes["default"].string,
   customAvatar: _propTypes["default"].string,
   customAvatarTeam: _propTypes["default"].string,
-  customValueRightPlaceholder: _propTypes["default"].string
+  customValueRightPlaceholder: _propTypes["default"].string,
+  customLeftValuePlaceholder: _propTypes["default"].string
 })), _defineProperty(_ListItemWithAvatar_P, "needMultiLineText", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "customProps", _propTypes["default"].shape({
   ListItemProps: _propTypes["default"].object,
   ContainerProps: _propTypes["default"].object,
@@ -131,6 +132,7 @@ var ListItemWithCheckBox_Props = {
   secondaryValue: _propTypes["default"].string,
   needBorder: _propTypes["default"].bool,
   renderValueRightPlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
+  renderLeftValuePlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
   lhsAlignContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
   lhsJustifyContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
   a11y: _propTypes["default"].shape({
@@ -142,7 +144,8 @@ var ListItemWithCheckBox_Props = {
     customListItem: _propTypes["default"].string,
     customCheckBox: _propTypes["default"].string,
     customLabel: _propTypes["default"].string,
-    customValueRightPlaceholder: _propTypes["default"].string
+    customValueRightPlaceholder: _propTypes["default"].string,
+    customLeftValuePlaceholder: _propTypes["default"].string
   }),
   customProps: _propTypes["default"].object
 };
@@ -171,6 +174,7 @@ var ListItemWithIcon_Props = {
   value: _propTypes["default"].string,
   secondaryValue: _propTypes["default"].string,
   renderValueRightPlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
+  renderLeftValuePlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
   lhsAlignContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
   lhsJustifyContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
   a11y: _propTypes["default"].shape({
@@ -181,6 +185,8 @@ var ListItemWithIcon_Props = {
   needMultiLineText: _propTypes["default"].bool,
   customClass: _propTypes["default"].string,
   customValueRightPlaceholderClass: _propTypes["default"].string,
+  customLeftValuePlaceholderClass: _propTypes["default"].string,
+  customTitleBoxClass: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
     ListItemProps: _propTypes["default"].object
   }),
@@ -210,6 +216,7 @@ var ListItemWithRadio_Props = {
   secondaryValue: _propTypes["default"].string,
   needBorder: _propTypes["default"].bool,
   renderValueRightPlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
+  renderLeftValuePlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
   lhsAlignContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
   lhsJustifyContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
   a11y: _propTypes["default"].shape({
@@ -221,7 +228,8 @@ var ListItemWithRadio_Props = {
     customListItem: _propTypes["default"].string,
     customRadio: _propTypes["default"].string,
     customRadioWrap: _propTypes["default"].string,
-    customValueRightPlaceholder: _propTypes["default"].string
+    customValueRightPlaceholder: _propTypes["default"].string,
+    customLeftValuePlaceholder: _propTypes["default"].string
   }),
   customProps: _propTypes["default"].object
 };

package/lib/Modal/Portal/__tests__/__snapshots__/Portal.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Portal rendering the defult props 1`] = `
 <body>

package/lib/Modal/__tests__/__snapshots__/Modal.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Modal rendering the defult props 1`] = `
 <body>

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -45,6 +45,8 @@ var _Common = require("./../utils/Common");
 
 var _icons = require("@zohodesk/icons");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.module.css"));
 
 var _Common2 = require("../utils/Common.js");
@@ -1019,7 +1021,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
       var isShowClearIcon = !isReadOnly && !isDisabled && selectedGroupOptions.length > 1;
       var isEditable = !(isReadOnly || isDisabled);
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
+        className: (0, _cssUtility.cn)("".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").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,
@@ -1052,7 +1054,7 @@ var AdvancedGroupMultiSelect = /*#__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              ")
+        className: (0, _cssUtility.cn)(" ".concat(_MultiSelectModule["default"].custmSpan, " ").concat(textBoxSize === 'xmedium' ? _MultiSelectModule["default"].custmSpanXmedium : _MultiSelectModule["default"].custmSpanMedium, " ").concat(isShowClearIcon ? _MultiSelectModule["default"].clearIconSpace : '', "\n              "))
       }, searchStr), /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
         isDisabled: isDisabled,
         inputRef: this.searchInputRef,
@@ -1147,7 +1149,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
             key: groupId
           }, groupName && /*#__PURE__*/_react["default"].createElement("div", {
-            className: _MultiSelectModule["default"].groupTitle
+            className: (0, _cssUtility.cn)(_MultiSelectModule["default"].groupTitle)
           }, /*#__PURE__*/_react["default"].createElement(_DropDownHeading["default"], {
             text: groupName,
             a11y: {
@@ -1179,11 +1181,11 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           i18nKeys: i18nKeys,
           htmlId: ariaErrorId
         }), isNextOptions && /*#__PURE__*/_react["default"].createElement("div", {
-          className: _MultiSelectModule["default"].loader
+          className: (0, _cssUtility.cn)(_MultiSelectModule["default"].loader)
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)))) : /*#__PURE__*/_react["default"].createElement("div", {
-          className: _MultiSelectModule["default"].loader
+          className: (0, _cssUtility.cn)(_MultiSelectModule["default"].loader)
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)), getFooter ? isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : /*#__PURE__*/_react["default"].createElement("div", {
-          className: _MultiSelectModule["default"].loader
+          className: (0, _cssUtility.cn)(_MultiSelectModule["default"].loader)
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : null)));
       }) : null);
     }

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -43,6 +43,8 @@ var _CustomResponsive = require("../Responsive/CustomResponsive");
 
 var _Loader = _interopRequireDefault(require("@zohodesk/svg/lib/Loader/Loader"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.module.css"));
 
 var _Common = require("../utils/Common.js");
@@ -453,6 +455,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           needEffect = _this$props6.needEffect,
           disabledOptions = _this$props6.disabledOptions,
           isLoading = _this$props6.isLoading,
+          shouldUseInternalLoader = _this$props6.shouldUseInternalLoader,
           dataSelectorId = _this$props6.dataSelectorId,
           customClass = _this$props6.customClass,
           isAbsolutePositioningNeeded = _this$props6.isAbsolutePositioningNeeded,
@@ -502,8 +505,9 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
 
       var isShowClearIcon = !isReadOnly && !isDisabled && isShowClear;
       var isEditable = !(isReadOnly || isDisabled);
+      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(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(containerClass),
+        className: (0, _cssUtility.cn)("".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(containerClass)),
         "data-id": dataIdMultiSelectComp,
         "data-test-id": dataIdMultiSelectComp,
         "data-title": isDisabled ? title : null,
@@ -534,7 +538,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         shrink: true,
         dataId: "".concat(dataIdMultiSelectComp, "_textBox")
       }, /*#__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              ")
+        className: (0, _cssUtility.cn)(" ".concat(_MultiSelectModule["default"].custmSpan, " ").concat(textBoxSize === 'xmedium' ? _MultiSelectModule["default"].custmSpanXmedium : _MultiSelectModule["default"].custmSpanMedium, " ").concat(isShowClearIcon ? _MultiSelectModule["default"].clearIconSpace : '', "\n              "))
       }, searchStr), /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
         isDisabled: isDisabled,
         inputRef: this.searchInputRef,
@@ -604,7 +608,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         }, DropBoxProps, {
           alignBox: "row",
           isResponsivePadding: getFooter ? false : true
-        }), isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        }), (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(_Layout.Box, {
@@ -645,7 +649,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           dataId: dataIdLoading,
           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)));

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);