@khanacademy/wonder-blocks-dropdown 2.7.4 → 2.8.0

package/dist/index.js

@@ -93,18 +93,22 @@ module.exports = require("react");
 
 /***/ }),
 /* 1 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-color");
+
+/***/ }),
+/* 2 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "g", function() { return keyCodes; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "i", function() { return selectDropdownStyle; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return filterableDropdownStyle; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "h", function() { return searchInputStyle; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return keyCodes; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "g", function() { return selectDropdownStyle; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return filterableDropdownStyle; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return DROPDOWN_ITEM_HEIGHT; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return MAX_VISIBLE_ITEMS; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return SEPARATOR_ITEM_HEIGHT; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return SEARCH_ITEM_HEIGHT; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return defaultLabels; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return SEPARATOR_ITEM_HEIGHT; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return defaultLabels; });
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0__);
 
@@ -124,13 +128,6 @@ const selectDropdownStyle = {
 
 const filterableDropdownStyle = {
   minHeight: 100
-};
-const searchInputStyle = {
-  margin: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.xSmall_8,
-  marginTop: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.xxxSmall_4,
-  // Set `minHeight` to "auto" to stop the search field from having
-  // a height of 0 and being cut off.
-  minHeight: "auto"
 }; // The default item height
 
 const DROPDOWN_ITEM_HEIGHT = 40;
@@ -141,8 +138,7 @@ 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; // The default labels that will be used by different components
+const SEPARATOR_ITEM_HEIGHT = 9; // The default labels that will be used by different components
 
 const defaultLabels = {
   clearSearch: "Clear search",
@@ -155,12 +151,6 @@ const defaultLabels = {
   allSelected: "All items"
 };
 
-/***/ }),
-/* 2 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-color");
-
 /***/ }),
 /* 3 */
 /***/ (function(module, exports) {
@@ -189,7 +179,7 @@ module.exports = require("@khanacademy/wonder-blocks-core");
 /* 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 _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3);
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3__);
@@ -242,92 +232,24 @@ module.exports = require("react-dom");
 
 /***/ }),
 /* 8 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return SearchTextInput; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _khanacademy_wonder_blocks_search_field__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(29);
-/* harmony import */ var _khanacademy_wonder_blocks_search_field__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_search_field__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
-// A TextField with a search icon on its left side and X icon on its right side
-
-
-
-class SearchTextInput extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  static isClassOf(instance) {
-    return instance && instance.type && instance.type.__IS_SEARCH_TEXT_INPUT__;
-  }
-
-  // TODO(WB-1310): Remove `componentDidMount` autofocus on the search field
-  // after making the search field sticky.
-  componentDidMount() {
-    // We need to re-focus on the text input after it mounts because of
-    // the case in which the dropdown switches between virtualized and
-    // non-virtualized. It can rerender the search field as the user is
-    // typing based on the number of search results, which results
-    // in losing focus on the field so the user can't type anymore.
-    // To work around this issue, this temporary fix auto-focuses on the
-    // search field on mount.
-    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 /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_search_field__WEBPACK_IMPORTED_MODULE_1___default.a, {
-      clearAriaLabel: labels.clearSearch,
-      onChange: onChange,
-      onClick: onClick,
-      placeholder: labels.filter,
-      ref: itemRef,
-      style: style,
-      testId: testId,
-      value: searchText
-    });
-  }
-
-}
-SearchTextInput.defaultProps = {
-  labels: {
-    clearSearch: _util_constants_js__WEBPACK_IMPORTED_MODULE_2__[/* defaultLabels */ "e"].clearSearch,
-    filter: _util_constants_js__WEBPACK_IMPORTED_MODULE_2__[/* defaultLabels */ "e"].filter
-  }
-};
-SearchTextInput.__IS_SEARCH_TEXT_INPUT__ = true;
-
-/***/ }),
-/* 9 */
 /***/ (function(module, exports) {
 
 module.exports = require("@khanacademy/wonder-blocks-icon");
 
 /***/ }),
-/* 10 */
+/* 9 */
 /***/ (function(module, exports) {
 
 module.exports = require("@khanacademy/wonder-blocks-typography");
 
 /***/ }),
-/* 11 */
+/* 10 */
 /***/ (function(module, exports) {
 
 module.exports = require("@khanacademy/wonder-blocks-clickable");
 
 /***/ }),
-/* 12 */
+/* 11 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -338,19 +260,19 @@ module.exports = require("@khanacademy/wonder-blocks-clickable");
 /* 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__(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__(17);
+/* 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__);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1);
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(3);
 /* 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_typography__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(10);
+/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(9);
 /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__);
-/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(11);
+/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(10);
 /* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_7__);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(5);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_8__);
-/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(1);
+/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_9__ = __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); }
 
 
@@ -495,7 +417,7 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
 });
 
 /***/ }),
