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

package/es/Select/Select.js

@@ -1,1022 +0,0 @@
-/**** 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 { dummyObj, 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.getVirtualizerPublicMethods = this.getVirtualizerPublicMethods.bind(this);
-    this.setSuggestionsVirtualizerContainerRefFunction = this.setSuggestionsVirtualizerContainerRefFunction.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;
-
-    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, prevState) {
-    let {
-      hoverIndex,
-      searchStr,
-      selectedValueIndex
-    } = this.state;
-    let {
-      needLocalSearch,
-      onDropBoxClose,
-      onDropBoxOpen,
-      needSearch,
-      onSearch,
-      isPopupOpen,
-      isSearchClearOnClose,
-      isVirtualizerEnabled
-    } = this.props;
-
-    if (isVirtualizerEnabled && !!this.virtualizerMethods) {
-      let position = prevState.hoverIndex > hoverIndex ? 'top' : 'bottom';
-      this.virtualizerMethods.getElementVisiblePercentage(hoverIndex) < 50 && this.virtualizerMethods.scrollToIndex(hoverIndex, position);
-    } else {
-      let {
-        suggestionContainer,
-        optionsOrder
-      } = this;
-      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);
-
-        if (isVirtualizerEnabled && !!this.virtualizerMethods) {
-          this.virtualizerMethods.getElementVisiblePercentage(hoverIndex) < 50 && this.virtualizerMethods.scrollToIndex(hoverIndex);
-        }
-
-        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 = dummyObj,
-      searchFields,
-      secondaryField
-    } = props;
-    let {
-      listItemProps = dummyObj
-    } = customProps;
-    return this.formatOptions({
-      options,
-      valueField,
-      textField,
-      secondaryField,
-      searchFields,
-      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,
-      searchFields,
-      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,
-      searchFields,
-      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;
-    typeof this.setSuggestionsVirtualizerRef === 'function' && this.setSuggestionsVirtualizerRef(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
-    });
-  }
-
-  getVirtualizerPublicMethods(methods) {
-    this.virtualizerMethods = methods;
-  }
-
-  setSuggestionsVirtualizerContainerRefFunction(refFunc) {
-    this.setSuggestionsVirtualizerRef = refFunc;
-    this.suggestionContainer && refFunc(this.suggestionContainer);
-  }
-
-  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,
-      isVirtualizerEnabled,
-      renderCustomToggleIndicator,
-      renderCustomSearchClearComponent
-    } = 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
-        }
-      },
-      renderRightPlaceholderNode: typeof renderCustomToggleIndicator == 'function' ? renderCustomToggleIndicator({
-        togglePopup: this.togglePopup,
-        isPopupOpened: isPopupReady,
-        isReadOnly: isReadOnly,
-        isDisabled: isDisabled
-      }) : renderCustomToggleIndicator,
-      ...TextBoxIconProps
-    }, !renderCustomToggleIndicator || children ? /*#__PURE__*/React.createElement(Container, {
-      isInline: true,
-      isCover: false,
-      alignBox: "row",
-      align: "both",
-      className: style.rightPlaceholder
-    }, !renderCustomToggleIndicator ? /*#__PURE__*/React.createElement(Container, {
-      align: "both",
-      dataId: `${dataId}_downIcon`,
-      "aria-hidden": true,
-      className: style.arrowIcon
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-down",
-      size: "7"
-    })) : null, children ? /*#__PURE__*/React.createElement(Box, {
-      className: isPopupOpen ? style.rotate : '',
-      dataId: `${dataId}_children`
-    }, children) : null) : 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
-        },
-        renderCustomClearComponent: renderCustomSearchClearComponent
-      }))) : null, /*#__PURE__*/React.createElement(CardContent, {
-        shrink: true,
-        customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
-        eleRef: this.suggestionContainerRef
-      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
-        key: searchStr.trim(),
-        activeId: selectedId,
-        isVirtualizerEnabled: isVirtualizerEnabled,
-        getVirtualizerPublicMethods: this.getVirtualizerPublicMethods,
-        setVirtualizerContainerRefFunction: this.setSuggestionsVirtualizerContainerRefFunction,
-        suggestions: suggestions,
-        getRef: this.suggestionItemRef,
-        hoverOption: hoverIndex,
-        onClick: this.handleChange,
-        onMouseEnter: this.handleMouseEnter,
-        dataId: `${dataId}_Options`,
-        needTick: needTick,
-        needBorder: needListBorder,
-        selectedOptions: [selectedId],
-        className: `${tabletMode ? style.responsivelistItemContainer : style.listItemContainer}`,
-        listItemSize: listItemSize,
-        htmlId: setAriaId,
-        a11y: {
-          ariaParentRole: 'listbox',
-          role: 'option'
-        },
-        ...SuggestionsProps
-      }) : /*#__PURE__*/React.createElement(EmptyState, {
-        isLoading: isFetchingOptions,
-        options: options,
-        searchString: searchStr,
-        suggestions: suggestions,
-        dataId: dataId,
-        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;
-// }