@zohodesk/dot 1.0.0-test.239 → 1.1.0

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -1,8 +1,9 @@
 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/lib/Icon';
+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';
@@ -25,13 +26,13 @@ export class ToggleDropDown extends Component {
     super(props);
     this.state = {
       searchValue: '',
-      selectedIndex: -1,
+      // selectedIndex: -1,
       options: props.options,
       isFetchingOptions: false
     };
     this._isMounted = false;
-    this.handleChange = this.handleChange.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
+    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);
@@ -39,39 +40,45 @@ export class ToggleDropDown extends Component {
     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.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.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.getAriaId = getUniqueId(this); // this.getSelectedIndex = this.getSelectedIndex.bind(this);
+
     this.handleGetNextOptions = this.handleGetNextOptions.bind(this);
     this.handleFetchOptions = this.handleFetchOptions.bind(this);
   }
+
   componentDidMount() {
     this._isMounted = true;
   }
+
   componentWillUnmount() {
     this._isMounted = false;
   }
+
   emptySearchSVG() {
     return /*#__PURE__*/React.createElement(EmptySearch, {
       size: "small"
     });
-  }
-  inputRef(el) {
-    this.hiddenInput = el;
-  }
+  } // inputRef(el) {
+  //   this.hiddenInput = el;
+  // }
+
+
   itemRef(ele, index, id) {
     this[`suggestion_${id}`] = ele;
   }
+
   searchInputRef(el) {
     this.searchInput = el;
   }
