@zohodesk/components 1.0.0-temp-252.4 → 1.0.0-temp-256.1

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 ****/
 
@@ -493,8 +494,7 @@ export class GroupSelectComponent extends PureComponent {
     isScrollReachedBottom && this.handleGetNextOptions();
   }
 
-  handleFetchOptions(APICall) {
-    let searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  handleFetchOptions(APICall, searchStr = '') {
     // let funcArgs = args.slice(1, args.length);
     let {
       isFetchingOptions = false
@@ -537,10 +537,9 @@ export class GroupSelectComponent extends PureComponent {
     isNextOptions && getNextOptions && this.handleFetchOptions(getNextOptions, searchStr);
   }
 
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
+  responsiveFunc({
+    mediaQueryOR
+  }) {
     return {
       tabletMode: mediaQueryOR([{
         maxWidth: 700
@@ -593,6 +592,7 @@ export class GroupSelectComponent extends PureComponent {
       htmlId,
       iconOnHover,
       isLoading,
+      shouldUseInternalLoader,
       dataSelectorId,
       customProps,
       customClass
@@ -633,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}`,
@@ -716,107 +717,104 @@ export class GroupSelectComponent extends PureComponent {
     }, TextBoxProps)))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
-    }, _ref2 => {
+    }, ({
+      tabletMode
+    }) => /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      animationStyle: animationStyle,
+      boxPosition: position || `${defaultDropBoxPosition}Center`,
+      getRef: getContainerRef,
+      isActive: isPopupReady,
+      isAnimate: true,
+      isArrow: false,
+      onClick: removeClose,
+      needResponsive: needResponsive,
+      isPadding: false,
+      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+      positionsOffset: positionsOffset,
+      targetOffset: targetOffset,
+      isRestrictScroll: isRestrictScroll,
+      isResponsivePadding: getFooter ? false : true,
+      alignBox: "row",
+      dataId: `${dataId}_suggestionBox`,
+      customClass: {
+        customDropBox: dropBoxClass
+      }
+    }, (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      className: style.loader
+    }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Card, {
+      customClass: style.box,
+      onScroll: this.handleScroll
+    }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
+      className: cn(`${style.search} ${style[size]}`)
+    }, /*#__PURE__*/React.createElement(TextBoxIcon, {
+      inputRef: this.searchInputRef,
+      maxLength: maxLength,
+      onChange: this.handleSearch,
+      onKeyDown: this.handleKeyDown,
+      placeHolder: searchBoxPlaceHolder,
+      size: searchBoxSize,
+      value: searchStr,
+      onClear: this.handleClearSearch,
+      a11y: {
+        ariaControls: setAriaId,
+        ariaAutocomplete: 'list',
+        ariaDescribedby: ariaErrorId
+      },
+      autoComplete: false,
+      dataId: `${dataId}_search`
+    }))) : null, /*#__PURE__*/React.createElement(CardContent, {
+      shrink: true,
+      customClass: `${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''} ${cardContentClass}`,
+      eleRef: this.suggestionContainerRef
+    }, suggestionGroups.length ? suggestionGroups.map(group => {
       let {
-        tabletMode
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
-        animationStyle: animationStyle,
-        boxPosition: position || `${defaultDropBoxPosition}Center`,
-        getRef: getContainerRef,
-        isActive: isPopupReady,
-        isAnimate: true,
-        isArrow: false,
-        onClick: removeClose,
-        needResponsive: needResponsive,
-        isPadding: false,
-        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
-        positionsOffset: positionsOffset,
-        targetOffset: targetOffset,
-        isRestrictScroll: isRestrictScroll,
-        isResponsivePadding: getFooter ? false : true,
-        alignBox: "row",
-        dataId: `${dataId}_suggestionBox`,
-        customClass: {
-          customDropBox: dropBoxClass
+        id: groupId,
+        name: groupName,
+        options
+      } = group;
+      let hoverId = suggestionOptionIds[hoverIndex];
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: groupId
+      }, groupName && /*#__PURE__*/React.createElement("div", {
+        className: cn(style.groupTitle)
+      }, /*#__PURE__*/React.createElement(DropDownHeading, {
+        text: groupName,
+        a11y: {
+          role: 'heading'
         }
-      }, isLoading ? /*#__PURE__*/React.createElement(Container, {
-        align: "both",
-        className: style.loader
-      }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
-        flexible: true
-      }, /*#__PURE__*/React.createElement(Card, {
-        customClass: style.box,
-        onScroll: this.handleScroll
-      }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
-        className: `${style.search} ${style[size]}`
-      }, /*#__PURE__*/React.createElement(TextBoxIcon, {
-        inputRef: this.searchInputRef,
-        maxLength: maxLength,
-        onChange: this.handleSearch,
-        onKeyDown: this.handleKeyDown,
-        placeHolder: searchBoxPlaceHolder,
-        size: searchBoxSize,
-        value: searchStr,
-        onClear: this.handleClearSearch,
+      })), /*#__PURE__*/React.createElement(Suggestions, _extends({
+        activeId: selectedId,
+        suggestions: options,
+        getRef: this.suggestionItemRef,
+        hoverId: hoverId,
+        onClick: this.handleChange,
+        onMouseEnter: this.handleMouseEnter,
+        selectedOptions: [selectedId],
+        needTick: needTick,
+        needBorder: false,
+        htmlId: setAriaId,
         a11y: {
-          ariaControls: setAriaId,
-          ariaAutocomplete: 'list',
-          ariaDescribedby: ariaErrorId
+          ariaParentRole: 'listbox',
+          role: 'option'
         },
-        autoComplete: false,
-        dataId: `${dataId}_search`
-      }))) : null, /*#__PURE__*/React.createElement(CardContent, {
-        shrink: true,
-        customClass: `${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''} ${cardContentClass}`,
-        eleRef: this.suggestionContainerRef
-      }, suggestionGroups.length ? suggestionGroups.map(group => {
-        let {
-          id: groupId,
-          name: groupName,
-          options
-        } = group;
-        let hoverId = suggestionOptionIds[hoverIndex];
-        return /*#__PURE__*/React.createElement(React.Fragment, {
-          key: groupId
-        }, groupName && /*#__PURE__*/React.createElement("div", {
-          className: style.groupTitle
-        }, /*#__PURE__*/React.createElement(DropDownHeading, {
-          text: groupName,
-          a11y: {
-            role: 'heading'
-          }
-        })), /*#__PURE__*/React.createElement(Suggestions, _extends({
-          activeId: selectedId,
-          suggestions: options,
-          getRef: this.suggestionItemRef,
-          hoverId: hoverId,
-          onClick: this.handleChange,
-          onMouseEnter: this.handleMouseEnter,
-          selectedOptions: [selectedId],
-          needTick: needTick,
-          needBorder: false,
-          htmlId: setAriaId,
-          a11y: {
-            ariaParentRole: 'listbox',
-            role: 'option'
-          },
-          dataId: `${dataId}_Options`
-        }, SuggestionsProps)));
-      }) : /*#__PURE__*/React.createElement(EmptyState, {
-        options: revampedGroups,
-        searchString: searchStr,
-        suggestions: suggestionGroups,
-        renderCustomEmptyState: renderCustomEmptyState,
-        dataId: dataIdSrchEmptyMsg,
-        isLoading: isFetchingOptions,
-        i18nKeys: i18nKeys,
-        htmlId: ariaErrorId
-      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        align: "both"
-      }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)));
-    }) : null);
+        dataId: `${dataId}_Options`
+      }, SuggestionsProps)));
+    }) : /*#__PURE__*/React.createElement(EmptyState, {
+      options: revampedGroups,
+      searchString: searchStr,
+      suggestions: suggestionGroups,
+      renderCustomEmptyState: renderCustomEmptyState,
+      dataId: dataIdSrchEmptyMsg,
+      isLoading: isFetchingOptions,
+      i18nKeys: i18nKeys,
+      htmlId: ariaErrorId
+    }), (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({
@@ -325,10 +328,9 @@ export class SelectComponent extends Component {
     needCloseOnSelect && this.handlePopupClose(e);
   }
 
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
+  responsiveFunc({
+    mediaQueryOR
+  }) {
     return {
       tabletMode: mediaQueryOR([{
         maxWidth: 700
@@ -508,8 +510,7 @@ export class SelectComponent extends Component {
     isScrollReachedBottom && this.handleGetNextOptions();
   }
 
-  handleFetchOptions(APICall) {
-    let searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  handleFetchOptions(APICall, searchStr = '') {
     // let funcArgs = args.slice(1, args.length);
     let {
       isFetchingOptions = false
@@ -724,14 +725,13 @@ export class SelectComponent extends Component {
     });
   }
 
-  getInputFieldLineA11y(_ref2) {
-    let {
-      setAriaId,
-      isReadOnly,
-      isDisabled,
-      isPopupOpen,
-      inputFieldLineA11y
-    } = _ref2;
+  getInputFieldLineA11y({
+    setAriaId,
+    isReadOnly,
+    isDisabled,
+    isPopupOpen,
+    inputFieldLineA11y
+  }) {
     return {
       tabIndex: 0,
       role: 'button',
@@ -802,6 +802,7 @@ export class SelectComponent extends Component {
       autoComplete,
       ariaLabelledby,
       isLoading,
+      shouldUseInternalLoader,
       dataSelectorId,
       isAbsolutePositioningNeeded,
       positionsOffset,
@@ -846,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,
@@ -854,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}`,
@@ -996,109 +998,106 @@ export class SelectComponent extends Component {
     })), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
-    }, _ref3 => {
-      let {
-        tabletMode
-      } = _ref3;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
-        animationStyle: animationStyle,
-        boxPosition: position || `${defaultDropBoxPosition}`,
-        getRef: getContainerRef,
-        isActive: isPopupReady,
-        isAnimate: isAnimate && !isVirtualizerEnabled // Note: Virtualizer gets element height at mount itself which causes issue with options height
-        ,
-        isArrow: false,
-        onClick: removeClose,
-        needResponsive: needResponsive,
-        dataId: `${dataId}_suggestions`,
-        size: boxSize,
-        isPadding: false,
-        isResponsivePadding: getFooter ? false : true,
-        alignBox: "row",
-        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
-        positionsOffset: positionsOffset,
-        targetOffset: targetOffset,
-        isRestrictScroll: isRestrictScroll,
-        portalId: dropBoxPortalId,
-        customClass: {
-          customDropBox: dropBoxClass
-        }
-      }, isLoading ? /*#__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, {
-        flexible: true
-      }, /*#__PURE__*/React.createElement(Card, {
-        onScroll: this.handleScroll
-      }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
-        className: `${style.search} ${style[size]}`
-      }, /*#__PURE__*/React.createElement(TextBoxIcon, {
-        a11y: {
-          ariaControls: setAriaId,
-          ariaAutocomplete: 'list',
-          ariaDescribedby: ariaErrorId
-        },
-        inputRef: this.searchInputRef,
-        maxLength: maxLength,
-        onChange: this.handleSearch,
-        onKeyDown: this.handleKeyDown,
-        placeHolder: searchBoxPlaceHolder,
-        size: searchBoxSize,
-        value: searchStr,
-        onClear: this.handleClearSearch,
-        dataId: `${dataId}_search`,
-        i18nKeys: TextBoxIcon_i18n,
-        autoComplete: autoComplete,
-        customProps: {
-          TextBoxProps: DropdownSearchTextBoxProps
-        },
-        renderCustomClearComponent: renderCustomSearchClearComponent
-      }))) : null, /*#__PURE__*/React.createElement(CardContent, {
-        shrink: true,
-        customClass: `
+    }, ({
+      tabletMode
+    }) => /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      animationStyle: animationStyle,
+      boxPosition: position || `${defaultDropBoxPosition}`,
+      getRef: getContainerRef,
+      isActive: isPopupReady,
+      isAnimate: isAnimate && !isVirtualizerEnabled // Note: Virtualizer gets element height at mount itself which causes issue with options height
+      ,
+      isArrow: false,
+      onClick: removeClose,
+      needResponsive: needResponsive,
+      dataId: `${dataId}_suggestions`,
+      size: boxSize,
+      isPadding: false,
+      isResponsivePadding: getFooter ? false : true,
+      alignBox: "row",
+      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+      positionsOffset: positionsOffset,
+      targetOffset: targetOffset,
+      isRestrictScroll: isRestrictScroll,
+      portalId: dropBoxPortalId,
+      customClass: {
+        customDropBox: dropBoxClass
+      }
+    }, (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, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Card, {
+      onScroll: this.handleScroll
+    }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
+      className: cn(`${style.search} ${style[size]}`)
+    }, /*#__PURE__*/React.createElement(TextBoxIcon, {
+      a11y: {
+        ariaControls: setAriaId,
+        ariaAutocomplete: 'list',
+        ariaDescribedby: ariaErrorId
+      },
+      inputRef: this.searchInputRef,
+      maxLength: maxLength,
+      onChange: this.handleSearch,
+      onKeyDown: this.handleKeyDown,
+      placeHolder: searchBoxPlaceHolder,
+      size: searchBoxSize,
+      value: searchStr,
+      onClear: this.handleClearSearch,
+      dataId: `${dataId}_search`,
+      i18nKeys: TextBoxIcon_i18n,
+      autoComplete: autoComplete,
+      customProps: {
+        TextBoxProps: DropdownSearchTextBoxProps
+      },
+      renderCustomClearComponent: renderCustomSearchClearComponent
+    }))) : null, /*#__PURE__*/React.createElement(CardContent, {
+      shrink: true,
+      customClass: `
                               ${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''} ${cardContentClass}`,
-        eleRef: this.suggestionContainerRef
-      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
-        key: searchStr.trim(),
-        activeId: selectedId,
-        isVirtualizerEnabled: isVirtualizerEnabled,
-        getVirtualizerPublicMethods: this.getVirtualizerPublicMethods,
-        setVirtualizerContainerRefFunction: this.setSuggestionsVirtualizerContainerRefFunction,
-        suggestions: suggestions,
-        getRef: this.suggestionItemRef,
-        hoverOption: hoverIndex,
-        onClick: this.handleChange,
-        onMouseEnter: this.handleMouseEnter,
-        dataId: `${dataId}_Options`,
-        needTick: needTick,
-        needBorder: needListBorder,
-        selectedOptions: [selectedId],
-        className: `${tabletMode ? style.responsivelistItemContainer : style.listItemContainer}`,
-        listItemSize: listItemSize,
-        htmlId: setAriaId,
-        a11y: {
-          ariaParentRole: 'listbox',
-          role: 'option'
-        }
-      }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
-        isLoading: isFetchingOptions,
-        options: options,
-        searchString: searchStr,
-        suggestions: suggestions,
-        dataId: dataId,
-        renderCustomEmptyState: renderCustomEmptyState,
-        getCustomEmptyState: getCustomEmptyState ? this.handleGetAddNewOptionText : null,
-        i18nKeys: i18nKeys,
-        htmlId: ariaErrorId
-      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        align: "both"
-      }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter({
-        closePopup: this.handlePopupClose
-      })) : null)) : /*#__PURE__*/React.createElement(Box, {
-        flexible: true
-      }, getChildren())));
-    }) : null);
+      eleRef: this.suggestionContainerRef
+    }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
+      key: searchStr.trim(),
+      activeId: selectedId,
+      isVirtualizerEnabled: isVirtualizerEnabled,
+      getVirtualizerPublicMethods: this.getVirtualizerPublicMethods,
+      setVirtualizerContainerRefFunction: this.setSuggestionsVirtualizerContainerRefFunction,
+      suggestions: suggestions,
+      getRef: this.suggestionItemRef,
+      hoverOption: hoverIndex,
+      onClick: this.handleChange,
+      onMouseEnter: this.handleMouseEnter,
+      dataId: `${dataId}_Options`,
+      needTick: needTick,
+      needBorder: needListBorder,
+      selectedOptions: [selectedId],
+      className: `${tabletMode ? style.responsivelistItemContainer : style.listItemContainer}`,
+      listItemSize: listItemSize,
+      htmlId: setAriaId,
+      a11y: {
+        ariaParentRole: 'listbox',
+        role: 'option'
+      }
+    }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
+      isLoading: isFetchingOptions,
+      options: options,
+      searchString: searchStr,
+      suggestions: suggestions,
+      dataId: dataId,
+      renderCustomEmptyState: renderCustomEmptyState,
+      getCustomEmptyState: getCustomEmptyState ? this.handleGetAddNewOptionText : null,
+      i18nKeys: i18nKeys,
+      htmlId: ariaErrorId
+    }), (shouldUseInternalLoader ? isFetchingOptions : isLoading && !isInitialEmptyOptions) && /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      align: "both"
+    }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter({
+      closePopup: this.handlePopupClose
+    })) : null)) : /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, getChildren())))) : null);
   }
 
 }