@zohodesk/components 1.6.18 → 1.6.20

package/README.md

@@ -2,6 +2,22 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+# 1.6.20
+
+**Select**, **MultiSelect**, **GroupSelect**, **SelectWithAvatar**, **SelectWithIcon**, **MultiSelectWithAvatar**, **AdvancedMultiSelect**
+- `shouldUseInternalLoader` prop introduced
+- It controls whether the component manages fetch-more loading visibility internally via `isFetchingOptions` state, or delegates it to the external `isLoading` prop
+
+**Select**, **MultiSelect**
+- Unwanted scroll to highlighted option function excution stopped - Performance fix
+
+# 1.6.19
+
+- **DropBoxElement**
+  - `getSubContainerRef` prop supported to get the sub-container element reference.
+- **Popup**
+  - Popup Unmount Memory Leak Issue Resolved  .
+
 # 1.6.18
 
 - buttonComponentVersion temproary support given in LibraryContext , will remove once app is migrated
@@ -21,7 +37,6 @@ Dot UI is a customizable React component library built to deliver a clean, acces
 - **Select**
   - Added `closePopup` callback support to `getFooter` prop, allowing footer actions to close the popup programmatically.
 
-
 # 1.6.14
 
 - **v1/Button**

package/es/DropBox/DropBox.js

@@ -23,8 +23,15 @@ export default function DropBox(props) {
     isRestrictScroll,
     needFocusScope,
     onClose,
-    customProps
+    customProps,
+    getSubContainerRef
   } = props;
+
+  const setDropBoxRef = ele => {
+    getSubContainerRef && getSubContainerRef(ele);
+    dropBoxRef.current = ele;
+  };
+
   const {
     focusScopeProps = {}
   } = customProps;
