@khanacademy/wonder-blocks-dropdown 2.6.7 → 2.6.8

package/dist/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 33);
+/******/ 	return __webpack_require__(__webpack_require__.s = 34);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -177,12 +177,6 @@ module.exports = require("@khanacademy/wonder-blocks-icon");
 
 /***/ }),
 /* 7 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-typography");
-
-/***/ }),
-/* 8 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -237,19 +231,19 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
 });
 
 /***/ }),
-/* 9 */
+/* 8 */
 /***/ (function(module, exports) {
 
 module.exports = require("react-dom");
 
 /***/ }),
-/* 10 */
+/* 9 */
 /***/ (function(module, exports) {
 
-module.exports = require("@khanacademy/wonder-blocks-clickable");
+module.exports = require("@khanacademy/wonder-blocks-typography");
 
 /***/ }),
-/* 11 */
+/* 10 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -258,11 +252,11 @@ 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 _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
+/* 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__(30);
+/* 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__);
@@ -441,6 +435,12 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
   }
 });
 
+/***/ }),
+/* 11 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-clickable");
+
 /***/ }),
 /* 12 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -459,9 +459,9 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
 /* 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__(7);
+/* 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__(10);
+/* 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__);
@@ -623,11 +623,11 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
 /* 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__(7);
+/* 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__(10);
+/* 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);
@@ -791,7 +791,7 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
 "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__(10);
+/* 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___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -852,30 +852,27 @@ 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__(9);
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
 /* 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__(26);
-/* harmony import */ var react_popper__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_popper__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var react_window__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(19);
-/* harmony import */ var react_window__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_window__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(1);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var _khanacademy_wonder_blocks_modal__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(27);
-/* harmony import */ var _khanacademy_wonder_blocks_modal__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_modal__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_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 _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(7);
-/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_9__);
-/* harmony import */ var _khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(17);
-/* harmony import */ var _khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_10__);
-/* harmony import */ var _dropdown_core_virtualized_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(28);
-/* harmony import */ var _separator_item_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(8);
-/* harmony import */ var _search_text_input_js__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(11);
-/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(2);
+/* 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___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___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___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___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);
 // A menu that consists of action items
 
 
@@ -891,7 +888,18 @@ DropdownOpener.defaultProps = {
 
 
 
+/**
+ * The number of options to apply the virtualized list to.
+ *
+ * NOTE: The threshold is defined taking into account performance
+ * implications (e.g. process input events for users should not be longer
+ * than 100ms).
+ * @see https://web.dev/rail/?utm_source=devtools#goals-and-guidelines
+ *
+ * TODO(juan, WB-1263): Improve performance by refactoring this component.
+ */
 
+const VIRTUALIZE_THRESHOLD = 125;
 
 /**
  * A core dropdown component that takes an opener and children to display as
@@ -977,7 +985,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_14__[/* keyCodes */ "f"].down) {
+        if (keyCode === _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "f"].down) {
           event.preventDefault();
           onOpenChanged(true);
           return;
@@ -988,7 +996,7 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 
 
       switch (keyCode) {
-        case _util_constants_js__WEBPACK_IMPORTED_MODULE_14__[/* keyCodes */ "f"].tab:
+        case _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "f"].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
@@ -1001,7 +1009,7 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
           onOpenChanged(false);
           return;
 
-        case _util_constants_js__WEBPACK_IMPORTED_MODULE_14__[/* keyCodes */ "f"].space:
+        case _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "f"].space:
           // When we display SearchTextInput and the focus is on it,
           // we should let the user type space.
           if (this.hasSearchBox() && this.focusedIndex === 0) {
@@ -1012,12 +1020,12 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
           event.preventDefault();
           return;
 
-        case _util_constants_js__WEBPACK_IMPORTED_MODULE_14__[/* keyCodes */ "f"].up:
+        case _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "f"].up:
           event.preventDefault();
           this.focusPreviousItem();
           return;
 
-        case _util_constants_js__WEBPACK_IMPORTED_MODULE_14__[/* keyCodes */ "f"].down:
+        case _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "f"].down:
           event.preventDefault();
           this.focusNextItem();
           return;
