@zohodesk/dot 1.0.0-beta.20 → 1.0.0-beta.203

package/src/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -1,8 +1,7 @@
-import React from 'react';
+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 commonStyle from '@zohodesk/components/lib/common/common.module.css';
 import Popup from '@zohodesk/components/lib/Popup/Popup';
 import { Box, Container } from '@zohodesk/components/lib/Layout';
 import ListItem from '@zohodesk/components/lib/ListItem/ListItem';
@@ -12,31 +11,45 @@ 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 { scrollTo } from '@zohodesk/components/lib/utils/Common.js';
-import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
+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 React.Component {
+export class ToggleDropDown extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      searchString: '',
-      selectedIndex: 0,
-      options: props.options,
-      seperatedOptions: props.seperatedOptions
+      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.searchList = this.searchList.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) {
@@ -52,20 +65,44 @@ export class ToggleDropDown extends React.Component {
   }
 
   handleTogglePopup(e) {
-    let { togglePopup, boxPosition, onSelectLabel, isPopupOpen } = this.props;
+    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) {
-    let { isPopupOpen } = this.props;
+    const { isPopupOpen } = this.props;
     if (isPopupOpen) {
       this.optionsContainer = el;
     }
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.options.length != this.props.options.length) {
+    // 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
       });
@@ -73,113 +110,263 @@ export class ToggleDropDown extends React.Component {
   }
 
   onSelect(element, e) {
-    let { onClick, togglePopup } = this.props;
+    const { onClick, togglePopup, preventPopupClose } = this.props;
     onClick && onClick(e, element);
-    togglePopup(e);
+    !preventPopupClose && togglePopup(e);
   }
 
   componentDidUpdate(prevProps) {
-    let { isPopupOpen, isSearch, idName } = this.props;
-    let { selectedIndex, options, seperatedOptions } = this.state;
-    if (prevProps.isPopupOpen != isPopupOpen) {
+    const {
+      isPopupOpen,
+      isPopupReady,
+      isSearch,
+      idName,
+      options,
+      onDropDownOpen,
+      onDropDownClose
+    } = this.props;
+    const { selectedIndex, searchValue } = this.state;
+    if (prevProps.isPopupReady !== isPopupReady) {
       setTimeout(() => {
-        isPopupOpen
+        isPopupReady
           ? isSearch
-            ? this.searchInput.focus()
-            : this.hiddenInput.focus()
-          : this.hiddenInput.focus();
+            ? this.searchInput.focus({ preventScroll: true })
+            : this.hiddenInput.focus({ preventScroll: true })
+          : this.hiddenInput.focus({ preventScroll: true });
       }, 10);
     }
-    let mergeOptions = seperatedOptions
-      ? options.concat(seperatedOptions)
-      : options;
-    let option = mergeOptions[selectedIndex];
-    let id = (option && option[idName]) || {};
-    let selSuggestion = this[`suggestion_${id}`];
+    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) {
-    let { keyCode } = e;
-    let { selectedIndex, options, seperatedOptions } = this.state;
-    let totalIndex = seperatedOptions
-      ? options.length + seperatedOptions.length
-      : options.length;
-    let mergeOptions = seperatedOptions
-      ? options.concat(seperatedOptions)
-      : options;
-    let {
+    const { keyCode } = e;
+    const { selectedIndex, searchValue } = this.state;
+    const optionsArr = this.getOptionsArray();
+    const totalIndex = optionsArr.length;
+    const {
       togglePopup,
       onClick,
       boxPosition,
-      isPopupOpen,
+      isPopupReady,
       isNextOptions,
-      getNextOptions
+      getNextOptions,
+      value,
+      keyName,
+      idName,
+      preventPopupClose,
+      isSearch
     } = this.props;
-    if (isPopupOpen && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
+    if (
+      isPopupReady &&
+      (keyCode === 38 || keyCode === 40) &&
+      e.preventDefault
+    ) {
       e.preventDefault(); //prevent body scroll
     }
-    switch (keyCode) {
-      case 40:
-        if (selectedIndex === totalIndex - 1) {
-          this.setState({ selectedIndex: 0 });
-        } else {
-          if (selectedIndex === totalIndex - 3) {
-            isNextOptions && getNextOptions && getNextOptions();
+    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
+            });
           }
-          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:
-        onClick && onClick(e, mergeOptions[selectedIndex]);
+          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);
-        break;
+      }
     }
   }
 
