@khanacademy/wonder-blocks-dropdown 2.6.8 → 2.7.0

package/dist/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 34);
+/******/ 	return __webpack_require__(__webpack_require__.s = 35);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -93,23 +93,18 @@ 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__, "f", function() { return keyCodes; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "h", function() { return selectDropdownStyle; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return filterableDropdownStyle; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "g", function() { return searchInputStyle; });
+/* 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__, "a", function() { return DROPDOWN_ITEM_HEIGHT; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return SEPARATOR_ITEM_HEIGHT; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return SEARCH_ITEM_HEIGHT; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return defaultLabels; });
+/* 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 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__);
 
@@ -128,8 +123,7 @@ const selectDropdownStyle = {
 // Note that these can be overridden by the provided style if needed.
 
 const filterableDropdownStyle = {
-  minHeight: 100,
-  maxHeight: 384
+  minHeight: 100
 };
 const searchInputStyle = {
   margin: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.xSmall_8,
@@ -137,6 +131,13 @@ const searchInputStyle = {
 }; // The default item height
 
 const DROPDOWN_ITEM_HEIGHT = 40;
+/**
+ * Maximum visible items inside the dropdown list. Based on the defined height
+ * that we're using, this is the maximum number of items that can fit into the
+ * visible portion of the dropdown's listbox.
+ */
+
+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
 
@@ -151,6 +152,12 @@ const defaultLabels = {
   allSelected: "All items"
 };
 
+/***/ }),
+/* 2 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-color");
+
 /***/ }),
 /* 3 */
 /***/ (function(module, exports) {
@@ -171,12 +178,6 @@ module.exports = require("@khanacademy/wonder-blocks-core");
 
 /***/ }),
 /* 6 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-icon");
-
-/***/ }),
-/* 7 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -185,7 +186,7 @@ module.exports = require("@khanacademy/wonder-blocks-icon");
 /* 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__(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___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__);
@@ -231,209 +232,73 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
 });
 
 /***/ }),
-/* 8 */
+/* 7 */
 /***/ (function(module, exports) {
 
 module.exports = require("react-dom");
 
 /***/ }),
-/* 9 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-typography");
-
-/***/ }),
-/* 10 */
+/* 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 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__(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_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_button__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(28);
-/* harmony import */ var _khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(6);
-/* 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_color__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(1);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__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 _util_constants_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(2);
+/* 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"] {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      focused: false,
-      labels: {
-        clearSearch: _util_constants_js__WEBPACK_IMPORTED_MODULE_8__[/* defaultLabels */ "d"].clearSearch,
-        filter: _util_constants_js__WEBPACK_IMPORTED_MODULE_8__[/* defaultLabels */ "d"].filter,
-        ...this.props.labels
-      }
-    };
-
-    this.handleChange = e => {
-      e.preventDefault();
-      this.props.onChange(e.target.value);
-    };
-
-    this.handleDismiss = () => {
-      const {
-        onClick,
-        onChange
-      } = this.props; // Empty the search text and focus the SearchTextInput
-
-      onChange("");
-
-      if (onClick) {
-        onClick();
-      }
-    };
-
-    this.handleBlur = e => {
-      this.setState({
-        focused: false
-      });
-    };
-
-    this.handleFocus = e => {
-      this.setState({
-        focused: true
-      });
-    };
-  }
-
   static isClassOf(instance) {
     return instance && instance.type && instance.type.__IS_SEARCH_TEXT_INPUT__;
   }
 