@@ -1032,7 +1040,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_14__[/* keyCodes */ "f"].space:
+        case _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* keyCodes */ "f"].space:
           // When we display SearchTextInput and the focus is on it,
           // we should let the user type space.
           if (this.hasSearchBox() && this.focusedIndex === 0) {
@@ -1043,7 +1051,7 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
           event.preventDefault();
           return;
 
-        case _util_constants_js__WEBPACK_IMPORTED_MODULE_14__[/* keyCodes */ "f"].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) {
@@ -1074,17 +1082,29 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       }
     };
 
+    this.handleItemClick = (focusIndex, item) => {
+      this.handleClickFocus(focusIndex);
+
+      if (item.component.props.onClick) {
+        item.component.props.onClick();
+      }
+
+      if (item.populatedProps.onClick) {
+        item.populatedProps.onClick();
+      }
+    };
+
     this.resetFocusedIndex();
     this.state = {
       prevItems: this.props.items,
       itemRefs: [],
       sameItemsFocusable: false,
       labels: {
-        noResults: _util_constants_js__WEBPACK_IMPORTED_MODULE_14__[/* defaultLabels */ "d"].noResults,
+        noResults: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* defaultLabels */ "d"].noResults,
         ...props.labels
       }
     };
-    this.listRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createRef"]();
+    this.virtualizedListRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createRef"]();
   }
 
   componentDidMount() {
@@ -1210,8 +1230,13 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   }
 
   scheduleToFocusCurrentItem() {
-    // wait for windowed items to be recalculated
-    this.props.schedule.animationFrame(() => this.focusCurrentItem());
+    if (this.shouldVirtualizeList()) {
+      // wait for windowed items to be recalculated
+      this.props.schedule.animationFrame(() => this.focusCurrentItem());
+    } else {
+      // immediately focus the current item if we're not virtualizing
+      this.focusCurrentItem();
+    }
   }
 
   focusCurrentItem() {
@@ -1219,12 +1244,12 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 
     if (fousedItemRef) {
       // force react-window to scroll to ensure the focused item is visible
-      if (this.listRef.current) {
+      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.listRef.current.scrollToItem(fousedItemRef.originalIndex);
+        this.virtualizedListRef.current.scrollToItem(fousedItemRef.originalIndex);
       }
 
       const node = react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.findDOMNode(fousedItemRef.ref.current);
@@ -1300,7 +1325,7 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     const numResults = items.length - includeSearchCount;
 
     if (numResults === 0) {
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_9__["LabelMedium"], {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_7__["LabelMedium"], {
         style: styles.noResult,
         testId: "dropdown-core-no-results"
       }, noResults);
@@ -1308,23 +1333,96 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 
     return null;
   }
+  /**
+   * Handles click events for each item in the dropdown.
+   */
+
+
+  /**
+   * Determines which rendering strategy we are going to apply to the options
+   * list.
+   */
+  shouldVirtualizeList() {
+    // Verify if the list is long enough to be virtualized (passes the
+    // threshold).
+    return this.props.items.length > VIRTUALIZE_THRESHOLD;
+  }
+  /**
+   * Renders the non-virtualized list of items.
+   */
+
+
+  renderList() {
+    let focusCounter = 0;
+    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)) {
+        return item.component;
+      }
+
+      const {
+        component,
+        focusable,
+        populatedProps
+      } = item;
+
+      if (focusable) {
+        focusCounter += 1;
+      }
+
+      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 */ "g"]
+        });
+      } // Render OptionItem and/or ActionItem elements.
+
+
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["cloneElement"](component, { ...populatedProps,
+        key: index,
+        onClick: () => {
+          this.handleItemClick(focusIndex, item);
+        },
+        // Only pass the ref if the item is focusable.
+        ref: focusable ? currentRef : null,
+        role: itemRole
+      });
+    });
+  }
   /**
    * Process the items and wrap them into an array that react-window can
-   * interpret
+   * interpret.
+   *
+   * NOTE: The main difference with the collection in renderList() is that we
+   * massage the items to be able to clone them later in
+   * DropdownVirtualizedItem, where as renderList() clones the items directly.
    */
 
 
