@khanacademy/wonder-blocks-dropdown 2.7.6 → 2.8.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @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

package/dist/es/index.js

@@ -664,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");
 
@@ -734,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();
@@ -801,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;
@@ -847,6 +906,8 @@ class DropdownCore extends React.Component {
       }, props.labels)
     };
     this.virtualizedListRef = React.createRef();
+    this.handleKeyDownDebounced = debounce(this.handleKeyDownDebounceResult, 500);
+    this.textSuggestion = "";
   }
 
   componentDidMount() {
@@ -941,15 +1002,17 @@ 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() {
+  focusCurrentItem(onFocus) {
     const focusedItemRef = this.state.itemRefs[this.focusedIndex];
 
     if (focusedItemRef) {
@@ -962,6 +1025,10 @@ class DropdownCore extends React.Component {
       if (node) {
         node.focus();
         this.focusedOriginalIndex = focusedItemRef.originalIndex;
+
+        if (onFocus) {
+          onFocus(node);
+        }
       }
     }
   }
@@ -1206,7 +1273,8 @@ DropdownCore.defaultProps = {
     noResults: defaultLabels.noResults,
     someSelected: defaultLabels.someSelected
   },
-  light: false
+  light: false,
+  selectionType: "single"
 };
 const styles$3 = StyleSheet.create({
   menuWrapper: {
@@ -1909,6 +1977,7 @@ class SingleSelect extends React.Component {
     const opener = this.renderOpener(allChildren.length);
     return React.createElement(DropdownCore$1, {
       role: "listbox",
+      selectionType: "single",
       alignment: alignment,
       dropdownStyle: [isFilterable && filterableDropdownStyle, selectDropdownStyle, dropdownStyle],
       initialFocusedIndex: this.selectedIndex,
@@ -2227,6 +2296,7 @@ class MultiSelect extends React.Component {
       open: open,
       opener: opener,
       openerElement: this.state.openerElement,
+      selectionType: "multi",
       style: style,
       className: className,
       onSearchTextChanged: isFilterable ? this.handleSearchTextChanged : null,

package/dist/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 34);
+/******/ 	return __webpack_require__(__webpack_require__.s = 35);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -258,7 +258,7 @@ module.exports = require("@khanacademy/wonder-blocks-clickable");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(23);
+/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(24);
 /* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_router_dom__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(16);
 /* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_3__);
@@ -437,8 +437,8 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
 /* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(10);
 /* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_6__);
 /* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(2);
-/* harmony import */ var _check_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(24);
-/* harmony import */ var _checkbox_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(25);
+/* harmony import */ var _check_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(25);
+/* harmony import */ var _checkbox_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(26);
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 
@@ -671,17 +671,19 @@ DropdownOpener.defaultProps = {
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5__);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(5);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__);
-/* harmony import */ var _khanacademy_wonder_blocks_search_field__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(26);
+/* harmony import */ var _khanacademy_wonder_blocks_search_field__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(27);
 /* harmony import */ var _khanacademy_wonder_blocks_search_field__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_search_field__WEBPACK_IMPORTED_MODULE_7__);
 /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(9);
 /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_8__);
 /* harmony import */ var _khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(17);
 /* harmony import */ var _khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_9__);
-/* harmony import */ var _dropdown_core_virtualized_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(27);
+/* harmony import */ var _dropdown_core_virtualized_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(28);
 /* harmony import */ var _separator_item_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(6);
 /* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(2);
-/* harmony import */ var _dropdown_popper_js__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(29);
-/* harmony import */ var _util_dropdown_menu_styles_js__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(15);
+/* harmony import */ var _dropdown_popper_js__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(30);
+/* harmony import */ var _util_helpers_js__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(20);
+/* harmony import */ var _util_dropdown_menu_styles_js__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(15);
+/* eslint-disable max-lines */
 // A menu that consists of action items
 
 
@@ -698,6 +700,7 @@ DropdownOpener.defaultProps = {
 
 
 
+
 /**
  * The number of options to apply the virtualized list to.
  *
@@ -795,7 +798,15 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         open,
         searchText
       } = this.props;
-      const keyCode = event.which || event.keyCode; // If menu isn't open and user presses down, open the menu
+      const keyCode = event.which || event.keyCode; // Listen for the keydown events if we are using ASCII characters.
+
+      if (Object(_util_helpers_js__WEBPACK_IMPORTED_MODULE_14__[/* getStringForKey */ "b"])(event.key)) {
+        event.stopPropagation();
+        this.textSuggestion += event.key; // Trigger the filter logic only after the debounce is resolved.
+
+        this.handleKeyDownDebounced(this.textSuggestion);
+      } // If menu isn't open and user presses down, open the menu
+
 
       if (!open) {
         if (keyCode === _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "f"].down) {
@@ -877,6 +888,47 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       }
     };
 
+    this.handleKeyDownDebounceResult = key => {
+      const foundIndex = this.props.items.filter(item => item.focusable).findIndex(({
+        component
+      }) => {
+        var _component$props;
+
+        if (_separator_item_js__WEBPACK_IMPORTED_MODULE_11__[/* default */ "a"].isClassOf(component)) {
+          return false;
+        } // Flow doesn't know that the component is an OptionItem
+        // $FlowIgnore[incompatible-use]
+
+
+        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) {
+          // Open the menu to be able to focus on the item that matches
+          // the text suggested.
+          this.props.onOpenChanged(true);
+        } // Update the focus reference.
+
+
+        this.focusedIndex = foundIndex;
+        this.scheduleToFocusCurrentItem(node => {
+          // Force click only if the dropdown is closed and we are using
+          // the SingleSelect component.
+          if (this.props.selectionType === "single" && isClosed && node) {
+            node.click();
+            this.props.onOpenChanged(false);
+          }
+        });
+      } // Otherwise, reset current text
+
+
+      this.textSuggestion = "";
+    };
+
     this.handleClickFocus = index => {
       // Turn itemsClicked on so pressing up or down would focus the
       // appropriate item in handleKeyDown
@@ -927,7 +979,12 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         ...props.labels
       }
     };