-  searchList(value) {
-    let { options, keyName, seperatedOptions } = this.props;
-    let foptions = options.filter(
-      dept => dept[keyName].toLowerCase().indexOf(value.toLowerCase()) != -1
-    );
-    let fseperatedOptions =
-      seperatedOptions &&
-      seperatedOptions.filter(
-        dept => dept[keyName].toLowerCase().indexOf(value.toLowerCase()) != -1
-      );
-    let optionsObj = {
-      foptions,
-      fseperatedOptions
-    };
-    return optionsObj;
+  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) {
-    let optionsObj = this.searchList(value);
-    this.setState({
-      searchString: value,
-      selectedIndex: -1,
-      options: optionsObj.foptions,
-      seperatedOptions: optionsObj.fseperatedOptions
-    });
+    const filteredOptions = this.handleFilterSuggestions(value);
+    this.setState(
+      {
+        searchValue: value,
+        selectedIndex: -1,
+        options: filteredOptions
+      },
+      () => {
+        this.onSearchAPI();
+      }
+    );
   }
 
   onSearchClear() {
-    let optionsObj = this.searchList('');
-    this.setState({
-      searchString: '',
-      options: optionsObj.foptions,
-      seperatedOptions: optionsObj.fseperatedOptions
-    });
+    const filteredOptions = this.handleFilterSuggestions('');
+    this.setState(
+      {
+        searchValue: '',
+        options: filteredOptions
+      },
+      () => {
+        this.onSearchAPI();
+      }
+    );
   }
 
   handleMouseEnter(id, value, index, e) {
@@ -190,17 +377,18 @@ export class ToggleDropDown extends React.Component {
 
   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);
+      isNextOptions && getNextOptions && getNextOptions(e, { searchValue });
     }
   }
 
   render() {
-    let { options, selectedIndex, seperatedOptions } = this.state;
-    let {
+    const { options, selectedIndex } = this.state;
+    const {
       value,
       removeClose,
       boxSize,
@@ -215,7 +403,9 @@ export class ToggleDropDown extends React.Component {
       left,
       top,
       bottom,
-      isPopupOpen,
+      isPopupOpen: isOpen,
+      isPopupActive,
+      needExternalPopupState,
       isPopupReady,
       position,
       getTargetRef,
@@ -225,7 +415,7 @@ export class ToggleDropDown extends React.Component {
       searchEmptyHint,
       searchErrorText,
       activeStyle,
-      showOnHover = false,
+      showOnHover,
       isDisabled,
       showIconOnHover,
       isReadOnly,
@@ -237,46 +427,66 @@ export class ToggleDropDown extends React.Component {
       dataTitle,
       isDataLoaded,
       children,
-      targetAlign,
-      needResponsive
+      needResponsive,
+      arrowIconPosition,
+      isGroupDropDown,
+      groupOptionsKey,
+      groupNameKey,
+      isToggleStateNeeded,
+      selectedId,
+      isPadding,
+      isNeedEffect,
+      hoverType,
+      palette,
+      getFooter,
+      customProps
     } = this.props;
-    let { searchString } = this.state;
-    let containerClass = `${className ? className : ''} ${
-      isPopupReady
-        ? activeStyle
-          ? activeStyle
-          : ''
-        : showIconOnHover
-        ? style.hoverIcon
-        : ''
+    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
-        ? commonStyle.disabled
-        : isReadOnly
-        ? style.readOnly
-        : !isEditable
+        ? 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.posRel}
+        className={style.wrapper}
         onMouseEnter={
           showOnHover && !isDisabled && !isReadOnly && isEditable
-            ? this.handleTogglePopup
+            ? this.showTogglePopup
             : undefined
         }
         onMouseLeave={
           showOnHover && !isDisabled && !isReadOnly && isEditable
-            ? this.handleTogglePopup
+            ? this.hideTogglePopup
             : undefined
         }
+        {...ToggleDropDownProps}
       >
         <Container
           alignBox='row'
-          className={containerClass}
           onClick={
             !showOnHover &&
             !isDisabled &&
@@ -285,51 +495,78 @@ export class ToggleDropDown extends React.Component {
             this.handleTogglePopup
           }
           eleRef={getTargetRef}
-          align={targetAlign}
+          align='vertical'
           isCover={false}
           dataId={dataId}
         >
           <div className={style.hiddenInput}>
-            <TextBox
+            <input
               type='text'
-              inputRef={this.inputRef}
+              ref={this.inputRef}
               onKeyDown={this.handleKeyDown}
-              needAppearance={false}
+              tabIndex='-1'
+              className={style.hiddenInputElement}
             />
           </div>
           {children ? (
-            children
+            isToggleStateNeeded ? (
+              <Component {...componentProps} isActive={isPopupOpen} />
+            ) : (
+              children
+            )
           ) : (
-            <React.Fragment>
-              {iconName ? (
-                <Box className={style.iconBox}>
-                  <Icon name={iconName} size={iconSize} />
-                </Box>
-              ) : null}
-              <Box
-                className={`${style.value} toggleDropText`}
-                shrink
-                tagName='span'
-                data-title={dataTitle}
+            <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}
               >
-                {value}
-              </Box>
-              {isEditable ? (
-                <Box
-                  className={style.arrow}
-                  dataId='statusdownarrow'
-                  tagName='span'
-                >
-                  <Icon
-                    size='6'
-                    name='ZD-blockDownArrow'
-                    iconClass='toggleDropIcon'
-                  />
-                </Box>
-              ) : null}
-            </React.Fragment>
+                {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}
@@ -343,172 +580,260 @@ export class ToggleDropDown extends React.Component {
             isArrow={isArrow}
             isAnimate
             getRef={getContainerRef}
-            className={style.dropBoxContainer}
+            customClass={{
+              customDropBoxWrap: style.dropBoxContainer
+            }}
             needResponsive={needResponsive}
+            isPadding={isPadding}
+            tabindex='0'
+            a11y={{
+              role: !isSearch ? 'menu' : undefined,
+              ariaLabelledby: !isSearch ? ariaTitleId : undefined
+            }}
+            palette={palette}
+            {...DropBoxProps}
           >
-            <React.Fragment>
-              {title && (
-                <div className={style.title}>
-                  <DropDownHeading text={title} />
-                </div>
-              )}
+            <Fragment>
               {isSearch ? (
                 <div className={style.search}>
                   <TextBoxIcon
                     placeHolder={placeHolderText}
                     onChange={this.handleChange}
-                    value={searchString}
+                    value={searchValue}
                     onClear={this.onSearchClear}
                     size={searchBoxSize}
                     inputRef={this.searchInputRef}
                     onKeyDown={this.handleKeyDown}
-                  >
-                    <Icon name='ZD-search' size='13' />
-                  </TextBoxIcon>
+                    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}
               >
-                {(options.length != 0 ||
-                  (seperatedOptions && seperatedOptions.length != 0)) &&
-                isDataLoaded ? (
-                  <React.Fragment>
-                    {options.length != 0 && options[0].iconName ? (
-                      <React.Fragment>
-                        {options.map((item, i) => {
-                          let { iconName, iconSize } = item;
+                {isDataLoaded ? (
+                  options && options.length != 0 ? (
+                    isGroupDropDown ? (
+                      <Fragment>
+                        {options.map(group => {
+                          const groupName = group[groupNameKey];
+                          const groupOptions = group[groupOptionsKey];
+                          const { needDivider } = group;
                           return (
-                            <ListItemWithIcon
-                              key={i}
-                              dataId={`dataid_${i}`}
-                              value={item[keyName]}
-                              id={item[idName]}
-                              active={value === item[keyName]}
-                              onClick={this.onSelect.bind(this, item)}
-                              index={i}
-                              highlight={selectedIndex === i}
-                              iconName={iconName}
-                              iconSize={iconSize}
-                              needTick={needTick}
-                              isTick={value === item[keyName]}
-                              onMouseEnter={this.handleMouseEnter}
-                              getRef={this.itemRef}
-                            />
+                            <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>
                           );
                         })}
-                      </React.Fragment>
+                      </Fragment>
                     ) : (
-                      <React.Fragment>
+                      <Fragment>
                         {options.map((item, i) => {
+                          const {
+                            iconName,
+                            iconSize,
+                            iconClass,
+                            title,
+                            needDivider,
+                            isDisabled = false,
+                            disableTitle = ''
+                          } = item;
+                          if (!needDivider) {
+                            listIndex += 1;
+                          }
                           return (
-                            <ListItem
-                              key={i}
-                              dataId={`dataid_${i}`}
-                              value={item[keyName]}
-                              id={item[idName]}
-                              active={value === item[keyName]}
-                              onClick={this.onSelect.bind(this, item)}
-                              index={i}
-                              highlight={selectedIndex === i}
-                              needTick={needTick}
-                              isTick={value === item[keyName]}
-                              onMouseEnter={this.handleMouseEnter}
-                              getRef={this.itemRef}
-                            />
-                          );
-                        })}
-                      </React.Fragment>
-                    )}
-                    {seperatedOptions && seperatedOptions.length != 0 && (
-                      <React.Fragment>
-                        {options.length != 0 && (
-                          <div className={style.seperatedLine}></div>
-                        )}
-                        {seperatedOptions[0].iconName ? (
-                          <React.Fragment>
-                            {seperatedOptions.map((item, i) => {
-                              let { iconName, iconSize } = item;
-                              return (
+                            <Fragment key={i}>
+                              {needDivider ? (
+                                <div className={style.seperatedLine} />
+                              ) : iconName ? (
                                 <ListItemWithIcon
-                                  key={i}
-                                  dataId={`dataid_${i + options.length}`}
+                                  dataId={item[keyName]}
                                   value={item[keyName]}
                                   id={item[idName]}
-                                  active={value === item[keyName]}
+                                  active={selectedId === item[idName]}
                                   onClick={this.onSelect.bind(this, item)}
-                                  index={i + options.length}
-                                  highlight={
-                                    selectedIndex === i + options.length
-                                  }
+                                  index={listIndex}
+                                  disableTitle={disableTitle}
+                                  isDisabled={isDisabled}
+                                  highlight={selectedIndex === listIndex}
                                   iconName={iconName}
+                                  iconClass={iconClass}
                                   iconSize={iconSize}
                                   needTick={needTick}
-                                  isTick={value === item[keyName]}
+                                  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}
                                 />
-                              );
-                            })}
-                          </React.Fragment>
-                        ) : (
-                          <React.Fragment>
-                            {seperatedOptions.map((item, i) => {
-                              return (
+                              ) : (
                                 <ListItem
-                                  key={i}
-                                  dataId={`dataid_${i + options.length}`}
+                                  key={listIndex}
+                                  dataId={item[keyName]}
                                   value={item[keyName]}
                                   id={item[idName]}
-                                  active={value === item[keyName]}
+                                  disableTitle={disableTitle}
+                                  isDisabled={isDisabled}
+                                  active={selectedId === item[idName]}
                                   onClick={this.onSelect.bind(this, item)}
-                                  index={i + options.length}
-                                  highlight={
-                                    selectedIndex == i + options.length
-                                  }
+                                  index={listIndex}
+                                  highlight={selectedIndex === listIndex}
                                   needTick={needTick}
-                                  isTick={value === item[keyName]}
+                                  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}
                                 />
-                              );
-                            })}
-                          </React.Fragment>
-                        )}
-                      </React.Fragment>
-                    )}
-                  </React.Fragment>
-                ) : isDataLoaded ? (
-                  <CommonEmptyState
-                    className={style.svgWrapper}
-                    title={searchErrorText || 'oops !'}
-                    description={searchEmptyHint}
-                  >
-                    <EmptySearch size='small' />
-                  </CommonEmptyState>
+                              )}
+                            </Fragment>
+                          );
+                        })}
+                      </Fragment>
+                    )
+                  ) : (
+                    <CommonEmptyState
+                      className={style.svgWrapper}
+                      title={searchErrorText || 'oops !'}
+                      description={searchEmptyHint}
+                      size='small'
+                      getEmptyState={this.emptySearchSVG}
+                    />
+                  )
                 ) : (
                   <div className={style.loader}>
                     <Loader />
                   </div>
                 )}
               </Box>
-            </React.Fragment>
+              {getFooter ? <div>{getFooter()}</div> : null}
+            </Fragment>
           </DropBox>
         ) : null}
       </div>
     );
   }
 }
-if (__DOCS__) {
-  ToggleDropDown.docs = {
-    componentGroup: 'Molecule'
-  };
-}
-
 ToggleDropDown.defaultProps = {
   keyName: 'value',
   idName: 'id',
@@ -516,16 +841,28 @@ ToggleDropDown.defaultProps = {
   searchBoxSize: 'small',
   isDisabled: false,
   showIconOnHover: false,
+  showOnHover: false,
   isReadOnly: false,
   isEditable: true,
   isDataLoaded: true,
   needTick: true,
-  targetAlign: 'vertical',
-  needResponsive: 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',
@@ -540,14 +877,18 @@ ToggleDropDown.propTypes = {
     'leftBottom',
     'leftCenter'
   ]),
-  position: PropTypes.string,
-  boxSize: PropTypes.oneOf(['small', 'medium', 'mlarge', 'large']),
+  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,
@@ -555,45 +896,55 @@ ToggleDropDown.propTypes = {
   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,
-  bottom: PropTypes.number,
-  top: PropTypes.number,
-  left: 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,
-  isDataLoaded: PropTypes.bool,
-  children: PropTypes.node,
-  seperatedOptions: PropTypes.array,
-  targetAlign: PropTypes.oneOf([
-    'vertical',
-    'horizontal',
-    'both',
-    'top',
-    'right',
-    'bottom',
-    'left',
-    'between',
-    'around'
-  ]),
-  isNextOptions: PropTypes.bool,
-  getNextOptions: PropTypes.func,
-  needResponsive: PropTypes.bool
+  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);