-  parseItemsList() {
+  parseVirtualizedItems() {
     let focusCounter = 0;
     const itemRole = this.getItemRole();
     return this.props.items.map((item, index) => {
-      if (!_separator_item_js__WEBPACK_IMPORTED_MODULE_12__[/* default */ "a"].isClassOf(item.component) && item.focusable) {
+      if (!_separator_item_js__WEBPACK_IMPORTED_MODULE_10__[/* default */ "a"].isClassOf(item.component) && item.focusable) {
         focusCounter += 1;
       }
 
       const focusIndex = focusCounter - 1;
 
-      if (_search_text_input_js__WEBPACK_IMPORTED_MODULE_13__[/* default */ "a"].isClassOf(item.component)) {
+      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: () => {
@@ -1332,7 +1430,7 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
             this.focusCurrentItem();
           },
           populatedProps: {
-            style: _util_constants_js__WEBPACK_IMPORTED_MODULE_14__[/* searchInputStyle */ "g"],
+            style: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* searchInputStyle */ "g"],
             // pass the current ref down to the input element
             itemRef: this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null
           }
@@ -1343,21 +1441,26 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         role: itemRole,
         ref: item.focusable ? this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null : null,
         onClick: () => {
-          this.handleClickFocus(focusIndex);
-
-          if (item.component.props.onClick) {
-            item.component.props.onClick();
-          }
-
-          if (item.populatedProps.onClick) {
-            item.populatedProps.onClick();
-          }
+          this.handleItemClick(focusIndex, item);
         }
       };
     });
   }
+  /**
+   * Render the items using a virtualized list
+   */
+
+
+  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"], {
+      data: virtualizedItems,
+      listRef: this.virtualizedListRef
+    });
+  }
 
