@zohodesk/components 1.0.0-temp-199.25 → 1.0.0-temp-250

package/es/Select/GroupSelect.js

@@ -0,0 +1,836 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/**** 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.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,
+      allowValueFallback
+    } = props;
+    return this.getGroupSelectOptions({
+      groupedOptions,
+      allowValueFallback
+    });
+  }
+
+  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) {
+      if (hoverIndex === 0) {// hoverIndex = options.length - 1;
+      } else {
+        hoverIndex -= 1;
+      }
+
+      this.setState({
+        hoverIndex
+      });
+    } else if (keyCode === 40 && isPopupOpen && suggestionOptionIds.length) {
+      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,
+      renderCustomEmptyState,
+      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,
+      customProps,
+      customClass
+    } = 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();
+    let {
+      TextBoxIconProps = {},
+      TextBoxProps = {},
+      SuggestionsProps = {}
+    } = customProps;
+    const {
+      dropBox: dropBoxClass = '',
+      cardContent: cardContentClass = ''
+    } = customClass;
+    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, _extends({
+      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
+    }, TextBoxIconProps), /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      dataId: dataIdDownIcon
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-down",
+      size: "7",
+      iconClass: style.arrowIcon
+    }))) : /*#__PURE__*/React.createElement(Textbox, _extends({
+      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
+    }, TextBoxProps)))), !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`,
+        customClass: {
+          customDropBox: dropBoxClass
+        }
+      }, 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] : ''} ${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);
+  }
+
+}
+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;
+// }