-  componentDidUpdate(prevProps) {
-    if (this.props.labels !== prevProps.labels) {
-      // eslint-disable-next-line react/no-did-update-set-state
-      this.setState({
-        labels: { ...this.state.labels,
-          ...this.props.labels
-        }
-      });
-    }
-  }
-
-  maybeRenderDismissIconButton() {
-    const {
-      searchText
-    } = this.props;
-    const {
-      clearSearch
-    } = this.state.labels;
-
-    if (searchText.length > 0) {
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_4___default.a, {
-        icon: _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5__["icons"].dismiss,
-        kind: "tertiary",
-        onClick: this.handleDismiss,
-        style: styles.dismissIcon,
-        "aria-label": clearSearch
-      });
-    }
-
-    return null;
-  }
-
   render() {
     const {
+      labels,
+      onChange,
       onClick,
       itemRef,
       searchText,
       style,
       testId
     } = this.props;
-    const {
-      filter
-    } = this.state.labels;
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
+    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,
-      style: [styles.inputContainer, this.state.focused && styles.focused, style]
-    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5___default.a, {
-      icon: _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5__["icons"].search,
-      size: "medium",
-      color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6___default.a.offBlack64,
-      style: styles.searchIcon,
-      "aria-hidden": "true"
-    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", {
-      type: "text",
-      onChange: this.handleChange,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
+      placeholder: labels.filter,
       ref: itemRef,
-      placeholder: filter,
-      value: searchText,
-      className: Object(aphrodite__WEBPACK_IMPORTED_MODULE_1__["css"])(styles.inputStyleReset, _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_2__["styles"].LabelMedium),
-      "data-test-id": testId
-    }), this.maybeRenderDismissIconButton());
+      style: style,
+      testId: testId,
+      value: searchText
+    });
   }
 
 }
 SearchTextInput.defaultProps = {
   labels: {
-    clearSearch: _util_constants_js__WEBPACK_IMPORTED_MODULE_8__[/* defaultLabels */ "d"].clearSearch,
-    filter: _util_constants_js__WEBPACK_IMPORTED_MODULE_8__[/* defaultLabels */ "d"].filter
+    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;
-const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
-  inputContainer: {
-    flexDirection: "row",
-    border: `1px solid ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6___default.a.offBlack16}`,
-    borderRadius: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7___default.a.xxxSmall_4,
-    alignItems: "center",
-    // The height of the text input is 40 in design spec and we need to
-    // specify the height as well as minHeight to make sure the search text
-    // input takes enough height to render. (otherwise, it will get
-    // squashed)
-    height: _util_constants_js__WEBPACK_IMPORTED_MODULE_8__[/* DROPDOWN_ITEM_HEIGHT */ "a"],
-    minHeight: _util_constants_js__WEBPACK_IMPORTED_MODULE_8__[/* DROPDOWN_ITEM_HEIGHT */ "a"]
-  },
-  focused: {
-    border: `1px solid ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6___default.a.blue}`
-  },
-  searchIcon: {
-    marginLeft: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7___default.a.xSmall_8,
-    marginRight: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7___default.a.xSmall_8
-  },
-  dismissIcon: {
-    margin: 0,
-    ":hover": {
-      border: "none"
-    }
-  },
-  inputStyleReset: {
-    display: "flex",
-    flex: 1,
-    background: "inherit",
-    border: "none",
-    outline: "none",
-    "::placeholder": {
-      color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6___default.a.offBlack64
-    },
-    width: "100%",
-    color: "inherit"
-  }
-});
+
+/***/ }),
+/* 9 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-icon");
+
+/***/ }),
+/* 10 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-typography");
 
 /***/ }),
 /* 11 */
@@ -451,21 +316,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__(23);
+/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(24);
 /* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_router_dom__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(16);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(17);
 /* 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__(1);
+/* 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___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__(9);
+/* 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___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___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__(2);
+/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(1);
 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); }
 
 
@@ -619,19 +484,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__(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___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__(9);
+/* 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___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___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_6__);
-/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(2);
-/* harmony import */ var _check_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(24);
-/* harmony import */ var _checkbox_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(25);
+/* harmony import */ var _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);
 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); }
 
 
