@zohodesk/dot 1.0.0-beta.26 → 1.0.0-beta.260

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -1,588 +1,845 @@
-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';
-
-var _ToggleDropDown$propT;
-
-import React 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';
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { Component, Fragment } from 'react';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { Icon } from '@zohodesk/icons';
 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 Loader from '@zohodesk/svg/lib/Loader/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 EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
+import CssProvider from '@zohodesk/components/lib/Provider/CssProvider';
+import { scrollTo, findScrollEnd } 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 ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
 import style from './ToggleDropDown.module.css';
-
-export var ToggleDropDown = function (_React$Component) {
-  _inherits(ToggleDropDown, _React$Component);
-
-  function ToggleDropDown(props) {
-    _classCallCheck(this, ToggleDropDown);
-
-    var _this = _possibleConstructorReturn(this, (ToggleDropDown.__proto__ || _Object$getPrototypeOf(ToggleDropDown)).call(this, props));
-
-    _this.state = {
-      searchString: '',
-      selectedIndex: 0,
+export class ToggleDropDown extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchValue: '',
+      selectedIndex: -1,
       options: props.options,
-      seperatedOptions: props.seperatedOptions
+      isFetchingOptions: false
     };
-    _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;
+    this._isMounted = false;
+    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);
+    this.handleGetNextOptions = this.handleGetNextOptions.bind(this);
+    this.handleFetchOptions = this.handleFetchOptions.bind(this);
   }
-
-  _createClass(ToggleDropDown, [{
-    key: 'inputRef',
-    value: function inputRef(el) {
-      this.hiddenInput = el;
-    }
-  }, {
-    key: 'itemRef',
-    value: function itemRef(ele, index, id) {
-      this['suggestion_' + id] = ele;
+  componentDidMount() {
+    this._isMounted = true;
+  }
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+  emptySearchSVG() {
+    return /*#__PURE__*/React.createElement(EmptySearch, {
+      size: "small"
+    });
+  }
+  inputRef(el) {
+    this.hiddenInput = el;
+  }
+  itemRef(ele, index, id) {
+    this[`suggestion_${id}`] = ele;
+  }
+  searchInputRef(el) {
+    this.searchInput = el;
+  }
+  handleTogglePopup(e) {
+    const {
+      togglePopup,
+      boxPosition,
+      onSelectLabel,
+      isPopupOpen,
+      removeClose
+    } = this.props;
+    removeClose && removeClose(e);
+    !isPopupOpen && onSelectLabel && onSelectLabel(e);
+    togglePopup(e, boxPosition);
+  }
+  showTogglePopup(e) {
+    const {
+      togglePopup,
+      boxPosition,
+      onSelectLabel,
+      isPopupOpen
+    } = this.props;
+    !isPopupOpen && onSelectLabel && onSelectLabel(e);
+    !isPopupOpen && togglePopup(e, boxPosition);
+  }
+  hideTogglePopup(e) {
+    const {
+      togglePopup,
+      boxPosition,
+      onSelectLabel,
+      isPopupOpen
+    } = this.props;
+    !isPopupOpen && onSelectLabel && onSelectLabel(e);
+    isPopupOpen && togglePopup(e, boxPosition);
+  }
+  scrollContentRef(el) {
+    const {
+      isPopupOpen
+    } = this.props;
+    if (isPopupOpen) {
+      this.optionsContainer = el;
     }
-  }, {
-    key: 'searchInputRef',
-    value: function searchInputRef(el) {
-      this.searchInput = el;
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({
+      options: nextProps.options
+    });
+  }
+  onSelect(element, e) {
+    const {
+      onClick,
+      togglePopup,
+      preventPopupClose
+    } = this.props;
+    onClick && onClick(e, element);
+    !preventPopupClose && togglePopup(e);
+  }
+  componentDidUpdate(prevProps) {
+    const {
+      isPopupOpen,
+      isPopupReady,
+      isSearch,
+      idName,
+      options,
+      onDropDownOpen,
+      onDropDownClose
+    } = this.props;
+    const {
+      selectedIndex,
+      searchValue
+    } = this.state;
+    if (prevProps.isPopupReady !== isPopupReady) {
+      setTimeout(() => {
+        isPopupReady ? isSearch ? this.searchInput.focus({
+          preventScroll: true
+        }) : this.hiddenInput.focus({
+          preventScroll: true
+        }) : this.hiddenInput.focus({
+          preventScroll: true
+        });
+      }, 10);
     }
-  }, {
-    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);
+    if (prevProps.isPopupOpen !== isPopupOpen) {
+      if (isPopupOpen) {
+        onDropDownOpen && onDropDownOpen();
+      } else {
+        onDropDownClose && onDropDownClose();
+      }
+      this.getSelectedIndex(optionsArr);
     }
-  }, {
-    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);
+  }
+  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;
       }
-      var mergeOptions = seperatedOptions ? options.concat(seperatedOptions) : options;
-      var option = mergeOptions[selectedIndex];
-      var id = option && option[idName] || {};
-      var selSuggestion = this['suggestion_' + id];
-      if (isPopupOpen) {
-        this.optionsContainer && scrollTo(this.optionsContainer, selSuggestion);
+    }
+    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,
+      value,
+      keyName,
+      idName,
+      preventPopupClose,
+      isSearch
+    } = this.props;
+    if (isPopupReady && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
+      e.preventDefault(); //prevent body scroll
     }
-  }, {
-    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
-      }
+    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();
+              this.handleGetNextOptions();
             }
