@zohodesk/components/es/Select/Select.js

In this Package, we Provide Some Basic Components to Build Web App

/**** Libraries ****/
import React, { Component } from 'react';
import { Select_defaultProps } from "./props/defaultProps";
import { Select_propTypes } from "./props/propTypes";
/**** Components ****/

import Popup from "../Popup/Popup";
import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
import { Container, Box } from "../Layout";
import Textbox from "../TextBox/TextBox";
import Card, { CardHeader, CardContent, CardFooter } from "../Card/Card";
import Suggestions from "../MultiSelect/Suggestions";
import EmptyState from "../MultiSelect/EmptyState";
import { getUniqueId } from "../Provider/IdProvider";
import { Icon } from '@zohodesk/icons';
import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
import Loader from '@zohodesk/svg/lib/Loader/Loader';
/**** Methods ****/

import { makeFormatOptions, makeGetMultiSelectFilterSuggestions as makeGetFilterSuggestions, makeGetSelectedValueText as makeGetSelectedValue } from "../utils/dropDownUtils";
import { debounce, scrollTo, getIsEmptyValue, getSearchString, findScrollEnd, getKeyValue } from "../utils/Common.js";
/**** CSS ****/

import style from "./Select.module.css";
/* eslint-disable react/no-deprecated */

/* eslint-disable react/no-unused-prop-types */

let dummyArray = [];
export class SelectComponent extends Component {
  constructor(props) {
    super(props);
    this.getNextAriaId = getUniqueId(this);
    this.getFilterSuggestions = makeGetFilterSuggestions();
    this.formatOptions = makeFormatOptions();
    this.getSelectedValue = makeGetSelectedValue();
    this.selectedFormatOptions = {};
    let {
      selectedValue,
      searchDebounceTime = 500,
      isDefaultSelectValue,
      autoSelectDebouneTime = 350,
      valueField,
      textField
    } = props;
    let {
      allOptions,
      normalizedAllOptions,
      optionsOrder,
      normalizedFormatOptions
    } = this.handleFormatOptions(this.props);
    let {
      selected,
      hoverIndex,
      selectedValueDetails,
      selectedId,
      isSelfValueChanged
    } = this.getSelectedValue({
      optionsOrder,
      selectedValue,
      normalizedFormatOptions,
      selectedFormatOptions: this.selectedFormatOptions,
      isDefaultSelectValue,
      valueField,
      textField
    });

    if (isSelfValueChanged) {// onChange && onChange(selectedId, normalizedAllOptions[selectedId]);
    }

    this.state = {
      selected,
      options: allOptions,
      optionsNormalize: normalizedAllOptions,
      hoverIndex,
      searchStr: '',
      isFetchingOptions: false,
      selectedId,
      selectedValueIndex: hoverIndex
    };
    this.optionsOrder = optionsOrder;
    this._isMounted = false;
    this.normalizedFormatOptions = normalizedFormatOptions;
    this.allSelectedOptions = selectedValueDetails;
    this.handleChange = this.handleChange.bind(this);
    this.handleKeyDown = this.handleKeyDown.bind(this);
    this.handleSearch = this.handleSearch.bind(this);
    this.handleFilterSuggestions = this.handleFilterSuggestions.bind(this);
    this.handleMouseEnter = this.handleMouseEnter.bind(this);
    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.suggestionContainerRef = this.suggestionContainerRef.bind(this);
    this.suggestionItemRef = this.suggestionItemRef.bind(this);
    this.searchInputRef = this.searchInputRef.bind(this);
    this.valueInputRef = this.valueInputRef.bind(this);
    this.togglePopup = this.togglePopup.bind(this);
    this.handleSelectFocus = this.handleSelectFocus.bind(this);
    this.handleFormatOptions = this.handleFormatOptions.bind(this);
    this.handlePopupClose = this.handlePopupClose.bind(this);
    this.handleClearSearch = this.handleClearSearch.bind(this);
    this.handleValueInputChange = this.handleValueInputChange.bind(this);
    this.handleChangeOnType = debounce(this.handleChangeOnType.bind(this), autoSelectDebouneTime);
    this.handleAddNewOption = this.handleAddNewOption.bind(this);
    this.handleExposePopupHandlers = this.handleExposePopupHandlers.bind(this);
    this.handleGetAddNewOptionText = this.handleGetAddNewOptionText.bind(this);
    this.valueInputTypeString = '';
    this.valueInputSearchString = '';
    this.autoSelectSuggestions = [];
    this.autoSelectIndex = 0;
  }