-/* 13 */
+/* 12 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -504,17 +426,17 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
 /* 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 _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3);
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(10);
+/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(9);
 /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(11);
+/* 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__(1);
+/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(2);
 /* 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); }
@@ -670,13 +592,13 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
 });
 
 /***/ }),
-/* 14 */
+/* 13 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11);
+/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(10);
 /* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -731,7 +653,7 @@ DropdownOpener.defaultProps = {
 /* harmony default export */ __webpack_exports__["a"] = (DropdownOpener);
 
 /***/ }),
-/* 15 */
+/* 14 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -741,24 +663,27 @@ DropdownOpener.defaultProps = {
 /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var react_window__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(20);
+/* harmony import */ var react_window__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(19);
 /* harmony import */ var react_window__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_window__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1);
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(3);
 /* 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_typography__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(10);
-/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_7__);
-/* harmony import */ var _khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(18);
-/* harmony import */ var _khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_8__);
-/* harmony import */ var _dropdown_core_virtualized_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(27);
-/* harmony import */ var _separator_item_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(6);
-/* harmony import */ var _search_text_input_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(8);
-/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(1);
+/* 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__(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__(30);
-/* harmony import */ var _util_dropdown_menu_styles_js__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(16);
+/* 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
 
 
@@ -775,6 +700,7 @@ DropdownOpener.defaultProps = {
 
 
 
+
 /**
  * The number of options to apply the virtualized list to.
  *
@@ -851,6 +777,8 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   constructor(props) {
     super(props); // Apply our initial focus index
 
+    this.searchFieldRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createRef"]();
+
     this.handleInteract = event => {
       const {
         open,
@@ -870,10 +798,18 @@ 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 */ "g"].down) {
+        if (keyCode === _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "f"].down) {
           event.preventDefault();
           onOpenChanged(true);
           return;
@@ -884,12 +820,12 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 
 
       switch (keyCode) {
-        case _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "g"].tab:
-          // When we show SearchTextInput and that is focused and the
+        case _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "f"].tab:
+          // When we show SearchField and that is focused and the
           // searchText is entered at least one character, dismiss button
-          // is displayed. When user presses tab, we should move focus
-          // to the dismiss button.
-          if (this.hasSearchBox() && this.focusedIndex === 0 && searchText) {
+          // is displayed. When user presses tab, we should move focus to
+          // the dismiss button.
+          if (this.isSearchFieldFocused() && searchText) {
             return;
           }
 
@@ -897,10 +833,10 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
           onOpenChanged(false);
           return;
 
-        case _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "g"].space:
-          // When we display SearchTextInput and the focus is on it,
-          // we should let the user type space.
-          if (this.hasSearchBox() && this.focusedIndex === 0) {
+        case _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "f"].space:
+          // When we display SearchField and the focus is on it, we should
+          // let the user type space.
+          if (this.isSearchFieldFocused()) {
             return;
           } // Prevent space from scrolling down the page
 
@@ -908,12 +844,12 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
           event.preventDefault();
           return;
 
-        case _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "g"].up:
+        case _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "f"].up:
           event.preventDefault();
           this.focusPreviousItem();
           return;
 
-        case _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "g"].down:
+        case _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "f"].down:
           event.preventDefault();
           this.focusNextItem();
           return;
@@ -928,10 +864,10 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       const keyCode = event.which || event.keyCode;
 
       switch (keyCode) {
-        case _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "g"].space:
-          // When we display SearchTextInput and the focus is on it,
-          // we should let the user type space.
-          if (this.hasSearchBox() && this.focusedIndex === 0) {
+        case _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "f"].space:
+          // When we display SearchField and the focus is on it, we should
+          // let the user type space.
+          if (this.isSearchFieldFocused()) {
             return;
           } // Prevent space from scrolling down the page
 
@@ -939,7 +875,7 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
           event.preventDefault();
           return;
 
-        case _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "g"].escape:
+        case _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "f"].escape:
           // Close only the dropdown, not other elements that are
           // listening for an escape press
           if (open) {
@@ -952,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
@@ -982,17 +959,32 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       }
     };
 
+    this.handleSearchTextChanged = searchText => {
+      const {
+        onSearchTextChanged
+      } = this.props;
+
+      if (onSearchTextChanged) {
+        onSearchTextChanged(searchText);
+      }
+    };
+
     this.resetFocusedIndex();
     this.state = {
       prevItems: this.props.items,
       itemRefs: [],
       sameItemsFocusable: false,
       labels: {
-        noResults: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* defaultLabels */ "e"].noResults,
+        noResults: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* defaultLabels */ "d"].noResults,
         ...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() {
@@ -1057,29 +1049,20 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     this.removeEventListeners();
   }
 
