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

package/es/Select/SelectWithIcon.js

@@ -22,6 +22,7 @@ import { scrollTo, findScrollEnd, getSearchString } from "../utils/Common.js";
 import { isObjectContainsSearchString } from "../utils/dropDownUtils.js";
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./Select.module.css";
 
 class SelectWithIcon extends Component {
@@ -357,6 +358,7 @@ class SelectWithIcon extends Component {
       i18nKeys,
       htmlId,
       isLoading,
+      shouldUseInternalLoader,
       dataSelectorId,
       customProps,
       customClass
@@ -383,12 +385,13 @@ class SelectWithIcon extends Component {
       dropBox: dropBoxClass = '',
       cardContent: cardContentClass = ''
     } = customClass;
+    const isInitialEmptyOptions = searchValue.length === 0 && options.length === 0;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
+      className: cn(`${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`),
       "data-title": isDisabled ? title : null,
       "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${className ? className : ''}`,
+      className: cn(`${className ? className : ''}`),
       onClick: isDisabled || isReadOnly ? null : this.togglePopup,
       ref: getTargetRef,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -480,7 +483,7 @@ class SelectWithIcon extends Component {
       customClass: {
         customDropBox: dropBoxClass
       }
-    }, isLoading ? /*#__PURE__*/React.createElement(Container, {
+    }, (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/React.createElement(Container, {
       align: "both",
       className: style.loader
     }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
@@ -492,7 +495,7 @@ class SelectWithIcon extends Component {
         role: 'listbox'
       }
     }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
-      className: `${style.search} ${style[size]}`
+      className: cn(`${style.search} ${style[size]}`)
     }, /*#__PURE__*/React.createElement(TextBoxIcon, {
       onClear: this.onSearchClear,
       onChange: this.onSearch,
@@ -556,7 +559,7 @@ class SelectWithIcon extends Component {
       dataId: dataId,
       i18nKeys: i18nKeys,
       htmlId: ariaErrorId
-    }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+    }), (shouldUseInternalLoader ? isFetchingOptions : isLoading && !isInitialEmptyOptions) && /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       align: "both"
     }, /*#__PURE__*/React.createElement(Loader, null))))))) : null);

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

@@ -6,7 +6,9 @@ describe('SelectWithIcon', () => {
     const mockOnChange = jest.fn();
     const {
       asFragment
-    } = render( /*#__PURE__*/React.createElement(SelectWithIcon, null));
+    } = render( /*#__PURE__*/React.createElement(SelectWithIcon, {
+      options: []
+    }));
     expect(asFragment()).toMatchSnapshot();
   });
 });

package/es/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"