  componentDidMount() {
    this._isMounted = true;
    this.handleExposePopupHandlers(); // let { suggestionContainer } = this;
    // suggestionContainer &&
    //   suggestionContainer.addEventListener('scroll', this.handleScroll);
  }

  componentWillReceiveProps(nextProps) {
    let {
      selectedValue,
      isDefaultSelectValue,
      valueField,
      textField
    } = nextProps;
    let {
      hoverIndex: oldHoverIndex
    } = this.state;
    let {
      allOptions,
      normalizedAllOptions,
      optionsOrder,
      normalizedFormatOptions
    } = this.handleFormatOptions(nextProps);
    let {
      selectedFormatOptions: oldSelectedFormatOptions
    } = this;
    let {
      selected,
      hoverIndex,
      selectedValueDetails,
      selectedId,
      isSelfValueChanged
    } = this.getSelectedValue({
      optionsOrder,
      selectedValue,
      normalizedFormatOptions,
      selectedFormatOptions: oldSelectedFormatOptions,
      isDefaultSelectValue,
      valueField,
      textField
    });
    let {
      selectedValue: oldSelectedValue
    } = this.props;

    if (isSelfValueChanged && oldSelectedValue !== selectedValue) {// onChange && onChange(selectedId, normalizedAllOptions[selectedId]);
    }

    this.selectedFormatOptions = Object.assign(oldSelectedFormatOptions, selectedValueDetails);
    this.normalizedFormatOptions = normalizedFormatOptions;
    this.optionsOrder = optionsOrder;
    this.setState({
      options: allOptions,
      optionsNormalize: normalizedAllOptions,
      selected,
      hoverIndex: oldHoverIndex ? oldHoverIndex : hoverIndex,
      selectedId,
      selectedValueIndex: hoverIndex
    });
  }

  componentDidUpdate(prevProps) {
    let {
      suggestionContainer,
      optionsOrder
    } = this;
    let {
      hoverIndex,
      searchStr,
      selectedValueIndex
    } = this.state;
    let {
      needLocalSearch,
      onDropBoxClose,
      onDropBoxOpen,
      needSearch,
      onSearch,
      isPopupOpen,
      isSearchClearOnClose
    } = this.props;
    let hoverId = getIsEmptyValue(optionsOrder[hoverIndex]) ? '' : optionsOrder[hoverIndex];
    let selSuggestion = this[`suggestion_${hoverId}`];
    isPopupOpen && scrollTo(suggestionContainer, selSuggestion);

    if (prevProps.isPopupOpen !== isPopupOpen) {
      if (isPopupOpen) {
        onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
        setTimeout(() => {
          this.searchInput && this.searchInput.focus({
            preventScroll: true
          });
        }, 10);
      } else {
        // needSearch && this.valueInput && this.valueInput.focus({preventScroll:true});
        onDropBoxClose && onDropBoxClose();
        isSearchClearOnClose && searchStr && onSearch && onSearch('');
        this.setState({
          searchStr: isSearchClearOnClose ? '' : searchStr,
          hoverIndex: selectedValueIndex
        });
      }
    } //When suggestions length less than 5, getNextOptions function call


    let {
      isNextOptions,
      getNextOptions
    } = this.props; // let { searchStr } = this.state;

    let suggestions = isPopupOpen ? this.handleFilterSuggestions() : [];
    let suggestionsLen = suggestions.length;

    if (isPopupOpen && suggestionsLen <= 5 && isNextOptions && getNextOptions && !needLocalSearch) {
      this.handleFetchOptions(getNextOptions, searchStr);
    }
  }

  componentWillUnmount() {
    this._isMounted = false;
    let {
      getPopupHandlers
    } = this.props;
    let methods = {
      removeClose: null,
      openPopup: null,
      closePopup: null,
      togglePopup: null
    };
    getPopupHandlers && getPopupHandlers(methods); // let { suggestionContainer } = this;
    // suggestionContainer &&
    //   suggestionContainer.removeEventListener('scroll', this.handleScroll);
  }

