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

package/es/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ResponsiveDropBox rendering the defult props 1`] = `
 <DocumentFragment>
@@ -31,7 +31,7 @@ exports[`ResponsiveDropBox rendering the defult props 1`] = `
         />
       </div>
       <div
-        class="flex coldir"
+        class="flex column"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"

package/es/Ribbon/Ribbon.js

@@ -3,6 +3,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: [default, flag, plain, ribbon, box, stamp, sticker, small, medium, large, xlarge, palette_default, palette_danger, palette_primary, palette_secondary, palette_info, palette_dark, plain_default, plain_danger, plain_primary, plain_secondary, plain_info, plain_dark, tag] }] */
 
+import { cn } from "@dot-system/css-utility";
 import style from "./Ribbon.module.css";
 export default class Ribbon extends React.Component {
   render() {
@@ -17,35 +18,22 @@ export default class Ribbon extends React.Component {
       dataSelectorId
     } = this.props;
     return /*#__PURE__*/React.createElement("span", {
-      className: `${style.basic} ${customClass} ${type !== 'tag' ? type === 'plain' || type === 'box' || type === 'stamp' ? `${style[`plain_${palette}`]} 
-                 ${type === 'box' ? style[`box_${palette}`] : ''} ${type === 'stamp' ? style[`stamp_${palette}`] : ''}` : `${style[`palette_${palette}`]} ${type === 'default' ? style[`default_${palette}`] : ''}` : ''} ${style[size]} ${style[type]}`,
+      className: cn(`${style.basic} ${type !== 'tag' ? type === 'plain' || type === 'box' || type === 'stamp' ? `${style[`plain_${palette}`]} 
+                 ${type === 'box' ? style[`box_${palette}`] : ''} ${type === 'stamp' ? style[`stamp_${palette}`] : ''}` : `${style[`palette_${palette}`]} ${type === 'default' ? style[`default_${palette}`] : ''}` : ''} ${style[size]} ${style[type]} ${customClass} `),
       "data-id": dataId,
       "data-test-id": dataId,
       "data-selector-id": dataSelectorId
     }, type === 'sticker' ? /*#__PURE__*/React.createElement("span", {
-      className: style.after
+      className: cn(style.after)
     }) : null, children ? /*#__PURE__*/React.createElement("span", {
-      className: style.children
+      className: cn(style.children)
     }, children) : null, /*#__PURE__*/React.createElement("span", {
-      className: style.childText
+      className: cn(style.childText)
     }, text), type === 'sticker' ? /*#__PURE__*/React.createElement("span", {
-      className: style.before
+      className: cn(style.before)
     }) : null);
   }
 
 }
 Ribbon.propTypes = propTypes;
-Ribbon.defaultProps = defaultProps; // if (__DOCS__) {
-//   Ribbon.docs = {
-//     componentGroup: 'Atom',
-//     folderName: 'Style Guide',
-//     external: true,
-//     description: ' ',
-//     images: [
-//       {
-//         view: 'http://zsupport-tech-1.tsi.zohocorpin.com:8080/ui/general/Ribbon/v1/Ribbon.png',
-//         psd: 'http://zsupport-tech-1.tsi.zohocorpin.com:8080/ui/general/Ribbon/v1/Ribbon.psd'
-//       }
-//     ]
-//   };
-// }
+Ribbon.defaultProps = defaultProps;

package/es/Ribbon/__tests__/__snapshots__/Ribbon.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Label rendering children  1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_default default_default large default"
+    class="basic palette_default default_default large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -27,7 +27,7 @@ exports[`Label rendering children  1`] = `
 exports[`Label rendering the customClass 1`] = `
 <DocumentFragment>
   <span
-    class="basic ribbonCustomClass palette_default default_default large default"
+    class="basic palette_default default_default large default ribbonCustomClass"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -44,7 +44,7 @@ exports[`Label rendering the customClass 1`] = `
 exports[`Label rendering the defult props 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_default default_default large default"
+    class="basic palette_default default_default large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -61,7 +61,7 @@ exports[`Label rendering the defult props 1`] = `
 exports[`Label rendering the palette of- danger 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_danger default_danger large default"
+    class="basic palette_danger default_danger large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -78,7 +78,7 @@ exports[`Label rendering the palette of- danger 1`] = `
 exports[`Label rendering the palette of- dark 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_dark default_dark large default"
+    class="basic palette_dark default_dark large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -95,7 +95,7 @@ exports[`Label rendering the palette of- dark 1`] = `
 exports[`Label rendering the palette of- default 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_default default_default large default"
+    class="basic palette_default default_default large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -112,7 +112,7 @@ exports[`Label rendering the palette of- default 1`] = `
 exports[`Label rendering the palette of- info 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_info default_info large default"
+    class="basic palette_info default_info large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -129,7 +129,7 @@ exports[`Label rendering the palette of- info 1`] = `
 exports[`Label rendering the palette of- primary 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_primary default_primary large default"
+    class="basic palette_primary default_primary large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -146,7 +146,7 @@ exports[`Label rendering the palette of- primary 1`] = `
 exports[`Label rendering the palette of- secondary 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_secondary default_secondary large default"
+    class="basic palette_secondary default_secondary large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -163,7 +163,7 @@ exports[`Label rendering the palette of- secondary 1`] = `
 exports[`Label rendering the size - large 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_default default_default large default"
+    class="basic palette_default default_default large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -180,7 +180,7 @@ exports[`Label rendering the size - large 1`] = `
 exports[`Label rendering the size - medium 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_default default_default medium default"
+    class="basic palette_default default_default medium default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -197,7 +197,7 @@ exports[`Label rendering the size - medium 1`] = `
 exports[`Label rendering the size - small 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_default default_default small default"
+    class="basic palette_default default_default small default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -214,7 +214,7 @@ exports[`Label rendering the size - small 1`] = `
 exports[`Label rendering the size - xlarge 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_default default_default xlarge default"
+    class="basic palette_default default_default xlarge default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -231,8 +231,7 @@ exports[`Label rendering the size - xlarge 1`] = `
 exports[`Label rendering the type - box 1`] = `
 <DocumentFragment>
   <span
-    class="basic  plain_default 
-                 box_default  large box"
+    class="basic plain_default box_default large box"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -249,7 +248,7 @@ exports[`Label rendering the type - box 1`] = `
 exports[`Label rendering the type - default 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_default default_default large default"
+    class="basic palette_default default_default large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -266,7 +265,7 @@ exports[`Label rendering the type - default 1`] = `
 exports[`Label rendering the type - flag 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_default  large flag"
+    class="basic palette_default large flag"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -283,8 +282,7 @@ exports[`Label rendering the type - flag 1`] = `
 exports[`Label rendering the type - plain 1`] = `
 <DocumentFragment>
   <span
-    class="basic  plain_default 
-                   large plain"
+    class="basic plain_default large plain"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -301,7 +299,7 @@ exports[`Label rendering the type - plain 1`] = `
 exports[`Label rendering the type - ribbon 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_default  large ribbon"
+    class="basic palette_default large ribbon"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -318,8 +316,7 @@ exports[`Label rendering the type - ribbon 1`] = `
 exports[`Label rendering the type - stamp 1`] = `
 <DocumentFragment>
   <span
-    class="basic  plain_default 
-                  stamp_default large stamp"
+    class="basic plain_default stamp_default large stamp"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -336,7 +333,7 @@ exports[`Label rendering the type - stamp 1`] = `
 exports[`Label rendering the type - sticker 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_default  large sticker"
+    class="basic palette_default large sticker"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -359,7 +356,7 @@ exports[`Label rendering the type - sticker 1`] = `
 exports[`Label rendering the type - tag 1`] = `
 <DocumentFragment>
   <span
-    class="basic   large tag"
+    class="basic large tag"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"

package/es/RippleEffect/RippleEffect.js

@@ -18,7 +18,7 @@ export default function RippleEffect(props) {
   let className = isNeedEffect ? `${style.effect} ${style[palette]} ${needBorder ? style.border : ''} ${style[`${hoverType}Hover`] ? style[`${hoverType}Hover`] : ''} ${isActive && !isDisabled ? style.active : ''} ${isDisabled ? '' : style.hoverEffect} ${isCopyTextEnabled ? style.notAllowed : isDisabled ? CssProvider('isDisabled') : ''}` : '';
   let child = React.Children.only(children);
   return /*#__PURE__*/React.cloneElement(child, {
-    [cssClassPropOfChild]: `${child.props[cssClassPropOfChild] || ''} ${className}`
+    [cssClassPropOfChild]: `${className} ${child.props[cssClassPropOfChild] || ''}`
   });
 }
 RippleEffect.defaultProps = defaultProps;

package/es/RippleEffect/__tests__/__snapshots__/RippleEffect.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`RippleEffect rendering hoverType of- bg 1`] = `
 <DocumentFragment>
   <div
-    class=" effect default border bgHover  hoverEffect "
+    class="effect default border bgHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -13,7 +13,7 @@ exports[`RippleEffect rendering hoverType of- bg 1`] = `
 exports[`RippleEffect rendering hoverType of- border 1`] = `
 <DocumentFragment>
   <div
-    class=" effect default border borderHover  hoverEffect "
+    class="effect default border borderHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -23,7 +23,7 @@ exports[`RippleEffect rendering hoverType of- border 1`] = `
 exports[`RippleEffect rendering hoverType of- default 1`] = `
 <DocumentFragment>
   <div
-    class=" effect default border defaultHover  hoverEffect "
+    class="effect default border defaultHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -33,7 +33,7 @@ exports[`RippleEffect rendering hoverType of- default 1`] = `
 exports[`RippleEffect rendering isActive is true 1`] = `
 <DocumentFragment>
   <div
-    class=" effect default border defaultHover active hoverEffect "
+    class="effect default border defaultHover active hoverEffect"
   >
     RippleEffect
   </div>
@@ -43,7 +43,7 @@ exports[`RippleEffect rendering isActive is true 1`] = `
 exports[`RippleEffect rendering isCopyTextEnabled is false 1`] = `
 <DocumentFragment>
   <div
-    class=" effect default border defaultHover  hoverEffect notAllowed"
+    class="effect default border defaultHover hoverEffect notAllowed"
   >
     RippleEffect
   </div>
@@ -53,7 +53,7 @@ exports[`RippleEffect rendering isCopyTextEnabled is false 1`] = `
 exports[`RippleEffect rendering isDisabled is true 1`] = `
 <DocumentFragment>
   <div
-    class=" effect default border defaultHover   disabled"
+    class="effect default border defaultHover disabled"
   >
     RippleEffect
   </div>
@@ -63,7 +63,7 @@ exports[`RippleEffect rendering isDisabled is true 1`] = `
 exports[`RippleEffect rendering isNeedEffect is false 1`] = `
 <DocumentFragment>
   <div
-    class=" "
+    class=""
   >
     RippleEffect
   </div>
@@ -73,7 +73,7 @@ exports[`RippleEffect rendering isNeedEffect is false 1`] = `
 exports[`RippleEffect rendering needBorder is false 1`] = `
 <DocumentFragment>
   <div
-    class=" effect default  defaultHover  hoverEffect "
+    class="effect default defaultHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -83,7 +83,7 @@ exports[`RippleEffect rendering needBorder is false 1`] = `
 exports[`RippleEffect rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class=" effect default border defaultHover  hoverEffect "
+    class="effect default border defaultHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -93,7 +93,7 @@ exports[`RippleEffect rendering the defult props 1`] = `
 exports[`RippleEffect rendering the palette of- danger 1`] = `
 <DocumentFragment>
   <div
-    class=" effect danger border defaultHover  hoverEffect "
+    class="effect danger border defaultHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -103,7 +103,7 @@ exports[`RippleEffect rendering the palette of- danger 1`] = `
 exports[`RippleEffect rendering the palette of- default 1`] = `
 <DocumentFragment>
   <div
-    class=" effect default border defaultHover  hoverEffect "
+    class="effect default border defaultHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -113,7 +113,7 @@ exports[`RippleEffect rendering the palette of- default 1`] = `
 exports[`RippleEffect rendering the palette of- green 1`] = `
 <DocumentFragment>
   <div
-    class=" effect green border defaultHover  hoverEffect "
+    class="effect green border defaultHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -123,7 +123,7 @@ exports[`RippleEffect rendering the palette of- green 1`] = `
 exports[`RippleEffect rendering the palette of- primary 1`] = `
 <DocumentFragment>
   <div
-    class=" effect primary border defaultHover  hoverEffect "
+    class="effect primary border defaultHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -133,7 +133,7 @@ exports[`RippleEffect rendering the palette of- primary 1`] = `
 exports[`RippleEffect rendering the palette of- primaryDark 1`] = `
 <DocumentFragment>
   <div
-    class=" effect primaryDark border defaultHover  hoverEffect "
+    class="effect primaryDark border defaultHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -143,7 +143,7 @@ exports[`RippleEffect rendering the palette of- primaryDark 1`] = `
 exports[`RippleEffect rendering the palette of- primaryFilled 1`] = `
 <DocumentFragment>
   <div
-    class=" effect primaryFilled border defaultHover  hoverEffect "
+    class="effect primaryFilled border defaultHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -153,7 +153,7 @@ exports[`RippleEffect rendering the palette of- primaryFilled 1`] = `
 exports[`RippleEffect rendering the palette of- primaryLight 1`] = `
 <DocumentFragment>
   <div
-    class=" effect primaryLight border defaultHover  hoverEffect "
+    class="effect primaryLight border defaultHover hoverEffect"
   >
     RippleEffect
   </div>

package/es/Select/GroupSelect.js

@@ -19,6 +19,7 @@ import { Container, Box } from "../Layout";
 import { getUniqueId } from "../Provider/IdProvider";
 import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
 import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
+import { cn } from "@dot-system/css-utility";
 import style from "./Select.module.css";
 /**** Methods ****/
 
@@ -591,6 +592,7 @@ export class GroupSelectComponent extends PureComponent {
       htmlId,
       iconOnHover,
       isLoading,
+      shouldUseInternalLoader,
       dataSelectorId,
       customProps,
       customClass
@@ -631,14 +633,15 @@ export class GroupSelectComponent extends PureComponent {
       dropBox: dropBoxClass = '',
       cardContent: cardContentClass = ''
     } = customClass;
+    const isInitialEmptyOptions = searchStr.length === 0 && revampedGroups.length === 0;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
+      className: cn(`${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`),
       "data-id": dataIdSlctComp,
       "data-test-id": dataIdSlctComp,
       "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}`,
@@ -736,7 +739,7 @@ export class GroupSelectComponent extends PureComponent {
       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, {
@@ -745,7 +748,7 @@ export class GroupSelectComponent extends PureComponent {
       customClass: style.box,
       onScroll: this.handleScroll
     }, 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, {
       inputRef: this.searchInputRef,
       maxLength: maxLength,
@@ -776,7 +779,7 @@ export class GroupSelectComponent extends PureComponent {
       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: {
@@ -808,7 +811,7 @@ export class GroupSelectComponent extends PureComponent {
       isLoading: isFetchingOptions,
       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);

package/es/Select/Select.js

@@ -26,6 +26,7 @@ import { debounce, scrollTo, getIsEmptyValue, getSearchString, findScrollEnd, ge
 import { isRenderable, renderNode } from '@zohodesk/utils';
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./Select.module.css";
 /* eslint-disable react/no-deprecated */
 
@@ -218,10 +219,11 @@ export class SelectComponent extends Component {
     }
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps, prevState) {
     let {
       searchStr,
-      selectedValueIndex
+      selectedValueIndex,
+      hoverIndex
     } = this.state;
     let {
       needLocalSearch,
@@ -233,12 +235,13 @@ export class SelectComponent extends Component {
       isSearchClearOnClose
     } = this.props;
 
-    if (isPopupOpen) {
+    if ((prevState.hoverIndex !== hoverIndex || prevState.selectedValueIndex !== selectedValueIndex) && isPopupOpen) {
       this.scrollToHighlightedIndex();
     }
 
     if (prevProps.isPopupOpen !== isPopupOpen) {
       if (isPopupOpen) {
+        this.scrollToHighlightedIndex();
         onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
         setTimeout(() => {
           this.searchInput && this.searchInput.focus({
@@ -799,6 +802,7 @@ export class SelectComponent extends Component {
       autoComplete,
       ariaLabelledby,
       isLoading,
+      shouldUseInternalLoader,
       dataSelectorId,
       isAbsolutePositioningNeeded,
       positionsOffset,
@@ -843,6 +847,7 @@ export class SelectComponent extends Component {
       dropBox: dropBoxClass = '',
       cardContent: cardContentClass = ''
     } = customClass;
+    const isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
     const inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
       setAriaId,
       isReadOnly,
@@ -851,11 +856,11 @@ export class SelectComponent extends Component {
       inputFieldLineA11y
     });
     return /*#__PURE__*/React.createElement("div", {
-      className: `${isParentBased || isReadOnly || isDisabled ? style.container : ''} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
+      className: cn(`${isParentBased || isReadOnly || isDisabled ? style.container : ''} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`),
       "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}`,
@@ -1018,7 +1023,7 @@ export class SelectComponent 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(React.Fragment, null, !getChildren ? /*#__PURE__*/React.createElement(Box, {
@@ -1026,7 +1031,7 @@ export class SelectComponent extends Component {
     }, /*#__PURE__*/React.createElement(Card, {
       onScroll: this.handleScroll
     }, 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, {
       a11y: {
         ariaControls: setAriaId,
@@ -1085,7 +1090,7 @@ export class SelectComponent extends Component {
       getCustomEmptyState: getCustomEmptyState ? this.handleGetAddNewOptionText : null,
       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({

package/es/Select/SelectWithAvatar.js

@@ -22,6 +22,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/MultiSelect.module.css";
 import selectStyle from "./Select.module.css";
 
@@ -170,6 +171,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       htmlId,
       needEffect,
       isLoading,
+      shouldUseInternalLoader,
       dataSelectorId,
       getTargetRef,
       customProps,
@@ -204,8 +206,9 @@ class SelectWithAvatarComponent extends SelectComponent {
       dropBox: dropBoxClass = '',
       cardContent: cardContentClass = ''
     } = customClass;
+    const isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`,
+      className: cn(`${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`),
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : null,
@@ -213,7 +216,7 @@ class SelectWithAvatarComponent extends SelectComponent {
     }, /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
-      className: `${style.container} ${style[size]} ${style[`borderColor_${borderColor}`]} ${isActive && needBorder ? style.active : ''} ${textBoxClass ? textBoxClass : ''} ${needBorder ? style.hasBorder : ''}`,
+      className: `${style.container} ${style[size]} ${style[`borderColor_${borderColor}`]} ${isActive && needBorder ? style.active : ''}  ${needBorder ? style.hasBorder : ''} ${textBoxClass ? textBoxClass : ''}`,
       eleRef: getTargetRef,
       onClick: !isDisabled && this.togglePopup
     }, selectedId ? /*#__PURE__*/React.createElement(Box, {
@@ -289,7 +292,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       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, {
@@ -297,7 +300,7 @@ class SelectWithAvatarComponent extends SelectComponent {
     }, /*#__PURE__*/React.createElement(Card, {
       onScroll: this.handleScroll
     }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
-      className: `${selectStyle.search} ${selectStyle[size]}`
+      className: cn(`${selectStyle.search} ${selectStyle[size]}`)
     }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
       inputRef: this.searchInputRef,
       maxLength: maxLength,
@@ -319,7 +322,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       customClass: `${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''} ${cardContentClass}`,
       eleRef: this.suggestionContainerRef
     }, groupName ? /*#__PURE__*/React.createElement("div", {
-      className: style.title
+      className: cn(style.title)
     }, /*#__PURE__*/React.createElement(DropDownHeading, {
       text: groupName,
       a11y: {
@@ -351,7 +354,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       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);