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

package/lib/Select/SelectWithAvatar.js

@@ -41,6 +41,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/MultiSelect.module.css"));
 
 var _SelectModule = _interopRequireDefault(require("./Select.module.css"));
@@ -221,6 +223,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           htmlId = _this$props.htmlId,
           needEffect = _this$props.needEffect,
           isLoading = _this$props.isLoading,
+          shouldUseInternalLoader = _this$props.shouldUseInternalLoader,
           dataSelectorId = _this$props.dataSelectorId,
           getTargetRef = _this$props.getTargetRef,
           customProps = _this$props.customProps,
@@ -253,8 +256,9 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           dropBoxClass = _customClass$dropBox === void 0 ? '' : _customClass$dropBox,
           _customClass$cardCont = customClass.cardContent,
           cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont;
+      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(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(className ? className : ''),
+        className: (0, _cssUtility.cn)("".concat(_MultiSelectModule["default"].wrapper, "  ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(className ? className : '')),
         "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,
@@ -262,7 +266,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",
-        className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(_MultiSelectModule["default"]["borderColor_".concat(borderColor)], " ").concat(isActive && needBorder ? _MultiSelectModule["default"].active : '', " ").concat(textBoxClass ? textBoxClass : '', " ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : ''),
+        className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(_MultiSelectModule["default"]["borderColor_".concat(borderColor)], " ").concat(isActive && needBorder ? _MultiSelectModule["default"].active : '', "  ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : '', " ").concat(textBoxClass ? textBoxClass : ''),
         eleRef: getTargetRef,
         onClick: !isDisabled && this.togglePopup
       }, selectedId ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -338,7 +342,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           customClass: {
             customDropBox: dropBoxClass
           }
-        }, 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, {
@@ -346,7 +350,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
         }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
           onScroll: _this2.handleScroll
         }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
-          className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
+          className: (0, _cssUtility.cn)("".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size]))
         }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
           inputRef: _this2.searchInputRef,
           maxLength: maxLength,
@@ -368,7 +372,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           customClass: "".concat(!tabletMode && dropBoxSize ? _MultiSelectModule["default"][dropBoxSize] : '', " ").concat(cardContentClass),
           eleRef: _this2.suggestionContainerRef
         }, groupName ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: _MultiSelectModule["default"].title
+          className: (0, _cssUtility.cn)(_MultiSelectModule["default"].title)
         }, /*#__PURE__*/_react["default"].createElement(_DropDownHeading["default"], {
           text: groupName,
           a11y: {
@@ -400,7 +404,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           dataId: dataId,
           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))))));

package/lib/Select/SelectWithIcon.js

@@ -39,6 +39,8 @@ var _Common = require("../utils/Common.js");
 
 var _dropDownUtils = require("../utils/dropDownUtils.js");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _SelectModule = _interopRequireDefault(require("./Select.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -431,6 +433,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           i18nKeys = _this$props7.i18nKeys,
           htmlId = _this$props7.htmlId,
           isLoading = _this$props7.isLoading,
+          shouldUseInternalLoader = _this$props7.shouldUseInternalLoader,
           dataSelectorId = _this$props7.dataSelectorId,
           customProps = _this$props7.customProps,
           customClass = _this$props7.customClass;
@@ -457,12 +460,13 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           dropBoxClass = _customClass$dropBox === void 0 ? '' : _customClass$dropBox,
           _customClass$cardCont = customClass.cardContent,
           cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont;
+      var isInitialEmptyOptions = searchValue.length === 0 && options.length === 0;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : ''),
+        className: (0, _cssUtility.cn)("".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '')),
         "data-title": isDisabled ? title : null,
         "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(className ? className : ''),
+        className: (0, _cssUtility.cn)("".concat(className ? className : '')),
         onClick: isDisabled || isReadOnly ? null : this.togglePopup,
         ref: getTargetRef,
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
@@ -553,7 +557,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           customClass: {
             customDropBox: dropBoxClass
           }
-        }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        }, (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "both",
           className: _SelectModule["default"].loader
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -565,7 +569,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
             role: 'listbox'
           }
         }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
-          className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
+          className: (0, _cssUtility.cn)("".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size]))
         }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
           onClear: _this5.onSearchClear,
           onChange: _this5.onSearch,
@@ -627,7 +631,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           dataId: dataId,
           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))))));

package/lib/Select/__tests__/SelectWithIcon.spec.js

@@ -12,7 +12,9 @@ describe('SelectWithIcon', function () {
   test('rendering the defult props', function () {
     var mockOnChange = jest.fn();
 
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectWithIcon["default"], null)),
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectWithIcon["default"], {
+      options: []
+    })),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();

package/lib/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`GroupSelect rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium   "
+    class="container box_medium"
     data-id="selectComponent"
     data-selector-id="groupSelect"
     data-test-id="selectComponent"
@@ -14,11 +14,11 @@ exports[`GroupSelect rendering the defult props 1`] = `
       data-test-id="GroupSelect"
     >
       <div
-        class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+        class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
         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"
@@ -30,7 +30,7 @@ exports[`GroupSelect rendering the defult props 1`] = `
             aria-owns="1"
             aria-readonly="true"
             autocomplete="off"
-            class="  container medium  default  effect  borderColor_default  "
+            class="container medium default effect borderColor_default"
             data-id="GroupSelect_textBox"
             data-selector-id="textBoxIcon"
             data-test-id="GroupSelect_textBox"
@@ -43,32 +43,32 @@ exports[`GroupSelect 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"
           >
             <div
-              class="icon  shrinkOff"
+              class="noShrink icon"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex cover coldir both"
+                class="flex fullSize column alignItems_center justifyContent_center"
                 data-id="downIcon"
                 data-selector-id="container"
                 data-test-id="downIcon"
               >
                 <i
                   aria-hidden="true"
-                  class="zd_font_icons basic icon-down  arrowIcon  "
+                  class="zd_font_icons basic icon-down arrowIcon"
                   data-id="fontIcon"
                   data-selector-id="fontIcon"
                   data-test-id="fontIcon"