@zohodesk/dot 1.0.0-beta.22 → 1.0.0-beta.223

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -1,17 +1,9 @@
-import _defineProperty from 'babel-runtime/helpers/defineProperty';
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-var _ToggleDropDown$propT;
-
-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';
@@ -21,514 +13,802 @@ 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 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);
+  }
 
-export var ToggleDropDown = function (_React$Component) {
-  _inherits(ToggleDropDown, _React$Component);
+  emptySearchSVG() {
+    return /*#__PURE__*/React.createElement(EmptySearch, {
+      size: "small"
+    });
+  }
 
-  function ToggleDropDown(props) {
-    _classCallCheck(this, ToggleDropDown);
+  inputRef(el) {
+    this.hiddenInput = el;
+  }
 
-    var _this = _possibleConstructorReturn(this, (ToggleDropDown.__proto__ || _Object$getPrototypeOf(ToggleDropDown)).call(this, props));
+  itemRef(ele, index, id) {
+    this[`suggestion_${id}`] = ele;
+  }
 
-    _this.state = {
-      searchString: '',
-      selectedIndex: 0,
-      options: props.options,
-      seperatedOptions: props.seperatedOptions
-    };
-    _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.onSearchClear = _this.onSearchClear.bind(_this);
-    _this.searchList = _this.searchList.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);
-    return _this;
+  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);
   }
 