-    this.virtualizedListRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createRef"]();
+    this.virtualizedListRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createRef"](); // We debounce the keydown handler to get the ASCII chars because it's
+    // called on every keydown
+
+    this.handleKeyDownDebounced = Object(_util_helpers_js__WEBPACK_IMPORTED_MODULE_14__[/* debounce */ "a"])(this.handleKeyDownDebounceResult, // Leaving enough time for the user to type a valid query (e.g. jul)
+    500);
+    this.textSuggestion = "";
   }
 
   componentDidMount() {
@@ -1043,17 +1100,24 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     document.removeEventListener("touchend", this.handleInteract);
   }
 
-  scheduleToFocusCurrentItem() {
+  scheduleToFocusCurrentItem(onFocus) {
     if (this.shouldVirtualizeList()) {
       // wait for windowed items to be recalculated
-      this.props.schedule.animationFrame(() => this.focusCurrentItem());
+      this.props.schedule.animationFrame(() => {
+        this.focusCurrentItem(onFocus);
+      });
     } else {
       // immediately focus the current item if we're not virtualizing
-      this.focusCurrentItem();
+      this.focusCurrentItem(onFocus);
     }
   }
+  /**
+   * Focus on the current item.
+   * @param [onFocus] - Callback to be called when the item is focused.
+   */
+
 
-  focusCurrentItem() {
+  focusCurrentItem(onFocus) {
     const focusedItemRef = this.state.itemRefs[this.focusedIndex];
 
     if (focusedItemRef) {
@@ -1073,6 +1137,11 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         // To be used if the set of focusable items in the menu changes
 
         this.focusedOriginalIndex = focusedItemRef.originalIndex;
+
+        if (onFocus) {
+          // Call the callback with the node that was focused.
+          onFocus(node);
+        }
       }
     }
   }
@@ -1289,7 +1358,7 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 
     const openerStyle = openerElement && window.getComputedStyle(openerElement);
     const minDropdownWidth = openerStyle ? openerStyle.getPropertyValue("width") : 0;
-    const maxDropdownHeight = Object(_util_dropdown_menu_styles_js__WEBPACK_IMPORTED_MODULE_14__[/* getDropdownMenuHeight */ "b"])(this.props.items);
+    const maxDropdownHeight = Object(_util_dropdown_menu_styles_js__WEBPACK_IMPORTED_MODULE_15__[/* getDropdownMenuHeight */ "b"])(this.props.items);
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__["View"] // Stop propagation to prevent the mouseup listener on the
     // document from closing the menu.
     , {
@@ -1298,7 +1367,7 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       testId: "dropdown-core-container"
     }, this.props.isFilterable && this.renderSearchField(), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__["View"], {
       role: this.props.role,
-      style: [styles.listboxOrMenu, Object(_util_dropdown_menu_styles_js__WEBPACK_IMPORTED_MODULE_14__[/* generateDropdownMenuStyles */ "a"])(minDropdownWidth, maxDropdownHeight)]
+      style: [styles.listboxOrMenu, Object(_util_dropdown_menu_styles_js__WEBPACK_IMPORTED_MODULE_15__[/* generateDropdownMenuStyles */ "a"])(minDropdownWidth, maxDropdownHeight)]
     }, listRenderer), this.maybeRenderNoResults());
   }
 
