@khanacademy/wonder-blocks-dropdown 2.7.4 → 2.8.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 2.8.0
+
+### Minor Changes
+
+-   ee6fc773: Added keyboard support to search items when the dropdown is focused, included "Enter" as a key to trigger actions with the "option" role
+
+### Patch Changes
+
+-   Updated dependencies [ee6fc773]
+    -   @khanacademy/wonder-blocks-clickable@2.3.0
+    -   @khanacademy/wonder-blocks-button@3.0.1
+    -   @khanacademy/wonder-blocks-icon-button@3.4.9
+    -   @khanacademy/wonder-blocks-modal@2.3.4
+    -   @khanacademy/wonder-blocks-search-field@1.0.7
+
+## 2.7.6
+
+### Patch Changes
+
+-   3007ecd7: Move the search field out of the listbox container
+
+## 2.7.5
+
+### Patch Changes
+
+-   Updated dependencies [85c31780]
+    -   @khanacademy/wonder-blocks-button@3.0.0
+
 ## 2.7.4
 
 ### Patch Changes

package/dist/es/index.js

@@ -12,8 +12,8 @@ import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutP
 import Icon, { icons } from '@khanacademy/wonder-blocks-icon';
 import ReactDOM from 'react-dom';
 import { VariableSizeList } from 'react-window';
-import { withActionScheduler } from '@khanacademy/wonder-blocks-timing';
 import SearchField from '@khanacademy/wonder-blocks-search-field';
+import { withActionScheduler } from '@khanacademy/wonder-blocks-timing';
 import { Popper } from 'react-popper';
 import { maybeGetPortalMountedModalHostElement } from '@khanacademy/wonder-blocks-modal';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
