@zohodesk/dot 1.0.0-temp-60 → 1.0.0-temp.213

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -1,906 +0,0 @@
-function _extends() { _extends = Object.assign || 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); }
-
-import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
-import Icon from '@zohodesk/icons/lib/Icon';
-import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
-import Popup from '@zohodesk/components/lib/Popup/Popup';
-import { Box, Container } from '@zohodesk/components/lib/Layout';
-import ListItem from '@zohodesk/components/lib/ListItem/ListItem';
-import ListItemWithIcon from '@zohodesk/components/lib/ListItem/ListItemWithIcon';
-import DropDownHeading from '@zohodesk/components/lib/DropDown/DropDownHeading';
-import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
-import Loader from '@zohodesk/svg/lib/svg/Loader';
-import CommonEmptyState from '../../emptystate/CommonEmptyState/CommonEmptyState';
-import EmptySearch from '@zohodesk/svg/lib/svg/EmptySearch';
-import CssProvider from '@zohodesk/components/lib/Provider/CssProvider';
-import { scrollTo } from '@zohodesk/components/lib/utils/Common';
-import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
-import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
-import RippleEffect from '@zohodesk/components/lib/RippleEffect/RippleEffect';
-import { shallowDiff } from '../../utils/General';
-import style from './ToggleDropDown.module.css';
-export class ToggleDropDown extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      searchValue: '',
-      selectedIndex: -1,
-      options: props.options
-    };
-    this.handleChange = this.handleChange.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.onSelect = this.onSelect.bind(this);
-    this.handleTogglePopup = this.handleTogglePopup.bind(this);
-    this.showTogglePopup = this.showTogglePopup.bind(this);
-    this.hideTogglePopup = this.hideTogglePopup.bind(this);
-    this.onSearchAPI = this.onSearchAPI.bind(this);
-    this.onSearchClear = this.onSearchClear.bind(this);
-    this.handleFilterSuggestions = this.handleFilterSuggestions.bind(this);
-    this.scrollContentRef = this.scrollContentRef.bind(this);
-    this.handleMouseEnter = this.handleMouseEnter.bind(this);
-    this.searchInputRef = this.searchInputRef.bind(this);
-    this.itemRef = this.itemRef.bind(this);
-    this.inputRef = this.inputRef.bind(this);
-    this.handleScroll = this.handleScroll.bind(this);
-    this.getOptionsArray = this.getOptionsArray.bind(this);
-    this.emptySearchSVG = this.emptySearchSVG.bind(this);
-    this.getAriaId = getUniqueId(this);
-    this.getSelectedIndex = this.getSelectedIndex.bind(this);
-  }
-
-  emptySearchSVG() {
-    return /*#__PURE__*/React.createElement(EmptySearch, {
-      size: "small"
-    });
-  }
-
-  inputRef(el) {
-    this.hiddenInput = el;
-  }
-
-  itemRef(ele, index, id) {
-    this[`suggestion_${id}`] = ele;
-  }
-
-  searchInputRef(el) {
-    this.searchInput = el;
-  }
-
-  handleTogglePopup(e) {
-    const {
-      togglePopup,
-      boxPosition,
-      onSelectLabel,
-      isPopupOpen,
-      removeClose
-    } = this.props;
-    removeClose && removeClose(e);
-    !isPopupOpen && onSelectLabel && onSelectLabel(e);
-    togglePopup(e, boxPosition);
-  }
-
-  showTogglePopup(e) {
-    const {
-      togglePopup,
-      boxPosition,
-      onSelectLabel,
-      isPopupOpen
-    } = this.props;
-    !isPopupOpen && onSelectLabel && onSelectLabel(e);
-    !isPopupOpen && togglePopup(e, boxPosition);
-  }
-
-  hideTogglePopup(e) {
-    const {
-      togglePopup,
-      boxPosition,
-      onSelectLabel,
-      isPopupOpen
-    } = this.props;
-    !isPopupOpen && onSelectLabel && onSelectLabel(e);
-    isPopupOpen && togglePopup(e, boxPosition);
-  }
-
-  scrollContentRef(el) {
-    const {
-      isPopupOpen
-    } = this.props;
-
-    if (isPopupOpen) {
-      this.optionsContainer = el;
-    }
-  }
-
-  componentWillReceiveProps(nextProps) {
-    // if (nextProps.options.length != this.props.options.length) {
-    //   this.setState({
-    //     options: nextProps.options
-    //   });
-    // }
-    if (shallowDiff(this.props.options, nextProps.options)) {
-      this.setState({
-        options: nextProps.options
-      });
-    }
-  }
-
-  onSelect(element, e) {
-    const {
-      onClick,
-      togglePopup,
-      preventPopupClose
-    } = this.props;
-    onClick && onClick(e, element);
-    !preventPopupClose && togglePopup(e);
-  }
-
-  componentDidUpdate(prevProps) {
-    const {
-      isPopupOpen,
-      isPopupReady,
-      isSearch,
-      idName,
-      options,
-      onDropDownOpen,
-      onDropDownClose
-    } = this.props;
-    const {
-      selectedIndex,
-      searchValue
-    } = this.state;
-
-    if (prevProps.isPopupReady !== isPopupReady) {
-      setTimeout(() => {
-        isPopupReady ? isSearch ? this.searchInput.focus({
-          preventScroll: true
-        }) : this.hiddenInput.focus({
-          preventScroll: true
-        }) : this.hiddenInput.focus({
-          preventScroll: true
-        });
-      }, 10);
-    }
-
-    const optionsArr = this.getOptionsArray();
-    const option = optionsArr[selectedIndex];
-    const id = option && option[idName] || {};
-    const selSuggestion = this[`suggestion_${id}`];
-
-    if (isPopupOpen) {
-      this.optionsContainer && scrollTo(this.optionsContainer, selSuggestion);
-    }
-
-    if (!prevProps.isPopupOpen && isPopupOpen && searchValue.length) {
-      this.onSearchClear();
-    }
-
-    if (this.props.from == 'activityFilter') {
-      //Temproary
-      const results = this.props.options.filter(({
-        isDisabled: id1
-      }) => !prevProps.options.some(({
-        isDisabled: id2
-      }) => id2 === id1));
-
-      if (results.length > 0) {
-        this.setState({
-          options: options
-        });
-      }
-    }
-
-    if (prevProps.isPopupOpen !== isPopupOpen) {
-      if (isPopupOpen) {
-        onDropDownOpen && onDropDownOpen();
-      } else {
-        onDropDownClose && onDropDownClose();
-      }
-
-      this.getSelectedIndex(optionsArr);
-    }
-  }
-
-  handleFilterSuggestions(searchValue) {
-    const {
-      options,
-      keyName,
-      isGroupDropDown,
-      groupOptionsKey,
-      groupNameKey
-    } = this.props;
-    searchValue = searchValue.trim().toLowerCase();
-    let result = [];
-
-    if (isGroupDropDown) {
-      const filteredGroups = [];
-      options.map(group => {
-        const {
-          needDivider
-        } = group;
-        const name = group[groupNameKey];
-        const groupOptions = group[groupOptionsKey];
-        const datas = groupOptions.filter(list => {
-          const value = list[keyName];
-          return value.toLowerCase().includes(searchValue);
-        });
-
-        if (datas.length) {
-          filteredGroups.push({
-            [groupNameKey]: name,
-            [groupOptionsKey]: datas,
-            needDivider
-          });
-        }
-      });
-      result = filteredGroups;
-    } else {
-      let filteredOptions = options.filter((item, i) => {
-        if (item.needDivider) {
-          return true;
-        }
-
-        return item[keyName].toLowerCase().includes(searchValue);
-      });
-
-      if (filteredOptions.length) {
-        // to avoid more than one dividers consecutively comes as one by one
-        let needDividerCount = 0;
-        const orderedOptions = filteredOptions.filter(item => {
-          if (item.needDivider && needDividerCount === 0) {
-            needDividerCount++;
-            return true;
-          } else if (!item.needDivider) {
-            needDividerCount = 0;
-            return true;
-          }
-        }); // remove divider if it placed in first or last index
-
-        filteredOptions = [];
-        filteredOptions = orderedOptions.filter((item, i) => {
-          if (i == 0 || i == orderedOptions.length - 1) {
-            if (!item.needDivider) {
-              return true;
-            }
-          } else {
-            return true;
-          }
-        });
-        result = filteredOptions;
-      }
-    }
-
-    return result;
-  }
-
-  getOptionsArray() {
-    const {
-      searchValue
-    } = this.state;
-    const {
-      isGroupDropDown,
-      groupOptionsKey
-    } = this.props;
-    const options = searchValue.length ? this.handleFilterSuggestions(searchValue) : this.props.options;
-    let optionsArr = [];
-
-    if (isGroupDropDown) {
-      for (let i = 0; i < options.length; i++) {
-        const groupOptions = options[i][groupOptionsKey];
-        Array.prototype.push.apply(optionsArr, groupOptions);
-      }
-    } else {
-      optionsArr = options.filter(item => !item.needDivider);
-    }
-
-    return optionsArr;
-  }
-
-  handleKeyDown(e) {
-    const {
-      keyCode
-    } = e;
-    const {
-      selectedIndex,
-      searchValue
-    } = this.state;
-    const optionsArr = this.getOptionsArray();
-    const totalIndex = optionsArr.length;
-    const {
-      togglePopup,
-      onClick,
-      boxPosition,
-      isPopupReady,
-      isNextOptions,
-      getNextOptions,
-      value,
-      keyName,
-      idName,
-      preventPopupClose,
-      isSearch
-    } = this.props;
-
-    if (isPopupReady && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
-      e.preventDefault(); //prevent body scroll
-    }
-
-    if (isPopupReady) {
-      switch (keyCode) {
-        case 40:
-          if (selectedIndex === totalIndex - 1) {
-            this.setState({
-              selectedIndex: 0
-            });
-          } else {
-            if (selectedIndex === totalIndex - 3) {
-              isNextOptions && getNextOptions && getNextOptions(e, {
-                searchValue
-              });
-            }
-
-            this.setState({
-              selectedIndex: selectedIndex + 1
-            });
-          }
-
-          break;
-
-        case 38:
-          if (selectedIndex === 0) {
-            this.setState({
-              selectedIndex: totalIndex - 1
-            });
-          } else {
-            this.setState({
-              selectedIndex: selectedIndex - 1
-            });
-          }
-
-          break;
-
-        case 13:
-          const selectedId = optionsArr[selectedIndex][idName] || '';
-          onClick && onClick(selectedId, optionsArr[selectedIndex]);
-
-          if (!preventPopupClose) {
-            togglePopup(e, boxPosition);
-          } else if (isSearch) {
-            this.searchInput.focus({
-              preventScroll: true
-            });
-          } else {
-            this.hiddenInput.focus({
-              preventScroll: true
-            });
-          }
-
-          break;
-      }
-    } else {
-      if (keyCode === 13 || keyCode === 40) {
-        togglePopup(e, boxPosition);
-      }
-    }
-  }
-
-  getSelectedIndex(optionsArr) {
-    const {
-      selectedId,
-      idName
-    } = this.props;
-
-    if (selectedId) {
-      for (let i = 0; i < optionsArr.length; i++) {
-        const indexId = optionsArr[i][idName];
-
-        if (selectedId === indexId) {
-          this.setState({
-            selectedIndex: i
-          });
-          break;
-        }
-      }
-    } else {
-      this.setState({
-        selectedIndex: -1
-      });
-    }
-  }
-
-  onSearchAPI() {
-    const {
-      searchValue
-    } = this.state;
-    const {
-      needSearchFetching,
-      onSearch
-    } = this.props;
-
-    if (needSearchFetching && onSearch) {
-      onSearch(searchValue);
-    }
-  }
-
-  handleChange(value, e) {
-    const filteredOptions = this.handleFilterSuggestions(value);
-    this.setState({
-      searchValue: value,
-      selectedIndex: -1,
-      options: filteredOptions
-    }, () => {
-      this.onSearchAPI();
-    });
-  }
-
-  onSearchClear() {
-    const filteredOptions = this.handleFilterSuggestions('');
-    this.setState({
-      searchValue: '',
-      options: filteredOptions
-    }, () => {
-      this.onSearchAPI();
-    });
-  }
-
-  handleMouseEnter(id, value, index, e) {
-    this.setState({
-      selectedIndex: index
-    });
-  }
-
-  handleScroll(e) {
-    const {
-      isNextOptions,
-      getNextOptions
-    } = this.props;
-    const {
-      searchValue
-    } = this.state;
-
-    if (e.target.scrollTop + e.target.offsetHeight > e.target.scrollHeight - 1) {
-      isNextOptions && getNextOptions && getNextOptions(e, {
-        searchValue
-      });
-    }
-  }
-
-  render() {
-    const {
-      options,
-      selectedIndex
-    } = this.state;
-    const {
-      value,
-      removeClose,
-      boxSize,
-      keyName,
-      idName,
-      title,
-      isSearch,
-      isArrow,
-      placeHolderText,
-      className,
-      right,
-      left,
-      top,
-      bottom,
-      isPopupOpen: isOpen,
-      isPopupActive,
-      needExternalPopupState,
-      isPopupReady,
-      position,
-      getTargetRef,
-      getContainerRef,
-      dataId,
-      searchBoxSize,
-      searchEmptyHint,
-      searchErrorText,
-      activeStyle,
-      showOnHover,
-      isDisabled,
-      showIconOnHover,
-      isReadOnly,
-      hoverStyle,
-      isEditable,
-      iconName,
-      iconSize,
-      needTick,
-      dataTitle,
-      isDataLoaded,
-      children,
-      needResponsive,
-      arrowIconPosition,
-      isGroupDropDown,
-      groupOptionsKey,
-      groupNameKey,
-      isToggleStateNeeded,
-      selectedId,
-      isPadding,
-      isNeedEffect,
-      hoverType,
-      palette,
-      getFooter,
-      customProps
-    } = this.props;
-    let {
-      ToggleDropDownProps = {},
-      DropBoxProps = {},
-      TextBoxIconProps = {},
-      ListItemWithIconProps = {},
-      ListItemProps = {}
-    } = customProps;
-    const isPopupOpen = needExternalPopupState ? isPopupActive && isOpen : isOpen;
-    const Component = isToggleStateNeeded ? children.type : null,
-          componentProps = isToggleStateNeeded ? children.props : null;
-    const {
-      searchValue
-    } = this.state;
-    const commonClass = `${className ? className : ''} ${isPopupReady ? activeStyle ? activeStyle : '' : ''} ${isDisabled ? CssProvider('isDisable') : isReadOnly || !isEditable ? style.cursorDefault : !showOnHover ? `${style.cursor} ${hoverStyle ? hoverStyle : ''}` : `${hoverStyle ? hoverStyle : ''} ${style.cursorDefault}`}`;
-    let listIndex = -1;
-    const ariaTitleId = this.getAriaId();
-    const allyOptionsArr = this.getOptionsArray();
-    return /*#__PURE__*/React.createElement("div", _extends({
-      className: style.wrapper,
-      onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.showTogglePopup : undefined,
-      onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.hideTogglePopup : undefined
-    }, ToggleDropDownProps), /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      onClick: !showOnHover && !isDisabled && !isReadOnly && isEditable && this.handleTogglePopup,
-      eleRef: getTargetRef,
-      align: "vertical",
-      isCover: false,
-      dataId: dataId
-    }, /*#__PURE__*/React.createElement("div", {
-      className: style.hiddenInput
-    }, /*#__PURE__*/React.createElement("input", {
-      type: "text",
-      ref: this.inputRef,
-      onKeyDown: this.handleKeyDown,
-      tabIndex: "-1",
-      className: style.hiddenInputElement
-    })), children ? isToggleStateNeeded ? /*#__PURE__*/React.createElement(Component, _extends({}, componentProps, {
-      isActive: isPopupOpen
-    })) : children : /*#__PURE__*/React.createElement(RippleEffect, {
-      hoverType: hoverType,
-      isActive: isPopupOpen,
-      isNeedEffect: isEditable && isNeedEffect
-    }, /*#__PURE__*/React.createElement(Container, {
-      className: `${btnStyle.buttonReset} ${commonClass} ${!isPopupOpen && showIconOnHover ? style.hoverIcon : ''}`,
-      isCover: false,
-      alignBox: "row",
-      align: "vertical",
-      tagName: "button",
-      "aria-labelledby": ariaTitleId,
-      "aria-haspopup": true,
-      "aria-expanded": isPopupOpen ? true : false
-    }, iconName ? /*#__PURE__*/React.createElement(Box, {
-      className: value ? style.iconBox : ''
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: iconName,
-      size: iconSize
-    })) : null, value && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
-      id: ariaTitleId,
-      "aria-hidden": true,
-      className: `${style.value} toggleDropText`,
-      shrink: true,
-      tagName: "span",
-      "data-title": dataTitle
-    }, value), isEditable ? /*#__PURE__*/React.createElement(Icon, {
-      "aria-hidden": true,
-      size: "6",
-      name: "ZD-down",
-      iconClass: `${'toggleDropIcon'} ${style.arrow} ${style[`${arrowIconPosition}_arrow`]}`,
-      dataId: "statusdownarrow"
-    }) : null)))), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, _extends({
-      boxPosition: position,
-      isActive: isPopupReady,
-      onClick: removeClose,
-      size: boxSize,
-      right: right,
-      left: left,
-      top: top,
-      bottom: bottom,
-      isArrow: isArrow,
-      isAnimate: true,
-      getRef: getContainerRef,
-      customClass: {
-        customDropBoxWrap: style.dropBoxContainer
-      },
-      needResponsive: needResponsive,
-      isPadding: isPadding,
-      tabindex: "0",
-      a11y: {
-        role: !isSearch ? 'menu' : undefined,
-        ariaLabelledby: !isSearch ? ariaTitleId : undefined
-      },
-      palette: palette
-    }, DropBoxProps), /*#__PURE__*/React.createElement(Fragment, null, isSearch ? /*#__PURE__*/React.createElement("div", {
-      className: style.search
-    }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
-      placeHolder: placeHolderText,
-      onChange: this.handleChange,
-      value: searchValue,
-      onClear: this.onSearchClear,
-      size: searchBoxSize,
-      inputRef: this.searchInputRef,
-      onKeyDown: this.handleKeyDown,
-      a11y: {
-        role: 'combobox',
-        ariaOwns: ariaTitleId,
-        ariaActivedescendant: allyOptionsArr[selectedIndex] && allyOptionsArr[selectedIndex][keyName],
-        ariaAutocomplete: 'list',
-        ariaHaspopup: true,
-        ariaExpanded: true
-      }
-    }, TextBoxIconProps))) : null, title && options.length != 0 && /*#__PURE__*/React.createElement("div", {
-      className: style.title
-    }, /*#__PURE__*/React.createElement(DropDownHeading, {
-      text: title,
-      htmlId: ariaTitleId,
-      palette: palette,
-      a11y: {
-        role: 'heading'
-      },
-      customClass: style.dropdown
-    })), /*#__PURE__*/React.createElement(Box, {
-      id: ariaTitleId,
-      scroll: "vertical",
-      dataId: `${dataId}_list`,
-      className: style.maxHgt,
-      eleRef: this.scrollContentRef,
-      onScroll: this.handleScroll,
-      role: isSearch ? 'listbox' : undefined,
-      "aria-labelledby": isSearch ? ariaTitleId : undefined
-    }, isDataLoaded ? options && options.length != 0 ? isGroupDropDown ? /*#__PURE__*/React.createElement(Fragment, null, options.map(group => {
-      const groupName = group[groupNameKey];
-      const groupOptions = group[groupOptionsKey];
-      const {
-        needDivider
-      } = group;
-      return /*#__PURE__*/React.createElement(Fragment, {
-        key: `index${groupName}`
-      }, needDivider && /*#__PURE__*/React.createElement("div", {
-        className: style.seperatedLine
-      }), groupName && /*#__PURE__*/React.createElement("div", {
-        className: style.groupName
-      }, /*#__PURE__*/React.createElement(DropDownHeading, {
-        text: groupName,
-        palette: palette,
-        a11y: {
-          role: 'heading'
-        }
-      })), groupOptions && groupOptions.map(item => {
-        const {
-          iconName,
-          iconSize,
-          iconClass,
-          title,
-          disableTitle = '',
-          isDisabled = false
-        } = item;
-        listIndex += 1;
-        return iconName ? /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({
-          key: listIndex,
-          dataId: item[keyName],
-          value: item[keyName],
-          id: item[idName],
-          active: selectedId === item[idName],
-          onClick: this.onSelect.bind(this, item),
-          index: listIndex,
-          highlight: selectedIndex === listIndex,
-          disableTitle: disableTitle,
-          isDisabled: isDisabled,
-          iconName: iconName,
-          iconClass: iconClass,
-          iconSize: iconSize,
-          needTick: needTick,
-          needBorder: false,
-          onMouseEnter: this.handleMouseEnter,
-          getRef: this.itemRef,
-          title: title ? title : item[keyName],
-          palette: palette,
-          a11y: {
-            role: isSearch ? 'option' : 'menuitem',
-            ariaSelected: selectedId === item[idName]
-          }
-        }, ListItemWithIconProps)) : /*#__PURE__*/React.createElement(ListItem, _extends({
-          key: listIndex,
-          dataId: item[keyName],
-          value: item[keyName],
-          id: item[idName],
-          active: selectedId === item[idName],
-          onClick: this.onSelect.bind(this, item),
-          isDisabled: isDisabled,
-          disableTitle: disableTitle,
-          index: listIndex,
-          highlight: selectedIndex === listIndex,
-          needTick: needTick,
-          needBorder: false,
-          onMouseEnter: this.handleMouseEnter,
-          getRef: this.itemRef,
-          title: title ? title : item[keyName],
-          palette: palette,
-          a11y: {
-            role: isSearch ? 'option' : 'menuitem',
-            ariaSelected: selectedId === item[idName]
-          }
-        }, ListItemProps));
-      }));
-    })) : /*#__PURE__*/React.createElement(Fragment, null, options.map((item, i) => {
-      const {
-        iconName,
-        iconSize,
-        iconClass,
-        title,
-        needDivider,
-        isDisabled = false,
-        disableTitle = ''
-      } = item;
-
-      if (!needDivider) {
-        listIndex += 1;
-      }
-
-      return /*#__PURE__*/React.createElement(Fragment, {
-        key: i
-      }, needDivider ? /*#__PURE__*/React.createElement("div", {
-        className: style.seperatedLine
-      }) : iconName ? /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({
-        dataId: item[keyName],
-        value: item[keyName],
-        id: item[idName],
-        active: selectedId === item[idName],
-        onClick: this.onSelect.bind(this, item),
-        index: listIndex,
-        disableTitle: disableTitle,
-        isDisabled: isDisabled,
-        highlight: selectedIndex === listIndex,
-        iconName: iconName,
-        iconClass: iconClass,
-        iconSize: iconSize,
-        needTick: needTick,
-        needBorder: false,
-        onMouseEnter: this.handleMouseEnter,
-        getRef: this.itemRef,
-        title: title ? title : item[keyName],
-        key: listIndex,
-        palette: palette,
-        a11y: {
-          role: isSearch ? 'option' : 'menuitem',
-          ariaSelected: selectedId === item[idName]
-        }
-      }, ListItemWithIconProps)) : /*#__PURE__*/React.createElement(ListItem, _extends({
-        key: listIndex,
-        dataId: item[keyName],
-        value: item[keyName],
-        id: item[idName],
-        disableTitle: disableTitle,
-        isDisabled: isDisabled,
-        active: selectedId === item[idName],
-        onClick: this.onSelect.bind(this, item),
-        index: listIndex,
-        highlight: selectedIndex === listIndex,
-        needTick: needTick,
-        needBorder: false,
-        onMouseEnter: this.handleMouseEnter,
-        getRef: this.itemRef,
-        title: title ? title : item[keyName],
-        palette: palette,
-        a11y: {
-          role: isSearch ? 'option' : 'menuitem',
-          ariaSelected: selectedId === item[idName]
-        }
-      }, ListItemProps)));
-    })) : /*#__PURE__*/React.createElement(CommonEmptyState, {
-      className: style.svgWrapper,
-      title: searchErrorText || 'oops !',
-      description: searchEmptyHint,
-      size: "small",
-      getEmptyState: this.emptySearchSVG
-    }) : /*#__PURE__*/React.createElement("div", {
-      className: style.loader
-    }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement("div", null, getFooter()) : null)) : null);
-  }
-
-}
-ToggleDropDown.defaultProps = {
-  keyName: 'value',
-  idName: 'id',
-  isArrow: true,
-  searchBoxSize: 'small',
-  isDisabled: false,
-  showIconOnHover: false,
-  showOnHover: false,
-  isReadOnly: false,
-  isEditable: true,
-  isDataLoaded: true,
-  needTick: true,
-  needResponsive: true,
-  arrowIconPosition: 'default',
-  groupOptionsKey: 'items',
-  groupNameKey: 'name',
-  isPadding: true,
-  isToggleStateNeeded: false,
-  isNeedEffect: true,
-  hoverType: 'default',
-  needExternalPopupState: false,
-  customProps: {},
-  preventPopupClose: false
-};
-ToggleDropDown.propTypes = {
-  activeStyle: PropTypes.string,
-  arrowIconPosition: PropTypes.oneOf(['default', 'overlay']),
-  bottom: PropTypes.number,
-  boxPosition: PropTypes.oneOf(['bottomRight', 'bottomLeft', 'bottomCenter', 'topRight', 'topLeft', 'topCenter', 'rightTop', 'rightBottom', 'rightCenter', 'leftTop', 'leftBottom', 'leftCenter']),
-  boxSize: PropTypes.oneOf(['xsmall', 'small', 'medium', 'mlarge', 'large']),
-  children: PropTypes.node,
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  getContainerRef: PropTypes.func,
-  getNextOptions: PropTypes.func,
-  getTargetRef: PropTypes.func,
-  groupNameKey: PropTypes.string,
-  groupOptionsKey: PropTypes.string,
-  hoverStyle: PropTypes.string,
-  hoverType: PropTypes.oneOf(['default', 'border', 'bg']),
-  iconName: PropTypes.string,
-  iconSize: PropTypes.string,
-  idName: PropTypes.string,
-  isArrow: PropTypes.bool,
-  isDataLoaded: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isEditable: PropTypes.bool,
-  isGroupDropDown: PropTypes.bool,
-  isNeedEffect: PropTypes.bool,
-  isNextOptions: PropTypes.bool,
-  isPadding: PropTypes.bool,
-  isPopupActive: PropTypes.bool,
-  isPopupOpen: PropTypes.bool,
-  isPopupReady: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  isSearch: PropTypes.bool,
-  isToggleStateNeeded: PropTypes.bool,
-  keyName: PropTypes.string,
-  left: PropTypes.number,
-  needExternalPopupState: PropTypes.bool,
-  needResponsive: PropTypes.bool,
-  needSearchFetching: PropTypes.bool,
-  needTick: PropTypes.bool,
-  onClick: PropTypes.func,
-  onSearch: PropTypes.func,
-  options: PropTypes.array.isRequired,
-  palette: PropTypes.oneOf(['dark']),
-  placeHolderText: PropTypes.string,
-  position: PropTypes.string,
-  removeClose: PropTypes.func,
-  right: PropTypes.number,
-  searchBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
-  searchEmptyHint: PropTypes.string,
-  searchErrorText: PropTypes.string,
-  selectedId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  showIconOnHover: PropTypes.bool,
-  showOnHover: PropTypes.bool,
-  title: PropTypes.string,
-  togglePopup: PropTypes.func,
-  value: PropTypes.node,
-  onDropDownOpen: PropTypes.func,
-  onDropDownClose: PropTypes.func,
-  getFooter: PropTypes.func,
-  customProps: PropTypes.shape({
-    ToggleDropDownProps: PropTypes.object,
-    DropBoxProps: PropTypes.object,
-    TextBoxIconProps: PropTypes.object,
-    ListItemWithIconProps: PropTypes.object,
-    ListItemProps: PropTypes.object
-  }),
-  preventPopupClose: PropTypes.bool
-};
-
-if (false) {
-  ToggleDropDown.docs = {
-    componentGroup: 'Molecule'
-  };
-}
-
-export default Popup(ToggleDropDown);