  handleFormatOptions(props) {
    let {
      options,
      valueField,
      textField,
      allowValueFallback,
      customProps = {}
    } = props;
    let {
      listItemProps = {}
    } = customProps;
    return this.formatOptions({
      options,
      valueField,
      textField,
      listItemProps,
      allowValueFallback
    });
  }

  handleChange(id, value, index, e) {
    e && e.preventDefault && e.preventDefault();
    let {
      onChange,
      isReadOnly,
      needCloseOnSelect
    } = this.props;
    let {
      optionsNormalize
    } = this.state;
    !isReadOnly && onChange && onChange(id, optionsNormalize[id]); // this.valueInput && this.valueInput.focus({preventScroll:true});

    needCloseOnSelect && this.handlePopupClose(e);
  }

  responsiveFunc(_ref) {
    let {
      mediaQueryOR
    } = _ref;
    return {
      tabletMode: mediaQueryOR([{
        maxWidth: 700
      }])
    };
  }

  handleKeyDown(e) {
    let {
      onChange,
      isPopupOpen,
      onKeyDown,
      isPopupOpenOnEnter,
      needCloseOnSelect,
      isPopupReady
    } = this.props;
    let {
      hoverIndex,
      optionsNormalize
    } = this.state;
    let options = this.handleFilterSuggestions();
    let {
      keyCode
    } = e;

    if (!isPopupOpen && !isPopupOpenOnEnter) {
      onKeyDown && onKeyDown(e);
    }

    if (isPopupOpen && (keyCode === 38 || keyCode === 40 || keyCode === 13) && e.preventDefault) {
      e.preventDefault(); //prevent body scroll  and enter key prevent
    } else if (!isPopupOpen && keyCode === 40) {
      e.preventDefault(); //prevent body scroll

      this.togglePopup(e);
    }

    if (keyCode === 38 && isPopupOpen && options.length) {
      if (hoverIndex === 0) {// hoverIndex = options.length - 1;
      } else {
        hoverIndex -= 1;
      }

      this.setState({
        hoverIndex
      });
    } else if (keyCode === 40 && isPopupOpen && options.length) {
      if (hoverIndex === options.length - 1) {// hoverIndex = 0;
      } else {
        if (hoverIndex === options.length - 3) {
          this.handleGetNextOptions();
        }

        hoverIndex += 1;
      }

      this.setState({
        hoverIndex
      });
    } else if (keyCode === 13) {
      let option = options[hoverIndex];
      let {
        id
      } = option || {};

      if (isPopupReady && !getIsEmptyValue(id) && onChange) {
        onChange(id, optionsNormalize[id]);
        needCloseOnSelect && this.handlePopupClose(e);
      }

      if (!isPopupReady && isPopupOpenOnEnter) {
        this.togglePopup(e);
      }
    } else if (keyCode === 27) {
      this.valueInput && this.valueInput.focus({
        preventScroll: true
      }); //this.handlePopupClose(e);
    } else if (keyCode === 9) {
      let option = options[hoverIndex];
      let {
        id
      } = option || {};

      if (isPopupOpen && !getIsEmptyValue(id)) {
        onChange && onChange(id, optionsNormalize[id]);
        needCloseOnSelect && this.handlePopupClose(e);
      }

      if (!isPopupOpen && isPopupOpenOnEnter) {
        this.togglePopup(e);
      }
    }
  }

  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();
      }
    });
  }

  handleMouseEnter(id
  /*val, index*/
  ) {
    let {
      hoverIndex
    } = this.state;
    let {
      optionsOrder
    } = this;
    let newHoverIndex = optionsOrder.indexOf(id);
    hoverIndex !== newHoverIndex && this.setState({
      hoverIndex: newHoverIndex
    });
  }

  handleFilterSuggestions() {
    let {
      needLocalSearch,
      excludeOptions = dummyArray // needSearch

    } = this.props;
    let {
      options = dummyArray,
      searchStr = ''
    } = this.state; // if (
    //   (needSearch && searchStr && searchStr.trim().length) ||
    //   (excludeOptions && excludeOptions.length)
    // ) {

    searchStr = getSearchString(searchStr);
    let {
      suggestions,
      suggestionIds
    } = this.getFilterSuggestions({
      options,
      selectedOptions: excludeOptions,
      searchStr,
      needSearch: needLocalSearch
    });
    this.optionsOrder = suggestionIds;
    return suggestions; // }
    // return options;
  }

  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);
  }

  togglePopup(e) {
    let {
      togglePopup,
      isReadOnly,
      defaultDropBoxPosition,
      onFocus,
      isPopupOpen
    } = this.props;
    !isReadOnly && togglePopup(e, defaultDropBoxPosition ? `${defaultDropBoxPosition}` : null);
    !isPopupOpen && typeof onFocus === 'function' && onFocus(e);
  }

  handlePopupClose(e) {
    let {
      closePopupOnly
    } = this.props;
    this.valueInput && this.valueInput.focus({
      preventScroll: true
    });
    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() {
    let {
      valueInput
    } = this;
    valueInput && valueInput.setSelectionRange(valueInput, 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 {
      excludeOptions = dummyArray
    } = this.props;
    let {
      options = dummyArray
    } = this.state;
    let {
      optionsOrder
    } = this;
    let typeString = this.valueInputTypeString;
    this.valueInputTypeString = '';

    let changeValue = () => {
      let optionDetails = this.autoSelectSuggestions[this.autoSelectIndex];
      let {
        id
      } = optionDetails || {};

      if (!getIsEmptyValue(id)) {
        this.handleChange(id);
        let hoverIndex = optionsOrder.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 {
        suggestions = []
      } = this.getFilterSuggestions({
        options,
        selectedOptions: excludeOptions,
        searchStr: typeString,
        needSearch: true,
        isStartsWithSearch: true
      });
      this.autoSelectIndex = 0;
      this.autoSelectSuggestions = suggestions;
      changeValue();
    }
  }

  handleAddNewOption() {
    let {
      searchStr
    } = this.state;
    let {
      onAddNewOption,
      getCustomEmptyState
    } = this.props;

    if (getCustomEmptyState) {
      this.setState({
        searchStr: ''
      });
      this.handleFetchOptions(onAddNewOption, searchStr);
    }
  }

  handleExposePopupHandlers() {
    let {
      removeClose,
      openPopupOnly,
      closePopupOnly,
      togglePopup,
      getPopupHandlers
    } = this.props;
    let methods = {
      removeClose,
      openPopup: openPopupOnly,
      closePopup: closePopupOnly,
      togglePopup
    };
    getPopupHandlers && getPopupHandlers(methods);
  }

  handleGetAddNewOptionText() {
    let {
      searchStr
    } = this.state;
    let {
      getCustomEmptyState
    } = this.props;
    return getCustomEmptyState({
      searchString: searchStr,
      onAddNewOption: this.handleAddNewOption
    });
  }

  render() {
    let {
      needSearch,
      dropBoxSize,
      emptyMessage,
      searchEmptyMessage,
      needBorder,
      needSelectDownIcon,
      position,
      defaultDropBoxPosition,
      getTargetRef,
      getContainerRef,
      removeClose,
      isPopupOpen,
      isPopupReady,
      animationStyle,
      textBoxSize,
      textBoxVariant,
      searchBoxSize,
      searchBoxPlaceHolder,
      maxLength,
      isDisabled,
      title,
      size,
      placeHolder,
      className,
      isReadOnly,
      dataId,
      needResponsive,
      borderColor,
      needTick,
      listItemSize,
      boxSize,
      needListBorder,
      getFooter,
      getChildren,
      getCustomEmptyState,
      isParentBased,
      i18nKeys,
      htmlId,
      children,
      iconOnHover,
      customProps,
      autoComplete,
      ariaLabelledby,
      isLoading,
      dataSelectorId,
      isAbsolutePositioningNeeded,
      positionsOffset,
      targetOffset,
      isRestrictScroll,
      dropBoxPortalId
    } = this.props;
    let {
      TextBoxIcon_i18n,
      TextBox_ally_label = 'click to select options'
    } = i18nKeys;
    i18nKeys = Object.assign({}, i18nKeys, {
      emptyText: i18nKeys.emptyText || emptyMessage,
      searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
    });
    let {
      hoverIndex,
      selected,
      searchStr,
      isFetchingOptions,
      selectedId,
      options
    } = this.state;
    let suggestions = this.handleFilterSuggestions();
    let setAriaId = this.getNextAriaId();
    let ariaErrorId = this.getNextAriaId();
    let {
      TextBoxProps = {},
      DropdownSearchTextBoxProps = {},
      SuggestionsProps = {},
      TextBoxIconProps = {}
    } = customProps;
    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 : ''}`,
      "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}`
    }, needSelectDownIcon ? /*#__PURE__*/React.createElement(TextBoxIcon, {
      a11y: {
        role: 'Menuitem',
        ariaLabel: TextBox_ally_label,
        ariaControls: setAriaId,
        ariaExpanded: !isReadOnly && !isDisabled && isPopupOpen ? true : false,
        ariaHaspopup: true,
        ariaReadonly: true,
        ariaActivedescendant: selectedId,
        ariaOwns: setAriaId,
        ariaLabelledby: ariaLabelledby
      },
      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`,
      isClickable: isReadOnly || isDisabled ? false : true,
      customClass: {
        customTBoxWrap: isReadOnly || isDisabled ? '' : style.input
      },
      needEffect: isReadOnly || isDisabled ? false : true,
      onKeyPress: this.handleValueInputChange,
      borderColor: borderColor,
      htmlId: htmlId,
      isFocus: isPopupReady,
      autoComplete: autoComplete,
      isScrollPrevent: true,
      customProps: {
        TextBoxProps: {
          'data-title': title || selected,
          ...TextBoxProps
        }
      },
      ...TextBoxIconProps
    }, /*#__PURE__*/React.createElement(Container, {
      isInline: true,
      isCover: false,
      alignBox: "row",
      align: "both",
      className: style.rightPlaceholder
    }, /*#__PURE__*/React.createElement(Container, {
      align: "both",
      dataId: `${dataId}_downIcon`,
      "aria-hidden": true,
      className: style.arrowIcon
    }, /*#__PURE__*/React.createElement(Icon, {
      name: "ZD-down",
      size: "7"
    })), children ? /*#__PURE__*/React.createElement(Box, {
      className: isPopupOpen ? style.rotate : '',
      dataId: `${dataId}_children`
    }, children) : null)) : /*#__PURE__*/React.createElement(Textbox, {
      a11y: {
        role: 'Menuitem',
        ariaLabel: TextBox_ally_label,
        ariaControls: setAriaId,
        ariaExpanded: !isReadOnly && !isDisabled && isPopupOpen ? true : false,
        ariaHaspopup: true,
        ariaReadonly: true,
        ariaActivedescendant: selectedId,
        ariaOwns: setAriaId,
        ariaLabelledby: ariaLabelledby
      },
      isDisabled: isDisabled,
      inputRef: this.valueInputRef,
      maxLength: maxLength,
      needBorder: needBorder,
      onFocus: this.handleSelectFocus,
      onKeyDown: getChildren && this.handleKeyDown,
      placeHolder: placeHolder,
      isReadOnly: true,
      needEffect: isReadOnly || isDisabled ? false : true,
      size: textBoxSize,
      value: selected,
      variant: textBoxVariant,
      needReadOnlyStyle: isReadOnly ? true : false,
      dataId: `${dataId}_textBox`,
      isClickable: isReadOnly || isDisabled ? false : true,
      onKeyPress: this.handleValueInputChange,
      borderColor: borderColor,
      htmlId: htmlId,
      autoComplete: autoComplete,
      isFocus: isPopupReady,
      isScrollPrevent: true,
      customProps: {
        'data-title': title || selected,
        ...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}`,
        getRef: getContainerRef,
        isActive: isPopupReady,
        isAnimate: true,
        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
      }, 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
        }
      }))) : null, /*#__PURE__*/React.createElement(CardContent, {
        shrink: true,
        customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
        eleRef: this.suggestionContainerRef
      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
        activeId: selectedId,
        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,
        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()) : null)) : /*#__PURE__*/React.createElement(Box, {
        flexible: true
      }, getChildren())));
    }) : null);
  }

}
SelectComponent.propTypes = Select_propTypes;
SelectComponent.defaultProps = Select_defaultProps;
SelectComponent.displayName = 'Select';
let Select = Popup(SelectComponent);
Select.defaultProps = SelectComponent.defaultProps;
Select.propTypes = Select_propTypes;
Select.displayName = 'Select';
export default Select; // if (__DOCS__) {
//   Select.docs = {
//     componentGroup: 'Form Elements',
//     folderName: 'Style Guide',
//     external: true,
//     description: ' '
//   };
//   // eslint-disable-next-line react/forbid-foreign-prop-types
//   Select.propTypes = SelectComponent.propTypes;
// }