-  hasSearchBox() {
-    return !!this.props.onSearchTextChanged && typeof this.props.searchText === "string";
-  } // Resets our initial focus index to what was passed in
-  // via the props
-
-
+  // Resets our initial focus index to what was passed in via the props
   resetFocusedIndex() {
     const {
       initialFocusedIndex
-    } = this.props; // If we are given an initial focus index, select it.  Otherwise
-    // default to the first item
-
-    if (initialFocusedIndex) {
-      // If we have a search box visible, then our focus
-      // index is going to be offset by 1, since the orginal
-      // index doesn't account for the search box's
-      // existence.
-      if (this.hasSearchBox()) {
-        this.focusedIndex = initialFocusedIndex + 1;
-      } else {
-        this.focusedIndex = initialFocusedIndex;
-      }
+    } = this.props; // If we are given an initial focus index, select it. Otherwise default
+    // to the first item
+
+    if (typeof initialFocusedIndex !== "undefined") {
+      this.focusedIndex = initialFocusedIndex;
     } else {
+      if (this.hasSearchField() && !this.isSearchFieldFocused()) {
+        return this.focusSearchField();
+      }
+
       this.focusedIndex = 0;
     }
   } // Figure out focus states for the dropdown after it has changed from open
@@ -1117,42 +1100,73 @@ 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() {
-    const fousedItemRef = this.state.itemRefs[this.focusedIndex];
 
-    if (fousedItemRef) {
+  focusCurrentItem(onFocus) {
+    const focusedItemRef = this.state.itemRefs[this.focusedIndex];
+
+    if (focusedItemRef) {
       // force react-window to scroll to ensure the focused item is visible
       if (this.virtualizedListRef.current) {
         // Our focused index does not include disabled items, but the
         // react-window index system does include the disabled items
         // in the count.  So we need to use "originalIndex", which
         // does account for disabled items.
-        this.virtualizedListRef.current.scrollToItem(fousedItemRef.originalIndex);
+        this.virtualizedListRef.current.scrollToItem(focusedItemRef.originalIndex);
       }
 
-      const node = react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.findDOMNode(fousedItemRef.ref.current);
+      const node = react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.findDOMNode(focusedItemRef.ref.current);
 
       if (node) {
         node.focus(); // 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 = fousedItemRef.originalIndex;
+        this.focusedOriginalIndex = focusedItemRef.originalIndex;
+
+        if (onFocus) {
+          // Call the callback with the node that was focused.
+          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) {
+      // Move the focus to the search field if it is the first item.
+      if (this.hasSearchField() && !this.isSearchFieldFocused()) {
+        return this.focusSearchField();
+      }
+
       this.focusedIndex = this.state.itemRefs.length - 1;
     } else {
       this.focusedIndex -= 1;
@@ -1163,6 +1177,11 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 
   focusNextItem() {
     if (this.focusedIndex === this.state.itemRefs.length - 1) {
+      // Move the focus to the search field if it is the last item.
+      if (this.hasSearchField() && !this.isSearchFieldFocused()) {
+        return this.focusSearchField();
+      }
+
       this.focusedIndex = 0;
     } else {
       this.focusedIndex += 1;
@@ -1201,19 +1220,15 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   maybeRenderNoResults() {
     const {
       items,
-      onSearchTextChanged,
-      searchText,
       labels: {
         noResults
       }
-    } = this.props;
-    const showSearchTextInput = !!onSearchTextChanged && typeof searchText === "string";
-    const includeSearchCount = showSearchTextInput ? 1 : 0; // Verify if there are items to be rendered or not
+    } = this.props; // Verify if there are items to be rendered or not
 
-    const numResults = items.length - includeSearchCount;
+    const numResults = items.length;
 
     if (numResults === 0) {
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_7__["LabelMedium"], {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_8__["LabelMedium"], {
         style: styles.noResult,
         testId: "dropdown-core-no-results"
       }, noResults);
@@ -1245,7 +1260,7 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     const itemRole = this.getItemRole(); // if we don't need to virtualize, we can render the list directly
 
     return this.props.items.map((item, index) => {
-      if (_separator_item_js__WEBPACK_IMPORTED_MODULE_10__[/* default */ "a"].isClassOf(item.component)) {
+      if (_separator_item_js__WEBPACK_IMPORTED_MODULE_11__[/* default */ "a"].isClassOf(item.component)) {
         return item.component;
       }
 
@@ -1261,29 +1276,7 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 
       const focusIndex = focusCounter - 1; // The reference to the item is used to restore focus.
 
-      const currentRef = this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null; // Render the SearchField component.
-
-      if (_search_text_input_js__WEBPACK_IMPORTED_MODULE_11__[/* default */ "a"].isClassOf(component)) {
-        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["cloneElement"](component, { ...populatedProps,
-          key: "search-text-input",
-          // pass the current ref down to the input element
-          itemRef: currentRef,
-          // override to avoid losing focus when pressing a key
-          onClick: () => {
-            this.handleClickFocus(0);
-            this.focusCurrentItem();
-          },
-          // apply custom styles
-          style: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* searchInputStyle */ "h"],
-          // TODO(WB-1310): Remove the autofocus prop after making
-          // the search field sticky.
-          // Currently autofocusing on the search field to work
-          // around it losing focus on mount when switching between
-          // virtualized and non-virtualized dropdown filter results.
-          autofocus: this.focusedIndex === 0
-        });
-      } // Render OptionItem and/or ActionItem elements.
-
+      const currentRef = this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null; // Render OptionItem and/or ActionItem elements.
 
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["cloneElement"](component, { ...populatedProps,
         key: index,
@@ -1310,33 +1303,11 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     let focusCounter = 0;
     const itemRole = this.getItemRole();
     return this.props.items.map((item, index) => {
-      if (!_separator_item_js__WEBPACK_IMPORTED_MODULE_10__[/* default */ "a"].isClassOf(item.component) && item.focusable) {
+      if (!_separator_item_js__WEBPACK_IMPORTED_MODULE_11__[/* default */ "a"].isClassOf(item.component) && item.focusable) {
         focusCounter += 1;
       }
 
       const focusIndex = focusCounter - 1;
-
-      if (_search_text_input_js__WEBPACK_IMPORTED_MODULE_11__[/* default */ "a"].isClassOf(item.component)) {
-        return { ...item,
-          // override to avoid losing focus when pressing a key
-          onClick: () => {
-            this.handleClickFocus(0);
-            this.focusCurrentItem();
-          },
-          populatedProps: {
-            style: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* searchInputStyle */ "h"],
-            // pass the current ref down to the input element
-            itemRef: this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null,
-            // TODO(WB-1310): Remove the autofocus prop after making
-            // the search field sticky.
-            // Currently autofocusing on the search field to work
-            // around it losing focus on mount when switching between
-            // virtualized and non-virtualized dropdown filter results.
-            autofocus: this.focusedIndex === 0
-          }
-        };
-      }
-
       return { ...item,
         role: itemRole,
         ref: item.focusable ? this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null : null,
@@ -1354,12 +1325,29 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   renderVirtualizedList() {
     // preprocess items data to pass it to the renderer
     const virtualizedItems = this.parseVirtualizedItems();
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_dropdown_core_virtualized_js__WEBPACK_IMPORTED_MODULE_9__[/* default */ "a"], {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_dropdown_core_virtualized_js__WEBPACK_IMPORTED_MODULE_10__[/* default */ "a"], {
       data: virtualizedItems,
       listRef: this.virtualizedListRef
     });
   }
 
+  renderSearchField() {
+    const {
+      searchText
+    } = this.props;
+    const {
+      labels
+    } = this.state;
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_search_field__WEBPACK_IMPORTED_MODULE_7___default.a, {
+      clearAriaLabel: labels.clearSearch,
+      onChange: this.handleSearchTextChanged,
+      placeholder: labels.filter,
+      ref: this.searchFieldRef,
+      style: styles.searchInputStyle,
+      value: searchText || ""
+    });
+  }
+
   renderDropdownMenu(listRenderer, isReferenceHidden) {
     const {
       dropdownStyle,
@@ -1369,17 +1357,18 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     // It's only used if the element exists in the DOM
 
     const openerStyle = openerElement && window.getComputedStyle(openerElement);
-    const minDropdownWidth = openerStyle ? openerStyle.getPropertyValue("width") : 0; // Vertical padding of the dropdown menu + borders
-
-    const initialHeight = 12;
-    const maxDropdownHeight = Object(_util_dropdown_menu_styles_js__WEBPACK_IMPORTED_MODULE_14__[/* getDropdownMenuHeight */ "b"])(this.props.items, initialHeight);
+    const minDropdownWidth = openerStyle ? openerStyle.getPropertyValue("width") : 0;
+    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.
     , {
       onMouseUp: this.handleDropdownMouseUp,
+      style: [styles.dropdown, light && styles.light, isReferenceHidden && styles.hidden, dropdownStyle],
+      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.dropdown, light && styles.light, isReferenceHidden && styles.hidden, Object(_util_dropdown_menu_styles_js__WEBPACK_IMPORTED_MODULE_14__[/* generateDropdownMenuStyles */ "a"])(minDropdownWidth, maxDropdownHeight), dropdownStyle]
-    }, listRenderer, this.maybeRenderNoResults());
+      style: [styles.listboxOrMenu, Object(_util_dropdown_menu_styles_js__WEBPACK_IMPORTED_MODULE_15__[/* generateDropdownMenuStyles */ "a"])(minDropdownWidth, maxDropdownHeight)]
+    }, listRenderer), this.maybeRenderNoResults());
   }
 
   renderDropdown() {
@@ -1410,7 +1399,7 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     const {
       labels
     } = this.state;
-    const totalItems = this.hasSearchBox() ? items.length - 1 : items.length;
+    const totalItems = items.length;
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledSpan, {
       "aria-live": "polite",
       "aria-atomic": "true",
@@ -1440,10 +1429,13 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 DropdownCore.defaultProps = {
   alignment: "left",
   labels: {
-    noResults: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* defaultLabels */ "e"].noResults,
-    someSelected: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* defaultLabels */ "e"].someSelected
+    clearSearch: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* defaultLabels */ "d"].clearSearch,
+    filter: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* defaultLabels */ "d"].filter,
+    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: {
@@ -1455,13 +1447,15 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
     paddingTop: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.xxxSmall_4,
     paddingBottom: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.xxxSmall_4,
     border: `solid 1px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.offBlack16}`,
-    boxShadow: `0px 8px 8px 0px ${Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__["fade"])(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.offBlack, 0.1)}`,
-    overflowY: "auto"
+    boxShadow: `0px 8px 8px 0px ${Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__["fade"])(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.offBlack, 0.1)}`
   },
   light: {
     // Pretty much just remove the border
     border: "none"
   },
+  listboxOrMenu: {
+    overflowY: "auto"
+  },
   hidden: {
     pointerEvents: "none",
     visibility: "hidden"
@@ -1471,6 +1465,13 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
     alignSelf: "center",
     marginTop: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.xxSmall_6
   },
+  searchInputStyle: {
+    margin: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.xSmall_8,
+    marginTop: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.xxxSmall_4,
+    // Set `minHeight` to "auto" to stop the search field from having
+    // a height of 0 and being cut off.
+    minHeight: "auto"
+  },
   srOnly: {
     border: 0,
     clip: "rect(0,0,0,0)",
@@ -1482,10 +1483,10 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
     width: 1
   }
 });
-/* harmony default export */ __webpack_exports__["a"] = (Object(_khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_8__["withActionScheduler"])(DropdownCore));
+/* harmony default export */ __webpack_exports__["a"] = (Object(_khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_9__["withActionScheduler"])(DropdownCore));
 
 /***/ }),
-/* 16 */
+/* 15 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1493,10 +1494,8 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return generateDropdownMenuStyles; });
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _constants_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
+/* harmony import */ var _constants_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
 /* harmony import */ var _components_separator_item_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
-/* harmony import */ var _components_search_text_input_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(8);
-
 
 
 
@@ -1515,10 +1514,7 @@ function getDropdownMenuHeight(items, initialHeight = 0) {
   // this number of elements in the visible area
   return items.slice(0, _constants_js__WEBPACK_IMPORTED_MODULE_1__[/* MAX_VISIBLE_ITEMS */ "b"]).reduce((sum, item) => {
     if (_components_separator_item_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].isClassOf(item.component)) {
-      return sum + _constants_js__WEBPACK_IMPORTED_MODULE_1__[/* SEPARATOR_ITEM_HEIGHT */ "d"];
-    } else if (_components_search_text_input_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"].isClassOf(item.component)) {
-      // search text input height
-      return sum + _constants_js__WEBPACK_IMPORTED_MODULE_1__[/* SEARCH_ITEM_HEIGHT */ "c"];
+      return sum + _constants_js__WEBPACK_IMPORTED_MODULE_1__[/* SEPARATOR_ITEM_HEIGHT */ "c"];
     } else {
       return sum + _constants_js__WEBPACK_IMPORTED_MODULE_1__[/* DROPDOWN_ITEM_HEIGHT */ "a"];
     }
@@ -1544,19 +1540,19 @@ function generateDropdownMenuStyles(minWidth, maxHeight) {
 }
 
 /***/ }),
-/* 17 */
+/* 16 */
 /***/ (function(module, exports) {
 
 module.exports = require("react-router");
 
 /***/ }),
-/* 18 */
+/* 17 */
 /***/ (function(module, exports) {
 
 module.exports = require("@khanacademy/wonder-blocks-timing");
 
 /***/ }),
-/* 19 */
+/* 18 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1565,21 +1561,21 @@ module.exports = require("@khanacademy/wonder-blocks-timing");
 /* 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__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(17);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(16);
 /* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(5);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(11);
+/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(10);
 /* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(9);
+/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(8);
 /* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_6__);
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(3);
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7__);
-/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(10);
+/* 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 _util_constants_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(1);
+/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_9__ = __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); }
 
 
@@ -1794,11 +1790,57 @@ const _generateStyles = (light, placeholder) => {
 };
 
 /***/ }),
-/* 20 */
+/* 19 */
 /***/ (function(module, exports) {
 
 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__) {
@@ -1811,10 +1853,10 @@ module.exports = require("react-window");
 /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _dropdown_opener_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(14);
-/* harmony import */ var _action_item_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(12);
-/* harmony import */ var _option_item_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(13);
-/* harmony import */ var _dropdown_core_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(15);
+/* harmony import */ var _dropdown_opener_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(13);
+/* 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__(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); }
 
@@ -1829,6 +1871,17 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 /**
  * A menu that consists of various types of items.
+ *
+ * ## Usage
+ *
+ * ```jsx
+ * import {ActionMenu, ActionItem} from "@khanacademy/wonder-blocks-dropdown";
+ *
+ * <ActionMenu menuText="Menu">
+ *  <ActionItem href="/profile" label="Profile" />
+ *  <ActionItem label="Settings" onClick={() => {}} />
+ * </ActionMenu>
+ * ```
  */
 class ActionMenu extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   constructor(...args) {
@@ -2023,11 +2076,10 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
 /* 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 _dropdown_core_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(15);
-/* harmony import */ var _dropdown_opener_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(14);
-/* harmony import */ var _select_opener_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(19);
-/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(1);
-/* harmony import */ var _search_text_input_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(8);
+/* harmony import */ var _dropdown_core_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(14);
+/* harmony import */ var _dropdown_opener_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(13);
+/* harmony import */ var _select_opener_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(18);
+/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_5__ = __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); }
 
 
@@ -2037,7 +2089,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 
 
-
 /**
  * The single select allows the selection of one item. Clients are responsible
  * for keeping track of the selected item in the select.
@@ -2045,11 +2096,23 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
  * The single select dropdown closes after the selection of an item. If the same
  * item is selected, there is no callback.
  *
- * *NOTE:* The component automatically uses
+ * **NOTE:** If there are more than 125 items, the component automatically uses
  * [react-window](https://github.com/bvaughn/react-window) to improve
  * performance when rendering these elements and is capable of handling many
  * hundreds of items without performance problems.
  *
+ * ## Usage
+ *
+ * ```jsx
+ * import {OptionItem, SingleSelect} from "@khanacademy/wonder-blocks-dropdown";
+ *
+ * const [selectedValue, setSelectedValue] = useState("");
+ *
+ * <SingleSelect placeholder="Choose a fruit" onChange={setSelectedValue} selectedValue={selectedValue}>
+ *  <OptionItem value="pear">Pear</OptionItem>
+ *  <OptionItem value="mango">Mango</OptionItem>
+ * </SingleSelect>
+ * ```
  */
 class SingleSelect extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   constructor(props) {
@@ -2178,26 +2241,6 @@ class SingleSelect extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     return this.mapOptionItemsToDropdownItems(isFilterable ? this.filterChildren(children) : children);
   }
 
-  getSearchField() {
-    if (!this.props.isFilterable) {
-      return null;
-    }
-
-    return {
-      component: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_search_text_input_js__WEBPACK_IMPORTED_MODULE_6__[/* default */ "a"], {
-        key: "search-text-input",
-        onChange: this.handleSearchTextChanged,
-        searchText: this.state.searchText,
-        labels: {
-          clearSearch: _util_constants_js__WEBPACK_IMPORTED_MODULE_5__[/* defaultLabels */ "e"].clearSearch,
-          filter: _util_constants_js__WEBPACK_IMPORTED_MODULE_5__[/* defaultLabels */ "e"].filter
-        }
-      }),
-      focusable: true,
-      populatedProps: {}
-    };
-  }
-
   renderOpener(numItems) {
     const {
       children,
@@ -2260,14 +2303,13 @@ class SingleSelect extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       searchText
     } = this.state;
     const allChildren = react__WEBPACK_IMPORTED_MODULE_0__["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 /*#__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 */ "f"], _util_constants_js__WEBPACK_IMPORTED_MODULE_5__[/* selectDropdownStyle */ "i"], dropdownStyle],
+      dropdownStyle: [isFilterable && _util_constants_js__WEBPACK_IMPORTED_MODULE_5__[/* filterableDropdownStyle */ "e"], _util_constants_js__WEBPACK_IMPORTED_MODULE_5__[/* selectDropdownStyle */ "g"], dropdownStyle],
       initialFocusedIndex: this.selectedIndex,
       items: items,
       light: light,
@@ -2277,6 +2319,7 @@ class SingleSelect extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       openerElement: this.state.openerElement,
       style: style,
       className: className,
+      isFilterable: isFilterable,
       onSearchTextChanged: isFilterable ? this.handleSearchTextChanged : null,
       searchText: isFilterable ? searchText : ""
     });
@@ -2299,13 +2342,12 @@ SingleSelect.defaultProps = {
 /* 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 _action_item_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(12);
-/* harmony import */ var _dropdown_core_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(15);
-/* harmony import */ var _dropdown_opener_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(14);
-/* harmony import */ var _search_text_input_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(8);
-/* harmony import */ var _select_opener_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(19);
-/* harmony import */ var _separator_item_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(6);
-/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(1);
+/* harmony import */ var _action_item_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(11);
+/* harmony import */ var _dropdown_core_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(14);
+/* harmony import */ var _dropdown_opener_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(13);
+/* harmony import */ var _select_opener_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(18);
+/* harmony import */ var _separator_item_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(6);
+/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_7__ = __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); }
 
 
@@ -2317,7 +2359,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 
 
-
 /**
  * A dropdown that consists of multiple selection items. This select allows
  * multiple options to be selected. Clients are responsible for keeping track
@@ -2325,6 +2366,17 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
  *
  * The multi select stays open until closed by the user. The onChange callback
  * happens every time there is a change in the selection of the items.
+ *
+ * ## Usage
+ *
+ * ```jsx
+ * import {OptionItem, MultiSelect} from "@khanacademy/wonder-blocks-dropdown";
+ *
+ * <MultiSelect onChange={setSelectedValues} selectedValues={selectedValues}>
+ *  <OptionItem value="pear">Pear</OptionItem>
+ *  <OptionItem value="mango">Mango</OptionItem>
+ * </MultiSelect>
+ * ```
  */
 class MultiSelect extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   constructor(props) {
@@ -2415,13 +2467,13 @@ class MultiSelect extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       searchText: "",
       lastSelectedValues: [],
       // merge custom labels with the default ones
-      labels: { ..._util_constants_js__WEBPACK_IMPORTED_MODULE_8__[/* defaultLabels */ "e"],
+      labels: { ..._util_constants_js__WEBPACK_IMPORTED_MODULE_7__[/* defaultLabels */ "d"],
         ...props.labels
       },
       openerElement: null
     }; // merge custom labels with the default ones
 
-    this.labels = { ..._util_constants_js__WEBPACK_IMPORTED_MODULE_8__[/* defaultLabels */ "e"],
+    this.labels = { ..._util_constants_js__WEBPACK_IMPORTED_MODULE_7__[/* defaultLabels */ "d"],
       ...props.labels
     };
   }
@@ -2481,30 +2533,6 @@ class MultiSelect extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     }
   }
 
-  getSearchField() {
-    if (!this.props.isFilterable) {
-      return [];
-    }
-
-    const {
-      clearSearch,
-      filter
-    } = this.state.labels;
-    return [{
-      component: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_search_text_input_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"], {
-        key: "search-text-input",
-        onChange: this.handleSearchTextChanged,
-        searchText: this.state.searchText,
-        labels: {
-          clearSearch,
-          filter
-        }
-      }),
-      focusable: true,
-      populatedProps: {}
-    }];
-  }
-
   getShortcuts(numOptions) {
     const {
       selectedValues,
@@ -2539,7 +2567,7 @@ class MultiSelect extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         populatedProps: {}
       };
       const separator = {
-        component: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_separator_item_js__WEBPACK_IMPORTED_MODULE_7__[/* default */ "a"], {
+        component: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_separator_item_js__WEBPACK_IMPORTED_MODULE_6__[/* default */ "a"], {
           key: "shortcuts-separator"
         }),
         focusable: false,
@@ -2586,7 +2614,7 @@ class MultiSelect extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 
     if (lastSelectedChildren.length && restOfTheChildren.length) {
       lastSelectedItems.push({
-        component: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_separator_item_js__WEBPACK_IMPORTED_MODULE_7__[/* default */ "a"], {
+        component: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_separator_item_js__WEBPACK_IMPORTED_MODULE_6__[/* default */ "a"], {
           key: "selected-separator"
         }),
         focusable: false,
@@ -2634,7 +2662,7 @@ class MultiSelect extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       disabled: numOptions === 0 || disabled,
       ref: this.handleOpenerRef,
       text: menuText
-    }, opener) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_select_opener_js__WEBPACK_IMPORTED_MODULE_6__[/* default */ "a"], _extends({}, sharedProps, {
+    }, opener) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_select_opener_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"], _extends({}, sharedProps, {
       disabled: numOptions === 0 || disabled,
       id: id,
       isPlaceholder: menuText === noneSelected,
@@ -2662,6 +2690,8 @@ class MultiSelect extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       searchText
     } = this.state;
     const {
+      clearSearch,
+      filter,
       noResults,
       someSelected
     } = this.state.labels;
@@ -2672,18 +2702,22 @@ class MultiSelect extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_dropdown_core_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], {
       role: "listbox",
       alignment: alignment,
-      dropdownStyle: [isFilterable && _util_constants_js__WEBPACK_IMPORTED_MODULE_8__[/* filterableDropdownStyle */ "f"], _util_constants_js__WEBPACK_IMPORTED_MODULE_8__[/* selectDropdownStyle */ "i"], dropdownStyle],
-      items: [].concat(this.getSearchField(), this.getShortcuts(numOptions), filteredItems),
+      dropdownStyle: [isFilterable && _util_constants_js__WEBPACK_IMPORTED_MODULE_7__[/* filterableDropdownStyle */ "e"], _util_constants_js__WEBPACK_IMPORTED_MODULE_7__[/* selectDropdownStyle */ "g"], dropdownStyle],
+      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
       }
@@ -2715,9 +2749,9 @@ module.exports = require("react-router-dom");
 /* 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 _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9);
+/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(8);
 /* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_3__);
 
 
@@ -2772,11 +2806,11 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
 /* 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 _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(9);
+/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(8);
 /* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_4__);
 
 
@@ -2857,6 +2891,12 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
 
 /***/ }),
 /* 27 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-search-field");
+
+/***/ }),
+/* 28 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2864,16 +2904,14 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
 /* 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_window__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(20);
+/* harmony import */ var react_window__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(19);
 /* 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__(18);
+/* 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 _search_text_input_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(8);
-/* harmony import */ var _separator_item_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(6);
-/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(1);
-/* harmony import */ var _util_dropdown_menu_styles_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(16);
-
+/* 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);
 
 
 
@@ -2895,20 +2933,17 @@ class DropdownCoreVirtualized extends react__WEBPACK_IMPORTED_MODULE_0__["Compon
       // get the current item in the list
       const item = this.props.data[index];
 
-      if (_separator_item_js__WEBPACK_IMPORTED_MODULE_6__[/* default */ "a"].isClassOf(item.component)) {
+      if (_separator_item_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].isClassOf(item.component)) {
         // this is the separator's height (1px) + vertical margin (8px)
-        return _util_constants_js__WEBPACK_IMPORTED_MODULE_7__[/* SEPARATOR_ITEM_HEIGHT */ "d"];
-      } else if (_search_text_input_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].isClassOf(item.component)) {
-        // search text input height
-        return _util_constants_js__WEBPACK_IMPORTED_MODULE_7__[/* SEARCH_ITEM_HEIGHT */ "c"];
+        return _util_constants_js__WEBPACK_IMPORTED_MODULE_6__[/* SEPARATOR_ITEM_HEIGHT */ "c"];
       } else {
         // default dropdown item height
-        return _util_constants_js__WEBPACK_IMPORTED_MODULE_7__[/* DROPDOWN_ITEM_HEIGHT */ "a"];
+        return _util_constants_js__WEBPACK_IMPORTED_MODULE_6__[/* DROPDOWN_ITEM_HEIGHT */ "a"];
       }
     };
 
     this.state = {
-      height: Object(_util_dropdown_menu_styles_js__WEBPACK_IMPORTED_MODULE_8__[/* getDropdownMenuHeight */ "b"])(props.data),
+      height: Object(_util_dropdown_menu_styles_js__WEBPACK_IMPORTED_MODULE_7__[/* getDropdownMenuHeight */ "b"])(props.data),
       width: props.width
     };
   }
