@zohodesk/components 1.4.11 → 1.4.13

package/es/v1/MultiSelect/MultiSelect.js

@@ -1,1119 +0,0 @@
-/**** Libraries ****/
-import React from 'react';
-import { MultiSelect_propTypes } from "./props/propTypes";
-import { MultiSelect_defaultProps } from "./props/defaultProps";
-import { defaultProps as MobileHeader_defaultProps } from "./MobileHeader/props/defaultProps";
-/**** Components ****/
-
-import Popup from "../Popup/Popup";
-import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
-import { Container, Box } from "../Layout";
-import Card, { CardContent, CardHeader, CardFooter } from "../Card/Card";
-import SelectedOptions from "./SelectedOptions";
-import Suggestions from "./Suggestions";
-import EmptyState from "./EmptyState";
-import MobileHeader from "./MobileHeader/MobileHeader";
-import MultiSelectHeader from "./MultiSelectHeader";
-import CssProvider from "../../Provider/CssProvider";
-import { getUniqueId } from "../../Provider/IdProvider";
-import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
-import Loader from '@zohodesk/svg/lib/Loader/Loader';
-import isMobilePopover from "../DropBox/utils/isMobilePopover";
-/**** Icons ****/
-
-import { Icon } from '@zohodesk/icons';
-/**** CSS ****/
-
-import style from "../../MultiSelect/MultiSelect.module.css";
-/**** Methods ****/
-
-import { debounce, scrollTo, bind, getIsEmptyValue, getSearchString, findScrollEnd } from "../../utils/Common.js";
-import { makeFormatOptions, makeGetMultiSelectFilterSuggestions as makeGetFilterSuggestions, makeGetMultiSelectSelectedOptions as makeGetSelectedOptions, makeObjectConcat, filterSelectedOptions, makeGetIsShowClearIcon } from "../../utils/dropDownUtils"; // import { getLibraryConfig } from '../../Provider/Config';
-
-/* eslint-disable react/forbid-component-props */
-
-/* eslint-disable react/no-unused-prop-types */
-
-const dummyArray = [];
-export class MultiSelectComponent extends React.Component {
-  constructor(props) {
-    super(props);
-    this.getNextAriaId = getUniqueId(this);
-    this.getFilterSuggestions = makeGetFilterSuggestions();
-    this.formatOptions = makeFormatOptions();
-    this.getSelectedOptions = makeGetSelectedOptions();
-    this.getIsShowClearIcon = makeGetIsShowClearIcon(); //Use in AdvancedMultiSelect component
-
-    this.objectConcat = makeObjectConcat();
-    this.formatSelectedOptions = makeFormatOptions();
-    const {
-      selectedOptions,
-      searchDebounceTime = 500
-    } = this.props;
-    const {
-      allOptions,
-      normalizedAllOptions,
-      normalizedFormatOptions
-    } = this.handleFormatOptions(this.props);
-    const {
-      formatSelectedOptions,
-      normalizedSelectedOptions,
-      selectedOptionIds
-    } = this.handleGetSelectedOptions(selectedOptions, normalizedFormatOptions, this.props);
-    this.state = {
-      options: allOptions,
-      optionsNormalize: normalizedAllOptions,
-      selectedOptions: formatSelectedOptions,
-      selectedOptionIds,
-      searchStr: '',
-      hoverOption: 0,
-      isFetchingOptions: false,
-      highLightedSelectOptions: [],
-      lastHighLightedSelectOption: '',
-      shiftKeyPressHighLighted: 0,
-      isActive: false
-    };
-    this.allSelectedOptionsDetails = normalizedSelectedOptions;
-    this.suggestionsOrder = [];
-    this._isMounted = false;
-    bind.apply(this, ['handleInputCick', 'handleFilterSuggestions', 'handleKeyDown', 'handleSelectAll', 'handleDeselectAll', 'handleSelectOption', 'handleRemoveOption', 'handleSearch', 'handleClickSelectedOption', 'handleChange', 'handlePopupClose', 'togglePopup', 'selectedOptionRef', 'searchInputRef', 'suggestionContainerRef', 'suggestionItemRef', 'selectedOptionContainerRef', 'handleActive', 'handleInactive', 'handleMouseEnter', 'handleFetchOptions', 'handleFormatOptions', 'handleGetSelectedOptions', 'handleComponentDidUpdate', 'handleInputFocus', 'handleExposedPublicMethods', 'getSelectionUI', 'moveFocusToTextbox']);
-    this.handleSearchOptions = debounce(this.handleSearchOptions.bind(this), searchDebounceTime);
-    this.handleScroll = this.handleScroll.bind(this);
-    this.handleScrollFuncCall = debounce(this.handleScrollFuncCall.bind(this), 500);
-  }
-
-  componentDidMount() {
-    // let { suggestionContainer } = this;
-    this._isMounted = true;
-    this.handleExposedPublicMethods(); // suggestionContainer &&
-    //   suggestionContainer.addEventListener('scroll', this.handleScroll);
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const {
-      selectedOptions,
-      options,
-      valueField,
-      textField,
-      prefixText
-    } = nextProps;
-    const oldProps = this.props;
-
-    if (selectedOptions !== oldProps.selectedOptions || options !== oldProps.options || valueField !== oldProps.valueField || textField !== oldProps.textField || prefixText !== oldProps.prefixText //For GroupMultiSelect component
-    ) {
-      const {
-        allOptions,
-        normalizedAllOptions,
-        normalizedFormatOptions
-      } = this.handleFormatOptions(nextProps);
-      const {
-        allSelectedOptionsDetails: oldAllSelectedOptionsDetails
-      } = this;
-      const optionsDetails = Object.assign({}, oldAllSelectedOptionsDetails, normalizedFormatOptions);
-      const {
-        formatSelectedOptions,
-        normalizedSelectedOptions,
-        selectedOptionIds
-      } = this.handleGetSelectedOptions(selectedOptions, optionsDetails, nextProps);
-      this.allSelectedOptionsDetails = Object.assign(oldAllSelectedOptionsDetails, normalizedSelectedOptions);
-      this.setState({
-        options: allOptions,
-        optionsNormalize: normalizedAllOptions,
-        selectedOptions: formatSelectedOptions,
-        selectedOptionIds
-      }, () => {
-        const {
-          hoverOption
-        } = this.state;
-        const suggestions = this.handleFilterSuggestions();
-        const suggestionsLen = suggestions.length;
-        const {
-          id
-        } = suggestions[hoverOption] || {};
-        const newHoverOption = !getIsEmptyValue(id) ? hoverOption : suggestionsLen ? suggestionsLen - 1 : 0;
-        this.setState({
-          hoverOption: newHoverOption
-        });
-      });
-    }
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    const {
-      suggestionContainer,
-      selectedOptionContainer,
-      suggestionsOrder
-    } = this;
-    const {
-      hoverOption,
-      highLightedSelectOptions,
-      selectedOptions,
-      searchStr
-    } = this.state;
-    const {
-      needLocalSearch,
-      isPopupOpen,
-      onDropBoxClose,
-      onDropBoxOpen,
-      isSearchClearOnClose
-    } = this.props; //handle dropbox open & close
-
-    if (prevProps.isPopupOpen !== isPopupOpen) {
-      isPopupOpen && onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
-
-      if (!isPopupOpen) {
-        this.setState({
-          hoverOption: 0
-        });
-        isSearchClearOnClose && searchStr && this.handleSearch('');
-        onDropBoxClose && onDropBoxClose();
-      }
-    } //scrollTo handling
-
-
-    const hoverId = suggestionsOrder[hoverOption] || '';
-    const selectedSuggestion = this[`suggestion_${hoverId}`];
-    const lastHighLightedSelectOption = highLightedSelectOptions.slice(-1).length ? highLightedSelectOptions.slice(-1)[0] : null;
-    const selectedOption = this[`selectedOption_${lastHighLightedSelectOption}`];
-    isPopupOpen && scrollTo(suggestionContainer, selectedSuggestion);
-    selectedOptions.length && selectedOption && scrollTo(selectedOptionContainer, selectedOption); //When suggestions length less than 5, getNextOptions function call
-
-    const {
-      isNextOptions,
-      getNextOptions
-    } = this.props; // let { searchStr } = this.state;
-
-    const suggestions = this.handleFilterSuggestions();
-    const suggestionsLen = suggestions.length;
-
-    if (isPopupOpen && suggestionsLen <= 5 && isNextOptions && getNextOptions && !needLocalSearch) {
-      this.handleFetchOptions(getNextOptions, searchStr);
-    } //Need To MultiselectNew Component
-
-
-    this.handleComponentDidUpdate(prevProps, prevState); // if (isPopupOpen && isNextOptions && prevProps.selectedOptions.length !== selectedOptions.length) {
-    //   let { scrollHeight, clientHeight } = this.suggestionContainer || {};
-    //   let isElementScrollable = scrollHeight > clientHeight;
-    //   if (!isElementScrollable) {
-    //     this.handleScrollFuncCall();
-    //   }
-    // }
-  }
-
-  componentWillUnmount() {
-    // let { suggestionContainer } = this;
-    this._isMounted = false; // suggestionContainer &&
-    //   suggestionContainer.removeEventListener('scroll', this.handleScroll);
-  }
-
-  handleComponentDidUpdate() {
-    return;
-  }
-
-  handleFormatOptions(props) {
-    const {
-      options,
-      valueField,
-      textField,
-      prefixText,
-      disabledOptions
-    } = props;
-    return this.formatOptions({
-      options,
-      valueField,
-      textField,
-      prefixText,
-      optionType: 'default',
-      disabledOptions
-    });
-  }
-
-  handleGetSelectedOptions(selectedOptions, normalizedFormatOptions) {
-    return this.getSelectedOptions({
-      selectedOptions,
-      normalizedFormatOptions
-    });
-  }
-
-  handleInputCick(e) {
-    const {
-      removeClose
-    } = this.props;
-    const {
-      highLightedSelectOptions,
-      searchStr = ''
-    } = this.state;
-
-    if (highLightedSelectOptions.length) {
-      this.setState({
-        highLightedSelectOptions: [],
-        shiftKeyPressHighLighted: 0,
-        lastHighLightedSelectOption: ''
-      });
-      removeClose(e);
-    } else if (searchStr.length) {
-      removeClose(e);
-    } else {
-      this.togglePopup(e);
-    }
-  }
-
-  handleFilterSuggestions() {
-    const {
-      options = dummyArray,
-      searchStr = ''
-    } = this.state;
-    const {
-      selectedOptions,
-      needLocalSearch,
-      keepSelectedOptions
-    } = this.props;
-    const {
-      suggestions,
-      suggestionIds
-    } = this.getFilterSuggestions({
-      options,
-      selectedOptions,
-      searchStr: getSearchString(searchStr),
-      needSearch: needLocalSearch,
-      keepSelectedOptions
-    });
-    this.suggestionsOrder = suggestionIds;
-    return suggestions;
-  }
-
-  handleKeyDown(e) {
-    const {
-      keyCode,
-      ctrlKey,
-      metaKey,
-      shiftKey
-    } = e;
-    let suggestions = [];
-    let {
-      hoverOption,
-      searchStr,
-      highLightedSelectOptions,
-      lastHighLightedSelectOption,
-      shiftKeyPressHighLighted,
-      selectedOptionIds: selectedOptions
-    } = this.state;
-    const {
-      isNextOptions,
-      getNextOptions,
-      isPopupOpen,
-      isPopupOpenOnEnter,
-      onKeyDown
-    } = this.props;
-    const highLightedSelectOptionsLen = highLightedSelectOptions.length;
-
-    if (isPopupOpen && (keyCode === 38 || keyCode === 40 || keyCode === 13 || keyCode === 27 || keyCode === 9)) {
-      suggestions = this.handleFilterSuggestions();
-    }
-
-    if (!isPopupOpen && !isPopupOpenOnEnter) {
-      onKeyDown && onKeyDown(e);
-    }
-
-    if (!isPopupOpen && keyCode === 40) {
-      //down arrow press popup open
-      e.preventDefault(); //prevent body scroll
-
-      this.togglePopup(e);
-    }
-
-    const suggestionsLen = suggestions.length;
-
-    if (suggestionsLen && isPopupOpen && keyCode === 38) {
-      //up arrow
-
-      /*if (hoverOption === 0) { //disable first to last option higlight
-        !isNextOptions && this.setState({ hoverOption: suggestionsLen - 1 });
-      }*/
-      if (hoverOption) {
-        this.setState({
-          hoverOption: hoverOption - 1
-        });
-      }
-    } else if (suggestionsLen && isPopupOpen && keyCode === 40) {
-      //down arrow
-
-      /*else if (hoverOption === suggestionsLen - 1 || hoverOption === null) {
-        //disable last to first option higlight
-        !isNextOptions && this.setState({ hoverOption: 0 });
-      }*/
-      if (isNextOptions && suggestionsLen >= 5 && hoverOption === suggestionsLen - 3) {
-        getNextOptions && this.handleFetchOptions(getNextOptions, searchStr);
-        this.setState({
-          hoverOption: hoverOption + 1
-        });
-      } else if (suggestionsLen - 1 > hoverOption) {
-        this.setState({
-          hoverOption: hoverOption + 1
-        });
-      }
-    } else if (keyCode === 13) {
-      //enter key
-      const selectedOption = suggestions[hoverOption] || {};
-      const {
-        id
-      } = selectedOption;
-      isPopupOpen && !getIsEmptyValue(id) && this.handleSelectOption(id, e);
-      !isPopupOpen && isPopupOpenOnEnter && this.togglePopup(e);
-    } else if (selectedOptions.length && keyCode === 8 && !searchStr.length) {
-      //backspace key
-      if (highLightedSelectOptionsLen) {
-        this.handleRemoveOption(highLightedSelectOptions);
-      } else {
-        this.handleRemoveOption(selectedOptions.slice(-1)); // this.setState({
-        //   highLightedSelectOptions: selectedOptions.slice(-1)
-        // });
-      }
-    } else if (selectedOptions && keyCode === 65 && (ctrlKey || metaKey) && !searchStr.length) {
-      //ctrl+a key
-      this.setState({
-        highLightedSelectOptions: selectedOptions,
-        shiftKeyPressHighLighted: 0
-      });
-    } else if (keyCode === 39 && shiftKey && selectedOptions.length && !searchStr.length) {
-      //shift+right arrow=39
-      const lastHighLightedSelectOptionIndex = lastHighLightedSelectOption && selectedOptions.indexOf(lastHighLightedSelectOption) >= 0 ? selectedOptions.indexOf(lastHighLightedSelectOption) : 0;
-      const newShiftKeyPressHighLighted = shiftKeyPressHighLighted ? shiftKeyPressHighLighted : shiftKeyPressHighLighted + 1;
-      const newHighLightedSelectOption = lastHighLightedSelectOptionIndex !== null ? selectedOptions[lastHighLightedSelectOptionIndex + newShiftKeyPressHighLighted] : selectedOptions[0];
-
-      if (!getIsEmptyValue(newHighLightedSelectOption)) {
-        const newLastHighLightedSelectOption = lastHighLightedSelectOption ? lastHighLightedSelectOption : selectedOptions[0];
-        highLightedSelectOptions = !shiftKeyPressHighLighted ? [newLastHighLightedSelectOption] : highLightedSelectOptions;
-        const isRemove = highLightedSelectOptions.indexOf(newHighLightedSelectOption) >= 0 && newHighLightedSelectOption !== lastHighLightedSelectOption ? true : false;
-        const newHighLightedSelectOptions = isRemove ? highLightedSelectOptions.filter(option => option !== newHighLightedSelectOption) : [...highLightedSelectOptions, newHighLightedSelectOption];
-        this.setState({
-          highLightedSelectOptions: newHighLightedSelectOptions,
-          shiftKeyPressHighLighted: newShiftKeyPressHighLighted + 1,
-          lastHighLightedSelectOption: newLastHighLightedSelectOption
-        });
-      }
-    } else if (keyCode === 37 && shiftKey && selectedOptions.length && !searchStr.length) {
-      // shift+left arrow=37
-      const lastHighLightedSelectOptionIndex = lastHighLightedSelectOption ? selectedOptions.indexOf(lastHighLightedSelectOption) : selectedOptions.length - 1;
-      const newShiftKeyPressHighLighted = shiftKeyPressHighLighted !== 1 ? shiftKeyPressHighLighted : shiftKeyPressHighLighted - 1;
-      const newHighLightedSelectOption = selectedOptions[lastHighLightedSelectOptionIndex + newShiftKeyPressHighLighted - 1];
-
-      if (!getIsEmptyValue(newHighLightedSelectOption)) {
-        const newLastHighLightedSelectOption = lastHighLightedSelectOption ? lastHighLightedSelectOption : selectedOptions.slice(-1)[0];
-        highLightedSelectOptions = !shiftKeyPressHighLighted ? [newLastHighLightedSelectOption] : highLightedSelectOptions;
-        const isRemove = highLightedSelectOptions.indexOf(newHighLightedSelectOption) >= 0 && newHighLightedSelectOption !== lastHighLightedSelectOption ? true : false;
-        const newHighLightedSelectOptions = isRemove ? highLightedSelectOptions.filter(option => option !== newHighLightedSelectOption) : [...highLightedSelectOptions, newHighLightedSelectOption];
-        this.setState({
-          highLightedSelectOptions: newHighLightedSelectOptions,
-          shiftKeyPressHighLighted: newShiftKeyPressHighLighted - 1,
-          lastHighLightedSelectOption: newLastHighLightedSelectOption
-        });
-      }
-    } else if ((keyCode === 39 || keyCode === 37) && selectedOptions.length && !searchStr.length) {
-      const isRightArrow = keyCode === 39 ? true : false; // let isLefttArrow = keyCode === 37 ? true : false;
-
-      if (highLightedSelectOptions.length) {
-        const [lastHighLightedSelectOption] = highLightedSelectOptions.slice(-1);
-        const lastHighLightedSelectOptionIndex = selectedOptions.indexOf(lastHighLightedSelectOption);
-        const newLastHighLightedSelectOptionIndex = isRightArrow ? lastHighLightedSelectOptionIndex === selectedOptions.length - 1 ? lastHighLightedSelectOptionIndex : lastHighLightedSelectOptionIndex + 1 : lastHighLightedSelectOptionIndex - 1;
-        const newLastHighLightedSelectOption = selectedOptions[newLastHighLightedSelectOptionIndex];
-        const isEmptyHighlighted = isRightArrow && highLightedSelectOptions.length === 1 && selectedOptions.slice(-1)[0] === lastHighLightedSelectOption ? true : false;
-
-        if (!getIsEmptyValue(newLastHighLightedSelectOption)) {
-          this.setState({
-            lastHighLightedSelectOption: isEmptyHighlighted ? '' : newLastHighLightedSelectOption,
-            highLightedSelectOptions: isEmptyHighlighted ? [] : [newLastHighLightedSelectOption],
-            shiftKeyPressHighLighted: 0
-          });
-        }
-      } else {
-        const [newLastHighLightedSelectOption] = isRightArrow ? selectedOptions : selectedOptions.slice(-1);
-        this.setState({
-          lastHighLightedSelectOption: newLastHighLightedSelectOption,
-          highLightedSelectOptions: [newLastHighLightedSelectOption],
-          shiftKeyPressHighLighted: 0
-        });
-      }
-    } // eslint-disable-next-line
-    else if (keyCode === 27) {// this.handlePopupClose(e);
-    } else if (keyCode === 9) {
-      this.handlePopupClose(e);
-    }
-  }
-
-  handleSelectAll(e) {
-    e && e.preventDefault();
-    const suggestions = this.handleFilterSuggestions();
-    const {
-      selectedOptions
-    } = this.props;
-    const newSelectedOptions = [];
-    suggestions.forEach(option => {
-      const {
-        id
-      } = option;
-
-      if (selectedOptions.indexOf(id) === -1) {
-        newSelectedOptions.push(id);
-      }
-    });
-    this.handleChange([...selectedOptions, ...newSelectedOptions]); // this.handlePopupClose(e);
-  }
-
-  handleDeselectAll(e) {
-    e && e.preventDefault();
-    const {
-      removeClose
-    } = this.props;
-    const {
-      highLightedSelectOptions
-    } = this.state;
-
-    if (highLightedSelectOptions.length) {
-      this.setState({
-        highLightedSelectOptions: [],
-        lastHighLightedSelectOption: ''
-      });
-    }
-
-    removeClose(e);
-    this.handleChange([]);
-  }
-
-  handleSelectOption(option, value, index, e) {
-    const {
-      selectedOptions,
-      isSearchClearOnSelect,
-      keepSelectedOptions
-    } = this.props;
-    const {
-      searchStr
-    } = this.state;
-
-    if (searchStr.trim() != '' && isSearchClearOnSelect) {
-      this.handleSearch('');
-    }
-
-    if (keepSelectedOptions && selectedOptions.indexOf(option) != -1) {
-      let newSelectedOptions = selectedOptions.filter(id => {
-        return id != option;
-      });
-      this.handleChange(newSelectedOptions, e);
-    } else {
-      this.handleChange([...selectedOptions, option], e);
-    }
-  }
-
-  handleRemoveOption(options) {
-    const newOptions = !getIsEmptyValue(options) && !Array.isArray(options) ? [options] : options;
-    const {
-      selectedOptions,
-      isReadOnly
-    } = this.props;
-    const {
-      highLightedSelectOptions,
-      lastHighLightedSelectOption,
-      shiftKeyPressHighLighted
-    } = this.state;
-
-    if (newOptions.length && !isReadOnly) {
-      const newSelectedOptions = selectedOptions.filter(option => newOptions.indexOf(option) === -1);
-      const newHighLightedSelectOptions = highLightedSelectOptions.filter(option => newSelectedOptions.indexOf(option) >= 0);
-      let isHighlightedRemoved = false;
-      const newOptionsLen = newOptions.length;
-
-      for (let i = 0; i < newOptionsLen; i++) {
-        const removedOption = newOptions[i];
-
-        if (highLightedSelectOptions.indexOf(removedOption) >= 0) {
-          isHighlightedRemoved = true;
-          break;
-        }
-      }
-
-      this.setState({
-        lastHighLightedSelectOption: newSelectedOptions.indexOf(lastHighLightedSelectOption) >= 0 && !isHighlightedRemoved ? lastHighLightedSelectOption : '',
-        highLightedSelectOptions: isHighlightedRemoved ? [] : newHighLightedSelectOptions,
-        shiftKeyPressHighLighted: isHighlightedRemoved ? 0 : shiftKeyPressHighLighted
-      });
-      this.handleChange(newSelectedOptions);
-    }
-
-    this.moveFocusToTextbox();
-  }
-
-  handleMouseEnter(id, val, hoverOptionIndex, e) {
-    e && e.preventDefault();
-    const {
-      hoverOption
-    } = this.state;
-    const {
-      suggestionsOrder
-    } = this;
-    const newHoverIndex = suggestionsOrder.indexOf(id);
-
-    if (newHoverIndex !== hoverOption) {
-      this.setState({
-        hoverOption: newHoverIndex
-      });
-    }
-  }
-
-  handleFetchOptions() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    const [APICall, searchStr] = args;
-    const {
-      isFetchingOptions
-    } = this.state;
-    const {
-      _isMounted
-    } = this;
-    const isForce = isFetchingOptions && searchStr ? true : false;
-
-    if (!isFetchingOptions && APICall || isForce) {
-      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
-        });
-      }
-    }
-  }
-
-  handleSearchOptions() {
-    const {
-      onSearch
-    } = this.props;
-    const {
-      searchStr
-    } = this.state;
-    searchStr && this.handleFetchOptions(onSearch, searchStr);
-  }
-
-  handleSearch(value, e) {
-    const {
-      onSearch,
-      isPopupOpen
-    } = this.props;
-    !isPopupOpen && e && this.togglePopup(e);
-    const {
-      searchStr = ''
-    } = this.state;
-    const searchStrRegex = getSearchString(searchStr);
-    const valueStrRegex = getSearchString(value);
-    const isSearch = searchStrRegex !== valueStrRegex ? true : false;
-    this.setState({
-      searchStr: value
-    }, () => {
-      if (!value) {
-        onSearch && onSearch('');
-      } else if (isSearch && onSearch) {
-        this.handleSearchOptions();
-      }
-    });
-  }
-
-  handleClickSelectedOption() {
-    let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-    let e = arguments.length > 1 ? arguments[1] : undefined;
-    const {
-      selectedOptions
-    } = this.props;
-    let {
-      highLightedSelectOptions,
-      lastHighLightedSelectOption
-    } = this.state;
-    const {
-      metaKey,
-      ctrlKey,
-      shiftKey
-    } = e;
-
-    if (e && shiftKey) {
-      //shift+click
-      let from = selectedOptions.indexOf(lastHighLightedSelectOption) >= 0 ? selectedOptions.indexOf(lastHighLightedSelectOption) : 0;
-      let to = id && selectedOptions.indexOf(id) >= 0 ? selectedOptions.indexOf(id) : null;
-
-      if (to >= 0 && to < from) {
-        [to] = [from, from = to];
-      }
-
-      to += 1;
-      const newSelectedHighlights = to ? selectedOptions.slice(from, to) : [];
-      to && this.setState({
-        highLightedSelectOptions: newSelectedHighlights,
-        lastHighLightedSelectOption: id
-      });
-    } else if (e && (ctrlKey || metaKey)) {
-      //ctrl+click
-      const isRemove = highLightedSelectOptions.indexOf(id) >= 0;
-      let newSelectedHighlights = [];
-
-      if (isRemove) {
-        lastHighLightedSelectOption = id === lastHighLightedSelectOption ? '' : lastHighLightedSelectOption;
-        newSelectedHighlights = highLightedSelectOptions.filter(option => option !== id);
-      } else {
-        lastHighLightedSelectOption = id;
-        newSelectedHighlights = [...highLightedSelectOptions, id];
-      }
-
-      this.setState({
-        highLightedSelectOptions: newSelectedHighlights,
-        lastHighLightedSelectOption
-      });
-    } else {
-      this.setState({
-        highLightedSelectOptions: [id],
-        lastHighLightedSelectOption: id
-      });
-    }
-
-    this.setState({
-      shiftKeyPressHighLighted: 0
-    });
-    this.moveFocusToTextbox();
-  }
-
-  handleScroll(e) {
-    let ele = e.target;
-    let isScrollReachedBottom = findScrollEnd(ele);
-    isScrollReachedBottom && this.handleScrollFuncCall();
-  }
-
-  handleScrollFuncCall() {
-    const {
-      getNextOptions,
-      isNextOptions
-    } = this.props;
-    const {
-      searchStr
-    } = this.state;
-    isNextOptions && getNextOptions && this.handleFetchOptions(getNextOptions, searchStr);
-  }
-
-  handleChange() {
-    let selectedOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    let e = arguments.length > 1 ? arguments[1] : undefined;
-    const {
-      optionsNormalize
-    } = this.state;
-    const {
-      onChange,
-      needToCloseOnSelect,
-      togglePopup,
-      selectedOptions: propSelectedOptions,
-      disabledOptions = dummyArray
-    } = this.props;
-    const {
-      newSelectedOptions
-    } = filterSelectedOptions({
-      selectedOptions,
-      propSelectedOptions,
-      disabledOptions
-    });
-    const selectedOptionsLen = newSelectedOptions.length;
-    const allSelectedOptionsDetails = [];
-
-    for (let i = 0; i < selectedOptionsLen; i++) {
-      const id = newSelectedOptions[i];
-      allSelectedOptionsDetails.push(optionsNormalize[id]);
-    }
-
-    onChange && onChange(newSelectedOptions, allSelectedOptionsDetails); // this.setState({ searchStr: '' });
-
-    this.moveFocusToTextbox();
-
-    if (needToCloseOnSelect) {
-      togglePopup(e);
-    }
-  }
-
-  togglePopup(e) {
-    const {
-      togglePopup,
-      defaultDropBoxPosition,
-      isReadOnly
-    } = this.props;
-    !isReadOnly && togglePopup(e, defaultDropBoxPosition ? `${defaultDropBoxPosition}` : null);
-  }
-
-  handlePopupClose(e) {
-    const {
-      closePopupOnly
-    } = this.props;
-    closePopupOnly(e);
-  }
-
-  searchInputRef(el) {
-    const {
-      getRef
-    } = this.props;
-    this.searchInput = el;
-    getRef && getRef(el);
-  }
-
-  selectedOptionContainerRef(el) {
-    const {
-      getTargetRef
-    } = this.props;
-    this.selectedOptionContainer = el;
-    getTargetRef(el);
-  }
-
-  selectedOptionRef(el, id) {
-    this[`selectedOption_${id}`] = el;
-  }
-
-  suggestionContainerRef(el) {
-    this.suggestionContainer = el;
-  }
-
-  suggestionItemRef(el, index, id) {
-    this[`suggestion_${id}`] = el;
-  }
-
-  handleActive(e) {
-    const {
-      searchStr,
-      isActive
-    } = this.state;
-
-    if (!isActive) {
-      this.setState({
-        isActive: true
-      });
-    }
-
-    const {
-      target
-    } = e || {};
-    target && target.setSelectionRange(target, 0);
-    const {
-      onFocus
-    } = this.props;
-    onFocus && onFocus(searchStr);
-  }
-
-  handleInactive() {
-    const {
-      isActive
-    } = this.state;
-
-    if (isActive) {
-      this.setState({
-        isActive: false
-      });
-    }
-  }
-
-  handleInputFocus() {
-    const {
-      isDisabled,
-      isReadOnly
-    } = this.props;
-    !isDisabled && !isReadOnly && this.moveFocusToTextbox();
-  }
-
-  moveFocusToTextbox() {
-    this.searchInput && this.searchInput.focus({
-      preventScroll: true
-    });
-  }
-
-  handleExposedPublicMethods() {
-    const {
-      getPublicMethods,
-      openPopupOnly
-    } = this.props;
-    getPublicMethods && getPublicMethods({
-      openPopupOnly
-    });
-  }
-
-  getSelectionUI() {
-    let isResponsive = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    let {
-      size,
-      needBorder,
-      disableAction,
-      borderColor,
-      placeHolder,
-      textBoxSize,
-      variant,
-      textBoxClass,
-      needAutoFocus,
-      htmlId,
-      children,
-      customChildrenClass,
-      autoComplete,
-      a11y,
-      disabledOptions,
-      i18nKeys,
-      isReadOnly,
-      isDisabled,
-      palette,
-      dataId,
-      setAriaId,
-      isPopupOpen,
-      ariaErrorId
-    } = this.props;
-    let {
-      isActive,
-      selectedOptions,
-      highLightedSelectOptions,
-      searchStr
-    } = this.state;
-    const {
-      clearText = 'Clear all'
-    } = i18nKeys;
-    const {
-      clearLabel = 'Clear all',
-      ariaLabelledby
-    } = a11y;
-    let {
-      isShowClearIcon: isShowClear
-    } = this.getIsShowClearIcon({
-      selectedOptions,
-      disabledOptions
-    });
-    const isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && isShowClear;
-    return /*#__PURE__*/React.createElement(Container, {
-      align: "vertical",
-      alignBox: "row",
-      className: `${style.container} ${style[size]} ${needBorder ? !disableAction ? style[`borderColor_${borderColor}`] : style.borderColor_transparent : ''} ${isActive && needBorder || isResponsive ? style.active : ''} ${textBoxClass} ${needBorder ? style.hasBorder : ''}`,
-      eleRef: this.selectedOptionContainerRef,
-      wrap: "wrap"
-    }, /*#__PURE__*/React.createElement(SelectedOptions, {
-      selectedOptions: selectedOptions,
-      highLightedSelectOptions: highLightedSelectOptions,
-      isReadOnly: isReadOnly,
-      getRef: this.selectedOptionRef,
-      onRemove: this.handleRemoveOption,
-      onSelect: this.handleClickSelectedOption,
-      size: size,
-      palette: palette,
-      dataId: `${dataId}_selectedOptions`
-    }), /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      className: style.wrapper,
-      adjust: true,
-      shrink: true
-    }, /*#__PURE__*/React.createElement("span", {
-      className: ` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
-          ${customChildrenClass ? customChildrenClass : ''}`
-    }, searchStr), /*#__PURE__*/React.createElement(TextBoxIcon, {
-      isDisabled: isDisabled,
-      inputRef: this.searchInputRef,
-      needBorder: false,
-      onBlur: this.handleInactive,
-      onChange: this.handleSearch,
-      onClick: !isResponsive ? this.handleInputCick : undefined,
-      onFocus: this.handleActive,
-      onKeyDown: this.handleKeyDown,
-      autofocus: needAutoFocus,
-      placeHolder: selectedOptions.length >= 1 ? '' : placeHolder,
-      size: textBoxSize,
-      value: searchStr,
-      variant: variant,
-      dataId: `${dataId}_textBox`,
-      isReadOnly: isReadOnly,
-      tabindex: isDisabled && '-1',
-      customClass: {
-        customTBoxWrap: style.custmInputWrapper
-      },
-      htmlId: htmlId,
-      a11y: {
-        role: 'combobox',
-        ariaOwns: setAriaId,
-        ariaControls: setAriaId,
-        ariaExpanded: !isReadOnly && !isDisabled && !disableAction && isPopupOpen ? true : false,
-        ariaHaspopup: true,
-        ariaRequired: true,
-        ariaDescribedby: ariaErrorId,
-        ariaLabelledby: ariaLabelledby
-      },
-      autoComplete: autoComplete
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      align: "vertical"
-    }, isShowClearIcon ? /*#__PURE__*/React.createElement(Box, {
-      className: `${style.delete} ${style[`${palette}Delete`]}`,
-      dataId: `${dataId}_clearIcon`,
-      "data-title": clearText,
-      onClick: this.handleDeselectAll,
-      tagName: "button",
-      "aria-label": clearLabel
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-delete",
-      size: "15"
-    })) : null, children ? /*#__PURE__*/React.createElement(Box, {
-      dataId: `${dataId}_children`
-    }, children) : null))));
-  }
-
-  render() {
-    let {
-      isReadOnly,
-      searchEmptyMessage,
-      emptyMessage,
-      noMoreOptionsMessage,
-      dropBoxSize,
-      isPopupOpen,
-      isPopupReady,
-      position,
-      defaultDropBoxPosition,
-      getContainerRef,
-      removeClose,
-      isAnimate,
-      animationStyle,
-      isDisabled,
-      title,
-      needResponsive,
-      dataId,
-      dataSelectorId,
-      isSearching,
-      borderColor,
-      disableAction,
-      isBoxPaddingNeed,
-      isAbsolutePositioningNeeded,
-      positionsOffset,
-      targetOffset,
-      isRestrictScroll,
-      palette,
-      i18nKeys,
-      getFooter,
-      needEffect,
-      boxSize,
-      isLoading,
-      selectAllText,
-      needSelectAll
-    } = this.props;
-    const {
-      selectedOptions,
-      searchStr,
-      hoverOption,
-      options,
-      isFetchingOptions,
-      selectedOptionIds
-    } = this.state;
-    const {
-      searchText = 'Searching...'
-    } = i18nKeys;
-    const suggestions = this.handleFilterSuggestions();
-    const setAriaId = this.getNextAriaId();
-    const ariaErrorId = this.getNextAriaId();
-    i18nKeys = Object.assign({}, MobileHeader_defaultProps.i18nKeys, i18nKeys, {
-      emptyText: i18nKeys.emptyText || emptyMessage,
-      searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage,
-      noMoreText: i18nKeys.noMoreText || noMoreOptionsMessage
-    });
-    let isModel = isMobilePopover(needResponsive);
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
-      "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
-      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
-      "data-title": isDisabled ? title : null,
-      onClick: this.handleInputFocus,
-      "data-selector-id": dataSelectorId
-    }, this.getSelectionUI(), !isReadOnly && !isDisabled && !disableAction && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveDropBox, {
-      animationStyle: animationStyle,
-      boxPosition: position || `${defaultDropBoxPosition}`,
-      getRef: getContainerRef,
-      isActive: isPopupReady,
-      isAnimate: isAnimate,
-      isArrow: false,
-      onClick: removeClose,
-      needResponsive: needResponsive,
-      isPadding: false,
-      isBoxPaddingNeed: isBoxPaddingNeed,
-      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
-      positionsOffset: positionsOffset,
-      targetOffset: targetOffset,
-      isRestrictScroll: isRestrictScroll,
-      palette: palette,
-      htmlId: setAriaId,
-      a11y: {
-        role: 'listbox',
-        ariaMultiselectable: true
-      },
-      size: boxSize,
-      alignBox: "row",
-      isResponsivePadding: getFooter ? false : true,
-      dataId: `${dataId}_dropbox`
-    }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, /*#__PURE__*/React.createElement(Card, {
-      customClass: `${style.box} ${style[`${palette}Box`]}`,
-      onScroll: this.handleScroll
-    }, isModel && /*#__PURE__*/React.createElement(MobileHeader, {
-      selectedOptions: selectedOptions,
-      i18nKeys: i18nKeys,
-      onClick: this.handlePopupClose
-    }, /*#__PURE__*/React.createElement("div", {
-      className: style.effect
-    }, this.getSelectionUI(true))), needSelectAll ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
-      onSelect: this.handleSelectAll,
-      selectAllText: selectAllText,
-      suggestions: suggestions,
-      dataId: dataId
-    })) : null, isLoading ? /*#__PURE__*/React.createElement(Container, {
-      align: "both",
-      className: style.loader
-    }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(CardContent, {
-      shrink: true,
-      customClass: !isModel && dropBoxSize ? style[dropBoxSize] : '',
-      eleRef: this.suggestionContainerRef
-    }, isSearching ? /*#__PURE__*/React.createElement("div", {
-      className: style[palette]
-    }, searchText) : suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
-      suggestions: suggestions,
-      getRef: this.suggestionItemRef,
-      hoverOption: hoverOption,
-      onClick: this.handleSelectOption,
-      onMouseEnter: this.handleMouseEnter,
-      needBorder: false,
-      dataId: `${dataId}_Options`,
-      palette: palette,
-      selectedOptions: selectedOptionIds,
-      a11y: {
-        role: 'option'
-      }
-    }) : /*#__PURE__*/React.createElement(EmptyState, {
-      isLoading: isFetchingOptions,
-      options: options,
-      searchString: searchStr,
-      suggestions: suggestions,
-      dataId: dataId,
-      palette: palette,
-      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);
-  }
-
-}
-MultiSelectComponent.propTypes = MultiSelect_propTypes;
-MultiSelectComponent.defaultProps = MultiSelect_defaultProps;
-MultiSelectComponent.displayName = 'MultiSelect';
-const MultiSelect = Popup(MultiSelectComponent);
-MultiSelect.propTypes = MultiSelectComponent.propTypes;
-MultiSelect.defaultProps = MultiSelectComponent.defaultProps;
-export default MultiSelect;