@zohodesk/components 1.6.19 → 1.6.21

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -96,6 +96,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       isBoxPaddingNeed,
       needEffect,
       isLoading,
+      shouldUseInternalLoader,
       keepSelectedOptions,
       customProps,
       limit
@@ -124,6 +125,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
     const ariaErrorId = this.getNextAriaId();
     const popUpState = !isReadOnly && !isDisabled && !disableAction && isPopupOpen;
     let isModel = isMobilePopover(needResponsive);
+    const isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
     return /*#__PURE__*/React.createElement("div", {
       className: ` ${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -171,7 +173,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       selectAllText: selectAllText,
       suggestions: suggestions,
       dataId: dataId
-    })) : null, isLoading ? /*#__PURE__*/React.createElement(Container, {
+    })) : null, (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/React.createElement(Container, {
       align: "both",
       className: style.loader
     }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(CardContent, {
@@ -204,7 +206,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       palette: palette,
       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/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap

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

package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap

@@ -9,13 +9,13 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
     data-test-id="multiSelectComp"
   >
     <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="multiSelectComp_textBox"
         data-selector-id="box"
         data-test-id="multiSelectComp_textBox"
@@ -25,11 +25,11 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
               "
         />
         <div
-          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
+          class="flex row varClass customContainer    effect     container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -52,13 +52,13 @@ exports[`AdvancedMultiSelect 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"
@@ -80,13 +80,13 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
     data-test-id="multiSelectComp"
   >
     <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="multiSelectComp_textBox"
         data-selector-id="box"
         data-test-id="multiSelectComp_textBox"
@@ -96,11 +96,11 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
               "
         />
         <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"
@@ -123,13 +123,13 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
             />
           </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"
@@ -161,38 +161,38 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
         tabindex="-1"
       >
         <div
-          class="flex rowdir"
+          class="flex row"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="box flex cover coldir"
+              class="flex fullSize column box"
               data-id="containerComponent"
               data-selector-id="container"
               data-test-id="containerComponent"
             >
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="flexible basis_zero shrink scroll_vertical small"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
               >
                 <div
-                  class="flex coldir"
+                  class="flex column"
                   data-id="containerComponent"
                   data-selector-id="container"
                   data-test-id="containerComponent"
                   tabindex="0"
                 >
                   <div
-                    class="shrinkOff"
+                    class="noShrink"
                     data-id="multiSelectComp_Options"
                     data-selector-id="box"
                     data-test-id="multiSelectComp_Options"
@@ -200,7 +200,7 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
                     <li
                       aria-label="Apple"
                       aria-selected="false"
-                      class="list medium  default defaultHover  mediumwithTick  withBorder  flex rowdir vCenter"
+                      class="flex row alignItems_center list medium  default defaultHover  mediumwithTick  withBorder"
                       data-a11y-inset-focus="true"
                       data-a11y-list-active="true"
                       data-id="Apple"
@@ -211,19 +211,19 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
                       tabindex="0"
                     >
                       <div
-                        class="leftBox grow basis shrinkOff"
+                        class="flexible basis_zero noShrink leftBox"
                         data-id="boxComponent"
                         data-selector-id="box"
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="titleBox   shrinkOff"
+                          class="noShrink titleBox"
                           data-id="boxComponent"
                           data-selector-id="box"
                           data-test-id="boxComponent"
                         >
                           <div
-                            class="selfAlign_center value basisAuto shrinkOn"
+                            class="basis_auto shrink selfAlign_center value"
                             data-id="boxComponent"
                             data-selector-id="box"
                             data-test-id="boxComponent"
@@ -236,7 +236,7 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
                     <li
                       aria-label="Orange"
                       aria-selected="false"
-                      class="list medium  default   mediumwithTick  withBorder  flex rowdir vCenter"
+                      class="flex row alignItems_center list medium  default   mediumwithTick  withBorder"
                       data-a11y-inset-focus="true"
                       data-a11y-list-active="false"
                       data-id="Orange"
@@ -247,19 +247,19 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
                       tabindex="0"
                     >
                       <div
-                        class="leftBox grow basis shrinkOff"
+                        class="flexible basis_zero noShrink leftBox"
                         data-id="boxComponent"
                         data-selector-id="box"
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="titleBox   shrinkOff"
+                          class="noShrink titleBox"
                           data-id="boxComponent"
                           data-selector-id="box"
                           data-test-id="boxComponent"
                         >
                           <div
-                            class="selfAlign_center value basisAuto shrinkOn"
+                            class="basis_auto shrink selfAlign_center value"
                             data-id="boxComponent"
                             data-selector-id="box"
                             data-test-id="boxComponent"
@@ -272,7 +272,7 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
                     <li
                       aria-label="string test"
                       aria-selected="false"
-                      class="list medium  default   mediumwithTick  withBorder  flex rowdir vCenter"
+                      class="flex row alignItems_center list medium  default   mediumwithTick  withBorder"
                       data-a11y-inset-focus="true"
                       data-a11y-list-active="false"
                       data-id="string test"
@@ -283,19 +283,19 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
                       tabindex="0"
                     >
                       <div
-                        class="leftBox grow basis shrinkOff"
+                        class="flexible basis_zero noShrink leftBox"
                         data-id="boxComponent"
                         data-selector-id="box"
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="titleBox   shrinkOff"
+                          class="noShrink titleBox"
                           data-id="boxComponent"
                           data-selector-id="box"
                           data-test-id="boxComponent"
                         >
                           <div
-                            class="selfAlign_center value basisAuto shrinkOn"
+                            class="basis_auto shrink selfAlign_center value"
                             data-id="boxComponent"
                             data-selector-id="box"
                             data-test-id="boxComponent"
@@ -326,13 +326,13 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
     data-test-id="multiSelectComp"
   >
     <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="multiSelectComp_textBox"
         data-selector-id="box"
         data-test-id="multiSelectComp_textBox"
@@ -342,11 +342,11 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
               "
         />
         <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"
@@ -369,13 +369,13 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
             />
           </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"
@@ -407,38 +407,38 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
         tabindex="-1"
       >
         <div
-          class="flex rowdir"
+          class="flex row"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="box flex cover coldir"
+              class="flex fullSize column box"
               data-id="containerComponent"
               data-selector-id="container"
               data-test-id="containerComponent"
             >
               <div
-                class="small grow basis shrinkOn scrolly"
+                class="flexible basis_zero shrink scroll_vertical small"
                 data-id="CardContent"
                 data-selector-id="cardContent"
                 data-test-id="CardContent"
               >
                 <div
-                  class="flex coldir"
+                  class="flex column"
                   data-id="containerComponent"
                   data-selector-id="container"
                   data-test-id="containerComponent"
                   tabindex="0"
                 >
                   <div
-                    class="shrinkOff"
+                    class="noShrink"
                     data-id="multiSelectComp_Options"
                     data-selector-id="box"
                     data-test-id="multiSelectComp_Options"
@@ -446,7 +446,7 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
                     <li
                       aria-label="Apple"
                       aria-selected="false"
-                      class="list medium  default defaultHover  mediumwithTick  withBorder  flex rowdir vCenter"
+                      class="flex row alignItems_center list medium  default defaultHover  mediumwithTick  withBorder"
                       data-a11y-inset-focus="true"
                       data-a11y-list-active="true"
                       data-id="Apple"
@@ -457,19 +457,19 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
                       tabindex="0"
                     >
                       <div
-                        class="leftBox grow basis shrinkOff"
+                        class="flexible basis_zero noShrink leftBox"
                         data-id="boxComponent"
                         data-selector-id="box"
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="titleBox   shrinkOff"
+                          class="noShrink titleBox"
                           data-id="boxComponent"
                           data-selector-id="box"
                           data-test-id="boxComponent"
                         >
                           <div
-                            class="selfAlign_center value basisAuto shrinkOn"
+                            class="basis_auto shrink selfAlign_center value"
                             data-id="boxComponent"
                             data-selector-id="box"
                             data-test-id="boxComponent"
@@ -482,7 +482,7 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
                     <li
                       aria-label="Orange"
                       aria-selected="false"
-                      class="list medium  default   mediumwithTick  withBorder  flex rowdir vCenter"
+                      class="flex row alignItems_center list medium  default   mediumwithTick  withBorder"
                       data-a11y-inset-focus="true"
                       data-a11y-list-active="false"
                       data-id="Orange"
@@ -493,19 +493,19 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
                       tabindex="0"
                     >
                       <div
-                        class="leftBox grow basis shrinkOff"
+                        class="flexible basis_zero noShrink leftBox"
                         data-id="boxComponent"
                         data-selector-id="box"
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="titleBox   shrinkOff"
+                          class="noShrink titleBox"
                           data-id="boxComponent"
                           data-selector-id="box"
                           data-test-id="boxComponent"
                         >
                           <div
-                            class="selfAlign_center value basisAuto shrinkOn"
+                            class="basis_auto shrink selfAlign_center value"
                             data-id="boxComponent"
                             data-selector-id="box"
                             data-test-id="boxComponent"