@@ -852,27 +717,28 @@ DropdownOpener.defaultProps = {
 "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 react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
+/* 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 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__(19);
+/* harmony import */ var react_window__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(20);
 /* 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__(1);
+/* 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___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__(9);
+/* 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__(17);
+/* 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__(26);
-/* harmony import */ var _separator_item_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(7);
-/* harmony import */ var _search_text_input_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(10);
-/* 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 _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);
 // A menu that consists of action items
 
 
@@ -888,6 +754,7 @@ DropdownOpener.defaultProps = {
 
 
 
+
 /**
  * The number of options to apply the virtualized list to.
  *
@@ -985,7 +852,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 */ "f"].down) {
+        if (keyCode === _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "g"].down) {
           event.preventDefault();
           onOpenChanged(true);
           return;
@@ -996,7 +863,7 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 
 
       switch (keyCode) {
-        case _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "f"].tab:
+        case _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "g"].tab:
           // When we show SearchTextInput 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
@@ -1009,7 +876,7 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
           onOpenChanged(false);
           return;
 
-        case _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "f"].space:
+        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) {
@@ -1020,12 +887,12 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
           event.preventDefault();
           return;
 
-        case _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "f"].up:
+        case _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "g"].up:
           event.preventDefault();
           this.focusPreviousItem();
           return;
 
-        case _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "f"].down:
+        case _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "g"].down:
           event.preventDefault();
           this.focusNextItem();
           return;
@@ -1040,7 +907,7 @@ 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 */ "f"].space:
+        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) {
@@ -1051,7 +918,7 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
           event.preventDefault();
           return;
 
-        case _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "f"].escape:
+        case _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "g"].escape:
           // Close only the dropdown, not other elements that are
           // listening for an escape press
           if (open) {
@@ -1100,7 +967,7 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       itemRefs: [],
       sameItemsFocusable: false,
       labels: {
-        noResults: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* defaultLabels */ "d"].noResults,
+        noResults: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* defaultLabels */ "e"].noResults,
         ...props.labels
       }
     };
@@ -1386,7 +1253,7 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
             this.focusCurrentItem();
           },
           // apply custom styles
-          style: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* searchInputStyle */ "g"]
+          style: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* searchInputStyle */ "h"]
         });
       } // Render OptionItem and/or ActionItem elements.
 
@@ -1430,7 +1297,7 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
             this.focusCurrentItem();
           },
           populatedProps: {
-            style: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* searchInputStyle */ "g"],
+            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
           }
@@ -1469,15 +1336,16 @@ 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;
+    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);
     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,
       role: this.props.role,
-      style: [styles.dropdown, light && styles.light, isReferenceHidden && styles.hidden, {
-        minWidth: minDropdownWidth
-      }, dropdownStyle]
+      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());
   }
 
@@ -1521,7 +1389,7 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 DropdownCore.defaultProps = {
   alignment: "left",
   labels: {
-    noResults: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* defaultLabels */ "d"].noResults
+    noResults: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* defaultLabels */ "e"].noResults
   },
   light: false
 };
@@ -1556,18 +1424,77 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
 
 /***/ }),
 /* 16 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return getDropdownMenuHeight; });
+/* 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 _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);
+
+
+
+
+
+/**
+ * The list height that is automatically calculated depending on the
+ * component's type of each item (e.g. Separator, Option, Search, etc)
+ *
+ * @param {Array<DropdownItem>} items - The list of items to calculate the height
+ * @param {number} initialHeight - The initial height of the list
+ *
+ * @returns {number} The list height
+ */
+function getDropdownMenuHeight(items, initialHeight = 0) {
+  // calculate using the first 10 items on the array as we want to display
+  // 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"];
+    } else {
+      return sum + _constants_js__WEBPACK_IMPORTED_MODULE_1__[/* DROPDOWN_ITEM_HEIGHT */ "a"];
+    }
+  }, initialHeight);
+}
+/**
+ * Wraps the dynamic styles in an Aphrodite style sheet so we can properly apply
+ * the styles to a merged stylesheet (instead of inlining the styles).
+ *
+ * @param {StyleType} customStyles - The custom styles to apply to the dropdown
+ * menu.
+ * @returns The Aphrodite stylesheet for the dropdown menu.
+ */
+
+function generateDropdownMenuStyles(minWidth, maxHeight) {
+  const styles = aphrodite__WEBPACK_IMPORTED_MODULE_0__["StyleSheet"].create({
+    dropdownMenu: {
+      minWidth,
+      maxHeight
+    }
+  });
+  return styles.dropdownMenu;
+}
+
+/***/ }),
+/* 17 */
 /***/ (function(module, exports) {
 
 module.exports = require("react-router");
 
 /***/ }),