+
   handleTogglePopup(e) {
     const {
       togglePopup,
@@ -84,6 +91,7 @@ export class ToggleDropDown extends Component {
     !isPopupOpen && onSelectLabel && onSelectLabel(e);
     togglePopup(e, boxPosition);
   }
+
   showTogglePopup(e) {
     const {
       togglePopup,
@@ -94,6 +102,7 @@ export class ToggleDropDown extends Component {
     !isPopupOpen && onSelectLabel && onSelectLabel(e);
     !isPopupOpen && togglePopup(e, boxPosition);
   }
+
   hideTogglePopup(e) {
     const {
       togglePopup,
@@ -104,19 +113,23 @@ export class ToggleDropDown extends Component {
     !isPopupOpen && onSelectLabel && onSelectLabel(e);
     isPopupOpen && togglePopup(e, boxPosition);
   }
+
   scrollContentRef(el) {
     const {
       isPopupOpen
     } = this.props;
+
     if (isPopupOpen) {
       this.optionsContainer = el;
     }
   }
+
   UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({
       options: nextProps.options
     });
   }
+
   onSelect(element, e) {
     const {
       onClick,
@@ -126,6 +139,7 @@ export class ToggleDropDown extends Component {
     onClick && onClick(e, element);
     !preventPopupClose && togglePopup(e);
   }
+
   componentDidUpdate(prevProps) {
     const {
       isPopupOpen,
@@ -140,27 +154,27 @@ export class ToggleDropDown extends Component {
       selectedIndex,
       searchValue
     } = this.state;
-    if (prevProps.isPopupReady !== isPopupReady) {
-      setTimeout(() => {
-        isPopupReady ? isSearch ? this.searchInput.focus({
-          preventScroll: true
-        }) : this.hiddenInput.focus({
-          preventScroll: true
-        }) : this.hiddenInput.focus({
-          preventScroll: true
-        });
-      }, 10);
-    }
-    const optionsArr = this.getOptionsArray();
-    const option = optionsArr[selectedIndex];
-    const id = option && option[idName] || {};
-    const selSuggestion = this[`suggestion_${id}`];
-    if (isPopupOpen) {
-      this.optionsContainer && scrollTo(this.optionsContainer, selSuggestion);
-    }
+
+    if (prevProps.isPopupReady !== isPopupReady) {// setTimeout(() => {
+      //   isPopupReady
+      //     ? isSearch
+      //       ? this.searchInput.focus({ preventScroll: true })
+      //       : this.hiddenInput.focus({ preventScroll: true })
+      //     : this.hiddenInput.focus({ preventScroll: true });
+      // }, 10);
+    } // const optionsArr = this.getOptionsArray();
+    // const option = optionsArr[selectedIndex];
+    // const id = (option && option[idName]) || {};
+    // const selSuggestion = this[`suggestion_${id}`];
+    // if (isPopupOpen) {
+    //   this.optionsContainer && scrollTo(this.optionsContainer, selSuggestion);
+    // }
+
+
     if (!prevProps.isPopupOpen && isPopupOpen && searchValue.length) {
       this.onSearchClear();
     }
+
     if (this.props.from == 'activityFilter') {
       //Temproary
       const results = this.props.options.filter(_ref => {
@@ -174,21 +188,24 @@ export class ToggleDropDown extends Component {
           return id2 === id1;
         });
       });
+
       if (results.length > 0) {
         this.setState({
           options: options
         });
       }
     }
+
     if (prevProps.isPopupOpen !== isPopupOpen) {
       if (isPopupOpen) {
         onDropDownOpen && onDropDownOpen();
       } else {
         onDropDownClose && onDropDownClose();
-      }
-      this.getSelectedIndex(optionsArr);
+      } // this.getSelectedIndex(optionsArr);
+
     }
   }
+
   handleFilterSuggestions(searchValue) {
     const {
       options,
@@ -199,6 +216,7 @@ export class ToggleDropDown extends Component {
     } = this.props;
     searchValue = searchValue.trim().toLowerCase();
     let result = [];
+
     if (isGroupDropDown) {
       const filteredGroups = [];
       options.map(group => {
@@ -211,6 +229,7 @@ export class ToggleDropDown extends Component {
           const value = list[keyName];
           return value.toLowerCase().includes(searchValue);
         });
+
         if (datas.length) {
           filteredGroups.push({
             [groupNameKey]: name,
@@ -225,8 +244,10 @@ export class ToggleDropDown extends Component {
         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;
@@ -238,8 +259,8 @@ export class ToggleDropDown extends Component {
             needDividerCount = 0;
             return true;
           }
-        });
-        // remove divider if it placed in first or last index
+        }); // remove divider if it placed in first or last index
+
         filteredOptions = [];
         filteredOptions = orderedOptions.filter((item, i) => {
           if (i == 0 || i == orderedOptions.length - 1) {
@@ -253,123 +274,95 @@ export class ToggleDropDown extends Component {
         result = filteredOptions;
       }
     }
+
     return result;
-  }
-  getOptionsArray() {
-    const {
-      searchValue
-    } = this.state;
-    const {
-      isGroupDropDown,
-      groupOptionsKey
-    } = this.props;
-    const options = searchValue.length ? this.handleFilterSuggestions(searchValue) : this.props.options;
-    let optionsArr = [];
-    if (isGroupDropDown) {
-      for (let i = 0; i < options.length; i++) {
-        const groupOptions = options[i][groupOptionsKey];
-        Array.prototype.push.apply(optionsArr, groupOptions);
-      }
-    } else {
-      optionsArr = options.filter(item => !item.needDivider);
-    }
-    return optionsArr;
-  }
-  handleKeyDown(e) {
-    const {
-      keyCode
-    } = e;
-    const {
-      selectedIndex,
-      searchValue
-    } = this.state;
-    const optionsArr = this.getOptionsArray();
-    const totalIndex = optionsArr.length;
-    const {
-      togglePopup,
-      onClick,
-      boxPosition,
-      isPopupReady,
-      value,
-      keyName,
-      idName,
-      preventPopupClose,
-      isSearch
-    } = this.props;
-    if (isPopupReady && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
-      e.preventDefault(); //prevent body scroll
-    }
+  } // 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
+  //   }
+  //   if (isPopupReady) {
+  //     switch (keyCode) {
+  //       case 40:
+  //         if (selectedIndex === totalIndex - 1) {
+  //           this.setState({ selectedIndex: 0 });
+  //         } else {
+  //           if (selectedIndex === totalIndex - 3) {
+  //             this.handleGetNextOptions();
+  //           }
+  //           this.setState({
+  //             selectedIndex: selectedIndex + 1
+  //           });
+  //         }
+  //         break;
+  //       case 38:
+  //         if (selectedIndex === 0) {
+  //           this.setState({ selectedIndex: totalIndex - 1 });
+  //         } else {
+  //           this.setState({
+  //             selectedIndex: selectedIndex - 1
+  //           });
+  //         }
+  //         break;
+  //       case 13: {
+  //         const selectedId = optionsArr[selectedIndex][idName] || '';
+  //         onClick && onClick(selectedId, optionsArr[selectedIndex]);
+  //         if (!preventPopupClose) {
+  //           togglePopup(e, boxPosition);
+  //         } else if (isSearch) {
+  //           this.searchInput.focus({ preventScroll: true });
+  //         } else {
+  //           this.hiddenInput.focus({ preventScroll: true });
+  //         }
+  //         break;
+  //       }
+  //     }
+  //   } else {
+  //     if (keyCode === 13 || keyCode === 40) {
+  //       togglePopup(e, boxPosition);
+  //     }
+  //   }
+  // }
+  // getSelectedIndex(optionsArr) {
+  //   const { selectedId, idName } = this.props;
+  //   if (selectedId) {
+  //     for (let i = 0; i < optionsArr.length; i++) {
+  //       const indexId = optionsArr[i][idName];
+  //       if (selectedId === indexId) {
+  //         this.setState({
+  //           selectedIndex: i
+  //         });
+  //         break;
+  //       }
+  //     }
+  //   } else {
+  //     this.setState({
+  //       selectedIndex: -1
+  //     });
+  //   }
+  // }
+
 
-    if (isPopupReady) {
-      switch (keyCode) {
-        case 40:
-          if (selectedIndex === totalIndex - 1) {
-            this.setState({
-              selectedIndex: 0
-            });
-          } else {
-            if (selectedIndex === totalIndex - 3) {
-              this.handleGetNextOptions();
-            }
-            this.setState({
-              selectedIndex: selectedIndex + 1
-            });
-          }
-          break;
-        case 38:
-          if (selectedIndex === 0) {
-            this.setState({
-              selectedIndex: totalIndex - 1
-            });
-          } else {
-            this.setState({
-              selectedIndex: selectedIndex - 1
-            });
-          }
-          break;
-        case 13:
-          const selectedId = optionsArr[selectedIndex][idName] || '';
-          onClick && onClick(selectedId, optionsArr[selectedIndex]);
-          if (!preventPopupClose) {
-            togglePopup(e, boxPosition);
-          } else if (isSearch) {
-            this.searchInput.focus({
-              preventScroll: true
-            });
-          } else {
-            this.hiddenInput.focus({
-              preventScroll: true
-            });
-          }
-          break;
-      }
-    } else {
-      if (keyCode === 13 || keyCode === 40) {
-        togglePopup(e, boxPosition);
-      }
-    }
-  }
-  getSelectedIndex(optionsArr) {
-    const {
-      selectedId,
-      idName
-    } = this.props;
-    if (selectedId) {
-      for (let i = 0; i < optionsArr.length; i++) {
-        const indexId = optionsArr[i][idName];
-        if (selectedId === indexId) {
-          this.setState({
-            selectedIndex: i
-          });
-          break;
-        }
-      }
-    } else {
-      this.setState({
-        selectedIndex: -1
-      });
-    }
-  }
   onSearchAPI() {
     const {
       searchValue
@@ -378,20 +371,23 @@ export class ToggleDropDown extends Component {
       needSearchFetching,
       onSearch
     } = this.props;
+
     if (needSearchFetching && onSearch) {
       onSearch(searchValue);
     }
   }
+
   handleChange(value, e) {
     const filteredOptions = this.handleFilterSuggestions(value);
     this.setState({
       searchValue: value,
-      selectedIndex: -1,
+      // selectedIndex: -1,
       options: filteredOptions
     }, () => {
       this.onSearchAPI();
     });
   }
+
   onSearchClear() {
     const filteredOptions = this.handleFilterSuggestions('');
     this.setState({
@@ -400,17 +396,19 @@ export class ToggleDropDown extends Component {
     }, () => {
       this.onSearchAPI();
     });
-  }
-  handleMouseEnter(id, value, index, e) {
-    this.setState({
-      selectedIndex: index
-    });
-  }
+  } // 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,
@@ -421,6 +419,7 @@ export class ToggleDropDown extends Component {
     } = this.state;
     isNextOptions && getNextOptions && this.handleFetchOptions(getNextOptions, searchValue);
   }
+
   handleFetchOptions(APICall) {
     let searchValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     let {
@@ -429,10 +428,12 @@ export class ToggleDropDown extends Component {
     let {
       _isMounted
     } = this;
+
     if (!isFetchingOptions && APICall) {
       this.setState({
         isFetchingOptions: true
       });
+
       try {
         return APICall(searchValue).then(() => {
           _isMounted && this.setState({
@@ -450,6 +451,7 @@ export class ToggleDropDown extends Component {
       }
     }
   }
+
   responsiveFunc(_ref3) {
     let {
       mediaQueryOR
@@ -460,6 +462,7 @@ export class ToggleDropDown extends Component {
       }])
     };
   }
+
   render() {
     const {
       options,
@@ -488,6 +491,7 @@ export class ToggleDropDown extends Component {
       getTargetRef,
       getContainerRef,
       dataId,
+      dataSelectorId,
       searchBoxSize,
       searchEmptyHint,
       searchErrorText,
@@ -516,7 +520,9 @@ export class ToggleDropDown extends Component {
       hoverType,
       palette,
       getFooter,
-      customProps
+      customProps,
+      needMultiLineText,
+      customClass
     } = this.props;
     let {
       ToggleDropDownProps = {},
@@ -525,21 +531,26 @@ export class ToggleDropDown extends Component {
       ListItemWithIconProps = {},
       ListItemProps = {}
     } = customProps;
+    let {
+      customDropBox = '',
+      customListBox = ''
+    } = customClass;
     const isPopupOpen = needExternalPopupState ? isPopupActive && isOpen : isOpen;
     const Component = isToggleStateNeeded ? children.type : null,
-      componentProps = isToggleStateNeeded ? children.props : 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();
+    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
+      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,
@@ -547,15 +558,7 @@ export class ToggleDropDown extends Component {
       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, {
+    }, children ? isToggleStateNeeded ? /*#__PURE__*/React.createElement(Component, _extends({}, componentProps, {
       isActive: isPopupOpen
     })) : children : /*#__PURE__*/React.createElement(RippleEffect, {
       hoverType: hoverType,
@@ -608,7 +611,8 @@ export class ToggleDropDown extends Component {
         isAnimate: true,
         getRef: getContainerRef,
         customClass: {
-          customDropBoxWrap: style.dropBoxContainer
+          customDropBoxWrap: style.dropBoxContainer,
+          customDropBox: customDropBox
         },
         needResponsive: needResponsive,
         isPadding: isPadding,
@@ -618,21 +622,37 @@ export class ToggleDropDown extends Component {
           ariaLabelledby: !isSearch ? ariaTitleId : undefined
         },
         palette: palette,
-        isResponsivePadding: true
-      }, DropBoxProps), /*#__PURE__*/React.createElement(Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
+        isResponsivePadding: true,
+        needFocusScope: true,
+        customProps: {
+          focusScopeProps: {
+            loadNextOptions: this.handleGetNextOptions,
+            searchValue: searchValue,
+            isFetchingOptions: isFetchingOptions
+          }
+        }
+      }, DropBoxProps, {
+        onClose: this.handleTogglePopup
+      }), /*#__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,
+        size: searchBoxSize // inputRef={this.searchInputRef}
+        ,
+        customProps: {
+          TextBoxProps: {
+            'data-a11y-autofocus': true
+          }
+        } //search
+        // onKeyDown={this.handleKeyDown}
+        ,
         a11y: {
           role: 'combobox',
           ariaOwns: ariaTitleId,
-          ariaActivedescendant: allyOptionsArr[selectedIndex] && allyOptionsArr[selectedIndex][keyName],
+          // ariaActivedescendant: allyOptionsArr[selectedIndex] && allyOptionsArr[selectedIndex][keyName],
           ariaAutocomplete: 'list',
           ariaHaspopup: true,
           ariaExpanded: true
@@ -654,12 +674,13 @@ export class ToggleDropDown extends Component {
         scroll: "vertical",
         preventParentScroll: "vertical",
         dataId: `${dataId}_list`,
-        className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt}`,
+        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(Fragment, null, options.map(group => {
+        role: isSearch ? 'listbox' : 'menu',
+        "aria-labelledby": isSearch ? ariaTitleId : undefined,
+        "data-scroll": "true"
+      }, isDataLoaded ? options && options.length != 0 ? isGroupDropDown ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map(group => {
         const groupName = group[groupNameKey];
         const groupOptions = group[groupOptionsKey];
         const {
@@ -694,22 +715,25 @@ export class ToggleDropDown extends Component {
             id: item[idName],
             active: selectedId === item[idName],
             onClick: this.onSelect.bind(this, item),
-            index: listIndex,
-            highlight: selectedIndex === listIndex,
+            index: listIndex // highlight={selectedIndex === listIndex}
+            ,
             disableTitle: disableTitle,
             isDisabled: isDisabled,
             iconName: iconName,
             iconClass: iconClass,
             iconSize: iconSize,
             needTick: needTick,
-            needBorder: false,
-            onMouseEnter: this.handleMouseEnter,
+            needBorder: false // onMouseEnter={this.handleMouseEnter}
+            ,
             getRef: this.itemRef,
             title: title ? title : item[keyName],
             palette: palette,
+            needMultiLineText: needMultiLineText,
+            autoHover: true,
             a11y: {
               role: isSearch ? 'option' : 'menuitem',
-              ariaSelected: selectedId === item[idName]
+              ariaSelected: selectedId === item[idName],
+              ariaLabel: item[keyName]
             }
           }, ListItemWithIconProps)) : /*#__PURE__*/React.createElement(ListItem, _extends({
             key: listIndex,
@@ -720,24 +744,27 @@ export class ToggleDropDown extends Component {
             onClick: this.onSelect.bind(this, item),
             isDisabled: isDisabled,
             disableTitle: disableTitle,
-            index: listIndex,
-            highlight: selectedIndex === listIndex,
+            index: listIndex // highlight={selectedIndex === listIndex}
+            ,
             needTick: needTick,
-            needBorder: false,
-            onMouseEnter: this.handleMouseEnter,
+            needBorder: false // onMouseEnter={this.handleMouseEnter}
+            ,
             getRef: this.itemRef,
             title: title ? title : item[keyName],
             palette: palette,
+            needMultiLineText: needMultiLineText,
+            autoHover: true,
             a11y: {
               role: isSearch ? 'option' : 'menuitem',
-              ariaSelected: selectedId === item[idName]
+              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(Fragment, null, options.map((item, i) => {
+      }, /*#__PURE__*/React.createElement(Loader, null))) : /*#__PURE__*/React.createElement(React.Fragment, null, options.map((item, i) => {
         const {
           iconName,
           iconSize,
@@ -747,9 +774,11 @@ export class ToggleDropDown extends Component {
           isDisabled = false,
           disableTitle = ''
         } = item;
+
         if (!needDivider) {
           listIndex += 1;
         }
+
         return /*#__PURE__*/React.createElement(Fragment, {
           key: i
         }, needDivider ? /*#__PURE__*/React.createElement("div", {
@@ -762,21 +791,24 @@ export class ToggleDropDown extends Component {
           onClick: this.onSelect.bind(this, item),
           index: listIndex,
           disableTitle: disableTitle,
-          isDisabled: isDisabled,
-          highlight: selectedIndex === listIndex,
+          isDisabled: isDisabled // highlight={selectedIndex === listIndex}
+          ,
           iconName: iconName,
           iconClass: iconClass,
           iconSize: iconSize,
           needTick: needTick,
-          needBorder: false,
-          onMouseEnter: this.handleMouseEnter,
+          needBorder: false // onMouseEnter={this.handleMouseEnter}
+          ,
           getRef: this.itemRef,
           title: title ? title : item[keyName],
           key: listIndex,
           palette: palette,
+          needMultiLineText: needMultiLineText,
+          autoHover: true,
           a11y: {
             role: isSearch ? 'option' : 'menuitem',
-            ariaSelected: selectedId === item[idName]
+            ariaSelected: selectedId === item[idName],
+            ariaLabel: item[keyName]
           }
         }, ListItemWithIconProps)) : /*#__PURE__*/React.createElement(ListItem, _extends({
           key: listIndex,
@@ -787,17 +819,20 @@ export class ToggleDropDown extends Component {
           isDisabled: isDisabled,
           active: selectedId === item[idName],
           onClick: this.onSelect.bind(this, item),
-          index: listIndex,
-          highlight: selectedIndex === listIndex,
+          index: listIndex // highlight={selectedIndex === listIndex}
+          ,
           needTick: needTick,
-          needBorder: false,
-          onMouseEnter: this.handleMouseEnter,
+          needBorder: false // onMouseEnter={this.handleMouseEnter}
+          ,
           getRef: this.itemRef,
           title: title ? title : item[keyName],
           palette: palette,
+          needMultiLineText: needMultiLineText,
+          autoHover: true,
           a11y: {
             role: isSearch ? 'option' : 'menuitem',
-            ariaSelected: selectedId === item[idName]
+            ariaSelected: selectedId === item[idName],
+            ariaLabel: item[keyName]
           }
         }, ListItemProps)));
       }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
@@ -814,12 +849,13 @@ export class ToggleDropDown extends Component {
       }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(Box, null, getFooter()) : null));
     }) : null);
   }
+
 }
 ToggleDropDown.defaultProps = defaultProps;
-ToggleDropDown.propTypes = propTypes;
-if (false) {
-  ToggleDropDown.docs = {
-    componentGroup: 'Molecule'
-  };
-}
+ToggleDropDown.propTypes = propTypes; // if (__DOCS__) {
+//   ToggleDropDown.docs = {
+//     componentGroup: 'Molecule'
+//   };
+// }
+
 export default Popup(ToggleDropDown);