@@ -1365,7 +1434,8 @@ DropdownCore.defaultProps = {
     noResults: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* defaultLabels */ "d"].noResults,
     someSelected: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* defaultLabels */ "d"].someSelected
   },
-  light: false
+  light: false,
+  selectionType: "single"
 };
 const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
   menuWrapper: {
@@ -1729,6 +1799,52 @@ module.exports = require("react-window");
 /* 20 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return getStringForKey; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return debounce; });
+/**
+ * Checks if a given key is a valid ASCII value.
+ *
+ * @param {string} key The key that is being typed in.
+ * @returns A valid string representation of the given key.
+ */
+function getStringForKey(key) {
+  // If the key is of length 1, it is an ASCII value.
+  // Otherwise, if there are no ASCII characters in the key name,
+  // it is a Unicode character.
+  // See https://www.w3.org/TR/uievents-key/
+  if (key.length === 1 || !/^[A-Z]/i.test(key)) {
+    return key;
+  }
+
+  return "";
+}
+/**
+ *
+ * @param {fn} callback The function that will be executed after the debounce is resolved.
+ * @param {number} wait The period of time that will be executed the debounced
+ * function.
+ * @returns The function that will be executed after the wait period is
+ * fulfilled.
+ */
+
+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);
+  };
+}
+
+/***/ }),
+/* 21 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ActionMenu; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
@@ -1741,7 +1857,7 @@ module.exports = require("react-window");
 /* harmony import */ var _action_item_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(11);
 /* harmony import */ var _option_item_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(12);
 /* harmony import */ var _dropdown_core_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(14);
-/* harmony import */ var _action_menu_opener_core_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(32);
+/* harmony import */ var _action_menu_opener_core_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(33);
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 
@@ -1951,7 +2067,7 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
 });
 
 /***/ }),
-/* 21 */
+/* 22 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2191,6 +2307,7 @@ class SingleSelect extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     const opener = this.renderOpener(allChildren.length);
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_dropdown_core_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"], {
       role: "listbox",
+      selectionType: "single",
       alignment: alignment,
       dropdownStyle: [isFilterable && _util_constants_js__WEBPACK_IMPORTED_MODULE_5__[/* filterableDropdownStyle */ "e"], _util_constants_js__WEBPACK_IMPORTED_MODULE_5__[/* selectDropdownStyle */ "g"], dropdownStyle],
       initialFocusedIndex: this.selectedIndex,
@@ -2216,7 +2333,7 @@ SingleSelect.defaultProps = {
 };
 
 /***/ }),