-            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);
-          break;
+          {
+            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) {
+  }
+  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) {
+    let ele = e.target;
+    let isScrollReachedBottom = findScrollEnd(ele);
+    isScrollReachedBottom && this.handleGetNextOptions();
+  }
+  handleGetNextOptions() {
+    let {
+      isNextOptions,
+      getNextOptions
+    } = this.props;
+    let {
+      searchValue
+    } = this.state;
+    isNextOptions && getNextOptions && this.handleFetchOptions(getNextOptions, searchValue);
+  }
+  handleFetchOptions(APICall) {
+    let searchValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    let {
+      isFetchingOptions = false
+    } = this.state;
+    let {
+      _isMounted
+    } = this;
+    if (!isFetchingOptions && APICall) {
       this.setState({
-        selectedIndex: index
+        isFetchingOptions: true
       });
-    }
-  }, {
-    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);
+      try {
+        return APICall(searchValue).then(() => {
+          _isMounted && this.setState({
+            isFetchingOptions: false
+          });
+        }, () => {
+          _isMounted && this.setState({
+            isFetchingOptions: false
+          });
+        });
+      } catch (e) {
+        _isMounted && this.setState({
+          isFetchingOptions: false
+        });
       }
     }
-  }, {
-    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
+  }
+  responsiveFunc(_ref3) {
+    let {
+      mediaQueryOR
+    } = _ref3;
+    return {
+      tabletMode: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+  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,
+      dataSelectorId,
+      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,
+      needMultiLineText,
+      customClass
+    } = this.props;
+    let {
+      ToggleDropDownProps = {},
+      DropBoxProps = {},
+      TextBoxIconProps = {},
+      ListItemWithIconProps = {},
+      ListItemProps = {}
+    } = customProps;
+    let {
+      customDropBox = '',
+      customListBox = ''
+    } = customClass;
+    const isPopupOpen = needExternalPopupState ? isPopupActive && isOpen : isOpen;
+    const Component = isToggleStateNeeded ? children.type : null,
+      componentProps = isToggleStateNeeded ? children.props : null;
+    const {
+      searchValue,
+      isFetchingOptions
+    } = 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,
+      "data-selector-id": dataSelectorId
+    }, 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(ResponsiveReceiver, {
+      query: this.responsiveFunc,
+      responsiveId: "Helmet"
+    }, _ref4 => {
+      let {
+        tabletMode
+      } = _ref4;
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, _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,
+          customDropBox: customDropBox
         },
-        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
-      );
-    }
-  }]);
-
-  return ToggleDropDown;
-}(React.Component);
-if (false) {
-  ToggleDropDown.docs = {
-    componentGroup: 'Molecule'
-  };
+        needResponsive: needResponsive,
+        isPadding: isPadding,
+        tabindex: "0",
+        a11y: {
+          role: !isSearch ? 'menu' : undefined,
+          ariaLabelledby: !isSearch ? ariaTitleId : undefined
+        },
+        palette: palette,
+        isResponsivePadding: true
+      }, DropBoxProps), /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
+        className: style.search
+      }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
+        placeHolder: placeHolderText,
+        onChange: this.handleChange,
+        value: searchValue,
+        onClear: this.onSearchClear,
+        size: searchBoxSize,
+        inputRef: this.searchInputRef,
+        onKeyDown: this.handleKeyDown,
+        a11y: {
+          role: 'combobox',
+          ariaOwns: ariaTitleId,
+          ariaActivedescendant: allyOptionsArr[selectedIndex] && allyOptionsArr[selectedIndex][keyName],
+          ariaAutocomplete: 'list',
+          ariaHaspopup: true,
+          ariaExpanded: true
+        }
+      }, TextBoxIconProps))) : null, title && options.length != 0 && /*#__PURE__*/React.createElement(Box, {
+        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,
+        flexible: true,
+        shrink: true,
+        scroll: "vertical",
+        preventParentScroll: "vertical",
+        dataId: `${dataId}_list`,
+        className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt} ${customListBox}`,
+        eleRef: this.scrollContentRef,
+        onScroll: this.handleScroll,
+        role: isSearch ? 'listbox' : undefined,
+        "aria-labelledby": isSearch ? ariaTitleId : undefined
+      }, isDataLoaded ? options && options.length != 0 ? isGroupDropDown ? /*#__PURE__*/React.createElement(React.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,
+            needMultiLineText: needMultiLineText,
+            a11y: {
+              role: isSearch ? 'option' : 'menuitem',
+              ariaSelected: selectedId === item[idName],
+              ariaLabel: item[keyName]
+            }
+          }, 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,
+            needMultiLineText: needMultiLineText,
+            a11y: {
+              role: isSearch ? 'option' : 'menuitem',
+              ariaSelected: selectedId === item[idName],
+              ariaLabel: item[keyName]
+            }
+          }, ListItemProps));
+        }));
+      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+        isCover: false,
+        align: "both"
+      }, /*#__PURE__*/React.createElement(Loader, null))) : /*#__PURE__*/React.createElement(React.Fragment, null, options.map((item, i) => {
+        const {
+          iconName,
+          iconSize,
+          iconClass,
+          title,
+          needDivider,
+          isDisabled = false,
+          disableTitle = ''
+        } = item;
+        if (!needDivider) {
+          listIndex += 1;
+        }
+        return /*#__PURE__*/React.createElement(Fragment, {
+          key: i
+        }, needDivider ? /*#__PURE__*/React.createElement("div", {
+          className: style.seperatedLine
+        }) : iconName ? /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({
+          dataId: item[keyName],
+          value: item[keyName],
+          id: item[idName],
+          active: selectedId === item[idName],
+          onClick: this.onSelect.bind(this, item),
+          index: listIndex,
+          disableTitle: disableTitle,
+          isDisabled: isDisabled,
+          highlight: selectedIndex === listIndex,
+          iconName: iconName,
+          iconClass: iconClass,
+          iconSize: iconSize,
+          needTick: needTick,
+          needBorder: false,
+          onMouseEnter: this.handleMouseEnter,
+          getRef: this.itemRef,
+          title: title ? title : item[keyName],
+          key: listIndex,
+          palette: palette,
+          needMultiLineText: needMultiLineText,
+          a11y: {
+            role: isSearch ? 'option' : 'menuitem',
+            ariaSelected: selectedId === item[idName],
+            ariaLabel: item[keyName]
+          }
+        }, 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,
+          needMultiLineText: needMultiLineText,
+          a11y: {
+            role: isSearch ? 'option' : 'menuitem',
+            ariaSelected: selectedId === item[idName],
+            ariaLabel: item[keyName]
+          }
+        }, ListItemProps)));
+      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+        isCover: false,
+        align: "both"
+      }, /*#__PURE__*/React.createElement(Loader, null))) : /*#__PURE__*/React.createElement(CommonEmptyState, {
+        className: style.svgWrapper,
+        description: searchEmptyHint,
+        title: searchErrorText || 'No results',
+        size: "small",
+        getEmptyState: this.emptySearchSVG
+      }) : /*#__PURE__*/React.createElement("div", {
+        className: style.loader
+      }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(Box, null, getFooter()) : null));
+    }) : null);
+  }
 }
+ToggleDropDown.defaultProps = defaultProps;
+ToggleDropDown.propTypes = propTypes;
 
-ToggleDropDown.defaultProps = {
-  keyName: 'value',
-  idName: 'id',
-  isArrow: true,
-  searchBoxSize: 'small',
-  isDisabled: false,
-  showIconOnHover: false,
-  isReadOnly: false,
-  isEditable: true,
-  isDataLoaded: true,
-  needTick: true,
-  targetAlign: 'vertical',
-  needResponsive: true
-};
-
-ToggleDropDown.propTypes = (_ToggleDropDown$propT = {
-  activeStyle: PropTypes.string,
-  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']),
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  getContainerRef: PropTypes.func,
-  getTargetRef: PropTypes.func,
-  hoverStyle: PropTypes.string,
-  iconName: PropTypes.string,
-  iconSize: PropTypes.string,
-  idName: PropTypes.string,
-  isArrow: PropTypes.bool,
-  isDataLoaded: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isEditable: PropTypes.bool,
-  isPopupOpen: PropTypes.bool,
-  isPopupReady: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  isSearch: PropTypes.bool,
-  keyName: PropTypes.string,
-  left: PropTypes.number,
-  needTick: PropTypes.bool,
-  onClick: PropTypes.func,
-  options: PropTypes.array.isRequired,
-  placeHolderText: PropTypes.string,
-  position: PropTypes.string,
-  removeClose: PropTypes.func,
-  right: PropTypes.number,
-  searchBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
-  searchEmptyHint: PropTypes.string,
-  searchErrorText: PropTypes.string,
-  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);
-
+// if (__DOCS__) {
+//   ToggleDropDown.docs = {
+//     componentGroup: 'Molecule'
+//   };
+// }
 export default Popup(ToggleDropDown);