@zohodesk/components 1.0.0-temp-236 → 1.0.0-temp-239

package/es/v1/Select/Select.js

@@ -0,0 +1,975 @@
+/**** 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/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
+    }); // eslint-disable-next-line
+
+    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);
+  }
+
+  UNSAFE_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; // eslint-disable-next-line
+
+    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,
+      customProps = {}
+    } = props;
+    let {
+      listItemProps = {}
+    } = customProps;
+    return this.formatOptions({
+      options,
+      valueField,
+      textField,
+      listItemProps
+    });
+  }
+
+  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) {
+      // eslint-disable-next-line
+      if (hoverIndex === 0) {// hoverIndex = options.length - 1;
+      } else {
+        hoverIndex -= 1;
+      }
+
+      this.setState({
+        hoverIndex
+      });
+    } else if (keyCode === 40 && isPopupOpen && options.length) {
+      // eslint-disable-next-line
+      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 = {},
+      TextBoxIconProps = {},
+      DropdownSearchTextBoxProps = {},
+      SuggestionsProps = {}
+    } = 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, {
+      alignBox: "row",
+      align: "both"
+    }, children ? /*#__PURE__*/React.createElement(Box, {
+      className: isPopupOpen ? style.rotate : '',
+      dataId: `${dataId}_children`
+    }, children) : null, /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      dataId: `${dataId}_downIcon`,
+      "aria-hidden": true,
+      className: style.arrowIcon
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-down",
+      size: "7"
+    })))) : /*#__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;
+// }