-/* 22 */
+/* 23 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2593,6 +2710,7 @@ class MultiSelect extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       open: open,
       opener: opener,
       openerElement: this.state.openerElement,
+      selectionType: "multi",
       style: style,
       className: className,
       onSearchTextChanged: isFilterable ? this.handleSearchTextChanged : null,
@@ -2616,13 +2734,13 @@ MultiSelect.defaultProps = {
 };
 
 /***/ }),
-/* 23 */
+/* 24 */
 /***/ (function(module, exports) {
 
 module.exports = require("react-router-dom");
 
 /***/ }),
-/* 24 */
+/* 25 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2679,7 +2797,7 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
 });
 
 /***/ }),
-/* 25 */
+/* 26 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2772,13 +2890,13 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
 });
 
 /***/ }),
-/* 26 */
+/* 27 */
 /***/ (function(module, exports) {
 
 module.exports = require("@khanacademy/wonder-blocks-search-field");
 
 /***/ }),
-/* 27 */
+/* 28 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2790,7 +2908,7 @@ module.exports = require("@khanacademy/wonder-blocks-search-field");
 /* harmony import */ var react_window__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_window__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(17);
 /* harmony import */ var _khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _dropdown_core_virtualized_item_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(28);
+/* harmony import */ var _dropdown_core_virtualized_item_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(29);
 /* harmony import */ var _separator_item_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(6);
 /* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(2);
 /* harmony import */ var _util_dropdown_menu_styles_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(15);
@@ -2971,7 +3089,7 @@ class DropdownCoreVirtualized extends react__WEBPACK_IMPORTED_MODULE_0__["Compon
 /* harmony default export */ __webpack_exports__["a"] = (Object(_khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_3__["withActionScheduler"])(DropdownCoreVirtualized));
 
 /***/ }),
-/* 28 */
+/* 29 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3025,7 +3143,7 @@ class DropdownVirtualizedItem extends react__WEBPACK_IMPORTED_MODULE_0__["Compon
 /* harmony default export */ __webpack_exports__["a"] = (DropdownVirtualizedItem);
 
 /***/ }),
-/* 29 */
+/* 30 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3034,9 +3152,9 @@ class DropdownVirtualizedItem extends react__WEBPACK_IMPORTED_MODULE_0__["Compon
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7);
 /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var react_popper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(30);
+/* harmony import */ var react_popper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(31);
 /* harmony import */ var react_popper__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_popper__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _khanacademy_wonder_blocks_modal__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(31);
+/* harmony import */ var _khanacademy_wonder_blocks_modal__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(32);
 /* harmony import */ var _khanacademy_wonder_blocks_modal__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_modal__WEBPACK_IMPORTED_MODULE_3__);
 
 
@@ -3101,19 +3219,19 @@ function DropdownPopper({
 }
 
 /***/ }),
-/* 30 */
+/* 31 */
 /***/ (function(module, exports) {
 
 module.exports = require("react-popper");
 
 /***/ }),
-/* 31 */
+/* 32 */
 /***/ (function(module, exports) {
 
 module.exports = require("@khanacademy/wonder-blocks-modal");
 
 /***/ }),
-/* 32 */
+/* 33 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3132,7 +3250,7 @@ module.exports = require("@khanacademy/wonder-blocks-modal");
 /* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5__);
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(3);
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6__);
-/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(33);
+/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(34);
 /* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_7__);
 /* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(2);
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -3288,13 +3406,13 @@ const _generateStyles = color => {
 };
 
 /***/ }),
-/* 33 */
+/* 34 */
 /***/ (function(module, exports) {
 
 module.exports = require("@khanacademy/wonder-blocks-layout");
 
 /***/ }),
-/* 34 */
+/* 35 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3308,13 +3426,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _components_separator_item_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SeparatorItem", function() { return _components_separator_item_js__WEBPACK_IMPORTED_MODULE_2__["a"]; });
 
-/* harmony import */ var _components_action_menu_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(20);
+/* harmony import */ var _components_action_menu_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(21);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ActionMenu", function() { return _components_action_menu_js__WEBPACK_IMPORTED_MODULE_3__["a"]; });
 
