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

package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNode & it's custom class 1`] = `
 <DocumentFragment>
   <li
-    class="list medium  default     withBorder  flex rowdir vCenter"
+    class="flex row alignItems_center list medium default withBorder"
     data-a11y-inset-focus="true"
     data-id="listItemWithRadioComp"
     data-selector-id="listItemWithRadio"
@@ -12,7 +12,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
     tabindex="0"
   >
     <div
-      class="contentWrapper shrinkOff"
+      class="noShrink contentWrapper"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -23,7 +23,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
         data-test-id="listItemWithRadioComp_radio"
       >
         <div
-          class="lhsBoxInner shrinkOff selfStart"
+          class="noShrink alignSelf_start lhsBoxInner"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -32,7 +32,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
             aria-checked="false"
             aria-hidden="true"
             aria-readonly="false"
-            class="container  pointer hoverEfffect   inflex rowdir both"
+            class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
             data-id="RadioComp"
             data-selector-id="container"
             data-test-id="RadioComp"
@@ -40,8 +40,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
             tabindex="-1"
           >
             <div
-              class="radio  
-            hoverprimary medium filled centerPathprimary    shrinkOff"
+              class="noShrink radio hoverprimary medium filled centerPathprimary"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -70,19 +69,19 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
         </div>
       </div>
       <div
-        class="leftBox selfAlign_center grow basis shrinkOff"
+        class="flexible basis_zero noShrink leftBox selfAlign_center"
         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="value basisAuto shrinkOn"
+            class="basis_auto shrink value"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -90,7 +89,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
             List
           </div>
           <div
-            class="customValueRightPlaceholderClass shrinkOff"
+            class="noShrink customValueRightPlaceholderClass"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -109,7 +108,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
 exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNode 1`] = `
 <DocumentFragment>
   <li
-    class="list medium  default     withBorder  flex rowdir vCenter"
+    class="flex row alignItems_center list medium default withBorder"
     data-a11y-inset-focus="true"
     data-id="listItemWithRadioComp"
     data-selector-id="listItemWithRadio"
@@ -118,7 +117,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
     tabindex="0"
   >
     <div
-      class="contentWrapper shrinkOff"
+      class="noShrink contentWrapper"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -129,7 +128,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
         data-test-id="listItemWithRadioComp_radio"
       >
         <div
-          class="lhsBoxInner shrinkOff selfStart"
+          class="noShrink alignSelf_start lhsBoxInner"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -138,7 +137,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
             aria-checked="false"
             aria-hidden="true"
             aria-readonly="false"
-            class="container  pointer hoverEfffect   inflex rowdir both"
+            class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
             data-id="RadioComp"
             data-selector-id="container"
             data-test-id="RadioComp"
@@ -146,8 +145,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
             tabindex="-1"
           >
             <div
-              class="radio  
-            hoverprimary medium filled centerPathprimary    shrinkOff"
+              class="noShrink radio hoverprimary medium filled centerPathprimary"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -176,19 +174,19 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
         </div>
       </div>
       <div
-        class="leftBox selfAlign_center grow basis shrinkOff"
+        class="flexible basis_zero noShrink leftBox selfAlign_center"
         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="value basisAuto shrinkOn"
+            class="basis_auto shrink value"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -196,7 +194,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
             List
           </div>
           <div
-            class="shrinkOff"
+            class="noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -215,7 +213,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
 exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS align center 1`] = `
 <DocumentFragment>
   <li
-    class="list medium  default     withBorder  flex rowdir vCenter"
+    class="flex row alignItems_center list medium default withBorder"
     data-a11y-inset-focus="true"
     data-id="listItemWithRadioComp"
     data-selector-id="listItemWithRadio"
@@ -224,7 +222,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
     tabindex="0"
   >
     <div
-      class="contentWrapper shrinkOff"
+      class="noShrink contentWrapper"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -235,7 +233,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
         data-test-id="listItemWithRadioComp_radio"
       >
         <div