-  renderItems(isReferenceHidden) {
+  renderDropdownMenu(listRenderer, isReferenceHidden) {
     const {
       dropdownStyle,
       light,
@@ -1366,10 +1469,8 @@ 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; // preprocess items data to pass it to the renderer
-
-    const itemsList = this.parseItemsList();
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_8__["View"] // Stop propagation to prevent the mouseup listener on the
+    const minDropdownWidth = openerStyle ? openerStyle.getPropertyValue("width") : 0;
+    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,
@@ -1377,68 +1478,27 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       style: [styles.dropdown, light && styles.light, isReferenceHidden && styles.hidden, {
         minWidth: minDropdownWidth
       }, dropdownStyle]
-    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_dropdown_core_virtualized_js__WEBPACK_IMPORTED_MODULE_11__[/* default */ "a"], {
-      data: itemsList,
-      listRef: this.listRef
-    }), this.maybeRenderNoResults());
+    }, listRenderer, this.maybeRenderNoResults());
   }
 
   renderDropdown() {
     const {
       alignment,
       openerElement
-    } = this.props; // If we are in a modal, we find where we should be portalling the menu
-    // by using the helper function from the modal package on the opener
-    // element.
-    // If we are not in a modal, we use body as the location to portal to.
-
-    const modalHost = Object(_khanacademy_wonder_blocks_modal__WEBPACK_IMPORTED_MODULE_6__["maybeGetPortalMountedModalHostElement"])(openerElement) || document.querySelector("body");
-
-    if (modalHost) {
-      return /*#__PURE__*/react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.createPortal( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_popper__WEBPACK_IMPORTED_MODULE_2__["Popper"], {
-        innerRef: node => {
-          if (node) {
-            this.popperElement = node;
-          }
-        },
-        referenceElement: this.props.openerElement,
-        strategy: "fixed",
-        placement: alignment === "left" ? "bottom-start" : "bottom-end",
-        modifiers: [{
-          name: "preventOverflow",
-          options: {
-            rootBoundary: "viewport",
-            // Allows to overlap the popper in case there's
-            // no more vertical room in the viewport.
-            altAxis: true,
-            // Also needed to make sure the Popper will be
-            // displayed correctly in different contexts
-            // (e.g inside a Modal)
-            tether: false
-          }
-        }]
-      }, ({
-        placement,
-        ref,
-        style,
-        hasPopperEscaped,
-        isReferenceHidden
-      }) => {
-        // For some reason react-popper includes `pointerEvents: "none"`
-        // in the `style` it passes to us, but only when running the tests.
-        const {
-          pointerEvents: _,
-          ...restStyle
-        } = style;
-        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-          ref: ref,
-          style: restStyle,
-          "data-placement": placement
-        }, this.renderItems(hasPopperEscaped || isReferenceHidden));
-      }), modalHost);
-    }
-
-    return null;
+    } = this.props; // Preprocess the items that are used inside the Popper instance. By
+    // doing this, we optimize the list to be processed only one time
+    // instead of every time popper changes.
+    // NOTE: This improves the performance impact of the dropdown by
+    // reducing the execution time up to 2.5X.
+
+    const listRenderer = this.shouldVirtualizeList() ? this.renderVirtualizedList() : this.renderList();
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_dropdown_popper_js__WEBPACK_IMPORTED_MODULE_13__[/* default */ "a"], {
+      alignment: alignment,
+      onPopperElement: popperElement => {
+        this.popperElement = popperElement;
+      },
+      referenceElement: openerElement
+    }, isReferenceHidden => this.renderDropdownMenu(listRenderer, isReferenceHidden));
   }
 
   render() {
@@ -1448,7 +1508,7 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       style,
       className
     } = this.props;
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_8__["View"], {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__["View"], {
       onKeyDown: this.handleKeyDown,
       onKeyUp: this.handleKeyUp,
       style: [styles.menuWrapper, style],
@@ -1461,21 +1521,21 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 DropdownCore.defaultProps = {
   alignment: "left",
   labels: {
-    noResults: _util_constants_js__WEBPACK_IMPORTED_MODULE_14__[/* defaultLabels */ "d"].noResults
+    noResults: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* defaultLabels */ "d"].noResults
   },
   light: false
 };
-const styles = aphrodite__WEBPACK_IMPORTED_MODULE_3__["StyleSheet"].create({
+const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
   menuWrapper: {
     width: "fit-content"
   },
   dropdown: {
-    backgroundColor: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default.a.white,
+    backgroundColor: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.white,
     borderRadius: 4,
-    paddingTop: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7___default.a.xxxSmall_4,
-    paddingBottom: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7___default.a.xxxSmall_4,
-    border: `solid 1px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default.a.offBlack16}`,
-    boxShadow: `0px 8px 8px 0px ${Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["fade"])(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default.a.offBlack, 0.1)}`,
+    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"
   },
   light: {
@@ -1487,12 +1547,12 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_3__["StyleSheet"].create({
     visibility: "hidden"
   },
   noResult: {
-    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default.a.offBlack64,
+    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.offBlack64,
     alignSelf: "center",
-    marginTop: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7___default.a.xxSmall_6
+    marginTop: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.xxSmall_6
   }
 });
-/* harmony default export */ __webpack_exports__["a"] = (Object(_khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_10__["withActionScheduler"])(DropdownCore));
+/* harmony default export */ __webpack_exports__["a"] = (Object(_khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_8__["withActionScheduler"])(DropdownCore));
 
 /***/ }),
 /* 16 */
@@ -1522,13 +1582,13 @@ module.exports = require("@khanacademy/wonder-blocks-timing");
 /* 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__(10);
+/* 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___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__(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 _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); }
@@ -1758,7 +1818,7 @@ module.exports = require("react-window");
 /* 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__(9);
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
 /* 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__);
@@ -1766,7 +1826,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__(31);
+/* 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); }
 
 
@@ -1972,13 +2032,13 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
 /* 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__(9);
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
 /* 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__(11);
+/* harmony import */ var _search_text_input_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(10);
 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); }
 
 
@@ -2248,14 +2308,14 @@ SingleSelect.defaultProps = {
 /* 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__(9);
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
 /* 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__(11);
+/* 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__(8);
+/* 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);
 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); }
 
@@ -2806,32 +2866,20 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
 
 /***/ }),
 /* 26 */
