@zohodesk/components 1.2.4 → 1.2.6

package/es/v1/MultiSelect/MultiSelect.js

@@ -0,0 +1,1120 @@
+/**** Libraries ****/
+import React from 'react';
+import { MultiSelect_propTypes } from '../../MultiSelect/props/propTypes';
+import { MultiSelect_defaultProps } from '../../MultiSelect/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 { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import Loader from '@zohodesk/svg/lib/Loader/Loader';
+/**** 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);
+  }
+
+  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
+    });
+  }
+
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tabletMode: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
+  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
+    }), /*#__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,
+      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
+    });
+    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(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: isAnimate,
+        isArrow: false,
+        onClick: removeClose,
+        needResponsive: needResponsive,
+        isPadding: false,
+        isBoxPaddingNeed: isBoxPaddingNeed,
+        palette: palette,
+        htmlId: setAriaId,
+        a11y: {
+          role: 'listbox',
+          ariaMultiselectable: true
+        },
+        size: boxSize,
+        alignBox: "row",
+        isResponsivePadding: getFooter ? false : true
+      }, /*#__PURE__*/React.createElement(Box, {
+        flexible: true
+      }, /*#__PURE__*/React.createElement(Card, {
+        customClass: `${style.box} ${style[`${palette}Box`]}`,
+        onScroll: this.handleScroll
+      }, tabletMode && /*#__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: !tabletMode && 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;