-          class="shrinkOff selfCenter"
+          class="noShrink alignSelf_center"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -244,7 +242,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
             aria-checked="false"
             aria-hidden="true"
             aria-readonly="false"
-            class="container  pointer hoverEfffect   inflex rowdir both"
+            class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
             data-id="RadioComp"
             data-selector-id="container"
             data-test-id="RadioComp"
@@ -252,8 +250,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
             tabindex="-1"
           >
             <div
-              class="radio  
-            hoverprimary medium filled centerPathprimary    shrinkOff"
+              class="noShrink radio hoverprimary medium filled centerPathprimary"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -282,19 +279,19 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
         </div>
       </div>
       <div
-        class="leftBox selfAlign_center grow basis shrinkOff"
+        class="flexible basis_zero noShrink leftBox selfAlign_center"
         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="value basisAuto shrinkOn"
+            class="basis_auto shrink value"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -303,7 +300,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
           </div>
         </div>
         <div
-          class="secondaryField secondaryValue shrinkOff"
+          class="noShrink secondaryField secondaryValue"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -320,7 +317,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
 exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS align end 1`] = `
 <DocumentFragment>
   <li
-    class="list medium  default     withBorder  flex rowdir vCenter"
+    class="flex row alignItems_center list medium default withBorder"
     data-a11y-inset-focus="true"
     data-id="listItemWithRadioComp"
     data-selector-id="listItemWithRadio"
@@ -329,7 +326,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
     tabindex="0"
   >
     <div
-      class="contentWrapper shrinkOff"
+      class="noShrink contentWrapper"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -340,7 +337,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
         data-test-id="listItemWithRadioComp_radio"
       >
         <div
-          class="lhsBoxInner shrinkOff selfEnd"
+          class="noShrink alignSelf_end lhsBoxInner"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -349,7 +346,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
             aria-checked="false"
             aria-hidden="true"
             aria-readonly="false"
-            class="container  pointer hoverEfffect   inflex rowdir both"
+            class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
             data-id="RadioComp"
             data-selector-id="container"
             data-test-id="RadioComp"
@@ -357,8 +354,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
             tabindex="-1"
           >
             <div
-              class="radio  
-            hoverprimary medium filled centerPathprimary    shrinkOff"
+              class="noShrink radio hoverprimary medium filled centerPathprimary"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -387,19 +383,19 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
         </div>
       </div>
       <div
-        class="leftBox selfAlign_center grow basis shrinkOff"
+        class="flexible basis_zero noShrink leftBox selfAlign_center"
         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="value basisAuto shrinkOn"
+            class="basis_auto shrink value"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -408,7 +404,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
           </div>
         </div>
         <div
-          class="secondaryField secondaryValue shrinkOff"
+          class="noShrink secondaryField secondaryValue"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -425,7 +421,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
 exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
 <DocumentFragment>
   <li
-    class="list medium  default     withBorder  flex rowdir vCenter"
+    class="flex row alignItems_center list medium default withBorder"
     data-a11y-inset-focus="true"
     data-id="listItemWithRadioComp"
     data-selector-id="listItemWithRadio"
@@ -434,7 +430,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
     tabindex="0"
   >
     <div
-      class="contentWrapper shrinkOff"
+      class="noShrink contentWrapper"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -445,7 +441,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
         data-test-id="listItemWithRadioComp_radio"
       >
         <div
-          class="lhsBoxInner shrinkOff selfStart"
+          class="noShrink alignSelf_start lhsBoxInner"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -454,7 +450,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
             aria-checked="false"
             aria-hidden="true"
             aria-readonly="false"
-            class="container  pointer hoverEfffect   inflex rowdir both"
+            class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
             data-id="RadioComp"
             data-selector-id="container"
             data-test-id="RadioComp"
@@ -462,8 +458,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
             tabindex="-1"
           >
             <div