@@ -33,15 +33,9 @@ const selectDropdownStyle = {
 const filterableDropdownStyle = {
   minHeight: 100
 };
-const searchInputStyle = {
-  margin: Spacing.xSmall_8,
-  marginTop: Spacing.xxxSmall_4,
-  minHeight: "auto"
-};
 const DROPDOWN_ITEM_HEIGHT = 40;
 const MAX_VISIBLE_ITEMS = 9;
 const SEPARATOR_ITEM_HEIGHT = 9;
-const SEARCH_ITEM_HEIGHT = DROPDOWN_ITEM_HEIGHT + searchInputStyle.margin + searchInputStyle.marginTop;
 const defaultLabels = {
   clearSearch: "Clear search",
   filter: "Filter",
@@ -487,56 +481,10 @@ class DropdownVirtualizedItem extends React.Component {
 
 }
 
-class SearchTextInput extends React.Component {
-  static isClassOf(instance) {
-    return instance && instance.type && instance.type.__IS_SEARCH_TEXT_INPUT__;
-  }
-
-  componentDidMount() {
-    if (this.props.autofocus) {
-      var _this$props$itemRef;
-
-      (_this$props$itemRef = this.props.itemRef) == null ? void 0 : _this$props$itemRef.current.focus();
-    }
-  }
-
-  render() {
-    const {
-      labels,
-      onChange,
-      onClick,
-      itemRef,
-      searchText,
-      style,
-      testId
-    } = this.props;
-    return React.createElement(SearchField, {
-      clearAriaLabel: labels.clearSearch,
-      onChange: onChange,
-      onClick: onClick,
-      placeholder: labels.filter,
-      ref: itemRef,
-      style: style,
-      testId: testId,
-      value: searchText
-    });
-  }
-
-}
-SearchTextInput.defaultProps = {
-  labels: {
-    clearSearch: defaultLabels.clearSearch,
-    filter: defaultLabels.filter
-  }
-};
-SearchTextInput.__IS_SEARCH_TEXT_INPUT__ = true;
-
 function getDropdownMenuHeight(items, initialHeight = 0) {
   return items.slice(0, MAX_VISIBLE_ITEMS).reduce((sum, item) => {
     if (SeparatorItem.isClassOf(item.component)) {
       return sum + SEPARATOR_ITEM_HEIGHT;
-    } else if (SearchTextInput.isClassOf(item.component)) {
-      return sum + SEARCH_ITEM_HEIGHT;
     } else {
       return sum + DROPDOWN_ITEM_HEIGHT;
     }
@@ -561,8 +509,6 @@ class DropdownCoreVirtualized extends React.Component {
 
       if (SeparatorItem.isClassOf(item.component)) {
         return SEPARATOR_ITEM_HEIGHT;
-      } else if (SearchTextInput.isClassOf(item.component)) {
-        return SEARCH_ITEM_HEIGHT;
       } else {
         return DROPDOWN_ITEM_HEIGHT;
       }
@@ -718,6 +664,26 @@ function DropdownPopper({
   }), modalHost);
 }
 
+function getStringForKey(key) {
+  if (key.length === 1 || !/^[A-Z]/i.test(key)) {
+    return key;
+  }
+
+  return "";
+}
+function debounce(callback, wait) {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      callback.apply(void 0, args);
+    };
+
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}
+
 const VIRTUALIZE_THRESHOLD = 125;
 const StyledSpan = addStyle("span");
 
@@ -765,6 +731,7 @@ class DropdownCore extends React.Component {
 
   constructor(props) {
     super(props);
+    this.searchFieldRef = React.createRef();
 
     this.handleInteract = event => {
       const {
@@ -787,6 +754,12 @@ class DropdownCore extends React.Component {
       } = this.props;
       const keyCode = event.which || event.keyCode;
 
+      if (getStringForKey(event.key)) {
+        event.stopPropagation();
+        this.textSuggestion += event.key;
+        this.handleKeyDownDebounced(this.textSuggestion);
+      }
+
       if (!open) {
         if (keyCode === keyCodes.down) {
           event.preventDefault();
@@ -799,7 +772,7 @@ class DropdownCore extends React.Component {
 
       switch (keyCode) {
         case keyCodes.tab:
-          if (this.hasSearchBox() && this.focusedIndex === 0 && searchText) {
+          if (this.isSearchFieldFocused() && searchText) {
             return;
           }
 
@@ -808,7 +781,7 @@ class DropdownCore extends React.Component {
           return;
 
         case keyCodes.space:
-          if (this.hasSearchBox() && this.focusedIndex === 0) {
+          if (this.isSearchFieldFocused()) {
             return;
           }
 
@@ -836,7 +809,7 @@ class DropdownCore extends React.Component {
 
       switch (keyCode) {
         case keyCodes.space:
-          if (this.hasSearchBox() && this.focusedIndex === 0) {
+          if (this.isSearchFieldFocused()) {
             return;
           }
 
@@ -854,6 +827,39 @@ class DropdownCore extends React.Component {
       }
     };
 
+    this.handleKeyDownDebounceResult = key => {
+      const foundIndex = this.props.items.filter(item => item.focusable).findIndex(({
+        component
+      }) => {
+        var _component$props;
+
+        if (SeparatorItem.isClassOf(component)) {
+          return false;
+        }
+
+        const label = (_component$props = component.props) == null ? void 0 : _component$props.label.toLowerCase();
+        return label.startsWith(key.toLowerCase());
+      });
+
+      if (foundIndex >= 0) {
+        const isClosed = !this.props.open;
+
+        if (isClosed) {
+          this.props.onOpenChanged(true);
+        }
+
+        this.focusedIndex = foundIndex;
+        this.scheduleToFocusCurrentItem(node => {
+          if (this.props.selectionType === "single" && isClosed && node) {
+            node.click();
+            this.props.onOpenChanged(false);
+          }
+        });
+      }
+
+      this.textSuggestion = "";
+    };
+
     this.handleClickFocus = index => {
       this.itemsClicked = true;
       this.focusedIndex = index;
@@ -880,6 +886,16 @@ class DropdownCore extends React.Component {
       }
     };
 
+    this.handleSearchTextChanged = searchText => {
+      const {
+        onSearchTextChanged
+      } = this.props;
+
+      if (onSearchTextChanged) {
+        onSearchTextChanged(searchText);
+      }
+    };
+
     this.resetFocusedIndex();
     this.state = {
       prevItems: this.props.items,
@@ -890,6 +906,8 @@ class DropdownCore extends React.Component {
       }, props.labels)
     };
     this.virtualizedListRef = React.createRef();
+    this.handleKeyDownDebounced = debounce(this.handleKeyDownDebounceResult, 500);
+    this.textSuggestion = "";
   }
 
   componentDidMount() {
@@ -937,22 +955,18 @@ class DropdownCore extends React.Component {
     this.removeEventListeners();
   }
 
-  hasSearchBox() {
-    return !!this.props.onSearchTextChanged && typeof this.props.searchText === "string";
-  }
-
   resetFocusedIndex() {
     const {
       initialFocusedIndex
     } = this.props;
 
-    if (initialFocusedIndex) {
-      if (this.hasSearchBox()) {
-        this.focusedIndex = initialFocusedIndex + 1;
-      } else {
-        this.focusedIndex = initialFocusedIndex;
-      }
+    if (typeof initialFocusedIndex !== "undefined") {
+      this.focusedIndex = initialFocusedIndex;
     } else {
+      if (this.hasSearchField() && !this.isSearchFieldFocused()) {
+        return this.focusSearchField();
+      }
+
       this.focusedIndex = 0;
     }
   }
@@ -988,33 +1002,57 @@ class DropdownCore extends React.Component {
     document.removeEventListener("touchend", this.handleInteract);
   }
 
-  scheduleToFocusCurrentItem() {
+  scheduleToFocusCurrentItem(onFocus) {
     if (this.shouldVirtualizeList()) {
-      this.props.schedule.animationFrame(() => this.focusCurrentItem());
+      this.props.schedule.animationFrame(() => {
+        this.focusCurrentItem(onFocus);
+      });
     } else {
-      this.focusCurrentItem();
+      this.focusCurrentItem(onFocus);
     }
   }
 
-  focusCurrentItem() {
-    const fousedItemRef = this.state.itemRefs[this.focusedIndex];
+  focusCurrentItem(onFocus) {
+    const focusedItemRef = this.state.itemRefs[this.focusedIndex];
 
-    if (fousedItemRef) {
+    if (focusedItemRef) {
       if (this.virtualizedListRef.current) {
-        this.virtualizedListRef.current.scrollToItem(fousedItemRef.originalIndex);
+        this.virtualizedListRef.current.scrollToItem(focusedItemRef.originalIndex);
       }
 
-      const node = ReactDOM.findDOMNode(fousedItemRef.ref.current);
+      const node = ReactDOM.findDOMNode(focusedItemRef.ref.current);
 
       if (node) {
         node.focus();
-        this.focusedOriginalIndex = fousedItemRef.originalIndex;
+        this.focusedOriginalIndex = focusedItemRef.originalIndex;
+
+        if (onFocus) {
+          onFocus(node);
+        }
       }
     }
   }
 
+  focusSearchField() {
+    if (this.searchFieldRef.current) {
+      this.searchFieldRef.current.focus();
+    }
+  }
+
+  hasSearchField() {
+    return !!this.props.isFilterable;
+  }
+
+  isSearchFieldFocused() {
+    return this.hasSearchField() && document.activeElement === this.searchFieldRef.current;
+  }
+
   focusPreviousItem() {
     if (this.focusedIndex === 0) {
+      if (this.hasSearchField() && !this.isSearchFieldFocused()) {
+        return this.focusSearchField();
+      }
+
       this.focusedIndex = this.state.itemRefs.length - 1;
     } else {
       this.focusedIndex -= 1;
@@ -1025,6 +1063,10 @@ class DropdownCore extends React.Component {
 
   focusNextItem() {
     if (this.focusedIndex === this.state.itemRefs.length - 1) {
+      if (this.hasSearchField() && !this.isSearchFieldFocused()) {
+        return this.focusSearchField();
+      }
+
       this.focusedIndex = 0;
     } else {
       this.focusedIndex += 1;
@@ -1059,15 +1101,11 @@ class DropdownCore extends React.Component {
   maybeRenderNoResults() {
     const {
       items,
-      onSearchTextChanged,
-      searchText,
       labels: {
         noResults
       }
     } = this.props;
-    const showSearchTextInput = !!onSearchTextChanged && typeof searchText === "string";
-    const includeSearchCount = showSearchTextInput ? 1 : 0;
-    const numResults = items.length - includeSearchCount;
+    const numResults = items.length;
 
     if (numResults === 0) {
       return React.createElement(LabelMedium, {
@@ -1103,20 +1141,6 @@ class DropdownCore extends React.Component {
 
       const focusIndex = focusCounter - 1;
       const currentRef = this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null;
-
-      if (SearchTextInput.isClassOf(component)) {
-        return React.cloneElement(component, _extends({}, populatedProps, {
-          key: "search-text-input",
-          itemRef: currentRef,
-          onClick: () => {
-            this.handleClickFocus(0);
-            this.focusCurrentItem();
-          },
-          style: searchInputStyle,
-          autofocus: this.focusedIndex === 0
-        }));
-      }
-
       return React.cloneElement(component, _extends({}, populatedProps, {
         key: index,
         onClick: () => {
@@ -1137,21 +1161,6 @@ class DropdownCore extends React.Component {
       }
 
       const focusIndex = focusCounter - 1;
-
-      if (SearchTextInput.isClassOf(item.component)) {
-        return _extends({}, item, {
-          onClick: () => {
-            this.handleClickFocus(0);
-            this.focusCurrentItem();
-          },
-          populatedProps: {
-            style: searchInputStyle,
-            itemRef: this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null,
-            autofocus: this.focusedIndex === 0
-          }
-        });
-      }
-
       return _extends({}, item, {
         role: itemRole,
         ref: item.focusable ? this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null : null,
@@ -1170,6 +1179,23 @@ class DropdownCore extends React.Component {
     });
   }
 
+  renderSearchField() {
+    const {
+      searchText
+    } = this.props;
+    const {
+      labels
+    } = this.state;
+    return React.createElement(SearchField, {
+      clearAriaLabel: labels.clearSearch,
+      onChange: this.handleSearchTextChanged,
+      placeholder: labels.filter,
+      ref: this.searchFieldRef,
+      style: styles$3.searchInputStyle,
+      value: searchText || ""
+    });
+  }
+
   renderDropdownMenu(listRenderer, isReferenceHidden) {
     const {
       dropdownStyle,
@@ -1178,13 +1204,15 @@ class DropdownCore extends React.Component {
     } = this.props;
     const openerStyle = openerElement && window.getComputedStyle(openerElement);
     const minDropdownWidth = openerStyle ? openerStyle.getPropertyValue("width") : 0;
-    const initialHeight = 12;
-    const maxDropdownHeight = getDropdownMenuHeight(this.props.items, initialHeight);
+    const maxDropdownHeight = getDropdownMenuHeight(this.props.items);
     return React.createElement(View, {
       onMouseUp: this.handleDropdownMouseUp,
+      style: [styles$3.dropdown, light && styles$3.light, isReferenceHidden && styles$3.hidden, dropdownStyle],
+      testId: "dropdown-core-container"
+    }, this.props.isFilterable && this.renderSearchField(), React.createElement(View, {
       role: this.props.role,
-      style: [styles$3.dropdown, light && styles$3.light, isReferenceHidden && styles$3.hidden, generateDropdownMenuStyles(minDropdownWidth, maxDropdownHeight), dropdownStyle]
-    }, listRenderer, this.maybeRenderNoResults());
+      style: [styles$3.listboxOrMenu, generateDropdownMenuStyles(minDropdownWidth, maxDropdownHeight)]
+    }, listRenderer), this.maybeRenderNoResults());
   }
 
   renderDropdown() {
@@ -1210,7 +1238,7 @@ class DropdownCore extends React.Component {
     const {
       labels
     } = this.state;
-    const totalItems = this.hasSearchBox() ? items.length - 1 : items.length;
+    const totalItems = items.length;
     return React.createElement(StyledSpan, {
       "aria-live": "polite",
       "aria-atomic": "true",
@@ -1240,10 +1268,13 @@ class DropdownCore extends React.Component {
 DropdownCore.defaultProps = {
   alignment: "left",
   labels: {
+    clearSearch: defaultLabels.clearSearch,
+    filter: defaultLabels.filter,
     noResults: defaultLabels.noResults,
     someSelected: defaultLabels.someSelected
   },
-  light: false
+  light: false,
+  selectionType: "single"
 };
 const styles$3 = StyleSheet.create({
   menuWrapper: {
@@ -1255,12 +1286,14 @@ const styles$3 = StyleSheet.create({
     paddingTop: Spacing.xxxSmall_4,
     paddingBottom: Spacing.xxxSmall_4,
     border: `solid 1px ${Color.offBlack16}`,
-    boxShadow: `0px 8px 8px 0px ${fade(Color.offBlack, 0.1)}`,
-    overflowY: "auto"
+    boxShadow: `0px 8px 8px 0px ${fade(Color.offBlack, 0.1)}`
   },
   light: {
     border: "none"
   },
+  listboxOrMenu: {
+    overflowY: "auto"
+  },
   hidden: {
     pointerEvents: "none",
     visibility: "hidden"
@@ -1270,6 +1303,11 @@ const styles$3 = StyleSheet.create({
     alignSelf: "center",
     marginTop: Spacing.xxSmall_6
   },
+  searchInputStyle: {
+    margin: Spacing.xSmall_8,
+    marginTop: Spacing.xxxSmall_4,
+    minHeight: "auto"
+  },
   srOnly: {
     border: 0,
     clip: "rect(0,0,0,0)",
@@ -1887,26 +1925,6 @@ class SingleSelect extends React.Component {
     return this.mapOptionItemsToDropdownItems(isFilterable ? this.filterChildren(children) : children);
   }
 
-  getSearchField() {
-    if (!this.props.isFilterable) {
-      return null;
-    }
-
-    return {
-      component: React.createElement(SearchTextInput, {
-        key: "search-text-input",
-        onChange: this.handleSearchTextChanged,
-        searchText: this.state.searchText,
-        labels: {
-          clearSearch: defaultLabels.clearSearch,
-          filter: defaultLabels.filter
-        }
-      }),
-      focusable: true,
-      populatedProps: {}
-    };
-  }
-
   renderOpener(numItems) {
     const _this$props = this.props,
           {
@@ -1955,12 +1973,11 @@ class SingleSelect extends React.Component {
       searchText
     } = this.state;
     const allChildren = React.Children.toArray(children).filter(Boolean);
-    const filteredItems = this.getMenuItems(allChildren);
+    const items = this.getMenuItems(allChildren);
     const opener = this.renderOpener(allChildren.length);
-    const searchField = this.getSearchField();
-    const items = searchField ? [searchField].concat(filteredItems) : filteredItems;
     return React.createElement(DropdownCore$1, {
       role: "listbox",
+      selectionType: "single",
       alignment: alignment,
       dropdownStyle: [isFilterable && filterableDropdownStyle, selectDropdownStyle, dropdownStyle],
       initialFocusedIndex: this.selectedIndex,
@@ -1972,6 +1989,7 @@ class SingleSelect extends React.Component {
       openerElement: this.state.openerElement,
       style: style,
       className: className,
+      isFilterable: isFilterable,
       onSearchTextChanged: isFilterable ? this.handleSearchTextChanged : null,
       searchText: isFilterable ? searchText : ""
     });
@@ -2120,30 +2138,6 @@ class MultiSelect extends React.Component {
     }
   }
 
-  getSearchField() {
-    if (!this.props.isFilterable) {
-      return [];
-    }
-
-    const {
-      clearSearch,
-      filter
-    } = this.state.labels;
-    return [{
-      component: React.createElement(SearchTextInput, {
-        key: "search-text-input",
-        onChange: this.handleSearchTextChanged,
-        searchText: this.state.searchText,
-        labels: {
-          clearSearch,
-          filter
-        }
-      }),
-      focusable: true,
-      populatedProps: {}
-    }];
-  }
-
   getShortcuts(numOptions) {
     const {
       selectedValues,
@@ -2282,6 +2276,8 @@ class MultiSelect extends React.Component {
       searchText
     } = this.state;
     const {
+      clearSearch,
+      filter,
       noResults,
       someSelected
     } = this.state.labels;
@@ -2293,17 +2289,21 @@ class MultiSelect extends React.Component {
       role: "listbox",
       alignment: alignment,
       dropdownStyle: [isFilterable && filterableDropdownStyle, selectDropdownStyle, dropdownStyle],
-      items: [].concat(this.getSearchField(), this.getShortcuts(numOptions), filteredItems),
+      isFilterable: isFilterable,
+      items: [].concat(this.getShortcuts(numOptions), filteredItems),
       light: light,
       onOpenChanged: this.handleOpenChanged,
       open: open,
       opener: opener,
       openerElement: this.state.openerElement,
+      selectionType: "multi",
       style: style,
       className: className,
       onSearchTextChanged: isFilterable ? this.handleSearchTextChanged : null,
       searchText: isFilterable ? searchText : "",
       labels: {
+        clearSearch,
+        filter,
         noResults,
         someSelected
       }