-  _createClass(ToggleDropDown, [{
-    key: 'inputRef',
-    value: function inputRef(el) {
-      this.hiddenInput = el;
+  scrollContentRef(el) {
+    const {
+      isPopupOpen
+    } = this.props;
+
+    if (isPopupOpen) {
+      this.optionsContainer = el;
     }
-  }, {
-    key: 'itemRef',
-    value: function itemRef(ele, index, id) {
-      this['suggestion_' + id] = ele;
+  }
+
+  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
+      });
     }
-  }, {
-    key: 'searchInputRef',
-    value: function searchInputRef(el) {
-      this.searchInput = el;
+  }
+
+  onSelect(element, e) {
+    const {
+      onClick,
+      togglePopup,
+      preventPopupClose
+    } = this.props;
+    onClick && onClick(e, element);
+    !preventPopupClose && togglePopup(e);
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      isPopupOpen,
+      isPopupReady,
+      isSearch,
+      idName,
+      options,
+      onDropDownOpen,
+      onDropDownClose
+    } = this.props;
+    const {
+      selectedIndex,
+      searchValue
+    } = this.state;
+
+    if (prevProps.isPopupReady !== isPopupReady) {
+      setTimeout(() => {
+        isPopupReady ? isSearch ? this.searchInput.focus({
+          preventScroll: true
+        }) : this.hiddenInput.focus({
+          preventScroll: true
+        }) : this.hiddenInput.focus({
+          preventScroll: true
+        });
+      }, 10);
     }
-  }, {
-    key: 'handleTogglePopup',
-    value: function handleTogglePopup(e) {
-      var _props = this.props,
-          togglePopup = _props.togglePopup,
-          boxPosition = _props.boxPosition,
-          onSelectLabel = _props.onSelectLabel,
-          isPopupOpen = _props.isPopupOpen;
-
-      !isPopupOpen && onSelectLabel && onSelectLabel(e);
-      togglePopup(e, boxPosition);
+
+    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);
     }
-  }, {
-    key: 'scrollContentRef',
-    value: function scrollContentRef(el) {
-      var isPopupOpen = this.props.isPopupOpen;
 
-      if (isPopupOpen) {
-        this.optionsContainer = el;
-      }
+    if (!prevProps.isPopupOpen && isPopupOpen && searchValue.length) {
+      this.onSearchClear();
     }
-  }, {
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      if (nextProps.options.length != this.props.options.length) {
+
+    if (this.props.from == 'activityFilter') {
+      //Temproary
+      const results = this.props.options.filter(_ref => {
+        let {
+          isDisabled: id1
+        } = _ref;
+        return !prevProps.options.some(_ref2 => {
+          let {
+            isDisabled: id2
+          } = _ref2;
+          return id2 === id1;
+        });
+      });
+
+      if (results.length > 0) {
         this.setState({
-          options: nextProps.options
+          options: options
         });
       }
     }
-  }, {
-    key: 'onSelect',
-    value: function onSelect(element, e) {
-      var _props2 = this.props,
-          onClick = _props2.onClick,
-          togglePopup = _props2.togglePopup;
-
-      onClick && onClick(e, element);
-      togglePopup(e);
-    }
-  }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate(prevProps) {
-      var _this2 = this;
-
-      var _props3 = this.props,
-          isPopupOpen = _props3.isPopupOpen,
-          isSearch = _props3.isSearch,
-          idName = _props3.idName;
-      var _state = this.state,
-          selectedIndex = _state.selectedIndex,
-          options = _state.options,
-          seperatedOptions = _state.seperatedOptions;
-
-      if (prevProps.isPopupOpen != isPopupOpen) {
-        setTimeout(function () {
-          isPopupOpen ? isSearch ? _this2.searchInput.focus() : _this2.hiddenInput.focus() : _this2.hiddenInput.focus();
-        }, 10);
-      }
-      var mergeOptions = seperatedOptions ? options.concat(seperatedOptions) : options;
-      var option = mergeOptions[selectedIndex];
-      var id = option && option[idName] || {};
-      var selSuggestion = this['suggestion_' + id];
+
+    if (prevProps.isPopupOpen !== isPopupOpen) {
       if (isPopupOpen) {
-        this.optionsContainer && scrollTo(this.optionsContainer, selSuggestion);
+        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;
       }
     }
-  }, {
-    key: 'handleKeyDown',
-    value: function handleKeyDown(e) {
-      var keyCode = e.keyCode;
-      var _state2 = this.state,
-          selectedIndex = _state2.selectedIndex,
-          options = _state2.options,
-          seperatedOptions = _state2.seperatedOptions;
-
-      var totalIndex = seperatedOptions ? options.length + seperatedOptions.length : options.length;
-      var mergeOptions = seperatedOptions ? options.concat(seperatedOptions) : options;
-      var _props4 = this.props,
-          togglePopup = _props4.togglePopup,
-          onClick = _props4.onClick,
-          boxPosition = _props4.boxPosition,
-          isPopupOpen = _props4.isPopupOpen,
-          isNextOptions = _props4.isNextOptions,
-          getNextOptions = _props4.getNextOptions;
-
-      if (isPopupOpen && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
-        e.preventDefault(); //prevent body scroll
+
+    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 });
+            this.setState({
+              selectedIndex: 0
+            });
           } else {
             if (selectedIndex === totalIndex - 3) {
-              isNextOptions && getNextOptions && getNextOptions();
+              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 });
+            this.setState({
+              selectedIndex: totalIndex - 1
+            });
           } else {
-            this.setState({ selectedIndex: selectedIndex - 1 });
+            this.setState({
+              selectedIndex: selectedIndex - 1
+            });
           }
+
           break;
+
         case 13:
-          onClick && onClick(e, mergeOptions[selectedIndex]);
-          togglePopup(e, boxPosition);
+          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);
+      }
     }
-  }, {
-    key: 'searchList',
-    value: function searchList(value) {
-      var _props5 = this.props,
-          options = _props5.options,
-          keyName = _props5.keyName,
-          seperatedOptions = _props5.seperatedOptions;
-
-      var foptions = options.filter(function (dept) {
-        return dept[keyName].toLowerCase().indexOf(value.toLowerCase()) != -1;
-      });
-      var fseperatedOptions = seperatedOptions && seperatedOptions.filter(function (dept) {
-        return dept[keyName].toLowerCase().indexOf(value.toLowerCase()) != -1;
-      });
-      var optionsObj = {
-        foptions: foptions,
-        fseperatedOptions: fseperatedOptions
-      };
-      return optionsObj;
-    }
-  }, {
-    key: 'handleChange',
-    value: function handleChange(value, e) {
-      var optionsObj = this.searchList(value);
+  }
+
+  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({
-        searchString: value,
-        selectedIndex: -1,
-        options: optionsObj.foptions,
-        seperatedOptions: optionsObj.fseperatedOptions
+        selectedIndex: -1
       });
     }
