@zohodesk/dot 1.0.0-temp-38 → 1.0.0-temp-39

package/src/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -1,944 +1,931 @@
-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 <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()
-            : this.hiddenInput.focus()
-          : this.hiddenInput.focus();
-      }, 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();
-          }
-          else {
-            this.hiddenInput.focus();
-          }
-          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 (
-      <div
-        className={style.wrapper}
-        onMouseEnter={
-          showOnHover && !isDisabled && !isReadOnly && isEditable
-            ? this.showTogglePopup
-            : undefined
-        }
-        onMouseLeave={
-          showOnHover && !isDisabled && !isReadOnly && isEditable
-            ? this.hideTogglePopup
-            : undefined
-        }
-        {...ToggleDropDownProps}
-      >
-        <Container
-          alignBox='row'
-          onClick={
-            !showOnHover &&
-            !isDisabled &&
-            !isReadOnly &&
-            isEditable &&
-            this.handleTogglePopup
-          }
-          eleRef={getTargetRef}
-          align='vertical'
-          isCover={false}
-          dataId={dataId}
-        >
-          <div className={style.hiddenInput}>
-            <input
-              type='text'
-              ref={this.inputRef}
-              onKeyDown={this.handleKeyDown}
-              tabIndex='-1'
-              className={style.hiddenInputElement}
-            />
-          </div>
-          {children ? (
-            isToggleStateNeeded ? (
-              <Component {...componentProps} isActive={isPopupOpen} />
-            ) : (
-              children
-            )
-          ) : (
-            <RippleEffect
-              hoverType={hoverType}
-              isActive={isPopupOpen}
-              isNeedEffect={isEditable && isNeedEffect}
-            >
-              <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 ? (
-                  <Box className={value ? style.iconBox : ''}>
-                    <Icon name={iconName} size={iconSize} />
-                  </Box>
-                ) : null}
-                {value && (
-                  <React.Fragment>
-                    <Box
-                      id={ariaTitleId}
-                      aria-hidden={true}
-                      className={`${style.value} toggleDropText`}
-                      shrink
-                      tagName='span'
-                      data-title={dataTitle}
-                    >
-                      {value}
-                    </Box>
-                    {isEditable ? (
-                      <Icon
-                        aria-hidden={true}
-                        size='6'
-                        name='ZD-down'
-                        iconClass={`${'toggleDropIcon'} ${style.arrow} ${
-                          style[`${arrowIconPosition}_arrow`]
-                        }`}
-                        dataId='statusdownarrow'
-                      />
-                    ) : null}
-                  </React.Fragment>
-                )}
-              </Container>
-            </RippleEffect>
-          )}
-        </Container>
-
-        {isPopupOpen ? (
-          <DropBox
-            boxPosition={position}
-            isActive={isPopupReady}
-            onClick={removeClose}
-            size={boxSize}
-            right={right}
-            left={left}
-            top={top}
-            bottom={bottom}
-            isArrow={isArrow}
-            isAnimate
-            getRef={getContainerRef}
-            customClass={{
-              customDropBoxWrap: style.dropBoxContainer
-            }}
-            needResponsive={needResponsive}
-            isPadding={isPadding}
-            tabindex='0'
-            a11y={{
-              role: !isSearch ? 'menu' : undefined,
-              ariaLabelledby: !isSearch ? ariaTitleId : undefined
-            }}
-            palette={palette}
-            {...DropBoxProps}
-          >
-            <Fragment>
-              {isSearch ? (
-                <div className={style.search}>
-                  <TextBoxIcon
-                    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}
-                  />
-                </div>
-              ) : null}
-              {title && options.length != 0 && (
-                <div className={style.title}>
-                  <DropDownHeading
-                    text={title}
-                    htmlId={ariaTitleId}
-                    palette={palette}
-                    a11y={{
-                      role: 'heading'
-                    }}
-                    customClass={style.dropdown}
-                  />
-                </div>
-              )}
-              <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 ? (
-                      <Fragment>
-                        {options.map((group) => {
-                          const groupName = group[groupNameKey];
-                          const groupOptions = group[groupOptionsKey];
-                          const { needDivider } = group;
-                          return (
-                            <Fragment key={`index${groupName}`}>
-                              {needDivider && (
-                                <div className={style.seperatedLine} />
-                              )}
-                              {groupName && (
-                                <div className={style.groupName}>
-                                  <DropDownHeading
-                                    text={groupName}
-                                    palette={palette}
-                                    a11y={{
-                                      role: 'heading'
-                                    }}
-                                  />
-                                </div>
-                              )}
-                              {groupOptions &&
-                                groupOptions.map((item) => {
-                                  const {
-                                    iconName,
-                                    iconSize,
-                                    iconClass,
-                                    title,
-                                    disableTitle = '',
-                                    isDisabled = false
-                                  } = item;
-                                  listIndex += 1;
-                                  return iconName ? (
-                                    <ListItemWithIcon
-                                      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}
-                                    />
-                                  ) : (
-                                    <ListItem
-                                      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}
-                                    />
-                                  );
-                                })}
-                            </Fragment>
-                          );
-                        })}
-                      </Fragment>
-                    ) : (
-                      <Fragment>
-                        {options.map((item, i) => {
-                          const {
-                            iconName,
-                            iconSize,
-                            iconClass,
-                            title,
-                            needDivider,
-                            isDisabled = false,
-                            disableTitle = ''
-                          } = item;
-                          if (!needDivider) {
-                            listIndex += 1;
-                          }
-                          return (
-                            <Fragment key={i}>
-                              {needDivider ? (
-                                <div className={style.seperatedLine} />
-                              ) : iconName ? (
-                                <ListItemWithIcon
-                                  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}
-                                />
-                              ) : (
-                                <ListItem
-                                  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}
-                                />
-                              )}
-                            </Fragment>
-                          );
-                        })}
-                      </Fragment>
-                    )
-                  ) : (
-                    <CommonEmptyState
-                      className={style.svgWrapper}
-                      title={searchErrorText || 'oops !'}
-                      description={searchEmptyHint}
-                      size='small'
-                      getEmptyState={this.emptySearchSVG}
-                    />
-                  )
-                ) : (
-                  <div className={style.loader}>
-                    <Loader />
-                  </div>
-                )}
-              </Box>
-              {getFooter ? (
-                <div>{getFooter()}</div>
-              ) : null}
-            </Fragment>
-          </DropBox>
-        ) : null}
-      </div>
-    );
-  }
-}
-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 (__DOCS__) {
-  ToggleDropDown.docs = {
-    componentGroup: 'Molecule'
-  };
-}
-export default Popup(ToggleDropDown);
+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);
+  }
+
+  emptySearchSVG() {
+    return <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()
+            : this.hiddenInput.focus()
+          : this.hiddenInput.focus();
+      }, 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();
+      }
+    }
+  }
+
+  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();
+          }
+          else {
+            this.hiddenInput.focus();
+          }
+          break;
+      }
+    } else {
+      if (keyCode === 13 || keyCode === 40) {
+        togglePopup(e, boxPosition);
+        for (let i = 0; i < optionsArr.length; i++) {
+          const selectedValue = optionsArr[i][keyName];
+          if (value === selectedValue) {
+            this.setState({
+              selectedIndex: i
+            });
+            break;
+          }
+        }
+      }
+    }
+  }
+
+  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 (
+      <div
+        className={style.wrapper}
+        onMouseEnter={
+          showOnHover && !isDisabled && !isReadOnly && isEditable
+            ? this.showTogglePopup
+            : undefined
+        }
+        onMouseLeave={
+          showOnHover && !isDisabled && !isReadOnly && isEditable
+            ? this.hideTogglePopup
+            : undefined
+        }
+        {...ToggleDropDownProps}
+      >
+        <Container
+          alignBox='row'
+          onClick={
+            !showOnHover &&
+            !isDisabled &&
+            !isReadOnly &&
+            isEditable &&
+            this.handleTogglePopup
+          }
+          eleRef={getTargetRef}
+          align='vertical'
+          isCover={false}
+          dataId={dataId}
+        >
+          <div className={style.hiddenInput}>
+            <input
+              type='text'
+              ref={this.inputRef}
+              onKeyDown={this.handleKeyDown}
+              tabindex='-1'
+              className={style.hiddenInputElement}
+            />
+          </div>
+          {children ? (
+            isToggleStateNeeded ? (
+              <Component {...componentProps} isActive={isPopupOpen} />
+            ) : (
+              children
+            )
+          ) : (
+            <RippleEffect
+              hoverType={hoverType}
+              isActive={isPopupOpen}
+              isNeedEffect={isEditable && isNeedEffect}
+            >
+              <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 ? (
+                  <Box className={value ? style.iconBox : ''}>
+                    <Icon name={iconName} size={iconSize} />
+                  </Box>
+                ) : null}
+                {value && (
+                  <React.Fragment>
+                    <Box
+                      id={ariaTitleId}
+                      aria-hidden={true}
+                      className={`${style.value} toggleDropText`}
+                      shrink
+                      tagName='span'
+                      data-title={dataTitle}
+                    >
+                      {value}
+                    </Box>
+                    {isEditable ? (
+                      <Icon
+                        aria-hidden={true}
+                        size='6'
+                        name='ZD-down'
+                        iconClass={`${'toggleDropIcon'} ${style.arrow} ${
+                          style[`${arrowIconPosition}_arrow`]
+                        }`}
+                        dataId='statusdownarrow'
+                      />
+                    ) : null}
+                  </React.Fragment>
+                )}
+              </Container>
+            </RippleEffect>
+          )}
+        </Container>
+
+        {isPopupOpen ? (
+          <DropBox
+            boxPosition={position}
+            isActive={isPopupReady}
+            onClick={removeClose}
+            size={boxSize}
+            right={right}
+            left={left}
+            top={top}
+            bottom={bottom}
+            isArrow={isArrow}
+            isAnimate
+            getRef={getContainerRef}
+            customClass={{
+              customDropBoxWrap: style.dropBoxContainer
+            }}
+            needResponsive={needResponsive}
+            isPadding={isPadding}
+            tabindex='0'
+            a11y={{
+              role: !isSearch ? 'menu' : undefined,
+              ariaLabelledby: !isSearch ? ariaTitleId : undefined
+            }}
+            palette={palette}
+            {...DropBoxProps}
+          >
+            <Fragment>
+              {isSearch ? (
+                <div className={style.search}>
+                  <TextBoxIcon
+                    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}
+                  />
+                </div>
+              ) : null}
+              {title && options.length != 0 && (
+                <div className={style.title}>
+                  <DropDownHeading
+                    text={title}
+                    htmlId={ariaTitleId}
+                    palette={palette}
+                    a11y={{
+                      role: 'heading'
+                    }}
+                    customClass={style.dropdown}
+                  />
+                </div>
+              )}
+              <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 ? (
+                      <Fragment>
+                        {options.map((group) => {
+                          const groupName = group[groupNameKey];
+                          const groupOptions = group[groupOptionsKey];
+                          const { needDivider } = group;
+                          return (
+                            <Fragment key={`index${groupName}`}>
+                              {needDivider && (
+                                <div className={style.seperatedLine} />
+                              )}
+                              {groupName && (
+                                <div className={style.groupName}>
+                                  <DropDownHeading
+                                    text={groupName}
+                                    palette={palette}
+                                    a11y={{
+                                      role: 'heading'
+                                    }}
+                                  />
+                                </div>
+                              )}
+                              {groupOptions &&
+                                groupOptions.map((item) => {
+                                  const {
+                                    iconName,
+                                    iconSize,
+                                    iconClass,
+                                    title,
+                                    disableTitle = '',
+                                    isDisabled = false
+                                  } = item;
+                                  listIndex += 1;
+                                  return iconName ? (
+                                    <ListItemWithIcon
+                                      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}
+                                    />
+                                  ) : (
+                                    <ListItem
+                                      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}
+                                    />
+                                  );
+                                })}
+                            </Fragment>
+                          );
+                        })}
+                      </Fragment>
+                    ) : (
+                      <Fragment>
+                        {options.map((item, i) => {
+                          const {
+                            iconName,
+                            iconSize,
+                            iconClass,
+                            title,
+                            needDivider,
+                            isDisabled = false,
+                            disableTitle = ''
+                          } = item;
+                          if (!needDivider) {
+                            listIndex += 1;
+                          }
+                          return (
+                            <Fragment key={i}>
+                              {needDivider ? (
+                                <div className={style.seperatedLine} />
+                              ) : iconName ? (
+                                <ListItemWithIcon
+                                  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}
+                                />
+                              ) : (
+                                <ListItem
+                                  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}
+                                />
+                              )}
+                            </Fragment>
+                          );
+                        })}
+                      </Fragment>
+                    )
+                  ) : (
+                    <CommonEmptyState
+                      className={style.svgWrapper}
+                      title={searchErrorText || 'oops !'}
+                      description={searchEmptyHint}
+                      size='small'
+                      getEmptyState={this.emptySearchSVG}
+                    />
+                  )
+                ) : (
+                  <div className={style.loader}>
+                    <Loader />
+                  </div>
+                )}
+              </Box>
+              {getFooter ? (
+                <div>{getFooter()}</div>
+              ) : null}
+            </Fragment>
+          </DropBox>
+        ) : null}
+      </div>
+    );
+  }
+}
+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 (__DOCS__) {
+  ToggleDropDown.docs = {
+    componentGroup: 'Molecule'
+  };
+}
+export default Popup(ToggleDropDown);