-/* 17 */
+/* 18 */
 /***/ (function(module, exports) {
 
 module.exports = require("@khanacademy/wonder-blocks-timing");
 
 /***/ }),
-/* 18 */
+/* 19 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1576,21 +1503,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__(16);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(17);
 /* 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__(1);
+/* 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___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___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__(6);
+/* 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___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__(9);
+/* 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___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__(2);
+/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(1);
 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); }
 
 
@@ -1805,20 +1732,20 @@ const _generateStyles = (light, placeholder) => {
 };
 
 /***/ }),
-/* 19 */
+/* 20 */
 /***/ (function(module, exports) {
 
 module.exports = require("react-window");
 
 /***/ }),
-/* 20 */
+/* 21 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ActionMenu; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* 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__(8);
+/* 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 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__);
@@ -1826,7 +1753,7 @@ module.exports = require("react-window");
 /* 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__(32);
+/* harmony import */ var _action_menu_opener_core_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(33);
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 
@@ -2025,20 +1952,20 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
 });
 
 /***/ }),
-/* 21 */
+/* 22 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return SingleSelect; });
 /* 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 react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
+/* 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__(18);
-/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(2);
-/* harmony import */ var _search_text_input_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(10);
+/* 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);
 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); }
 
 
@@ -2200,8 +2127,8 @@ class SingleSelect extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         onChange: this.handleSearchTextChanged,
         searchText: this.state.searchText,
         labels: {
-          clearSearch: _util_constants_js__WEBPACK_IMPORTED_MODULE_5__[/* defaultLabels */ "d"].clearSearch,
-          filter: _util_constants_js__WEBPACK_IMPORTED_MODULE_5__[/* defaultLabels */ "d"].filter
+          clearSearch: _util_constants_js__WEBPACK_IMPORTED_MODULE_5__[/* defaultLabels */ "e"].clearSearch,
+          filter: _util_constants_js__WEBPACK_IMPORTED_MODULE_5__[/* defaultLabels */ "e"].filter
         }
       }),
       focusable: true,
@@ -2278,7 +2205,7 @@ class SingleSelect extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     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 */ "e"], _util_constants_js__WEBPACK_IMPORTED_MODULE_5__[/* selectDropdownStyle */ "h"], dropdownStyle],
+      dropdownStyle: [isFilterable && _util_constants_js__WEBPACK_IMPORTED_MODULE_5__[/* filterableDropdownStyle */ "f"], _util_constants_js__WEBPACK_IMPORTED_MODULE_5__[/* selectDropdownStyle */ "i"], dropdownStyle],
       initialFocusedIndex: this.selectedIndex,
       items: items,
       light: light,
@@ -2301,22 +2228,22 @@ SingleSelect.defaultProps = {
 };
 
 /***/ }),
-/* 22 */
+/* 23 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return MultiSelect; });
 /* 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 react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
+/* 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__(10);
-/* harmony import */ var _select_opener_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(18);
-/* harmony import */ var _separator_item_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(7);
-/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(2);
+/* 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);
 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); }
 
 
@@ -2426,13 +2353,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 */ "d"],
+      labels: { ..._util_constants_js__WEBPACK_IMPORTED_MODULE_8__[/* defaultLabels */ "e"],
         ...props.labels
       },
       openerElement: null
     }; // merge custom labels with the default ones
 
-    this.labels = { ..._util_constants_js__WEBPACK_IMPORTED_MODULE_8__[/* defaultLabels */ "d"],
+    this.labels = { ..._util_constants_js__WEBPACK_IMPORTED_MODULE_8__[/* defaultLabels */ "e"],
       ...props.labels
     };
   }