-  }, {
-    key: 'onSearchClear',
-    value: function onSearchClear() {
-      var optionsObj = this.searchList('');
-      this.setState({
-        searchString: '',
-        options: optionsObj.foptions,
-        seperatedOptions: optionsObj.fseperatedOptions
-      });
+  }
+
+  onSearchAPI() {
+    const {
+      searchValue
+    } = this.state;
+    const {
+      needSearchFetching,
+      onSearch
+    } = this.props;
+
+    if (needSearchFetching && onSearch) {
+      onSearch(searchValue);
     }
-  }, {
-    key: 'handleMouseEnter',
-    value: function handleMouseEnter(id, value, index, e) {
-      this.setState({
-        selectedIndex: index
+  }
+
+  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
       });
     }
-  }, {
-    key: 'handleScroll',
-    value: function handleScroll(e) {
-      var _props6 = this.props,
-          isNextOptions = _props6.isNextOptions,
-          getNextOptions = _props6.getNextOptions;
-
-      if (e.target.scrollTop + e.target.offsetHeight > e.target.scrollHeight - 1) {
-        isNextOptions && getNextOptions && getNextOptions(e);
+  }
+
+  render() {
+    const {
+      options,
+      selectedIndex
+    } = this.state;
+    const {
+      value,
+      removeClose,
+      boxSize,
+      keyName,
+      idName,
+      title,
+      isSearch,
+      isArrow,
+      placeHolderText,
+      className,
+      right,
+      left,
+      top,
+      bottom,
+      isPopupOpen: isOpen,
+      isPopupActive,
+      needExternalPopupState,
+      isPopupReady,
+      position,
+      getTargetRef,
+      getContainerRef,
+      dataId,
+      searchBoxSize,
+      searchEmptyHint,
+      searchErrorText,
+      activeStyle,
+      showOnHover,
+      isDisabled,
+      showIconOnHover,
+      isReadOnly,
+      hoverStyle,
+      isEditable,
+      iconName,
+      iconSize,
+      needTick,
+      dataTitle,
+      isDataLoaded,
+      children,
+      needResponsive,
+      arrowIconPosition,
+      isGroupDropDown,
+      groupOptionsKey,
+      groupNameKey,
+      isToggleStateNeeded,
+      selectedId,
+      isPadding,
+      isNeedEffect,
+      hoverType,
+      palette,
+      getFooter,
+      customProps
+    } = this.props;
+    let {
+      ToggleDropDownProps = {},
+      DropBoxProps = {},
+      TextBoxIconProps = {},
+      ListItemWithIconProps = {},
+      ListItemProps = {}
+    } = customProps;
+    const isPopupOpen = needExternalPopupState ? isPopupActive && isOpen : isOpen;
+    const Component = isToggleStateNeeded ? children.type : null,
+          componentProps = isToggleStateNeeded ? children.props : null;
+    const {
+      searchValue
+    } = this.state;
+    const commonClass = `${className ? className : ''} ${isPopupReady ? activeStyle ? activeStyle : '' : ''} ${isDisabled ? CssProvider('isDisable') : isReadOnly || !isEditable ? style.cursorDefault : !showOnHover ? `${style.cursor} ${hoverStyle ? hoverStyle : ''}` : `${hoverStyle ? hoverStyle : ''} ${style.cursorDefault}`}`;
+    let listIndex = -1;
+    const ariaTitleId = this.getAriaId();
+    const allyOptionsArr = this.getOptionsArray();
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: style.wrapper,
+      onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.showTogglePopup : undefined,
+      onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.hideTogglePopup : undefined
+    }, ToggleDropDownProps), /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      onClick: !showOnHover && !isDisabled && !isReadOnly && isEditable && this.handleTogglePopup,
+      eleRef: getTargetRef,
+      align: "vertical",
+      isCover: false,
+      dataId: dataId
+    }, /*#__PURE__*/React.createElement("div", {
+      className: style.hiddenInput
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "text",
+      ref: this.inputRef,
+      onKeyDown: this.handleKeyDown,
+      tabIndex: "-1",
+      className: style.hiddenInputElement
+    })), children ? isToggleStateNeeded ? /*#__PURE__*/React.createElement(Component, _extends({}, componentProps, {
+      isActive: isPopupOpen
+    })) : children : /*#__PURE__*/React.createElement(RippleEffect, {
+      hoverType: hoverType,
+      isActive: isPopupOpen,
+      isNeedEffect: isEditable && isNeedEffect
+    }, /*#__PURE__*/React.createElement(Container, {
+      className: `${btnStyle.buttonReset} ${commonClass} ${!isPopupOpen && showIconOnHover ? style.hoverIcon : ''}`,
+      isCover: false,
+      alignBox: "row",
+      align: "vertical",
+      tagName: "button",
+      "aria-labelledby": ariaTitleId,
+      "aria-haspopup": true,
+      "aria-expanded": isPopupOpen ? true : false
+    }, iconName ? /*#__PURE__*/React.createElement(Box, {
+      className: value ? style.iconBox : ''
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: iconName,
+      size: iconSize
+    })) : null, value && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+      id: ariaTitleId,
+      "aria-hidden": true,
+      className: `${style.value} toggleDropText`,
+      shrink: true,
+      tagName: "span",
+      "data-title": dataTitle
+    }, value), isEditable ? /*#__PURE__*/React.createElement(Icon, {
+      "aria-hidden": true,
+      size: "6",
+      name: "ZD-down",
+      iconClass: `${'toggleDropIcon'} ${style.arrow} ${style[`${arrowIconPosition}_arrow`]}`,
+      dataId: "statusdownarrow"
+    }) : null)))), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, _extends({
+      boxPosition: position,
+      isActive: isPopupReady,
+      onClick: removeClose,
+      size: boxSize,
+      right: right,
+      left: left,
+      top: top,
+      bottom: bottom,
+      isArrow: isArrow,
+      isAnimate: true,
+      getRef: getContainerRef,
+      customClass: {
+        customDropBoxWrap: style.dropBoxContainer
+      },
+      needResponsive: needResponsive,
+      isPadding: isPadding,
+      tabindex: "0",
+      a11y: {
+        role: !isSearch ? 'menu' : undefined,
+        ariaLabelledby: !isSearch ? ariaTitleId : undefined
+      },
+      palette: palette
+    }, DropBoxProps), /*#__PURE__*/React.createElement(Fragment, null, isSearch ? /*#__PURE__*/React.createElement("div", {
+      className: style.search
+    }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
+      placeHolder: placeHolderText,
+      onChange: this.handleChange,
+      value: searchValue,
+      onClear: this.onSearchClear,
+      size: searchBoxSize,
+      inputRef: this.searchInputRef,
+      onKeyDown: this.handleKeyDown,
+      a11y: {
+        role: 'combobox',
+        ariaOwns: ariaTitleId,
+        ariaActivedescendant: allyOptionsArr[selectedIndex] && allyOptionsArr[selectedIndex][keyName],
+        ariaAutocomplete: 'list',
+        ariaHaspopup: true,
+        ariaExpanded: true
       }
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _this3 = this;
-
-      var _state3 = this.state,
-          options = _state3.options,
-          selectedIndex = _state3.selectedIndex,
-          seperatedOptions = _state3.seperatedOptions;
-      var _props7 = this.props,
-          value = _props7.value,
-          removeClose = _props7.removeClose,
-          boxSize = _props7.boxSize,
-          keyName = _props7.keyName,
-          idName = _props7.idName,
-          title = _props7.title,
-          isSearch = _props7.isSearch,
-          isArrow = _props7.isArrow,
-          placeHolderText = _props7.placeHolderText,
-          className = _props7.className,
-          right = _props7.right,
-          left = _props7.left,
-          top = _props7.top,
-          bottom = _props7.bottom,
-          isPopupOpen = _props7.isPopupOpen,
-          isPopupReady = _props7.isPopupReady,
-          position = _props7.position,
-          getTargetRef = _props7.getTargetRef,
-          getContainerRef = _props7.getContainerRef,
-          dataId = _props7.dataId,
-          searchBoxSize = _props7.searchBoxSize,
-          searchEmptyHint = _props7.searchEmptyHint,
-          searchErrorText = _props7.searchErrorText,
-          activeStyle = _props7.activeStyle,
-          _props7$showOnHover = _props7.showOnHover,
-          showOnHover = _props7$showOnHover === undefined ? false : _props7$showOnHover,
-          isDisabled = _props7.isDisabled,
-          showIconOnHover = _props7.showIconOnHover,
-          isReadOnly = _props7.isReadOnly,
-          hoverStyle = _props7.hoverStyle,
-          isEditable = _props7.isEditable,
-          iconName = _props7.iconName,
-          iconSize = _props7.iconSize,
-          needTick = _props7.needTick,
-          dataTitle = _props7.dataTitle,
-          isDataLoaded = _props7.isDataLoaded,
-          children = _props7.children,
-          targetAlign = _props7.targetAlign,
-          needResponsive = _props7.needResponsive;
-      var searchString = this.state.searchString;
-
-      var containerClass = (className ? className : '') + ' ' + (isPopupReady ? activeStyle ? activeStyle : '' : showIconOnHover ? style.hoverIcon : '') + ' ' + (isDisabled ? commonStyle.disabled : isReadOnly ? style.readOnly : !isEditable ? style.cursorDefault : !showOnHover ? style.cursor + ' ' + (hoverStyle ? hoverStyle : '') : (hoverStyle ? hoverStyle : '') + ' ' + style.cursorDefault);
-      return React.createElement(
-        'div',
-        {
-          className: style.posRel,
-          onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined,
-          onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined
-        },
-        React.createElement(
-          Container,
-          {
-            alignBox: 'row',
-            className: containerClass,
-            onClick: !showOnHover && !isDisabled && !isReadOnly && isEditable && this.handleTogglePopup,
-            eleRef: getTargetRef,
-            align: targetAlign,
-            isCover: false,
-            dataId: dataId
-          },
-          React.createElement(
-            'div',
-            { className: style.hiddenInput },
-            React.createElement(TextBox, {
-              type: 'text',
-              inputRef: this.inputRef,
-              onKeyDown: this.handleKeyDown,
-              needAppearance: false
-            })
-          ),
-          children ? children : React.createElement(
-            React.Fragment,
-            null,
-            iconName ? React.createElement(
-              Box,
-              { className: style.iconBox },
-              React.createElement(Icon, { name: iconName, size: iconSize })
-            ) : null,
-            React.createElement(
-              Box,
-              {
-                className: style.value + ' toggleDropText',
-                shrink: true,
-                tagName: 'span',
-                'data-title': dataTitle
-              },
-              value
-            ),
-            isEditable ? React.createElement(
-              Box,
-              {
-                className: style.arrow,
-                dataId: 'statusdownarrow',
-                tagName: 'span'
-              },
-              React.createElement(Icon, {
-                size: '6',
-                name: 'ZD-blockDownArrow',
-                iconClass: 'toggleDropIcon'
-              })
-            ) : null
-          )
-        ),
-        isPopupOpen ? React.createElement(
-          DropBox,
-          {
-            boxPosition: position,
-            isActive: isPopupReady,
-            onClick: removeClose,
-            size: boxSize,
-            right: right,
-            left: left,
-            top: top,
-            bottom: bottom,
-            isArrow: isArrow,
-            isAnimate: true,
-            getRef: getContainerRef,
-            className: style.dropBoxContainer,
-            needResponsive: needResponsive
-          },
-          React.createElement(
-            React.Fragment,
-            null,
-            title && React.createElement(
-              'div',
-              { className: style.title },
-              React.createElement(DropDownHeading, { text: title })
-            ),
-            isSearch ? React.createElement(
-              'div',
-              { className: style.search },
-              React.createElement(
-                TextBoxIcon,
-                {
-                  placeHolder: placeHolderText,
-                  onChange: this.handleChange,
-                  value: searchString,
-                  onClear: this.onSearchClear,
-                  size: searchBoxSize,
-                  inputRef: this.searchInputRef,
-                  onKeyDown: this.handleKeyDown
-                },
-                React.createElement(Icon, { name: 'ZD-search', size: '13' })
-              )
-            ) : null,
-            React.createElement(
-              Box,
-              {
-                scroll: 'vertical',
-                dataId: dataId + '_list',
-                className: style.maxHgt,
-                eleRef: this.scrollContentRef,
-                onScroll: this.handleScroll
-              },
-              (options.length != 0 || seperatedOptions && seperatedOptions.length != 0) && isDataLoaded ? React.createElement(
-                React.Fragment,
-                null,
-                options.length != 0 && options[0].iconName ? React.createElement(
-                  React.Fragment,
-                  null,
-                  options.map(function (item, i) {
-                    var iconName = item.iconName,
-                        iconSize = item.iconSize;
-
-                    return React.createElement(ListItemWithIcon, {
-                      key: i,
-                      dataId: 'dataid_' + i,
-                      value: item[keyName],
-                      id: item[idName],
-                      active: value === item[keyName],
-                      onClick: _this3.onSelect.bind(_this3, item),
-                      index: i,
-                      highlight: selectedIndex === i,
-                      iconName: iconName,
-                      iconSize: iconSize,
-                      needTick: needTick,
-                      needBorder: false,
-                      onMouseEnter: _this3.handleMouseEnter,
-                      getRef: _this3.itemRef
-                    });
-                  })
-                ) : React.createElement(
-                  React.Fragment,
-                  null,
-                  options.map(function (item, i) {
-                    return React.createElement(ListItem, {
-                      key: i,
-                      dataId: 'dataid_' + i,
-                      value: item[keyName],
-                      id: item[idName],
-                      active: value === item[keyName],
-                      onClick: _this3.onSelect.bind(_this3, item),
-                      index: i,
-                      highlight: selectedIndex === i,
-                      needTick: needTick,
-                      needBorder: false,
-                      onMouseEnter: _this3.handleMouseEnter,
-                      getRef: _this3.itemRef
-                    });
-                  })
-                ),
-                seperatedOptions && seperatedOptions.length != 0 && React.createElement(
-                  React.Fragment,
-                  null,
-                  options.length != 0 && React.createElement('div', { className: style.seperatedLine }),
-                  seperatedOptions[0].iconName ? React.createElement(
-                    React.Fragment,
-                    null,
-                    seperatedOptions.map(function (item, i) {
-                      var iconName = item.iconName,
-                          iconSize = item.iconSize;
-
-                      return React.createElement(ListItemWithIcon, {
-                        key: i,
-                        dataId: 'dataid_' + (i + options.length),
-                        value: item[keyName],
-                        id: item[idName],
-                        active: value === item[keyName],
-                        onClick: _this3.onSelect.bind(_this3, item),
-                        index: i + options.length,
-                        highlight: selectedIndex === i + options.length,
-                        iconName: iconName,
-                        iconSize: iconSize,
-                        needTick: needTick,
-                        isTick: value === item[keyName],
-                        onMouseEnter: _this3.handleMouseEnter,
-                        getRef: _this3.itemRef
-                      });
-                    })
-                  ) : React.createElement(
-                    React.Fragment,
-                    null,
-                    seperatedOptions.map(function (item, i) {
-                      return React.createElement(ListItem, {
-                        key: i,
-                        dataId: 'dataid_' + (i + options.length),
-                        value: item[keyName],
-                        id: item[idName],
-                        active: value === item[keyName],
-                        onClick: _this3.onSelect.bind(_this3, item),
-                        index: i + options.length,
-                        highlight: selectedIndex == i + options.length,
-                        needTick: needTick,
-                        isTick: value === item[keyName],
-                        onMouseEnter: _this3.handleMouseEnter,
-                        getRef: _this3.itemRef
-                      });
-                    })
-                  )
-                )
-              ) : isDataLoaded ? React.createElement(
-                CommonEmptyState,
-                {
-                  className: style.svgWrapper,
-                  title: searchErrorText || 'oops !',
-                  description: searchEmptyHint
-                },
-                React.createElement(EmptySearch, { size: 'small' })
-              ) : React.createElement(
-                'div',
-                { className: style.loader },
-                React.createElement(Loader, null)
-              )
-            )
-          )
-        ) : null
-      );
-    }
-  }]);
+    }, TextBoxIconProps))) : null, title && options.length != 0 && /*#__PURE__*/React.createElement("div", {
+      className: style.title
+    }, /*#__PURE__*/React.createElement(DropDownHeading, {
+      text: title,
+      htmlId: ariaTitleId,
+      palette: palette,
+      a11y: {
+        role: 'heading'
+      },
+      customClass: style.dropdown
+    })), /*#__PURE__*/React.createElement(Box, {
+      id: ariaTitleId,
+      scroll: "vertical",
+      dataId: `${dataId}_list`,
+      className: style.maxHgt,
+      eleRef: this.scrollContentRef,
+      onScroll: this.handleScroll,
+      role: isSearch ? 'listbox' : undefined,
+      "aria-labelledby": isSearch ? ariaTitleId : undefined
+    }, isDataLoaded ? options && options.length != 0 ? isGroupDropDown ? /*#__PURE__*/React.createElement(Fragment, null, options.map(group => {
+      const groupName = group[groupNameKey];
+      const groupOptions = group[groupOptionsKey];
+      const {
+        needDivider
+      } = group;
+      return /*#__PURE__*/React.createElement(Fragment, {
+        key: `index${groupName}`
+      }, needDivider && /*#__PURE__*/React.createElement("div", {
+        className: style.seperatedLine
+      }), groupName && /*#__PURE__*/React.createElement("div", {
+        className: style.groupName
+      }, /*#__PURE__*/React.createElement(DropDownHeading, {
+        text: groupName,
+        palette: palette,
+        a11y: {
+          role: 'heading'
+        }
+      })), groupOptions && groupOptions.map(item => {
+        const {
+          iconName,
+          iconSize,
+          iconClass,
+          title,
+          disableTitle = '',
+          isDisabled = false
+        } = item;
+        listIndex += 1;
+        return iconName ? /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({
+          key: listIndex,
+          dataId: item[keyName],
+          value: item[keyName],
+          id: item[idName],
+          active: selectedId === item[idName],
+          onClick: this.onSelect.bind(this, item),
+          index: listIndex,
+          highlight: selectedIndex === listIndex,
+          disableTitle: disableTitle,
+          isDisabled: isDisabled,
+          iconName: iconName,
+          iconClass: iconClass,
+          iconSize: iconSize,
+          needTick: needTick,
+          needBorder: false,
+          onMouseEnter: this.handleMouseEnter,
+          getRef: this.itemRef,
+          title: title ? title : item[keyName],
+          palette: palette,
+          a11y: {
+            role: isSearch ? 'option' : 'menuitem',
+            ariaSelected: selectedId === item[idName]
+          }
+        }, ListItemWithIconProps)) : /*#__PURE__*/React.createElement(ListItem, _extends({
+          key: listIndex,
+          dataId: item[keyName],
+          value: item[keyName],
+          id: item[idName],
+          active: selectedId === item[idName],
+          onClick: this.onSelect.bind(this, item),
+          isDisabled: isDisabled,
+          disableTitle: disableTitle,
+          index: listIndex,
+          highlight: selectedIndex === listIndex,
+          needTick: needTick,
+          needBorder: false,
+          onMouseEnter: this.handleMouseEnter,
+          getRef: this.itemRef,
+          title: title ? title : item[keyName],
+          palette: palette,
+          a11y: {
+            role: isSearch ? 'option' : 'menuitem',
+            ariaSelected: selectedId === item[idName]
+          }
+        }, ListItemProps));
+      }));
+    })) : /*#__PURE__*/React.createElement(Fragment, null, options.map((item, i) => {
+      const {
+        iconName,
+        iconSize,
+        iconClass,
+        title,
+        needDivider,
+        isDisabled = false,
+        disableTitle = ''
+      } = item;
 
-  return ToggleDropDown;
-}(React.Component);
-if (false) {
-  ToggleDropDown.docs = {
-    componentGroup: 'Molecule'
-  };
-}
+      if (!needDivider) {
+        listIndex += 1;
+      }
 
+      return /*#__PURE__*/React.createElement(Fragment, {
+        key: i
+      }, needDivider ? /*#__PURE__*/React.createElement("div", {
+        className: style.seperatedLine
+      }) : iconName ? /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({
+        dataId: item[keyName],
+        value: item[keyName],
+        id: item[idName],
+        active: selectedId === item[idName],
+        onClick: this.onSelect.bind(this, item),
+        index: listIndex,
+        disableTitle: disableTitle,
+        isDisabled: isDisabled,
+        highlight: selectedIndex === listIndex,
+        iconName: iconName,
+        iconClass: iconClass,
+        iconSize: iconSize,
+        needTick: needTick,
+        needBorder: false,
+        onMouseEnter: this.handleMouseEnter,
+        getRef: this.itemRef,
+        title: title ? title : item[keyName],
+        key: listIndex,
+        palette: palette,
+        a11y: {
+          role: isSearch ? 'option' : 'menuitem',
+          ariaSelected: selectedId === item[idName]
+        }
+      }, ListItemWithIconProps)) : /*#__PURE__*/React.createElement(ListItem, _extends({
+        key: listIndex,
+        dataId: item[keyName],
+        value: item[keyName],
+        id: item[idName],
+        disableTitle: disableTitle,
+        isDisabled: isDisabled,
+        active: selectedId === item[idName],
+        onClick: this.onSelect.bind(this, item),
+        index: listIndex,
+        highlight: selectedIndex === listIndex,
+        needTick: needTick,
+        needBorder: false,
+        onMouseEnter: this.handleMouseEnter,
+        getRef: this.itemRef,
+        title: title ? title : item[keyName],
+        palette: palette,
+        a11y: {
+          role: isSearch ? 'option' : 'menuitem',
+          ariaSelected: selectedId === item[idName]
+        }
+      }, ListItemProps)));
+    })) : /*#__PURE__*/React.createElement(CommonEmptyState, {
+      className: style.svgWrapper,
+      title: searchErrorText || 'oops !',
+      description: searchEmptyHint,
+      size: "small",
+      getEmptyState: this.emptySearchSVG
+    }) : /*#__PURE__*/React.createElement("div", {
+      className: style.loader
+    }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement("div", null, getFooter()) : null)) : null);
+  }
+
+}
 ToggleDropDown.defaultProps = {
   keyName: 'value',
   idName: 'id',
@@ -536,25 +816,40 @@ 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 = (_ToggleDropDown$propT = {
+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(['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,
@@ -562,15 +857,26 @@ ToggleDropDown.propTypes = (_ToggleDropDown$propT = {
   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,
@@ -578,11 +884,29 @@ ToggleDropDown.propTypes = (_ToggleDropDown$propT = {
   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
-}, _defineProperty(_ToggleDropDown$propT, 'isDataLoaded', PropTypes.bool), _defineProperty(_ToggleDropDown$propT, 'children', PropTypes.node), _defineProperty(_ToggleDropDown$propT, 'seperatedOptions', PropTypes.array), _defineProperty(_ToggleDropDown$propT, 'targetAlign', PropTypes.oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around'])), _defineProperty(_ToggleDropDown$propT, 'isNextOptions', PropTypes.bool), _defineProperty(_ToggleDropDown$propT, 'getNextOptions', PropTypes.func), _defineProperty(_ToggleDropDown$propT, 'needResponsive', PropTypes.bool), _ToggleDropDown$propT);
+  value: PropTypes.node,
+  onDropDownOpen: PropTypes.func,
+  onDropDownClose: PropTypes.func,
+  getFooter: PropTypes.func,
+  customProps: PropTypes.shape({
+    ToggleDropDownProps: PropTypes.object,
+    DropBoxProps: PropTypes.object,
+    TextBoxIconProps: PropTypes.object,
+    ListItemWithIconProps: PropTypes.object,
+    ListItemProps: PropTypes.object
+  }),
+  preventPopupClose: PropTypes.bool
+};
+
+if (false) {
+  ToggleDropDown.docs = {
+    componentGroup: 'Molecule'
+  };
+}
 
 export default Popup(ToggleDropDown);