-              class="radio  
-            hoverprimary medium filled centerPathprimary    shrinkOff"
+              class="noShrink radio hoverprimary medium filled centerPathprimary"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -492,19 +487,19 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
         </div>
       </div>
       <div
-        class="leftBox selfAlign_center grow basis shrinkOff"
+        class="flexible basis_zero noShrink leftBox selfAlign_center"
         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="value basisAuto shrinkOn"
+            class="basis_auto shrink value"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -513,7 +508,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
           </div>
         </div>
         <div
-          class="secondaryField secondaryValue shrinkOff"
+          class="noShrink secondaryField secondaryValue"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -530,7 +525,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
 exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS align start 1`] = `
 <DocumentFragment>
   <li
-    class="list medium  default     withBorder  flex rowdir vCenter"
+    class="flex row alignItems_center list medium default withBorder"
     data-a11y-inset-focus="true"
     data-id="listItemWithRadioComp"
     data-selector-id="listItemWithRadio"
@@ -539,7 +534,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS al
     tabindex="0"
   >
     <div
-      class="contentWrapper shrinkOff"
+      class="noShrink contentWrapper"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -550,7 +545,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS al
         data-test-id="listItemWithRadioComp_radio"
       >
         <div
-          class="lhsBoxInner shrinkOff selfStart"
+          class="noShrink alignSelf_start lhsBoxInner"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -559,7 +554,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS al
             aria-checked="false"
             aria-hidden="true"
             aria-readonly="false"
-            class="container  pointer hoverEfffect   inflex rowdir both"
+            class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
             data-id="RadioComp"
             data-selector-id="container"
             data-test-id="RadioComp"
@@ -567,8 +562,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS al
             tabindex="-1"
           >
             <div
-              class="radio  
-            hoverprimary medium filled centerPathprimary    shrinkOff"
+              class="noShrink radio hoverprimary medium filled centerPathprimary"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -597,19 +591,19 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS al
         </div>
       </div>
       <div
-        class="leftBox selfAlign_center grow basis shrinkOff"
+        class="flexible basis_zero noShrink leftBox selfAlign_center"
         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="value basisAuto shrinkOn"
+            class="basis_auto shrink value"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -618,7 +612,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS al
           </div>
         </div>
         <div
-          class="secondaryField secondaryValue shrinkOff"
+          class="noShrink secondaryField secondaryValue"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -635,7 +629,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS al
 exports[`ListItemWithRadio rendering the defult props 1`] = `
 <DocumentFragment>
   <li
-    class="list medium  default     withBorder  flex rowdir vCenter"
+    class="flex row alignItems_center list medium default withBorder"
     data-a11y-inset-focus="true"
     data-id="listItemWithRadioComp"
     data-selector-id="listItemWithRadio"
@@ -644,7 +638,7 @@ exports[`ListItemWithRadio rendering the defult props 1`] = `
     tabindex="0"
   >
     <div
-      class="contentWrapper shrinkOff"
+      class="noShrink contentWrapper"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -655,7 +649,7 @@ exports[`ListItemWithRadio rendering the defult props 1`] = `
         data-test-id="listItemWithRadioComp_radio"
       >
         <div
-          class="lhsBoxInner shrinkOff selfStart"
+          class="noShrink alignSelf_start lhsBoxInner"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -664,7 +658,7 @@ exports[`ListItemWithRadio rendering the defult props 1`] = `
             aria-checked="false"
             aria-hidden="true"
             aria-readonly="false"
-            class="container  pointer hoverEfffect   inflex rowdir both"
+            class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
             data-id="RadioComp"
             data-selector-id="container"
             data-test-id="RadioComp"
@@ -672,8 +666,7 @@ exports[`ListItemWithRadio rendering the defult props 1`] = `
             tabindex="-1"
           >
             <div
-              class="radio  
-            hoverprimary medium filled centerPathprimary    shrinkOff"
+              class="noShrink radio hoverprimary medium filled centerPathprimary"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -702,19 +695,19 @@ exports[`ListItemWithRadio rendering the defult props 1`] = `
         </div>
       </div>
       <div
