npm - @khanacademy/wonder-blocks-dropdown - Versions diffs - 2.7.3 → 2.7.6 - Mend

@khanacademy/wonder-blocks-dropdown 2.7.3 → 2.7.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/CHANGELOG.md +24 -0
package/dist/es/index.js +92 -162
package/dist/index.js +285 -374
package/package.json +6 -6
package/src/components/__docs__/action-menu.argtypes.js +44 -0
package/src/components/__docs__/action-menu.stories.js +435 -0
package/src/components/__docs__/base-select.argtypes.js +54 -0
package/src/components/__docs__/multi-select.stories.js +509 -0
package/src/components/__docs__/single-select.accessibility.stories.mdx +59 -0
package/src/components/__docs__/single-select.argtypes.js +54 -0
package/src/components/__docs__/single-select.stories.js +464 -0
package/src/components/__tests__/dropdown-core-virtualized.test.js +0 -15
package/src/components/__tests__/dropdown-core.test.js +114 -208
package/src/components/__tests__/multi-select.test.js +1 -3
package/src/components/__tests__/single-select.test.js +15 -47
package/src/components/action-menu.js +11 -0
package/src/components/dropdown-core-virtualized.js +0 -5
package/src/components/dropdown-core.js +140 -126
package/src/components/multi-select.js +17 -33
package/src/components/single-select.js +15 -30
package/src/util/__tests__/dropdown-menu-styles.test.js +0 -26
package/src/util/constants.js +0 -11
package/src/util/dropdown-menu-styles.js +0 -5
package/src/util/types.js +2 -5
package/src/components/__tests__/search-text-input.test.js +0 -212
package/src/components/action-menu.stories.js +0 -48
package/src/components/multi-select.stories.js +0 -124
package/src/components/search-text-input.js +0 -115
package/src/components/single-select.stories.js +0 -247

package/dist/index.js CHANGED Viewed

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 35);
+/******/ 	return __webpack_require__(__webpack_require__.s = 34);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -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";
@@ -336,21 +258,21 @@ 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__(24);
+/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(23);
 /* 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,19 +426,19 @@ 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 _check_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(25);
-/* harmony import */ var _checkbox_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(26);
+/* 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);
 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,25 @@ 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 _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 _khanacademy_wonder_blocks_search_field__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(26);
+/* 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 _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);
 // A menu that consists of action items
@@ -851,6 +774,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,
@@ -873,7 +798,7 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       const keyCode = event.which || event.keyCode; // 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 +809,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 +822,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 +833,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 +853,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 +864,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) {
@@ -982,13 +907,23 @@ 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
       }
     };
@@ -1057,29 +992,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
@@ -1128,31 +1054,50 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   }
   focusCurrentItem() {
-    const fousedItemRef = this.state.itemRefs[this.focusedIndex];
+    const focusedItemRef = this.state.itemRefs[this.focusedIndex];
-    if (fousedItemRef) {
+    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;
       }
     }
   }
+  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 +1108,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 +1151,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 +1191,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 +1207,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 +1234,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 +1256,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 +1288,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_14__[/* 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_14__[/* generateDropdownMenuStyles */ "a"])(minDropdownWidth, maxDropdownHeight)]
+    }, listRenderer), this.maybeRenderNoResults());
   }
   renderDropdown() {
@@ -1410,7 +1330,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,8 +1360,10 @@ 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
 };
@@ -1455,13 +1377,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 +1395,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 +1413,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 +1424,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 +1444,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 +1470,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 +1491,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,13 +1720,13 @@ const _generateStyles = (light, placeholder) => {
 };
 /***/ }),
-/* 20 */
+/* 19 */
 /***/ (function(module, exports) {
 module.exports = require("react-window");
 /***/ }),
-/* 21 */
+/* 20 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 "use strict";
@@ -1811,11 +1737,11 @@ 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 _action_menu_opener_core_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(33);
+/* 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__(32);
 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 +1755,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) {
@@ -2014,7 +1951,7 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
 });
 /***/ }),