@@ -2682,7 +2609,7 @@ 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 */ "e"], _util_constants_js__WEBPACK_IMPORTED_MODULE_8__[/* selectDropdownStyle */ "h"], dropdownStyle],
+      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),
       light: light,
       onOpenChanged: this.handleOpenChanged,
@@ -2709,13 +2636,13 @@ MultiSelect.defaultProps = {
 };
 
 /***/ }),
-/* 23 */
+/* 24 */
 /***/ (function(module, exports) {
 
 module.exports = require("react-router-dom");
 
 /***/ }),
-/* 24 */
+/* 25 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2724,9 +2651,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__(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___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__(6);
+/* 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___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_3__);
 
 
@@ -2772,7 +2699,7 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
 });
 
 /***/ }),
-/* 25 */
+/* 26 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2781,11 +2708,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__(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___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__(6);
+/* 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___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_4__);
 
 
@@ -2865,22 +2792,24 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
 });
 
 /***/ }),
-/* 26 */
+/* 27 */
 /***/ (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 react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
+/* 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__(19);
+/* harmony import */ var react_window__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(20);
 /* harmony import */ var react_window__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_window__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(17);
+/* harmony import */ var _khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(18);
 /* 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__(27);
-/* harmony import */ var _search_text_input_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(10);
-/* harmony import */ var _separator_item_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(7);
-/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(2);
+/* 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);
+
 
 
 
@@ -2890,25 +2819,13 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
 
 
 
-/**
- * Maximum visible items inside the dropdown list.
- * Based on the defined height that we're using, this is the maximium
- * number of items that can fit into the visible porition of the
- * dropdowns list box.
- */
-const MAX_VISIBLE_ITEMS = 9;
 /**
  * A react-window's List wrapper that instantiates the virtualized list and
  * dynamically calculates the item height depending on the type
  */
-
 class DropdownCoreVirtualized extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      height: this.getHeight(),
-      width: this.props.width
-    };
+  constructor(props) {
+    super(props);
 
     this.getItemSize = index => {
       // get the current item in the list
@@ -2916,15 +2833,20 @@ class DropdownCoreVirtualized extends react__WEBPACK_IMPORTED_MODULE_0__["Compon
 
       if (_separator_item_js__WEBPACK_IMPORTED_MODULE_6__[/* 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 */ "c"];
+        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 */ "b"];
+        return _util_constants_js__WEBPACK_IMPORTED_MODULE_7__[/* SEARCH_ITEM_HEIGHT */ "c"];
       } else {
         // default dropdown item height
         return _util_constants_js__WEBPACK_IMPORTED_MODULE_7__[/* DROPDOWN_ITEM_HEIGHT */ "a"];
       }
     };
+
+    this.state = {
+      height: Object(_util_dropdown_menu_styles_js__WEBPACK_IMPORTED_MODULE_8__[/* getDropdownMenuHeight */ "b"])(props.data),
+      width: props.width
+    };
   }
 
   componentDidMount() {
@@ -2978,31 +2900,11 @@ class DropdownCoreVirtualized extends react__WEBPACK_IMPORTED_MODULE_0__["Compon
 
   setHeight() {
     // calculate dropdown's height depending on the type of items
-    const height = this.getHeight();
+    const height = Object(_util_dropdown_menu_styles_js__WEBPACK_IMPORTED_MODULE_8__[/* getDropdownMenuHeight */ "b"])(this.props.data);
     this.setState({
       height
     });
   }
-  /**
-   * The list height that is automatically calculated depending on the
-   * component's type of each item (e.g. Separator, Option, Search, etc)
-   */
-
-
-  getHeight() {
-    // calculate using the first 10 items on the array as we want to display
-    // this number of elements in the visible area
-    return this.props.data.slice(0, MAX_VISIBLE_ITEMS).reduce((sum, item) => {
-      if (_separator_item_js__WEBPACK_IMPORTED_MODULE_6__[/* default */ "a"].isClassOf(item.component)) {
-        return sum + _util_constants_js__WEBPACK_IMPORTED_MODULE_7__[/* SEPARATOR_ITEM_HEIGHT */ "c"];
-      } else if (_search_text_input_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].isClassOf(item.component)) {
-        // search text input height
-        return sum + _util_constants_js__WEBPACK_IMPORTED_MODULE_7__[/* SEARCH_ITEM_HEIGHT */ "b"];
-      } else {
-        return sum + _util_constants_js__WEBPACK_IMPORTED_MODULE_7__[/* DROPDOWN_ITEM_HEIGHT */ "a"];
-      }
-    }, 0);
-  }
   /**
    * Calculates item height
    */
@@ -3028,7 +2930,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, MAX_VISIBLE_ITEMS); // Append longest items to calculate the container width.
+    .slice(0, _util_constants_js__WEBPACK_IMPORTED_MODULE_7__[/* 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, {
@@ -3088,13 +2990,13 @@ 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));
 
 /***/ }),