-        class="leftBox selfAlign_center grow basis shrinkOff"
+        class="flexible basis_zero noShrink leftBox selfAlign_center"
         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="value basisAuto shrinkOn"
+            class="basis_auto shrink value"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"

package/es/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/es/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/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -27,6 +27,7 @@ import { DUMMY_OBJECT } from "./../utils/Common";
 import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./MultiSelect.module.css";
 /**** Methods ****/
 
@@ -922,7 +923,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     const isShowClearIcon = !isReadOnly && !isDisabled && selectedGroupOptions.length > 1;
     const isEditable = !(isReadOnly || isDisabled);
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
+      className: cn(`${style.wrapper} ${isDisabled ? style.disabled : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`),
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : null,
@@ -955,8 +956,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       adjust: true,
       shrink: true
     }, /*#__PURE__*/React.createElement("span", {
-      className: ` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
-              `
+      className: cn(` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
+              `)
     }, searchStr), /*#__PURE__*/React.createElement(TextBoxIcon, {
       isDisabled: isDisabled,
       inputRef: this.searchInputRef,
@@ -1052,7 +1053,7 @@ class AdvancedGroupMultiSelect extends React.Component {
       return /*#__PURE__*/React.createElement(React.Fragment, {
         key: groupId
       }, groupName && /*#__PURE__*/React.createElement("div", {
-        className: style.groupTitle
+        className: cn(style.groupTitle)
       }, /*#__PURE__*/React.createElement(DropDownHeading, {
         text: groupName,
         a11y: {
@@ -1084,11 +1085,11 @@ class AdvancedGroupMultiSelect extends React.Component {
       i18nKeys: i18nKeys,
       htmlId: ariaErrorId
     }), isNextOptions && /*#__PURE__*/React.createElement("div", {
-      className: style.loader
+      className: cn(style.loader)
     }, /*#__PURE__*/React.createElement(Loader, null)))) : /*#__PURE__*/React.createElement("div", {
-      className: style.loader
+      className: cn(style.loader)
     }, /*#__PURE__*/React.createElement(Loader, null)), getFooter ? isDataLoaded ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : /*#__PURE__*/React.createElement("div", {
-      className: style.loader
+      className: cn(style.loader)
     }, /*#__PURE__*/React.createElement(Loader, null)) : null)))) : null);
   }
 

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -23,6 +23,7 @@ import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./MultiSelect.module.css";
 /**** Methods ****/
 
@@ -382,6 +383,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       needEffect,
       disabledOptions,
       isLoading,
+      shouldUseInternalLoader,
       dataSelectorId,
       customClass,
       isAbsolutePositioningNeeded,
@@ -433,8 +435,9 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     });
     let isShowClearIcon = !isReadOnly && !isDisabled && isShowClear;
     const isEditable = !(isReadOnly || isDisabled);
+    const isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${containerClass}`,
+      className: cn(`${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${containerClass}`),
       "data-id": dataIdMultiSelectComp,
       "data-test-id": dataIdMultiSelectComp,
       "data-title": isDisabled ? title : null,
@@ -465,8 +468,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       shrink: true,
       dataId: `${dataIdMultiSelectComp}_textBox`
     }, /*#__PURE__*/React.createElement("span", {
-      className: ` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
-              `
+      className: cn(` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
+              `)
     }, searchStr), /*#__PURE__*/React.createElement(TextBoxIcon, {
       isDisabled: isDisabled,
       inputRef: this.searchInputRef,
@@ -536,7 +539,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     }, DropBoxProps, {
       alignBox: "row",
       isResponsivePadding: getFooter ? false : true
-    }), 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, {
@@ -577,7 +580,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       dataId: dataIdLoading,
       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))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)))) : null);