@@ -2964,7 +2999,7 @@ class DropdownCoreVirtualized extends react__WEBPACK_IMPORTED_MODULE_0__["Compon
 
   setHeight() {
     // calculate dropdown's height depending on the type of items
-    const height = Object(_util_dropdown_menu_styles_js__WEBPACK_IMPORTED_MODULE_8__[/* getDropdownMenuHeight */ "b"])(this.props.data);
+    const height = Object(_util_dropdown_menu_styles_js__WEBPACK_IMPORTED_MODULE_7__[/* getDropdownMenuHeight */ "b"])(this.props.data);
     this.setState({
       height
     });
@@ -2994,7 +3029,7 @@ class DropdownCoreVirtualized extends react__WEBPACK_IMPORTED_MODULE_0__["Compon
       return -1;
     }) // 3. only render the possible visible items to minimize layout
     //    jumps
-    .slice(0, _util_constants_js__WEBPACK_IMPORTED_MODULE_7__[/* MAX_VISIBLE_ITEMS */ "b"]); // Append longest items to calculate the container width.
+    .slice(0, _util_constants_js__WEBPACK_IMPORTED_MODULE_6__[/* MAX_VISIBLE_ITEMS */ "b"]); // Append longest items to calculate the container width.
     // We need to hide these sorted elements to avoid any FOUC.
 
     return longestItems.map(item => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["cloneElement"](item, {
@@ -3054,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";
@@ -3107,12 +3142,6 @@ class DropdownVirtualizedItem extends react__WEBPACK_IMPORTED_MODULE_0__["Compon
 
 /* harmony default export */ __webpack_exports__["a"] = (DropdownVirtualizedItem);
 
-/***/ }),
-/* 29 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-search-field");
-
 /***/ }),
 /* 30 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -3211,19 +3240,19 @@ module.exports = require("@khanacademy/wonder-blocks-modal");
 /* 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 _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(10);
+/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9);
 /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(5);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(9);
+/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(8);
 /* 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__(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__(1);
+/* 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); }
 
 
@@ -3388,10 +3417,10 @@ module.exports = require("@khanacademy/wonder-blocks-layout");
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _components_action_item_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(12);
+/* harmony import */ var _components_action_item_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(11);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ActionItem", function() { return _components_action_item_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
 
-/* harmony import */ var _components_option_item_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(13);
+/* harmony import */ var _components_option_item_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(12);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "OptionItem", function() { return _components_option_item_js__WEBPACK_IMPORTED_MODULE_1__["a"]; });
 
 /* harmony import */ var _components_separator_item_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);