@zohodesk/dot 1.0.0-temp-155 → 1.0.0-temp-157

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -26,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);
@@ -40,16 +40,16 @@ 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);
   }
@@ -66,11 +66,10 @@ export class ToggleDropDown extends Component {
     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;
@@ -156,26 +155,21 @@ export class ToggleDropDown extends Component {
       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);
-    }
+    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);
+    // }
 
-    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();
@@ -207,9 +201,8 @@ export class ToggleDropDown extends Component {
         onDropDownOpen && onDropDownOpen();
       } else {
         onDropDownClose && onDropDownClose();
-      }
+      } // this.getSelectedIndex(optionsArr);
 
-      this.getSelectedIndex(optionsArr);
     }
   }
 
@@ -283,139 +276,92 @@ export class ToggleDropDown extends Component {
     }
 
     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;
+  } // 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 && (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
-      });
-    }
-  }
 
   onSearchAPI() {
     const {
@@ -435,7 +381,7 @@ export class ToggleDropDown extends Component {
     const filteredOptions = this.handleFilterSuggestions(value);
     this.setState({
       searchValue: value,
-      selectedIndex: -1,
+      // selectedIndex: -1,
       options: filteredOptions
     }, () => {
       this.onSearchAPI();
@@ -450,13 +396,12 @@ 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;
@@ -599,8 +544,8 @@ export class ToggleDropDown extends Component {
     } = 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,
@@ -613,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,
@@ -685,21 +622,37 @@ export class ToggleDropDown extends Component {
           ariaLabelledby: !isSearch ? ariaTitleId : undefined
         },
         palette: palette,
-        isResponsivePadding: true
-      }, DropBoxProps), /*#__PURE__*/React.createElement(React.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
@@ -724,8 +677,9 @@ export class ToggleDropDown extends Component {
         className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt} ${customListBox}`,
         eleRef: this.scrollContentRef,
         onScroll: this.handleScroll,
-        role: isSearch ? 'listbox' : undefined,
-        "aria-labelledby": isSearch ? ariaTitleId : undefined
+        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];
@@ -761,20 +715,21 @@ 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],
@@ -789,15 +744,16 @@ 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],
@@ -835,19 +791,20 @@ 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],
@@ -862,15 +819,16 @@ 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],