@zohodesk/components 1.2.23 → 1.2.24

package/es/v1/MultiSelect/MultiSelect.js

@@ -3,8 +3,8 @@ 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';
@@ -20,16 +20,18 @@ 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';
 
+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 = [];
@@ -40,9 +42,8 @@ export class MultiSelectComponent extends React.Component {
     this.getFilterSuggestions = makeGetFilterSuggestions();
     this.formatOptions = makeFormatOptions();
     this.getSelectedOptions = makeGetSelectedOptions();
-    this.getIsShowClearIcon = makeGetIsShowClearIcon();
+    this.getIsShowClearIcon = makeGetIsShowClearIcon(); //Use in AdvancedMultiSelect component
 
-    //Use in AdvancedMultiSelect component
     this.objectConcat = makeObjectConcat();
     this.formatSelectedOptions = makeFormatOptions();
     const {
@@ -80,11 +81,11 @@ export class MultiSelectComponent extends React.Component {
     this.handleScroll = this.handleScroll.bind(this);
     this.handleScrollFuncCall = debounce(this.handleScrollFuncCall.bind(this), 500);
   }
+
   componentDidMount() {
     // let { suggestionContainer } = this;
     this._isMounted = true;
-    this.handleExposedPublicMethods();
-    // suggestionContainer &&
+    this.handleExposedPublicMethods(); // suggestionContainer &&
     //   suggestionContainer.addEventListener('scroll', this.handleScroll);
   }
 
@@ -97,6 +98,7 @@ export class MultiSelectComponent extends React.Component {
       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 {
@@ -135,6 +137,7 @@ export class MultiSelectComponent extends React.Component {
       });
     }
   }
+
   componentDidUpdate(prevProps, prevState) {
     const {
       suggestionContainer,
@@ -153,11 +156,11 @@ export class MultiSelectComponent extends React.Component {
       onDropBoxClose,
       onDropBoxOpen,
       isSearchClearOnClose
-    } = this.props;
+    } = this.props; //handle dropbox open & close
 
-    //handle dropbox open & close
     if (prevProps.isPopupOpen !== isPopupOpen) {
       isPopupOpen && onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
+
       if (!isPopupOpen) {
         this.setState({
           hoverOption: 0
@@ -165,41 +168,42 @@ export class MultiSelectComponent extends React.Component {
         isSearchClearOnClose && searchStr && this.handleSearch('');
         onDropBoxClose && onDropBoxClose();
       }
-    }
+    } //scrollTo handling
+
 
-    //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);
+    selectedOptions.length && selectedOption && scrollTo(selectedOptionContainer, selectedOption); //When suggestions length less than 5, getNextOptions function call
 
-    //When suggestions length less than 5, getNextOptions function call
     const {
       isNextOptions,
       getNextOptions
-    } = this.props;
-    // let { searchStr } = this.state;
+    } = 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
+
 
-    //Need To MultiselectNew Component
     this.handleComponentDidUpdate(prevProps, prevState);
   }
+
   componentWillUnmount() {
     // let { suggestionContainer } = this;
-    this._isMounted = false;
-    // suggestionContainer &&
+    this._isMounted = false; // suggestionContainer &&
     //   suggestionContainer.removeEventListener('scroll', this.handleScroll);
   }
 
   handleComponentDidUpdate() {
     return;
   }
+
   handleFormatOptions(props) {
     const {
       options,
@@ -217,12 +221,14 @@ export class MultiSelectComponent extends React.Component {
       disabledOptions
     });
   }
+
   handleGetSelectedOptions(selectedOptions, normalizedFormatOptions) {
     return this.getSelectedOptions({
       selectedOptions,
       normalizedFormatOptions
     });
   }
+
   handleInputCick(e) {
     const {
       removeClose
@@ -231,6 +237,7 @@ export class MultiSelectComponent extends React.Component {
       highLightedSelectOptions,
       searchStr = ''
     } = this.state;
+
     if (highLightedSelectOptions.length) {
       this.setState({
         highLightedSelectOptions: [],
@@ -244,6 +251,7 @@ export class MultiSelectComponent extends React.Component {
       this.togglePopup(e);
     }
   }
+
   handleFilterSuggestions() {
     const {
       options = dummyArray,
@@ -267,6 +275,7 @@ export class MultiSelectComponent extends React.Component {
     this.suggestionsOrder = suggestionIds;
     return suggestions;
   }
+
   handleKeyDown(e) {
     const {
       keyCode,
@@ -291,20 +300,27 @@ export class MultiSelectComponent extends React.Component {
       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 });
       }*/
@@ -315,6 +331,7 @@ export class MultiSelectComponent extends React.Component {
       }
     } 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 });
@@ -342,8 +359,7 @@ export class MultiSelectComponent extends React.Component {
       if (highLightedSelectOptionsLen) {
         this.handleRemoveOption(highLightedSelectOptions);
       } else {
-        this.handleRemoveOption(selectedOptions.slice(-1));
-        // this.setState({
+        this.handleRemoveOption(selectedOptions.slice(-1)); // this.setState({
         //   highLightedSelectOptions: selectedOptions.slice(-1)
         // });
       }
@@ -358,6 +374,7 @@ export class MultiSelectComponent extends React.Component {
       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;
@@ -374,6 +391,7 @@ export class MultiSelectComponent extends React.Component {
       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;
@@ -386,14 +404,15 @@ export class MultiSelectComponent extends React.Component {
         });
       }
     } else if ((keyCode === 39 || keyCode === 37) && selectedOptions.length && !searchStr.length) {
-      const isRightArrow = keyCode === 39 ? true : false;
-      // let isLefttArrow = keyCode === 37 ? true : false;
+      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,
@@ -409,14 +428,13 @@ export class MultiSelectComponent extends React.Component {
           shiftKeyPressHighLighted: 0
         });
       }
-    }
-    // eslint-disable-next-line
-    else if (keyCode === 27) {
-      // this.handlePopupClose(e);
+    } // 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();
@@ -428,12 +446,12 @@ export class MultiSelectComponent extends React.Component {
       const {
         id
       } = option;
+
       if (selectedOptions.indexOf(id) === -1) {
         newSelectedOptions.push(id);
       }
     });
-    this.handleChange([...selectedOptions, ...newSelectedOptions]);
-    // this.handlePopupClose(e);
+    this.handleChange([...selectedOptions, ...newSelectedOptions]); // this.handlePopupClose(e);
   }
 
   handleDeselectAll(e) {
@@ -444,15 +462,18 @@ export class MultiSelectComponent extends React.Component {
     const {
       highLightedSelectOptions
     } = this.state;
+
     if (highLightedSelectOptions.length) {
       this.setState({
         highLightedSelectOptions: [],
         lastHighLightedSelectOption: ''
       });
     }
+
     removeClose(e);
     this.handleChange([]);
   }
+
   handleSelectOption(option, value, index, e) {
     const {
       selectedOptions,
@@ -462,9 +483,11 @@ export class MultiSelectComponent extends React.Component {
     const {
       searchStr
     } = this.state;
+
     if (searchStr.trim() != '' && isSearchClearOnSelect) {
       this.handleSearch('');
     }
+
     if (keepSelectedOptions && selectedOptions.indexOf(option) != -1) {
       let newSelectedOptions = selectedOptions.filter(id => {
         return id != option;
@@ -474,6 +497,7 @@ export class MultiSelectComponent extends React.Component {
       this.handleChange([...selectedOptions, option], e);
     }
   }
+
   handleRemoveOption(options) {
     const newOptions = !getIsEmptyValue(options) && !Array.isArray(options) ? [options] : options;
     const {
@@ -485,18 +509,22 @@ export class MultiSelectComponent extends React.Component {
       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,
@@ -504,8 +532,10 @@ export class MultiSelectComponent extends React.Component {
       });
       this.handleChange(newSelectedOptions);
     }
+
     this.moveFocusToTextbox();
   }
+
   handleMouseEnter(id, val, hoverOptionIndex, e) {
     e && e.preventDefault();
     const {
@@ -515,16 +545,19 @@ export class MultiSelectComponent extends React.Component {
       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
@@ -533,10 +566,12 @@ export class MultiSelectComponent extends React.Component {
       _isMounted
     } = this;
     const isForce = isFetchingOptions && searchStr ? true : false;
+
     if (!isFetchingOptions && APICall || isForce) {
       this.setState({
         isFetchingOptions: true
       });
+
       try {
         return APICall(searchStr).then(() => {
           _isMounted && this.setState({
@@ -554,6 +589,7 @@ export class MultiSelectComponent extends React.Component {
       }
     }
   }
+
   handleSearchOptions() {
     const {
       onSearch
@@ -563,6 +599,7 @@ export class MultiSelectComponent extends React.Component {
     } = this.state;
     searchStr && this.handleFetchOptions(onSearch, searchStr);
   }
+
   handleSearch(value, e) {
     const {
       onSearch,
@@ -585,6 +622,7 @@ export class MultiSelectComponent extends React.Component {
       }
     });
   }
+
   handleClickSelectedOption() {
     let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     let e = arguments.length > 1 ? arguments[1] : undefined;
@@ -600,13 +638,16 @@ export class MultiSelectComponent extends React.Component {
       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({
@@ -617,6 +658,7 @@ export class MultiSelectComponent extends React.Component {
       //ctrl+click
       const isRemove = highLightedSelectOptions.indexOf(id) >= 0;
       let newSelectedHighlights = [];
+
       if (isRemove) {
         lastHighLightedSelectOption = id === lastHighLightedSelectOption ? '' : lastHighLightedSelectOption;
         newSelectedHighlights = highLightedSelectOptions.filter(option => option !== id);
@@ -624,6 +666,7 @@ export class MultiSelectComponent extends React.Component {
         lastHighLightedSelectOption = id;
         newSelectedHighlights = [...highLightedSelectOptions, id];
       }
+
       this.setState({
         highLightedSelectOptions: newSelectedHighlights,
         lastHighLightedSelectOption
@@ -634,16 +677,19 @@ export class MultiSelectComponent extends React.Component {
         lastHighLightedSelectOption: id
       });
     }
+
     this.setState({
       shiftKeyPressHighLighted: 0
     });
     this.moveFocusToTextbox();
   }
+
   handleScroll(e) {
     let ele = e.target;
     let isScrollReachedBottom = findScrollEnd(ele);
     isScrollReachedBottom && this.handleScrollFuncCall();
   }
+
   handleScrollFuncCall() {
     const {
       getNextOptions,
@@ -654,6 +700,7 @@ export class MultiSelectComponent extends React.Component {
     } = 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;
@@ -676,17 +723,21 @@ export class MultiSelectComponent extends React.Component {
     });
     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: '' });
+
+    onChange && onChange(newSelectedOptions, allSelectedOptionsDetails); // this.setState({ searchStr: '' });
+
     this.moveFocusToTextbox();
+
     if (needToCloseOnSelect) {
       togglePopup(e);
     }
   }
+
   togglePopup(e) {
     const {
       togglePopup,
@@ -695,12 +746,14 @@ export class MultiSelectComponent extends React.Component {
     } = this.props;
     !isReadOnly && togglePopup(e, defaultDropBoxPosition ? `${defaultDropBoxPosition}` : null);
   }
+
   handlePopupClose(e) {
     const {
       closePopupOnly
     } = this.props;
     closePopupOnly(e);
   }
+
   searchInputRef(el) {
     const {
       getRef
@@ -708,6 +761,7 @@ export class MultiSelectComponent extends React.Component {
     this.searchInput = el;
     getRef && getRef(el);
   }
+
   selectedOptionContainerRef(el) {
     const {
       getTargetRef
@@ -715,25 +769,31 @@ export class MultiSelectComponent extends React.Component {
     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 || {};
@@ -743,16 +803,19 @@ export class MultiSelectComponent extends React.Component {
     } = this.props;
     onFocus && onFocus(searchStr);
   }
+
   handleInactive() {
     const {
       isActive
     } = this.state;
+
     if (isActive) {
       this.setState({
         isActive: false
       });
     }
   }
+
   handleInputFocus() {
     const {
       isDisabled,
@@ -760,11 +823,13 @@ export class MultiSelectComponent extends React.Component {
     } = this.props;
     !isDisabled && !isReadOnly && this.moveFocusToTextbox();
   }
+
   moveFocusToTextbox() {
     this.searchInput && this.searchInput.focus({
       preventScroll: true
     });
   }
+
   handleExposedPublicMethods() {
     const {
       getPublicMethods,
@@ -774,6 +839,7 @@ export class MultiSelectComponent extends React.Component {
       openPopupOnly
     });
   }
+
   responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -784,6 +850,7 @@ export class MultiSelectComponent extends React.Component {
       }])
     };
   }
+
   getSelectionUI() {
     let isResponsive = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     let {
@@ -903,6 +970,7 @@ export class MultiSelectComponent extends React.Component {
       dataId: `${dataId}_children`
     }, children) : null))));
   }
+
   render() {
     let {
       isReadOnly,
@@ -1042,6 +1110,7 @@ export class MultiSelectComponent extends React.Component {
       }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)));
     }) : null);
   }
+
 }
 MultiSelectComponent.propTypes = MultiSelect_propTypes;
 MultiSelectComponent.defaultProps = MultiSelect_defaultProps;

package/es/v1/MultiSelect/MultiSelectHeader.js

@@ -3,8 +3,10 @@ import React from 'react';
 import { MultiSelectHeader_propTypes } from './props/propTypes';
 import { MultiSelectHeader_defaultProps } from './props/defaultProps';
 /**** Icons ****/
+
 import ListItemWithIcon from '../ListItem/ListItemWithIcon';
 /**** CSS ****/
+
 import style from '../../MultiSelect/MultiSelect.module.css';
 export default class MultiSelectHeader extends React.PureComponent {
   render() {
@@ -24,6 +26,7 @@ export default class MultiSelectHeader extends React.PureComponent {
       customClass: style.selectAll
     }) : null);
   }
+
 }
 MultiSelectHeader.propTypes = MultiSelectHeader_propTypes;
 MultiSelectHeader.defaultProps = MultiSelectHeader_defaultProps;

package/es/v1/MultiSelect/MultiSelectWithAvatar.js

@@ -1,11 +1,12 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 /**** Libraries ****/
 import React from 'react';
 import { MultiSelectWithAvatar_propTypes } from './props/propTypes';
 import { MultiSelectWithAvatar_defaultProps } from './props/defaultProps';
 import { defaultProps as MobileHeader_defaultProps } from './MobileHeader/props/defaultProps';
-
 /**** Components ****/
+
 import { MultiSelectComponent } from './MultiSelect';
 import Popup from '../Popup/Popup';
 import { Container, Box } from '../Layout';
@@ -19,14 +20,16 @@ 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';
 
+import style from '../../MultiSelect/MultiSelect.module.css';
 /*eslint-disable  react/sort-prop-types*/
+
 /* eslint-disable react/forbid-component-props */
+
 /* eslint-disable react/no-unused-prop-types */
 
 class MultiSelectWithAvatarComponent extends MultiSelectComponent {
@@ -35,6 +38,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
     this.handleFormatOptions = this.handleFormatOptions.bind(this);
     this.getNextAriaId = getUniqueId(this);
   }
+
   handleFormatOptions(props) {
     const {
       options,
@@ -52,6 +56,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       disabledOptions
     });
   }
+
   responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -62,6 +67,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       }])
     };
   }
+
   render() {
     let {
       isReadOnly,
@@ -199,7 +205,9 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       }, /*#__PURE__*/React.createElement(Loader, null))))));
     }) : null);
   }
+
 }
+
 MultiSelectWithAvatarComponent.propTypes = MultiSelectWithAvatar_propTypes;
 MultiSelectWithAvatarComponent.defaultProps = MultiSelectWithAvatar_defaultProps;
 MultiSelectWithAvatarComponent.displayName = 'MultiSelectWithAvatar';