-/***/ (function(module, exports) {
-
-module.exports = require("react-popper");
-
-/***/ }),
-/* 27 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-modal");
-
-/***/ }),
-/* 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 react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9);
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
 /* 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___default = /*#__PURE__*/__webpack_require__.n(react_window__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(17);
 /* harmony import */ var _khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _dropdown_core_virtualized_item_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(29);
-/* harmony import */ var _search_text_input_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(11);
-/* harmony import */ var _separator_item_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(8);
+/* 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);
 
 
@@ -3040,13 +3088,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));
 
 /***/ }),
-/* 29 */
+/* 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 _separator_item_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
+/* harmony import */ var _separator_item_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7);
 
 
 
@@ -3094,13 +3142,101 @@ class DropdownVirtualizedItem extends react__WEBPACK_IMPORTED_MODULE_0__["Compon
 /* harmony default export */ __webpack_exports__["a"] = (DropdownVirtualizedItem);
 
 /***/ }),
-/* 30 */
+/* 28 */
 /***/ (function(module, exports) {
 
 module.exports = require("@khanacademy/wonder-blocks-icon-button");
 
+/***/ }),
+/* 29 */
+/***/ (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___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___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___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_modal__WEBPACK_IMPORTED_MODULE_3__);
+
+
+
+
+const modifiers = [{
+  name: "preventOverflow",
+  options: {
+    rootBoundary: "viewport",
+    // Allows to overlap the popper in case there's no more vertical
+    // room in the viewport.
+    altAxis: true,
+    // Also needed to make sure the Popper will be displayed correctly
+    // in different contexts (e.g inside a Modal)
+    tether: false
+  }
+}];
+
+/**
+ * A wrapper for PopperJS that renders the children inside a portal.
+ */
+function DropdownPopper({
+  children,
+  alignment = "left",
+  onPopperElement,
+  referenceElement
+}) {
+  // If we are in a modal, we find where we should be portalling the menu by
+  // using the helper function from the modal package on the opener element.
+  // If we are not in a modal, we use body as the location to portal to.
+  const modalHost = Object(_khanacademy_wonder_blocks_modal__WEBPACK_IMPORTED_MODULE_3__["maybeGetPortalMountedModalHostElement"])(referenceElement) || document.querySelector("body");
+
+  if (!modalHost) {
+    return null;
+  }
+
+  return /*#__PURE__*/react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.createPortal( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_popper__WEBPACK_IMPORTED_MODULE_2__["Popper"], {
+    innerRef: node => {
+      if (node && onPopperElement) {
+        onPopperElement(node);
+      }
+    },
+    referenceElement: referenceElement,
+    strategy: "fixed",
+    placement: alignment === "left" ? "bottom-start" : "bottom-end",
+    modifiers: modifiers
+  }, ({
+    placement,
+    ref,
+    style,
+    hasPopperEscaped,
+    isReferenceHidden
+  }) => {
+    const shouldHidePopper = !!(hasPopperEscaped || isReferenceHidden);
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+      ref: ref,
+      style: style,
+      "data-test-id": "dropdown-popper",
+      "data-placement": placement
+    }, children(shouldHidePopper));
+  }), modalHost);
+}
+
+/***/ }),
+/* 30 */
+/***/ (function(module, exports) {
+
+module.exports = require("react-popper");
+
 /***/ }),
 /* 31 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-modal");
+
+/***/ }),
+/* 32 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3109,7 +3245,7 @@ module.exports = require("@khanacademy/wonder-blocks-icon-button");
 /* 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__(7);
+/* 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__(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__);
@@ -3119,7 +3255,7 @@ module.exports = require("@khanacademy/wonder-blocks-icon-button");
 /* 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__(32);
+/* 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__(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); }
@@ -3275,13 +3411,13 @@ const _generateStyles = color => {
 };
 
 /***/ }),
-/* 32 */
+/* 33 */
 /***/ (function(module, exports) {
 
 module.exports = require("@khanacademy/wonder-blocks-layout");
 
 /***/ }),
-/* 33 */
+/* 34 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3292,7 +3428,7 @@ __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__(8);
+/* harmony import */ var _components_separator_item_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
 /* 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);