@@ -55,10 +62,10 @@ export default function DropBox(props) {
     direction: direction
   }, props, {
     zIndexStyle: zIndexStyle,
-    subContainerRef: dropBoxRef
+    getSubContainerRef: setDropBoxRef
   }))) : /*#__PURE__*/React.createElement(DropBoxElement, _extends({
     isModel: isModel,
-    subContainerRef: dropBoxRef,
+    getSubContainerRef: setDropBoxRef,
     direction: direction
   }, props, {
     zIndexStyle: zIndexStyle

package/es/DropBox/DropBoxElement/DropBoxElement.js

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-unknown-property */
-import React from 'react';
+import React, { useRef, useCallback } from 'react';
 import useDropboxPosCalc from "./useDropboxPosCalc";
 import cssJSLogic from "./css/cssJSLogic";
 import { positionMapping } from '@zohodesk/dotkit/es/react/components/Popup/utils/positioning';
@@ -27,13 +27,15 @@ export default function DropBoxElement(props) {
     tabIndex,
     palette,
     subContainerRef,
+    getSubContainerRef,
     customStyle,
     animationStyle
   } = props;
   let isAbsolute = isAbsolutePositioningNeeded;
+  const internalSubContainerRef = useRef(null);
 
   const FireOnAnimationEnd = () => {
-    let eleClassList = subContainerRef && subContainerRef.current.classList;
+    let eleClassList = internalSubContainerRef.current && internalSubContainerRef.current.classList;
     let animationStyles = animationStyle == 'default' ? style.fadeInScale : style[animationStyle];
     animationStyles.split(' ').map(rmStyle => {
       if (eleClassList && eleClassList.contains(rmStyle)) {
@@ -54,6 +56,16 @@ export default function DropBoxElement(props) {
     }
   };
 
+  const setSubContainerRef = useCallback(ele => {
+    internalSubContainerRef.current = ele; // Backward compatability: legacy `subContainerRef`.
+
+    if (subContainerRef) {
+      subContainerRef.current = ele;
+    }
+
+    getSubContainerRef && getSubContainerRef(ele);
+  }, [subContainerRef, getSubContainerRef]);
+
   if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
     isAbsolute = true;
   }
@@ -120,7 +132,7 @@ export default function DropBoxElement(props) {
     "data-id": `${dataId}_subcontainer`,
     "data-test-id": `${dataId}_subcontainer`,
     "data-selector-id": `${dataSelectorId}_subcontainer`,
-    ref: subContainerRef
+    ref: setSubContainerRef
   }, isModel ? /*#__PURE__*/React.createElement("div", {
     className: style.closeBar
   }) : null, isArrow && !isModel && /*#__PURE__*/React.createElement("div", {

package/es/DropBox/DropBoxElement/props/propTypes.js

@@ -47,5 +47,6 @@ export const DropBoxElementPropTypes = {
   positionsOffset: PropTypes.object,
   targetOffset: PropTypes.object,
   zIndexStyle: PropTypes.object,
-  subContainerRef: PropTypes.func
+  subContainerRef: PropTypes.func,
+  getSubContainerRef: PropTypes.func
 };

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -382,6 +382,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       needEffect,
       disabledOptions,
       isLoading,
+      shouldUseInternalLoader,
       dataSelectorId,
       customClass,
       isAbsolutePositioningNeeded,
@@ -433,6 +434,7 @@ 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}`,
       "data-id": dataIdMultiSelectComp,
@@ -536,7 +538,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 +579,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);

package/es/MultiSelect/MultiSelect.js

@@ -190,7 +190,8 @@ export class MultiSelectComponent extends React.Component {
 
   componentDidUpdate(prevProps, prevState) {
     const {
-      searchStr
+      searchStr,
+      hoverOption
     } = this.state;
     const {
       needLocalSearch,
@@ -201,9 +202,10 @@ export class MultiSelectComponent extends React.Component {
     } = this.props; //handle dropbox open & close
 
     if (prevProps.isPopupOpen !== isPopupOpen) {
-      isPopupOpen && onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
-
-      if (!isPopupOpen) {
+      if (isPopupOpen) {
+        this.scrollToHighlightedIndex();
+        onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
+      } else {
         this.setState({
           hoverOption: 0
         });
@@ -212,7 +214,7 @@ export class MultiSelectComponent extends React.Component {
       }
     }
 
-    if (isPopupOpen) {
+    if (prevState.hoverOption !== hoverOption && isPopupOpen) {
       this.scrollToHighlightedIndex();
     } //When suggestions length less than 5, getNextOptions function call
 
@@ -1086,6 +1088,7 @@ export class MultiSelectComponent extends React.Component {
       needEffect,
       boxSize,
       isLoading,
+      shouldUseInternalLoader,
       selectAllText,
       needSelectAll,
       isVirtualizerEnabled,
@@ -1116,6 +1119,7 @@ export class MultiSelectComponent extends React.Component {
     let {
       SuggestionsProps
     } = customProps;
+    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}`,
@@ -1165,7 +1169,7 @@ export class MultiSelectComponent extends React.Component {
       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, {
@@ -1201,7 +1205,7 @@ export class MultiSelectComponent extends React.Component {
       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))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null))) : null);

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/props/defaultProps.js

@@ -70,6 +70,7 @@ export const AdvancedMultiSelect_defaultProps = {
   customProps: {},
   needEffect: true,
   isLoading: false,
+  shouldUseInternalLoader: true,
   dataSelectorId: 'advancedMultiSelect',
   customClass: {},
   isAbsolutePositioningNeeded: true,
@@ -117,6 +118,7 @@ export const MultiSelect_defaultProps = {
   needEffect: true,
   boxSize: 'default',
   isLoading: false,
+  shouldUseInternalLoader: true,
   dataSelectorId: 'multiSelect',
   keepSelectedOptions: false,
   selectedOptionsCount: 0,
@@ -157,6 +159,7 @@ export const MultiSelectWithAvatar_defaultProps = {
   isRestrictScroll: false,
   needEffect: true,
   isLoading: false,
+  shouldUseInternalLoader: true,
   dataSelectorId: 'multiSelectWithAvatar',
   keepSelectedOptions: false,
   customProps: {},

package/es/MultiSelect/props/propTypes.js

@@ -109,6 +109,7 @@ export const MultiSelect_propTypes = {
   positionsOffset: PropTypes.object,
   targetOffset: PropTypes.object,
   isLoading: PropTypes.bool,
+  shouldUseInternalLoader: PropTypes.bool,
   dataSelectorId: PropTypes.string,
   keepSelectedOptions: PropTypes.bool,
   needSelectAll: PropTypes.bool,

package/es/Select/GroupSelect.js

@@ -591,6 +591,7 @@ export class GroupSelectComponent extends PureComponent {
       htmlId,
       iconOnHover,
       isLoading,
+      shouldUseInternalLoader,
       dataSelectorId,
       customProps,
       customClass
@@ -631,6 +632,7 @@ 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 : ''}`,
       "data-id": dataIdSlctComp,
@@ -736,7 +738,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, {
@@ -808,7 +810,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

@@ -218,10 +218,11 @@ export class SelectComponent extends Component {
     }
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps, prevState) {
     let {
       searchStr,
-      selectedValueIndex
+      selectedValueIndex,
+      hoverIndex
     } = this.state;
     let {
       needLocalSearch,
@@ -233,12 +234,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 +801,7 @@ export class SelectComponent extends Component {
       autoComplete,
       ariaLabelledby,
       isLoading,
+      shouldUseInternalLoader,
       dataSelectorId,
       isAbsolutePositioningNeeded,
       positionsOffset,
@@ -843,6 +846,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,
@@ -1018,7 +1022,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, {
@@ -1085,7 +1089,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

@@ -170,6 +170,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       htmlId,
       needEffect,
       isLoading,
+      shouldUseInternalLoader,
       dataSelectorId,
       getTargetRef,
       customProps,
@@ -204,6 +205,7 @@ 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 : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -289,7 +291,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, {
@@ -351,7 +353,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);

package/es/Select/SelectWithIcon.js

@@ -357,6 +357,7 @@ class SelectWithIcon extends Component {
       i18nKeys,
       htmlId,
       isLoading,
+      shouldUseInternalLoader,
       dataSelectorId,
       customProps,
       customClass
@@ -383,6 +384,7 @@ 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 : ''}`,
       "data-title": isDisabled ? title : null,
@@ -480,7 +482,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, {
@@ -556,7 +558,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/props/defaultProps.js

@@ -35,6 +35,7 @@ export const Select_defaultProps = {
   iconOnHover: false,
   customProps: {},
   isLoading: false,
+  shouldUseInternalLoader: true,
   isAbsolutePositioningNeeded: true,
   allowValueFallback: true,
   inputFieldLineA11y: {},
@@ -75,6 +76,7 @@ export const GroupSelect_defaultProps = {
   i18nKeys: {},
   iconOnHover: false,
   isLoading: false,
+  shouldUseInternalLoader: true,
   customProps: {},
   allowValueFallback: true,
   customClass: {}
@@ -105,6 +107,7 @@ export const SelectWithAvatar_defaultProps = {
   customProps: {},
   needEffect: true,
   isLoading: false,
+  shouldUseInternalLoader: true,
   customProps: {},
   customClass: {}
 };
@@ -133,6 +136,7 @@ export const SelectWithIcon_defaultProps = {
   iconSize: '14',
   i18nKeys: {},
   isLoading: false,
+  shouldUseInternalLoader: true,
   isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
   customProps: {},

package/es/Select/props/propTypes.js

@@ -92,6 +92,7 @@ export const Select_propTypes = {
     InputFieldLineProps: PropTypes.object
   }),
   isLoading: PropTypes.bool,
+  shouldUseInternalLoader: PropTypes.bool,
   dataSelectorId: PropTypes.string,
   isAbsolutePositioningNeeded: PropTypes.bool,
   openPopupOnly: PropTypes.bool,
@@ -189,6 +190,7 @@ export const GroupSelect_propTypes = {
     searchEmptyText: PropTypes.string
   }),
   isLoading: PropTypes.bool,
+  shouldUseInternalLoader: PropTypes.bool,
   dataSelectorId: PropTypes.string,
   isDefaultSelectValue: PropTypes.bool,
   customProps: PropTypes.shape({
@@ -316,6 +318,7 @@ export const SelectWithIcon_propTypes = {
   valueKey: PropTypes.string,
   htmlId: PropTypes.string,
   isLoading: PropTypes.bool,
+  shouldUseInternalLoader: PropTypes.bool,
   dataSelectorId: PropTypes.string,
   title: PropTypes.string,
   className: PropTypes.string,

package/lib/DropBox/DropBox.js

@@ -47,7 +47,14 @@ function DropBox(props) {
       isRestrictScroll = props.isRestrictScroll,
       needFocusScope = props.needFocusScope,
       onClose = props.onClose,
-      customProps = props.customProps;
+      customProps = props.customProps,
+      getSubContainerRef = props.getSubContainerRef;
+
+  var setDropBoxRef = function setDropBoxRef(ele) {
+    getSubContainerRef && getSubContainerRef(ele);
+    dropBoxRef.current = ele;
+  };
+
   var _customProps$focusSco = customProps.focusScopeProps,
       focusScopeProps = _customProps$focusSco === void 0 ? {} : _customProps$focusSco;
   var _focusScopeProps$need = focusScopeProps.needAutoFocus,
@@ -82,10 +89,10 @@ function DropBox(props) {
     direction: direction
   }, props, {
     zIndexStyle: zIndexStyle,
-    subContainerRef: dropBoxRef
+    getSubContainerRef: setDropBoxRef
   }))) : /*#__PURE__*/_react["default"].createElement(_DropBoxElement["default"], _extends({
     isModel: isModel,
-    subContainerRef: dropBoxRef,
+    getSubContainerRef: setDropBoxRef,
     direction: direction
   }, props, {
     zIndexStyle: zIndexStyle

package/lib/DropBox/DropBoxElement/DropBoxElement.js

@@ -1,11 +1,13 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = DropBoxElement;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _useDropboxPosCalc2 = _interopRequireDefault(require("./useDropboxPosCalc"));
 
@@ -23,6 +25,10 @@ var _DropBoxElementModule = _interopRequireDefault(require("./css/DropBoxElement
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /* eslint-disable react/no-unknown-property */
 function DropBoxElement(props) {
   var children = props.children,
@@ -43,12 +49,14 @@ function DropBoxElement(props) {
       tabIndex = props.tabIndex,
       palette = props.palette,
       subContainerRef = props.subContainerRef,
+      getSubContainerRef = props.getSubContainerRef,
       customStyle = props.customStyle,
       animationStyle = props.animationStyle;
   var isAbsolute = isAbsolutePositioningNeeded;
+  var internalSubContainerRef = (0, _react.useRef)(null);
 
   var FireOnAnimationEnd = function FireOnAnimationEnd() {
-    var eleClassList = subContainerRef && subContainerRef.current.classList;
+    var eleClassList = internalSubContainerRef.current && internalSubContainerRef.current.classList;
     var animationStyles = animationStyle == 'default' ? _DropBoxElementModule["default"].fadeInScale : _DropBoxElementModule["default"][animationStyle];
     animationStyles.split(' ').map(function (rmStyle) {
       if (eleClassList && eleClassList.contains(rmStyle)) {
@@ -67,6 +75,16 @@ function DropBoxElement(props) {
     }
   };
 
+  var setSubContainerRef = (0, _react.useCallback)(function (ele) {
+    internalSubContainerRef.current = ele; // Backward compatability: legacy `subContainerRef`.
+
+    if (subContainerRef) {
+      subContainerRef.current = ele;
+    }
+
+    getSubContainerRef && getSubContainerRef(ele);
+  }, [subContainerRef, getSubContainerRef]);
+
   if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
     isAbsolute = true;
   }
@@ -132,7 +150,7 @@ function DropBoxElement(props) {
     "data-id": "".concat(dataId, "_subcontainer"),
     "data-test-id": "".concat(dataId, "_subcontainer"),
     "data-selector-id": "".concat(dataSelectorId, "_subcontainer"),
-    ref: subContainerRef
+    ref: setSubContainerRef
   }, isModel ? /*#__PURE__*/_react["default"].createElement("div", {
     className: _DropBoxElementModule["default"].closeBar
   }) : null, isArrow && !isModel && /*#__PURE__*/_react["default"].createElement("div", {

package/lib/DropBox/DropBoxElement/props/propTypes.js

@@ -57,6 +57,7 @@ var DropBoxElementPropTypes = {
   positionsOffset: _propTypes["default"].object,
   targetOffset: _propTypes["default"].object,
   zIndexStyle: _propTypes["default"].object,
-  subContainerRef: _propTypes["default"].func
+  subContainerRef: _propTypes["default"].func,
+  getSubContainerRef: _propTypes["default"].func
 };
 exports.DropBoxElementPropTypes = DropBoxElementPropTypes;

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -453,6 +453,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           needEffect = _this$props6.needEffect,
           disabledOptions = _this$props6.disabledOptions,
           isLoading = _this$props6.isLoading,
+          shouldUseInternalLoader = _this$props6.shouldUseInternalLoader,
           dataSelectorId = _this$props6.dataSelectorId,
           customClass = _this$props6.customClass,
           isAbsolutePositioningNeeded = _this$props6.isAbsolutePositioningNeeded,
@@ -502,6 +503,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
 
       var isShowClearIcon = !isReadOnly && !isDisabled && isShowClear;
       var isEditable = !(isReadOnly || isDisabled);
+      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(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(containerClass),
         "data-id": dataIdMultiSelectComp,
@@ -604,7 +606,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         }, DropBoxProps, {
           alignBox: "row",
           isResponsivePadding: getFooter ? false : true
-        }), 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, {
@@ -645,7 +647,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           dataId: dataIdLoading,
           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))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : null)));

package/lib/MultiSelect/MultiSelect.js

@@ -270,7 +270,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
-      var searchStr = this.state.searchStr;
+      var _this$state2 = this.state,
+          searchStr = _this$state2.searchStr,
+          hoverOption = _this$state2.hoverOption;
       var _this$props2 = this.props,
           needLocalSearch = _this$props2.needLocalSearch,
           isPopupOpen = _this$props2.isPopupOpen,
@@ -279,9 +281,10 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isSearchClearOnClose = _this$props2.isSearchClearOnClose; //handle dropbox open & close
 
       if (prevProps.isPopupOpen !== isPopupOpen) {
-        isPopupOpen && onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
-
-        if (!isPopupOpen) {
+        if (isPopupOpen) {
+          this.scrollToHighlightedIndex();
+          onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
+        } else {
           this.setState({
             hoverOption: 0
           });
@@ -290,7 +293,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         }
       }
 
-      if (isPopupOpen) {
+      if (prevState.hoverOption !== hoverOption && isPopupOpen) {
         this.scrollToHighlightedIndex();
       } //When suggestions length less than 5, getNextOptions function call
 
@@ -366,10 +369,10 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
     key: "handleInputCick",
     value: function handleInputCick(e) {
       var removeClose = this.props.removeClose;
-      var _this$state2 = this.state,
-          highLightedSelectOptions = _this$state2.highLightedSelectOptions,
-          _this$state2$searchSt = _this$state2.searchStr,
-          searchStr = _this$state2$searchSt === void 0 ? '' : _this$state2$searchSt;
+      var _this$state3 = this.state,
+          highLightedSelectOptions = _this$state3.highLightedSelectOptions,
+          _this$state3$searchSt = _this$state3.searchStr,
+          searchStr = _this$state3$searchSt === void 0 ? '' : _this$state3$searchSt;
 
       if (highLightedSelectOptions.length) {
         this.setState({
@@ -387,11 +390,11 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleFilterSuggestions",
     value: function handleFilterSuggestions() {
-      var _this$state3 = this.state,
-          _this$state3$options = _this$state3.options,
-          options = _this$state3$options === void 0 ? dummyArray : _this$state3$options,
-          _this$state3$searchSt = _this$state3.searchStr,
-          searchStr = _this$state3$searchSt === void 0 ? '' : _this$state3$searchSt;
+      var _this$state4 = this.state,
+          _this$state4$options = _this$state4.options,
+          options = _this$state4$options === void 0 ? dummyArray : _this$state4$options,
+          _this$state4$searchSt = _this$state4.searchStr,
+          searchStr = _this$state4$searchSt === void 0 ? '' : _this$state4$searchSt;
       var _this$props4 = this.props,
           selectedOptions = _this$props4.selectedOptions,
           needLocalSearch = _this$props4.needLocalSearch,
@@ -420,13 +423,13 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           metaKey = e.metaKey,
           shiftKey = e.shiftKey;
       var suggestions = [];
-      var _this$state4 = this.state,
-          hoverOption = _this$state4.hoverOption,
-          searchStr = _this$state4.searchStr,
-          highLightedSelectOptions = _this$state4.highLightedSelectOptions,
-          lastHighLightedSelectOption = _this$state4.lastHighLightedSelectOption,
-          shiftKeyPressHighLighted = _this$state4.shiftKeyPressHighLighted,
-          selectedOptions = _this$state4.selectedOptionIds;
+      var _this$state5 = this.state,
+          hoverOption = _this$state5.hoverOption,
+          searchStr = _this$state5.searchStr,
+          highLightedSelectOptions = _this$state5.highLightedSelectOptions,
+          lastHighLightedSelectOption = _this$state5.lastHighLightedSelectOption,
+          shiftKeyPressHighLighted = _this$state5.shiftKeyPressHighLighted,
+          selectedOptions = _this$state5.selectedOptionIds;
       var _this$props5 = this.props,
           isNextOptions = _this$props5.isNextOptions,
           getNextOptions = _this$props5.getNextOptions,
@@ -646,10 +649,10 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       var _this$props7 = this.props,
           selectedOptions = _this$props7.selectedOptions,
           isReadOnly = _this$props7.isReadOnly;
-      var _this$state5 = this.state,
-          highLightedSelectOptions = _this$state5.highLightedSelectOptions,
-          lastHighLightedSelectOption = _this$state5.lastHighLightedSelectOption,
-          shiftKeyPressHighLighted = _this$state5.shiftKeyPressHighLighted;
+      var _this$state6 = this.state,
+          highLightedSelectOptions = _this$state6.highLightedSelectOptions,
+          lastHighLightedSelectOption = _this$state6.lastHighLightedSelectOption,
+          shiftKeyPressHighLighted = _this$state6.shiftKeyPressHighLighted;
 
       if (newOptions.length && !isReadOnly) {
         var newSelectedOptions = selectedOptions.filter(function (option) {
@@ -768,9 +771,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
       var e = arguments.length > 1 ? arguments[1] : undefined;
       var selectedOptions = this.props.selectedOptions;
-      var _this$state6 = this.state,
-          highLightedSelectOptions = _this$state6.highLightedSelectOptions,
-          lastHighLightedSelectOption = _this$state6.lastHighLightedSelectOption;
+      var _this$state7 = this.state,
+          highLightedSelectOptions = _this$state7.highLightedSelectOptions,
+          lastHighLightedSelectOption = _this$state7.lastHighLightedSelectOption;
       var metaKey = e.metaKey,
           ctrlKey = e.ctrlKey,
           shiftKey = e.shiftKey;
@@ -925,9 +928,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleActive",
     value: function handleActive(e) {
-      var _this$state7 = this.state,
-          searchStr = _this$state7.searchStr,
-          isActive = _this$state7.isActive;
+      var _this$state8 = this.state,
+          searchStr = _this$state8.searchStr,
+          isActive = _this$state8.isActive;
 
       if (!isActive) {
         this.setState({
@@ -1023,11 +1026,11 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isPopupReady = _this$props14.isPopupReady,
           renderCustomClearComponent = _this$props14.renderCustomClearComponent,
           renderCustomToggleIndicator = _this$props14.renderCustomToggleIndicator;
-      var _this$state8 = this.state,
-          isActive = _this$state8.isActive,
-          selectedOptions = _this$state8.selectedOptions,
-          highLightedSelectOptions = _this$state8.highLightedSelectOptions,
-          searchStr = _this$state8.searchStr;
+      var _this$state9 = this.state,
+          isActive = _this$state9.isActive,
+          selectedOptions = _this$state9.selectedOptions,
+          highLightedSelectOptions = _this$state9.highLightedSelectOptions,
+          searchStr = _this$state9.searchStr;
       var _i18nKeys$clearText = i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? _constants.MULTISELECT_I18N_KEYS.clearText : _i18nKeys$clearText;
       var _a11y$clearLabel = a11y.clearLabel,
@@ -1170,18 +1173,19 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           needEffect = _this$props15.needEffect,
           boxSize = _this$props15.boxSize,
           isLoading = _this$props15.isLoading,
+          shouldUseInternalLoader = _this$props15.shouldUseInternalLoader,
           selectAllText = _this$props15.selectAllText,
           needSelectAll = _this$props15.needSelectAll,
           isVirtualizerEnabled = _this$props15.isVirtualizerEnabled,
           limit = _this$props15.limit,
           customProps = _this$props15.customProps;
-      var _this$state9 = this.state,
-          selectedOptions = _this$state9.selectedOptions,
-          searchStr = _this$state9.searchStr,
-          hoverOption = _this$state9.hoverOption,
-          options = _this$state9.options,
-          isFetchingOptions = _this$state9.isFetchingOptions,
-          selectedOptionIds = _this$state9.selectedOptionIds;
+      var _this$state10 = this.state,
+          selectedOptions = _this$state10.selectedOptions,
+          searchStr = _this$state10.searchStr,
+          hoverOption = _this$state10.hoverOption,
+          options = _this$state10.options,
+          isFetchingOptions = _this$state10.isFetchingOptions,
+          selectedOptionIds = _this$state10.selectedOptionIds;
       var _i18nKeys = i18nKeys,
           _i18nKeys$searchText = _i18nKeys.searchText,
           searchText = _i18nKeys$searchText === void 0 ? _constants.MULTISELECT_I18N_KEYS.searchText : _i18nKeys$searchText,
@@ -1197,6 +1201,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       });
       var isModel = (0, _isMobilePopover["default"])(needResponsive);
       var SuggestionsProps = customProps.SuggestionsProps;
+      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(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
@@ -1246,7 +1251,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         selectAllText: selectAllText,
         suggestions: suggestions,
         dataId: dataId
-      })) : null, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      })) : null, (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(_Card.CardContent, {
@@ -1282,7 +1287,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         palette: palette,
         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))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : null))) : null);

package/lib/MultiSelect/MultiSelectWithAvatar.js

@@ -153,6 +153,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
           isBoxPaddingNeed = _this$props.isBoxPaddingNeed,
           needEffect = _this$props.needEffect,
           isLoading = _this$props.isLoading,
+          shouldUseInternalLoader = _this$props.shouldUseInternalLoader,
           keepSelectedOptions = _this$props.keepSelectedOptions,
           customProps = _this$props.customProps,
           limit = _this$props.limit;
@@ -178,6 +179,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
       var ariaErrorId = this.getNextAriaId();
       var popUpState = !isReadOnly && !isDisabled && !disableAction && isPopupOpen;
       var isModel = (0, _isMobilePopover["default"])(needResponsive);
+      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(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
@@ -225,7 +227,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         selectAllText: selectAllText,
         suggestions: suggestions,
         dataId: dataId
-      })) : null, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      })) : null, (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(_Card.CardContent, {
@@ -258,7 +260,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         palette: palette,
         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)))))) : null);

package/lib/MultiSelect/props/defaultProps.js

@@ -79,6 +79,7 @@ var AdvancedMultiSelect_defaultProps = {
   customProps: {},
   needEffect: true,
   isLoading: false,
+  shouldUseInternalLoader: true,
   dataSelectorId: 'advancedMultiSelect',
   customClass: {},
   isAbsolutePositioningNeeded: true,
@@ -128,6 +129,7 @@ var MultiSelect_defaultProps = {
   needEffect: true,
   boxSize: 'default',
   isLoading: false,
+  shouldUseInternalLoader: true,
   dataSelectorId: 'multiSelect',
   keepSelectedOptions: false,
   selectedOptionsCount: 0,
@@ -170,6 +172,7 @@ var MultiSelectWithAvatar_defaultProps = {
   isRestrictScroll: false,
   needEffect: true,
   isLoading: false,
+  shouldUseInternalLoader: true,
   dataSelectorId: 'multiSelectWithAvatar',
   keepSelectedOptions: false,
   customProps: {},

package/lib/MultiSelect/props/propTypes.js

@@ -128,6 +128,7 @@ var MultiSelect_propTypes = {
   positionsOffset: _propTypes["default"].object,
   targetOffset: _propTypes["default"].object,
   isLoading: _propTypes["default"].bool,
+  shouldUseInternalLoader: _propTypes["default"].bool,
   dataSelectorId: _propTypes["default"].string,
   keepSelectedOptions: _propTypes["default"].bool,
   needSelectAll: _propTypes["default"].bool,

package/lib/Select/GroupSelect.js

@@ -669,6 +669,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           htmlId = _this$props9.htmlId,
           iconOnHover = _this$props9.iconOnHover,
           isLoading = _this$props9.isLoading,
+          shouldUseInternalLoader = _this$props9.shouldUseInternalLoader,
           dataSelectorId = _this$props9.dataSelectorId,
           customProps = _this$props9.customProps,
           customClass = _this$props9.customClass;
@@ -708,6 +709,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           dropBoxClass = _customClass$dropBox === void 0 ? '' : _customClass$dropBox,
           _customClass$cardCont = customClass.cardContent,
           cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont;
+      var isInitialEmptyOptions = searchStr.length === 0 && revampedGroups.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 : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : ''),
         "data-id": dataIdSlctComp,
@@ -813,7 +815,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           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, {
@@ -883,7 +885,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           isLoading: isFetchingOptions,
           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))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : null)));

package/lib/Select/Select.js

@@ -274,12 +274,13 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
+    value: function componentDidUpdate(prevProps, prevState) {
       var _this2 = this;
 
       var _this$state = this.state,
           searchStr = _this$state.searchStr,
-          selectedValueIndex = _this$state.selectedValueIndex;
+          selectedValueIndex = _this$state.selectedValueIndex,
+          hoverIndex = _this$state.hoverIndex;
       var _this$props = this.props,
           needLocalSearch = _this$props.needLocalSearch,
           onDropBoxClose = _this$props.onDropBoxClose,
@@ -289,12 +290,13 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           isPopupOpen = _this$props.isPopupOpen,
           isSearchClearOnClose = _this$props.isSearchClearOnClose;
 
-      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(function () {
             _this2.searchInput && _this2.searchInput.focus({
@@ -849,6 +851,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           autoComplete = _this$props11.autoComplete,
           ariaLabelledby = _this$props11.ariaLabelledby,
           isLoading = _this$props11.isLoading,
+          shouldUseInternalLoader = _this$props11.shouldUseInternalLoader,
           dataSelectorId = _this$props11.dataSelectorId,
           isAbsolutePositioningNeeded = _this$props11.isAbsolutePositioningNeeded,
           positionsOffset = _this$props11.positionsOffset,
@@ -894,6 +897,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           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;
       var inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
         setAriaId: setAriaId,
         isReadOnly: isReadOnly,
@@ -1067,7 +1071,7 @@ var SelectComponent = /*#__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(_react["default"].Fragment, null, !getChildren ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -1133,7 +1137,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           getCustomEmptyState: getCustomEmptyState ? _this7.handleGetAddNewOptionText : null,
           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))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter({

package/lib/Select/SelectWithAvatar.js

@@ -221,6 +221,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,6 +254,7 @@ 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 : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
@@ -338,7 +340,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, {
@@ -400,7 +402,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

@@ -431,6 +431,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,6 +458,7 @@ 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 : ''),
         "data-title": isDisabled ? title : null,
@@ -553,7 +555,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, {
@@ -627,7 +629,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/props/defaultProps.js

@@ -47,6 +47,7 @@ var Select_defaultProps = {
   iconOnHover: false,
   customProps: {},
   isLoading: false,
+  shouldUseInternalLoader: true,
   isAbsolutePositioningNeeded: true,
   allowValueFallback: true,
   inputFieldLineA11y: {},
@@ -88,6 +89,7 @@ var GroupSelect_defaultProps = {
   i18nKeys: {},
   iconOnHover: false,
   isLoading: false,
+  shouldUseInternalLoader: true,
   customProps: {},
   allowValueFallback: true,
   customClass: {}
@@ -118,7 +120,8 @@ var SelectWithAvatar_defaultProps = (_SelectWithAvatar_def = {
   i18nKeys: {},
   customProps: {},
   needEffect: true,
-  isLoading: false
+  isLoading: false,
+  shouldUseInternalLoader: true
 }, _defineProperty(_SelectWithAvatar_def, "customProps", {}), _defineProperty(_SelectWithAvatar_def, "customClass", {}), _SelectWithAvatar_def);
 exports.SelectWithAvatar_defaultProps = SelectWithAvatar_defaultProps;
 var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
@@ -130,5 +133,5 @@ var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
   needListBorder: false,
   needSearch: false,
   boxSize: 'default'
-}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "searchFields", []), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dataSelectorId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _defineProperty(_SelectWithIcon_defau, "isAbsolutePositioningNeeded", true), _defineProperty(_SelectWithIcon_defau, "isRestrictScroll", false), _defineProperty(_SelectWithIcon_defau, "customProps", {}), _defineProperty(_SelectWithIcon_defau, "customClass", {}), _SelectWithIcon_defau);
+}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "searchFields", []), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dataSelectorId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _defineProperty(_SelectWithIcon_defau, "shouldUseInternalLoader", true), _defineProperty(_SelectWithIcon_defau, "isAbsolutePositioningNeeded", true), _defineProperty(_SelectWithIcon_defau, "isRestrictScroll", false), _defineProperty(_SelectWithIcon_defau, "customProps", {}), _defineProperty(_SelectWithIcon_defau, "customClass", {}), _SelectWithIcon_defau);
 exports.SelectWithIcon_defaultProps = SelectWithIcon_defaultProps;

package/lib/Select/props/propTypes.js

@@ -108,6 +108,7 @@ var Select_propTypes = {
     InputFieldLineProps: _propTypes["default"].object
   }),
   isLoading: _propTypes["default"].bool,
+  shouldUseInternalLoader: _propTypes["default"].bool,
   dataSelectorId: _propTypes["default"].string,
   isAbsolutePositioningNeeded: _propTypes["default"].bool,
   openPopupOnly: _propTypes["default"].bool,
@@ -206,6 +207,7 @@ var GroupSelect_propTypes = {
     searchEmptyText: _propTypes["default"].string
   }),
   isLoading: _propTypes["default"].bool,
+  shouldUseInternalLoader: _propTypes["default"].bool,
   dataSelectorId: _propTypes["default"].string,
   isDefaultSelectValue: _propTypes["default"].bool,
   customProps: _propTypes["default"].shape({
@@ -337,6 +339,7 @@ var SelectWithIcon_propTypes = {
   valueKey: _propTypes["default"].string,
   htmlId: _propTypes["default"].string,
   isLoading: _propTypes["default"].bool,
+  shouldUseInternalLoader: _propTypes["default"].bool,
   dataSelectorId: _propTypes["default"].string,
   title: _propTypes["default"].string,
   className: _propTypes["default"].string,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.6.18",
+  "version": "1.6.20",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -76,13 +76,13 @@
     "@dot-system/css-audit-tool": "1.0.0",
     "@zohodesk-private/color-variable-preprocessor": "1.3.3",
     "@zohodesk-private/css-variable-migrator": "1.0.11",
-    "@zohodesk-private/node-plugins": "1.1.14",
+    "@zohodesk-private/node-plugins": "1.1.15",
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@zohodesk/a11y": "2.3.9",
     "@zohodesk/docstool": "1.0.0-alpha-2",
-    "@zohodesk/dotkit": "1.0.9",
+    "@zohodesk/dotkit": "1.0.10",
     "@zohodesk/hooks": "2.0.8",
-    "@zohodesk/icons": "1.3.5",
+    "@zohodesk/icons": "1.3.6",
     "@zohodesk/layout": "3.2.0",
     "@zohodesk/svg": "1.3.8",
     "@zohodesk/utils": "1.3.16",
@@ -103,7 +103,7 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.3.5",
+    "@zohodesk/icons": "1.3.6",
     "@zohodesk/variables": "1.3.2",
     "@zohodesk/svg": "1.3.8",
     "@zohodesk/virtualizer": "1.0.13",
@@ -113,8 +113,8 @@
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/a11y": "2.3.9",
     "@zohodesk/layout": "3.2.0",
-    "@zohodesk/dotkit": "1.0.9",
+    "@zohodesk/dotkit": "1.0.10",
     "color": "4.2.3",
     "@dot-system/css-utility": "0.1.1"
   }
-}
+}