-/* 27 */
+/* 28 */
 /***/ (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 _separator_item_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7);
+/* harmony import */ var _separator_item_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6);
 
 
 
@@ -3142,24 +3044,24 @@ class DropdownVirtualizedItem extends react__WEBPACK_IMPORTED_MODULE_0__["Compon
 /* harmony default export */ __webpack_exports__["a"] = (DropdownVirtualizedItem);
 
 /***/ }),
-/* 28 */
+/* 29 */
 /***/ (function(module, exports) {
 
-module.exports = require("@khanacademy/wonder-blocks-icon-button");
+module.exports = require("@khanacademy/wonder-blocks-search-field");
 
 /***/ }),
-/* 29 */
+/* 30 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return DropdownPopper; });
 /* 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 react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7);
 /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var react_popper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(30);
+/* harmony import */ var react_popper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(31);
 /* harmony import */ var react_popper__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_popper__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _khanacademy_wonder_blocks_modal__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(31);
+/* harmony import */ var _khanacademy_wonder_blocks_modal__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(32);
 /* harmony import */ var _khanacademy_wonder_blocks_modal__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_modal__WEBPACK_IMPORTED_MODULE_3__);
 
 
@@ -3224,19 +3126,19 @@ function DropdownPopper({
 }
 
 /***/ }),
-/* 30 */
+/* 31 */
 /***/ (function(module, exports) {
 
 module.exports = require("react-popper");
 
 /***/ }),
-/* 31 */
+/* 32 */
 /***/ (function(module, exports) {
 
 module.exports = require("@khanacademy/wonder-blocks-modal");
 
 /***/ }),
-/* 32 */
+/* 33 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3245,19 +3147,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__(9);
+/* 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___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__(1);
+/* 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___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__(6);
+/* 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___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5__);
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(3);
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6__);
-/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(33);
+/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(34);
 /* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_7__);
-/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(2);
+/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(1);
 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); }
 
 
@@ -3411,13 +3313,13 @@ const _generateStyles = color => {
 };
 
 /***/ }),
-/* 33 */
+/* 34 */
 /***/ (function(module, exports) {
 
 module.exports = require("@khanacademy/wonder-blocks-layout");
 
 /***/ }),
-/* 34 */
+/* 35 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3428,16 +3330,16 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _components_option_item_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(13);
 /* 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__(7);
+/* harmony import */ var _components_separator_item_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SeparatorItem", function() { return _components_separator_item_js__WEBPACK_IMPORTED_MODULE_2__["a"]; });
 
-/* harmony import */ var _components_action_menu_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(20);
+/* harmony import */ var _components_action_menu_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(21);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ActionMenu", function() { return _components_action_menu_js__WEBPACK_IMPORTED_MODULE_3__["a"]; });
 
-/* harmony import */ var _components_single_select_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(21);
+/* harmony import */ var _components_single_select_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(22);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SingleSelect", function() { return _components_single_select_js__WEBPACK_IMPORTED_MODULE_4__["a"]; });
 
-/* harmony import */ var _components_multi_select_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(22);
+/* harmony import */ var _components_multi_select_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(23);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MultiSelect", function() { return _components_multi_select_js__WEBPACK_IMPORTED_MODULE_5__["a"]; });