@zohodesk/components 1.6.0 → 1.6.2

package/es/v1/Select/GroupSelect.js

@@ -1,818 +0,0 @@
-/**** Libraries ****/
-import React, { PureComponent } from 'react';
-import { GroupSelect_defaultProps } from "./props/defaultProps";
-import { GroupSelect_propTypes } from "./props/propTypes";
-/**** Components ****/
-
-import Popup from "../Popup/Popup";
-import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
-import Textbox from "../TextBox/TextBox";
-import Card, { CardHeader, CardContent, CardFooter } from "../Card/Card";
-import Suggestions from "../MultiSelect/Suggestions";
-import EmptyState from "../MultiSelect/EmptyState";
-import { Icon } from '@zohodesk/icons';
-import Loader from '@zohodesk/svg/lib/Loader/Loader';
-import DropDownHeading from "../DropDown/DropDownHeading";
-import { Container, Box } from "../Layout";
-import { getUniqueId } from "../../Provider/IdProvider";
-import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
-import { ResponsiveReceiver } from "../../Responsive/CustomResponsive";
-import style from "../../Select/Select.module.css";
-/**** Methods ****/
-
-import { makeGetGroupSelectOptions, optionIdGrouping, makeGetGroupSelectFilterSuggestions, extractOptionId, extractOptionIdFromJson } from "../../utils/dropDownUtils";
-import { getIsEmptyValue, scrollTo, debounce, getSearchString, findScrollEnd, getKeyValue } from "../../utils/Common";
-/* eslint-disable react/no-unused-prop-types */
-
-/* eslint-disable react/sort-prop-types */
-
-/* eslint-disable react/forbid-component-props */
-
-export class GroupSelectComponent extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.getNextAriaId = getUniqueId(this);
-    let {
-      autoSelectDebouneTime = 350,
-      searchDebounceTime = 500
-    } = props;
-    this.getGroupSelectOptions = makeGetGroupSelectOptions();
-    this.getFilterSuggestions = makeGetGroupSelectFilterSuggestions();
-    this.handleGetGroupSelectOptions = this.handleGetGroupSelectOptions.bind(this);
-    this.handleGetSelectedId = this.handleGetSelectedId.bind(this);
-    this.handleFilterSuggestions = this.handleFilterSuggestions.bind(this);
-    this.handleSearch = this.handleSearch.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleMouseEnter = this.handleMouseEnter.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-    this.togglePopup = this.togglePopup.bind(this);
-    this.handlePopupClose = this.handlePopupClose.bind(this);
-    this.suggestionContainerRef = this.suggestionContainerRef.bind(this);
-    this.suggestionItemRef = this.suggestionItemRef.bind(this);
-    this.searchInputRef = this.searchInputRef.bind(this);
-    this.valueInputRef = this.valueInputRef.bind(this);
-    this.handleSelectFocus = this.handleSelectFocus.bind(this);
-    this.handleClearSearch = this.handleClearSearch.bind(this);
-    this.handleValueInputChange = this.handleValueInputChange.bind(this);
-    this.handleChangeOnType = debounce(this.handleChangeOnType.bind(this), autoSelectDebouneTime);
-    this.handleFetchOptions = this.handleFetchOptions.bind(this);
-    this.handleGetNextOptions = this.handleGetNextOptions.bind(this);
-    this.handleScroll = this.handleScroll.bind(this);
-    this.handleSearchOptions = debounce(this.handleSearchOptions.bind(this), searchDebounceTime);
-    this.valueInputTypeString = '';
-    this.valueInputSearchString = '';
-    this.autoSelectSuggestions = [];
-    this.autoSelectIndex = 0;
-    let {
-      revampedGroups,
-      normalizedAllOptions,
-      normalizedFormatOptions,
-      allOptionIds
-    } = this.handleGetGroupSelectOptions(props);
-    let {
-      selectedId,
-      hoverIndex
-    } = this.handleGetSelectedId(props, allOptionIds);
-    this.normalizedAllOptions = normalizedAllOptions;
-    this.normalizedFormatOptions = normalizedFormatOptions;
-    this.state = {
-      revampedGroups,
-      allOptionIds,
-      selectedId,
-      hoverIndex,
-      searchStr: '',
-      isFetchingOptions: false
-    };
-    this._isMounted = false;
-  }
-
-  componentDidMount() {
-    this._isMounted = true;
-  }
-
-  componentDidUpdate(prevProps) {
-    let {
-      groupedOptions,
-      selectedOption,
-      isPopupOpen,
-      needSearch,
-      isSearchClearOnClose
-    } = this.props;
-    let {
-      allOptionIds,
-      hoverIndex,
-      selectedId,
-      searchStr
-    } = this.state;
-    let {
-      suggestionContainer
-    } = this;
-    let newOptionIds = allOptionIds;
-    let newSelectedId = selectedId;
-
-    if (groupedOptions !== prevProps.groupedOptions) {
-      let {
-        revampedGroups,
-        normalizedAllOptions,
-        allOptionIds,
-        normalizedFormatOptions
-      } = this.handleGetGroupSelectOptions(this.props);
-      this.normalizedAllOptions = normalizedAllOptions;
-      this.normalizedFormatOptions = normalizedFormatOptions;
-      newOptionIds = allOptionIds;
-      this.setState({
-        revampedGroups,
-        allOptionIds
-      });
-    }
-
-    if (selectedOption !== prevProps.selectedOption) {
-      let {
-        selectedId,
-        hoverIndex
-      } = this.handleGetSelectedId(this.props, newOptionIds);
-      newSelectedId = selectedId;
-      this.setState({
-        selectedId,
-        hoverIndex
-      });
-    }
-
-    let {
-      suggestionOptionIds
-    } = this.handleFilterSuggestions();
-    let hoverId = getIsEmptyValue(suggestionOptionIds[hoverIndex]) ? '' : suggestionOptionIds[hoverIndex];
-    let selSuggestion = this[`suggestion_${hoverId}`];
-    isPopupOpen && scrollTo(suggestionContainer, selSuggestion);
-
-    if (isPopupOpen !== prevProps.isPopupOpen) {
-      if (isPopupOpen) {
-        setTimeout(() => {
-          this.searchInput && this.searchInput.focus({
-            preventScroll: true
-          });
-        }, 10);
-      } else {
-        // needSearch && this.valueInput && this.valueInput.focus({preventScroll:true});
-        isSearchClearOnClose && searchStr && this.handleSearch('');
-        let hoverIndex = newOptionIds.indexOf(newSelectedId);
-        hoverIndex = hoverIndex >= 0 ? hoverIndex : 0;
-        this.setState({
-          hoverIndex
-        });
-      }
-    }
-  }
-
-  componentWillUnmount() {
-    this._isMounted = false;
-  }
-
-  handleGetGroupSelectOptions(props) {
-    let {
-      groupedOptions
-    } = props;
-    return this.getGroupSelectOptions({
-      groupedOptions
-    });
-  }
-
-  handleGetSelectedId(props, allOptionIds) {
-    let {
-      selectedOption,
-      isDefaultSelectValue
-    } = props;
-    let {
-      selected,
-      groupId
-    } = selectedOption;
-    let selectedId = optionIdGrouping(selected, groupId);
-    let selectedIdIndex = allOptionIds.indexOf(selectedId);
-
-    if (selectedIdIndex === -1) {
-      selectedIdIndex = 0;
-
-      if (isDefaultSelectValue) {
-        [selectedId] = allOptionIds;
-      } else {
-        selectedId = '';
-      }
-    }
-
-    return {
-      selectedId,
-      hoverIndex: selectedIdIndex
-    };
-  }
-
-  handleFilterSuggestions() {
-    let {
-      needSearch,
-      needLocalSearch
-    } = this.props;
-    let {
-      revampedGroups,
-      searchStr = '',
-      allOptionIds
-    } = this.state;
-
-    if (needSearch && searchStr && searchStr.trim().length) {
-      searchStr = getSearchString(searchStr);
-      let {
-        suggestionGroups,
-        suggestionOptionIds
-      } = this.getFilterSuggestions({
-        revampedGroups,
-        searchStr,
-        needSearch: needLocalSearch
-      });
-      return {
-        suggestionGroups,
-        suggestionOptionIds
-      };
-    }
-
-    return {
-      suggestionGroups: revampedGroups,
-      suggestionOptionIds: allOptionIds
-    };
-  }
-
-  handleSearchOptions() {
-    let {
-      onSearch
-    } = this.props;
-    let {
-      searchStr
-    } = this.state;
-    searchStr && this.handleFetchOptions(onSearch, searchStr);
-  }
-
-  handleSearch(value) {
-    // let { value = '' } = e.target;
-    let {
-      searchStr = ''
-    } = this.state;
-    let {
-      onSearch
-    } = this.props;
-    let searchStrRegex = getSearchString(searchStr);
-    let valueStrRegex = getSearchString(value);
-    let isSearch = searchStrRegex !== valueStrRegex ? true : false;
-    this.setState({
-      searchStr: value,
-      hoverIndex: 0
-    }, () => {
-      if (!value) {
-        onSearch && this.handleFetchOptions(onSearch, '');
-      } else if (isSearch && onSearch) {
-        this.handleSearchOptions();
-      }
-    });
-  }
-
-  handleKeyDown(e) {
-    let {
-      isPopupOpen,
-      isPopupOpenOnEnter,
-      onKeyDown
-    } = this.props;
-    let {
-      hoverIndex
-    } = this.state;
-    let {
-      suggestionOptionIds
-    } = this.handleFilterSuggestions();
-    let {
-      keyCode
-    } = e;
-
-    if (!isPopupOpen && !isPopupOpenOnEnter) {
-      onKeyDown && onKeyDown(e);
-    }
-
-    if (isPopupOpen && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
-      e.preventDefault(); //prevent body scroll
-    } else if (!isPopupOpen && keyCode === 40) {
-      e.preventDefault(); //prevent body scroll
-
-      this.togglePopup(e);
-    }
-
-    if (keyCode === 38 && isPopupOpen && suggestionOptionIds.length) {
-      // eslint-disable-next-line
-      if (hoverIndex === 0) {// hoverIndex = options.length - 1;
-      } else {
-        hoverIndex -= 1;
-      }
-
-      this.setState({
-        hoverIndex
-      });
-    } else if (keyCode === 40 && isPopupOpen && suggestionOptionIds.length) {
-      // eslint-disable-next-line
-      if (hoverIndex === suggestionOptionIds.length - 1) {// hoverIndex = 0;
-      } else {
-        if (hoverIndex === suggestionOptionIds.length - 3) {
-          this.handleGetNextOptions();
-        }
-
-        hoverIndex += 1;
-      }
-
-      this.setState({
-        hoverIndex
-      });
-    } else if (keyCode === 13) {
-      let id = suggestionOptionIds[hoverIndex];
-      isPopupOpen && this.handleChange(id, null, null, e);
-      !isPopupOpen && isPopupOpenOnEnter && this.togglePopup(e);
-    } else if (keyCode === 27) {
-      this.valueInput && this.valueInput.focus({
-        preventScroll: true
-      }); // this.handlePopupClose(e);
-    }
-  }
-
-  handleMouseEnter(id) {
-    let {
-      hoverIndex
-    } = this.state;
-    let {
-      suggestionOptionIds
-    } = this.handleFilterSuggestions();
-    let newHoverIndex = suggestionOptionIds.indexOf(id);
-    hoverIndex !== newHoverIndex && this.setState({
-      hoverIndex: newHoverIndex
-    });
-  }
-
-  handleChange(id, value, index, e) {
-    e && e.preventDefault && e.preventDefault();
-    let {
-      onChange,
-      isReadOnly
-    } = this.props;
-    let {
-      normalizedAllOptions
-    } = this;
-    let {
-      id: selected,
-      groupId
-    } = extractOptionId(id) || extractOptionIdFromJson(id, normalizedAllOptions);
-
-    if (!getIsEmptyValue(id) && !isReadOnly) {
-      onChange && onChange({
-        groupId,
-        selected
-      }, normalizedAllOptions[id]);
-      this.handlePopupClose(); // this.valueInput && this.valueInput.focus({preventScroll:true});
-    }
-  }
-
-  togglePopup(e) {
-    let {
-      togglePopup,
-      isReadOnly,
-      defaultDropBoxPosition
-    } = this.props;
-    !isReadOnly && togglePopup(e, defaultDropBoxPosition ? `${defaultDropBoxPosition}Center` : null);
-  }
-
-  handlePopupClose(e) {
-    let {
-      closePopupOnly,
-      isPopupOpen
-    } = this.props;
-    this.valueInput && this.valueInput.focus({
-      preventScroll: true
-    });
-    isPopupOpen && closePopupOnly(e);
-  }
-
-  suggestionContainerRef(el) {
-    this.suggestionContainer = el;
-  }
-
-  suggestionItemRef(el, index, id) {
-    this[`suggestion_${id}`] = el;
-  }
-
-  searchInputRef(el) {
-    this.searchInput = el;
-  }
-
-  valueInputRef(el) {
-    let {
-      getRef
-    } = this.props;
-    this.valueInput = el;
-    getRef && getRef(el);
-  }
-
-  handleSelectFocus(e) {
-    let {
-      target
-    } = e || {};
-    target && target.setSelectionRange(target, 0);
-  }
-
-  handleClearSearch() {
-    this.handleSearch('');
-    setTimeout(() => {
-      this.searchInput && this.searchInput.focus({
-        preventScroll: true
-      });
-    }, 1);
-  }
-
-  handleValueInputChange(e) {
-    let typeString = getKeyValue(e);
-    let {
-      isPopupOpen,
-      autoSelectOnType
-    } = this.props;
-
-    if (!isPopupOpen && autoSelectOnType) {
-      this.valueInputTypeString += (typeString || '').trim();
-      this.handleChangeOnType();
-    }
-  }
-
-  handleChangeOnType() {
-    let {
-      revampedGroups
-    } = this.state;
-    let typeString = this.valueInputTypeString;
-    this.valueInputTypeString = '';
-
-    let changeValue = () => {
-      let id = this.autoSelectSuggestions[this.autoSelectIndex];
-      let {
-        suggestionOptionIds
-      } = this.handleFilterSuggestions();
-
-      if (!getIsEmptyValue(id)) {
-        this.handleChange(id);
-        let hoverIndex = suggestionOptionIds.indexOf(id);
-        this.setState({
-          hoverIndex
-        });
-      }
-    };
-
-    if (typeString && typeString === this.valueInputSearchString) {
-      if (this.autoSelectIndex < this.autoSelectSuggestions.length - 1) {
-        this.autoSelectIndex += 1;
-      } else {
-        this.autoSelectIndex = 0;
-      }
-
-      changeValue();
-    } else if (typeString) {
-      this.valueInputSearchString = typeString;
-      let {
-        suggestionOptionIds
-      } = this.getFilterSuggestions({
-        revampedGroups,
-        searchStr: typeString,
-        needSearch: true,
-        isStartsWithSearch: true
-      });
-      this.autoSelectIndex = 0;
-      this.autoSelectSuggestions = suggestionOptionIds;
-      changeValue();
-    }
-  }
-
-  handleScroll(e) {
-    let ele = e.target;
-    let isScrollReachedBottom = findScrollEnd(ele);
-    isScrollReachedBottom && this.handleGetNextOptions();
-  }
-
-  handleFetchOptions(APICall) {
-    let searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-    // let funcArgs = args.slice(1, args.length);
-    let {
-      isFetchingOptions = false
-    } = this.state;
-    let {
-      _isMounted
-    } = this;
-
-    if (!isFetchingOptions && APICall) {
-      this.setState({
-        isFetchingOptions: true
-      });
-
-      try {
-        return APICall(searchStr).then(() => {
-          _isMounted && this.setState({
-            isFetchingOptions: false
-          });
-        }, () => {
-          _isMounted && this.setState({
-            isFetchingOptions: false
-          });
-        });
-      } catch (e) {
-        _isMounted && this.setState({
-          isFetchingOptions: false
-        });
-      }
-    }
-  }
-
-  handleGetNextOptions() {
-    let {
-      isNextOptions,
-      getNextOptions
-    } = this.props;
-    let {
-      searchStr
-    } = this.state;
-    isNextOptions && getNextOptions && this.handleFetchOptions(getNextOptions, searchStr);
-  }
-
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
-    return {
-      tabletMode: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
-
-  render() {
-    let {
-      isDisabled,
-      isReadOnly,
-      needSearch,
-      emptyMessage,
-      needSelectDownIcon,
-      maxLength,
-      needBorder,
-      placeHolder,
-      defaultDropBoxPosition,
-      searchBoxPlaceHolder,
-      searchEmptyMessage,
-      dataId,
-      dataIdSlctComp,
-      dataIdDownIcon,
-      dataIdSrchEmptyMsg,
-      needResponsive,
-      className,
-      size,
-      title,
-      textBoxSize,
-      textBoxVariant,
-      animationStyle,
-      dropBoxSize,
-      searchBoxSize,
-      getTargetRef,
-      isPopupOpen,
-      position,
-      getContainerRef,
-      isPopupReady,
-      removeClose,
-      isAbsolutePositioningNeeded,
-      positionsOffset,
-      targetOffset,
-      isRestrictScroll,
-      borderColor,
-      needTick,
-      children,
-      getFooter,
-      i18nKeys,
-      htmlId,
-      iconOnHover,
-      isLoading,
-      dataSelectorId
-    } = this.props;
-    i18nKeys = Object.assign({}, i18nKeys, {
-      emptyText: i18nKeys.emptyText || emptyMessage,
-      searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
-    });
-    const {
-      TextBoxIcon_i18n,
-      TextBox_ally_label = 'Click to select options'
-    } = i18nKeys;
-    let {
-      selectedId,
-      hoverIndex,
-      searchStr,
-      revampedGroups,
-      isFetchingOptions
-    } = this.state;
-    let {
-      normalizedFormatOptions
-    } = this;
-    let {
-      suggestionGroups,
-      suggestionOptionIds
-    } = this.handleFilterSuggestions();
-    let {
-      value: selected = ''
-    } = normalizedFormatOptions[selectedId] || {};
-    let setAriaId = this.getNextAriaId();
-    let ariaErrorId = this.getNextAriaId();
-    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,
-      "data-test-id": dataIdSlctComp,
-      "data-title": isDisabled ? title : null,
-      "data-selector-id": dataSelectorId
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${className ? className : ''}`,
-      onClick: isDisabled || isReadOnly ? null : this.togglePopup,
-      ref: getTargetRef,
-      "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
-      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`
-    }, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, needSelectDownIcon ? /*#__PURE__*/React.createElement(TextBoxIcon, {
-      isDisabled: isDisabled,
-      iconRotated: isPopupOpen,
-      inputRef: this.valueInputRef,
-      maxLength: maxLength,
-      needBorder: needBorder,
-      onFocus: this.handleSelectFocus,
-      onKeyDown: this.handleKeyDown,
-      placeHolder: placeHolder,
-      isReadOnly: true,
-      size: textBoxSize,
-      value: selected,
-      variant: textBoxVariant,
-      needReadOnlyStyle: isReadOnly ? true : false,
-      dataId: `${dataId}_textBox`,
-      onKeyPress: this.handleValueInputChange,
-      needEffect: isReadOnly || isDisabled ? false : true,
-      borderColor: borderColor,
-      htmlId: htmlId,
-      a11y: {
-        role: 'combobox',
-        ariaControls: setAriaId,
-        ariaExpanded: !isReadOnly && !isDisabled && isPopupOpen ? true : false,
-        ariaHaspopup: true,
-        ariaReadonly: true,
-        ariaActivedescendant: selectedId,
-        ariaOwns: setAriaId
-      },
-      i18nKeys: TextBoxIcon_i18n,
-      isFocus: isPopupReady,
-      autoComplete: false
-    }, /*#__PURE__*/React.createElement(Container, {
-      align: "both",
-      dataId: dataIdDownIcon
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-down",
-      size: "7",
-      iconClass: style.arrowIcon
-    }))) : /*#__PURE__*/React.createElement(Textbox, {
-      isDisabled: isDisabled,
-      inputRef: this.valueInputRef,
-      maxLength: maxLength,
-      needBorder: needBorder,
-      onFocus: this.handleSelectFocus,
-      onKeyDown: this.handleKeyDown,
-      placeHolder: placeHolder,
-      isReadOnly: true,
-      needEffect: isReadOnly || isDisabled ? false : true,
-      size: textBoxSize,
-      value: selected,
-      variant: textBoxVariant,
-      needReadOnlyStyle: isReadOnly ? true : false,
-      dataId: `${dataId}_textBox`,
-      onKeyPress: this.handleValueInputChange,
-      borderColor: borderColor,
-      htmlId: htmlId,
-      a11y: {
-        role: 'combobox',
-        ariaLabel: TextBox_ally_label,
-        ariaControls: setAriaId,
-        ariaExpanded: !isReadOnly && !isDisabled && isPopupOpen ? true : false,
-        ariaHaspopup: true,
-        ariaReadonly: true,
-        ariaActivedescendant: selectedId,
-        ariaOwns: setAriaId
-      },
-      autoComplete: false,
-      isFocus: isPopupReady
-    }))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc,
-      responsiveId: "Helmet"
-    }, _ref2 => {
-      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`
-      }, 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,
-        a11y: {
-          ariaControls: setAriaId,
-          ariaAutocomplete: 'list',
-          ariaDescribedby: ariaErrorId
-        },
-        autoComplete: false,
-        dataId: `${dataId}_search`
-      }))) : null, /*#__PURE__*/React.createElement(CardContent, {
-        shrink: true,
-        customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
-        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, {
-          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`
-        }));
-      }) : /*#__PURE__*/React.createElement(EmptyState, {
-        options: revampedGroups,
-        searchString: searchStr,
-        suggestions: suggestionGroups,
-        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);
-  }
-
-}
-GroupSelectComponent.propTypes = GroupSelect_propTypes;
-GroupSelectComponent.defaultProps = GroupSelect_defaultProps;
-GroupSelectComponent.displayName = 'GroupSelect';
-let GroupSelect = Popup(GroupSelectComponent);
-GroupSelect.defaultProps = GroupSelectComponent.defaultProps;
-GroupSelect.propTypes = GroupSelectComponent.propTypes;
-export default GroupSelect; // if (__DOCS__) {
-//   GroupSelect.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide'
-//   };
-//   // eslint-disable-next-line react/forbid-foreign-prop-types
-//   GroupSelect.propTypes = GroupSelectComponent.propTypes;
-// }