-/* 22 */
+/* 21 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 "use strict";
@@ -2023,11 +1960,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 +1973,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 +1980,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 +2125,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 +2187,12 @@ 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",
       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 +2202,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 : ""
     });
@@ -2290,7 +2216,7 @@ SingleSelect.defaultProps = {
 };
 /***/ }),
-/* 23 */
+/* 22 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 "use strict";
@@ -2299,13 +2225,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 +2242,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 +2249,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 +2350,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 +2416,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 +2450,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 +2497,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 +2545,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 +2573,8 @@ class MultiSelect extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       searchText
     } = this.state;
     const {
+      clearSearch,
+      filter,
       noResults,
       someSelected
     } = this.state.labels;
@@ -2672,8 +2585,9 @@ 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,
@@ -2684,6 +2598,8 @@ class MultiSelect extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       onSearchTextChanged: isFilterable ? this.handleSearchTextChanged : null,
       searchText: isFilterable ? searchText : "",
       labels: {
+        clearSearch,
+        filter,
         noResults,
         someSelected
       }
@@ -2700,13 +2616,13 @@ MultiSelect.defaultProps = {
 };
 /***/ }),
-/* 24 */
+/* 23 */
 /***/ (function(module, exports) {
 module.exports = require("react-router-dom");
 /***/ }),
-/* 25 */
+/* 24 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 "use strict";
@@ -2715,9 +2631,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__);
@@ -2763,7 +2679,7 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
 });
 /***/ }),
-/* 26 */
+/* 25 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 "use strict";
@@ -2772,11 +2688,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__);
@@ -2855,6 +2771,12 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
   }
 });
+/***/ }),
+/* 26 */
+/***/ (function(module, exports) {
+module.exports = require("@khanacademy/wonder-blocks-search-field");
 /***/ }),
 /* 27 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -2864,16 +2786,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 _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 +2815,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 +2881,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 +2911,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, {
@@ -3109,12 +3026,6 @@ class DropdownVirtualizedItem extends react__WEBPACK_IMPORTED_MODULE_0__["Compon
 /***/ }),
 /* 29 */
-/***/ (function(module, exports) {
-module.exports = require("@khanacademy/wonder-blocks-search-field");
-/***/ }),
-/* 30 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 "use strict";
@@ -3123,9 +3034,9 @@ module.exports = require("@khanacademy/wonder-blocks-search-field");
 /* 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__(31);
+/* harmony import */ var react_popper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(30);
 /* 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__(32);
+/* 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___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_modal__WEBPACK_IMPORTED_MODULE_3__);
@@ -3190,19 +3101,19 @@ function DropdownPopper({
 }
 /***/ }),
-/* 31 */
+/* 30 */
 /***/ (function(module, exports) {
 module.exports = require("react-popper");
 /***/ }),
-/* 32 */
+/* 31 */
 /***/ (function(module, exports) {
 module.exports = require("@khanacademy/wonder-blocks-modal");
 /***/ }),
-/* 33 */
+/* 32 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 "use strict";
@@ -3211,19 +3122,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__ = __webpack_require__(33);
 /* 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); }
@@ -3377,33 +3288,33 @@ const _generateStyles = color => {
 };
 /***/ }),
-/* 34 */
+/* 33 */
 /***/ (function(module, exports) {
 module.exports = require("@khanacademy/wonder-blocks-layout");
 /***/ }),
-/* 35 */
+/* 34 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 "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);
 /* 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__(21);
+/* harmony import */ var _components_action_menu_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(20);
 /* 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__(22);
+/* harmony import */ var _components_single_select_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(21);
 /* 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__(23);
+/* harmony import */ var _components_multi_select_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(22);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MultiSelect", function() { return _components_multi_select_js__WEBPACK_IMPORTED_MODULE_5__["a"]; });