-/* harmony import */ var _components_single_select_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(21);
+/* harmony import */ var _components_single_select_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(22);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SingleSelect", function() { return _components_single_select_js__WEBPACK_IMPORTED_MODULE_4__["a"]; });
 
-/* harmony import */ var _components_multi_select_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(22);
+/* harmony import */ var _components_multi_select_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(23);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MultiSelect", function() { return _components_multi_select_js__WEBPACK_IMPORTED_MODULE_5__["a"]; });
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "2.7.6",
+  "version": "2.8.0",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -15,16 +15,16 @@
     "access": "public"
   },
   "dependencies": {
-    "@babel/runtime": "^7.16.3",
-    "@khanacademy/wonder-blocks-button": "^3.0.0",
-    "@khanacademy/wonder-blocks-clickable": "^2.2.7",
+    "@babel/runtime": "^7.18.6",
+    "@khanacademy/wonder-blocks-button": "^3.0.1",
+    "@khanacademy/wonder-blocks-clickable": "^2.3.0",
     "@khanacademy/wonder-blocks-color": "^1.1.20",
     "@khanacademy/wonder-blocks-core": "^4.3.2",
     "@khanacademy/wonder-blocks-icon": "^1.2.29",
-    "@khanacademy/wonder-blocks-icon-button": "^3.4.8",
+    "@khanacademy/wonder-blocks-icon-button": "^3.4.9",
     "@khanacademy/wonder-blocks-layout": "^1.4.10",
-    "@khanacademy/wonder-blocks-modal": "^2.3.3",
-    "@khanacademy/wonder-blocks-search-field": "^1.0.6",
+    "@khanacademy/wonder-blocks-modal": "^2.3.4",
+    "@khanacademy/wonder-blocks-search-field": "^1.0.7",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
     "@khanacademy/wonder-blocks-timing": "^2.1.0",
     "@khanacademy/wonder-blocks-typography": "^1.1.32"

package/src/components/__tests__/dropdown-core.test.js

@@ -541,7 +541,7 @@ describe("DropdownCore", () => {
         expect(screen.getByText("No results")).toBeInTheDocument();
     });
 
-    it("SearchField should be focused when opened and there's no selection", async () => {
+    it("SearchField should be focused when opened and there's no selection", () => {
         // Arrange
 
         // Act
@@ -562,9 +562,7 @@ describe("DropdownCore", () => {
         );
 
         // Assert
-        waitFor(() => {
-            expect(screen.getByRole("textbox")).toHaveFocus();
-        });
+        expect(screen.getByRole("textbox")).toHaveFocus();
     });
 
     it("SearchField should trigger change when the user types in", () => {
@@ -739,7 +737,7 @@ describe("DropdownCore", () => {
     });
 
     describe("a11y > Live region", () => {
-        it("should render a live region announcing the number of options", async () => {
+        it("should render a live region announcing the number of options", () => {
             // Arrange
 
             // Act

package/src/components/__tests__/multi-select.test.js

@@ -19,6 +19,19 @@ const labels: $Shape<Labels> = {
 };
 
 describe("MultiSelect", () => {
+    beforeEach(() => {
+        window.scrollTo = jest.fn();
+
+        // We mock console.error() because React logs a bunch of errors pertaining
+        // to the use href="javascript:void(0);".
+        jest.spyOn(console, "error").mockImplementation(() => {});
+    });
+
+    afterEach(() => {
+        window.scrollTo.mockClear();
+        jest.spyOn(console, "error").mockReset();
+    });
+
     describe("uncontrolled", () => {
         const onChange = jest.fn();
         const uncontrolledSingleSelect = (
@@ -1186,6 +1199,41 @@ describe("MultiSelect", () => {
                 screen.getByText(updatedLabels.selectNoneLabel),
             ).toBeInTheDocument();
         });
+
+        describe("keyboard", () => {
+            beforeEach(() => {
+                // Required due to the `debounce` call.
+                jest.useFakeTimers();
+            });
+
+            it("should find and focus an item using the keyboard", () => {
+                // Arrange
+                const onChangeMock = jest.fn();
+
+                render(
+                    <MultiSelect onChange={onChangeMock}>
+                        <OptionItem label="Mercury" value="mercury" />
+                        <OptionItem label="Venus" value="venus" />
+                        <OptionItem label="Mars" value="mars" />
+                    </MultiSelect>,
+                );
+                userEvent.tab();
+
+                // Act
+                // find first occurrence
+                userEvent.keyboard("v");
+                jest.advanceTimersByTime(501);
+
+                // Assert
+                const filteredOption = screen.getByRole("option", {
+                    name: /Venus/i,
+                });
+                // Verify that the element found is focused.
+                expect(filteredOption).toHaveFocus();
+                // And also verify that the listbox is opened.
+                expect(screen.getByRole("listbox")).toBeInTheDocument();
+            });
+        });
     });
 
     describe("a11y > Live region", () => {

package/src/components/__tests__/single-select.test.js

@@ -99,6 +99,10 @@ describe("SingleSelect", () => {
         });
 
         describe("keyboard", () => {
+            beforeEach(() => {
+                jest.useFakeTimers();
+            });
+
             describe.each([{key: "{enter}"}, {key: "{space}"}])(
                 "$key",
                 ({key}) => {
@@ -129,7 +133,7 @@ describe("SingleSelect", () => {
                 },
             );
 
-            it("should not select an item when pressing {enter}", () => {
+            it("should select an item when pressing {enter}", () => {
                 // Arrange
                 render(uncontrolledSingleSelect);
                 userEvent.tab();
@@ -139,8 +143,8 @@ describe("SingleSelect", () => {
                 userEvent.keyboard("{enter}");
 
                 // Assert
-                expect(onChange).not.toHaveBeenCalled();
-                expect(screen.getByRole("listbox")).toBeInTheDocument();
+                expect(onChange).toHaveBeenCalledWith("1");
+                expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
             });
 
             it("should select an item when pressing {space}", () => {
@@ -157,6 +161,27 @@ describe("SingleSelect", () => {
                 expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
             });
 
+            it("should find and select an item using the keyboard", () => {
+                // Arrange
+                render(
+                    <SingleSelect onChange={onChange} placeholder="Choose">
+                        <OptionItem label="apple" value="apple" />
+                        <OptionItem label="orange" value="orange" />
+                        <OptionItem label="pear" value="pear" />
+                    </SingleSelect>,
+                );
+                userEvent.tab();
+
+                // Act
+                // find first occurrence
+                userEvent.keyboard("or");
+                jest.advanceTimersByTime(501);
+
+                // Assert
+                expect(onChange).toHaveBeenCalledWith("orange");
+                expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+            });
+
             it("should dismiss the dropdown when pressing {escape}", () => {
                 // Arrange
                 render(uncontrolledSingleSelect);

package/src/components/dropdown-core.js

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 // @flow
 // A menu that consists of action items
 
@@ -25,6 +26,7 @@ import SeparatorItem from "./separator-item.js";
 import {defaultLabels, keyCodes} from "../util/constants.js";
 import type {DropdownItem} from "../util/types.js";
 import DropdownPopper from "./dropdown-popper.js";
+import {debounce, getStringForKey} from "../util/helpers.js";
 import {
     generateDropdownMenuStyles,
     getDropdownMenuHeight,
@@ -94,6 +96,11 @@ type DefaultProps = {|
      * use when the item is used on a dark background.
      */
     light: boolean,
+
+    /**
+     * Used to determine if we can automatically select an item using the keyboard.
+     */
+    selectionType: "single" | "multi",
 |};
 
 type DropdownAriaRole = "listbox" | "menu";
@@ -219,6 +226,10 @@ class DropdownCore extends React.Component<Props, State> {
         current: null | React.ElementRef<typeof List>,
     |};
 
+    handleKeyDownDebounced: (key: string) => void;
+
+    textSuggestion: string;
+
     // Figure out if the same items are focusable. If an item has been added or
     // removed, this method will return false.
     static sameItemsFocusable(
@@ -245,6 +256,7 @@ class DropdownCore extends React.Component<Props, State> {
             someSelected: defaultLabels.someSelected,
         },
         light: false,
+        selectionType: "single",
     };
 
     // This is here to avoid calling React.createRef on each rerender. Instead,
@@ -295,6 +307,15 @@ class DropdownCore extends React.Component<Props, State> {
         };
 
         this.virtualizedListRef = React.createRef();
+
+        // We debounce the keydown handler to get the ASCII chars because it's
+        // called on every keydown
+        this.handleKeyDownDebounced = debounce(
+            this.handleKeyDownDebounceResult,
+            // Leaving enough time for the user to type a valid query (e.g. jul)
+            500,
+        );
+        this.textSuggestion = "";
     }
 
     componentDidMount() {
@@ -419,17 +440,23 @@ class DropdownCore extends React.Component<Props, State> {
         }
     };
 
-    scheduleToFocusCurrentItem() {
+    scheduleToFocusCurrentItem(onFocus?: (node: void | HTMLElement) => void) {
         if (this.shouldVirtualizeList()) {
             // wait for windowed items to be recalculated
-            this.props.schedule.animationFrame(() => this.focusCurrentItem());
+            this.props.schedule.animationFrame(() => {
+                this.focusCurrentItem(onFocus);
+            });
         } else {
             // immediately focus the current item if we're not virtualizing
-            this.focusCurrentItem();
+            this.focusCurrentItem(onFocus);
         }
     }
 
-    focusCurrentItem() {
+    /**
+     * Focus on the current item.
+     * @param [onFocus] - Callback to be called when the item is focused.
+     */
+    focusCurrentItem(onFocus?: (node: HTMLElement) => void) {
         const focusedItemRef = this.state.itemRefs[this.focusedIndex];
 
         if (focusedItemRef) {
@@ -452,6 +479,11 @@ class DropdownCore extends React.Component<Props, State> {
                 // Keep track of the original index of the newly focused item.
                 // To be used if the set of focusable items in the menu changes
                 this.focusedOriginalIndex = focusedItemRef.originalIndex;
+
+                if (onFocus) {
+                    // Call the callback with the node that was focused.
+                    onFocus(node);
+                }
             }
         }
     }
@@ -514,6 +546,15 @@ class DropdownCore extends React.Component<Props, State> {
     handleKeyDown: (event: SyntheticKeyboardEvent<>) => void = (event) => {
         const {onOpenChanged, open, searchText} = this.props;
         const keyCode = event.which || event.keyCode;
+
+        // Listen for the keydown events if we are using ASCII characters.
+        if (getStringForKey(event.key)) {
+            event.stopPropagation();
+            this.textSuggestion += event.key;
+            // Trigger the filter logic only after the debounce is resolved.
+            this.handleKeyDownDebounced(this.textSuggestion);
+        }
+
         // If menu isn't open and user presses down, open the menu
         if (!open) {
             if (keyCode === keyCodes.down) {
@@ -583,6 +624,45 @@ class DropdownCore extends React.Component<Props, State> {
         }
     };
 
+    handleKeyDownDebounceResult: (key: string) => void = (key) => {
+        const foundIndex = this.props.items
+            .filter((item) => item.focusable)
+            .findIndex(({component}) => {
+                if (SeparatorItem.isClassOf(component)) {
+                    return false;
+                }
+
+                // Flow doesn't know that the component is an OptionItem
+                // $FlowIgnore[incompatible-use]
+                const label = component.props?.label.toLowerCase();
+
+                return label.startsWith(key.toLowerCase());
+            });
+
+        if (foundIndex >= 0) {
+            const isClosed = !this.props.open;
+            if (isClosed) {
+                // Open the menu to be able to focus on the item that matches
+                // the text suggested.
+                this.props.onOpenChanged(true);
+            }
+            // Update the focus reference.
+            this.focusedIndex = foundIndex;
+
+            this.scheduleToFocusCurrentItem((node) => {
+                // Force click only if the dropdown is closed and we are using
+                // the SingleSelect component.
+                if (this.props.selectionType === "single" && isClosed && node) {
+                    node.click();
+                    this.props.onOpenChanged(false);
+                }
+            });
+        }
+
+        // Otherwise, reset current text
+        this.textSuggestion = "";
+    };
+
     handleClickFocus: (index: number) => void = (index) => {
         // Turn itemsClicked on so pressing up or down would focus the
         // appropriate item in handleKeyDown

package/src/components/multi-select.js

@@ -564,6 +564,7 @@ export default class MultiSelect extends React.Component<Props, State> {
                 open={open}
                 opener={opener}
                 openerElement={this.state.openerElement}
+                selectionType="multi"
                 style={style}
                 className={className}
                 onSearchTextChanged={

package/src/components/single-select.js

@@ -379,6 +379,7 @@ export default class SingleSelect extends React.Component<Props, State> {
         return (
             <DropdownCore
                 role="listbox"
+                selectionType="single"
                 alignment={alignment}
                 dropdownStyle={[
                     isFilterable && filterableDropdownStyle,

package/src/util/__tests__/helpers.test.js

@@ -0,0 +1,73 @@
+// @flow
+import {debounce, getStringForKey} from "../helpers.js";
+
+describe("getStringForKey", () => {
+    it("should get a valid string", () => {
+        // Arrange
+
+        // Act
+        const key = getStringForKey("a");
+
+        // Assert
+        expect(key).toBe("a");
+    });
+
+    it("should return empty if we use a glyph modifier key (e.g. Shift)", () => {
+        // Arrange
+
+        // Act
+        const key = getStringForKey("Shift");
+
+        // Assert
+        expect(key).toBe("");
+    });
+});
+
+describe("debounce", () => {
+    beforeEach(() => {
+        jest.useFakeTimers();
+    });
+
+    it("should call the debounced function", () => {
+        // Arrange
+        const callbackFnMock = jest.fn();
+        const debounced = debounce(callbackFnMock, 500);
+
+        // Act
+        debounced();
+        jest.advanceTimersByTime(501);
+
+        // Assert
+        expect(callbackFnMock).toHaveBeenCalled();
+    });
+
+    it("should call the debounced function only once", () => {
+        // Arrange
+        const callbackFnMock = jest.fn();
+        const debounced = debounce(callbackFnMock, 500);
+
+        // Act
+        debounced();
+        debounced();
+        debounced();
+        jest.advanceTimersByTime(501);
+
+        // Assert
+        expect(callbackFnMock).toHaveBeenCalledTimes(1);
+    });
+
+    it("should execute the last call with the exact args", () => {
+        // Arrange
+        const callbackFnMock = jest.fn();
+        const debounced = debounce(callbackFnMock, 500);
+
+        // Act
+        debounced("a");
+        debounced("ab");
+        debounced("abc");
+        jest.advanceTimersByTime(501);
+
+        // Assert
+        expect(callbackFnMock).toHaveBeenCalledWith("abc");
+    });
+});

package/src/util/helpers.js

@@ -0,0 +1,44 @@
+// @flow
+
+/**
+ * Checks if a given key is a valid ASCII value.
+ *
+ * @param {string} key The key that is being typed in.
+ * @returns A valid string representation of the given key.
+ */
+export function getStringForKey(key: string): string {
+    // If the key is of length 1, it is an ASCII value.
+    // Otherwise, if there are no ASCII characters in the key name,
+    // it is a Unicode character.
+    // See https://www.w3.org/TR/uievents-key/
+    if (key.length === 1 || !/^[A-Z]/i.test(key)) {
+        return key;
+    }
+
+    return "";
+}
+
+/**
+ *
+ * @param {fn} callback The function that will be executed after the debounce is resolved.
+ * @param {number} wait The period of time that will be executed the debounced
+ * function.
+ * @returns The function that will be executed after the wait period is
+ * fulfilled.
+ */
+export function debounce(
+    callback: (...args: any) => void,
+    wait: number,
+): (...args: any) => void {
+    let timeout;
+
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            callback(...args);
+        };
+
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}