@khanacademy/wonder-blocks-dropdown 2.6.10 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 2.7.0
+
+### Minor Changes
+
+-   b3960766: Replaced core elements with Wonder Blocks SearchField (added dependency to SearchField)
+
+### Patch Changes
+
+-   Updated dependencies [b3960766]
+    -   @khanacademy/wonder-blocks-search-field@1.0.4
+
 ## 2.6.10
 
 ### Patch Changes

package/dist/es/index.js

@@ -1,11 +1,11 @@
 import _extends from '@babel/runtime/helpers/extends';
 import * as React from 'react';
-import { StyleSheet, css } from 'aphrodite';
+import { StyleSheet } from 'aphrodite';
 import { Link } from 'react-router-dom';
 import { __RouterContext } from 'react-router';
 import Color, { mix, fade, SemanticColor } from '@khanacademy/wonder-blocks-color';
 import Spacing from '@khanacademy/wonder-blocks-spacing';
-import { LabelMedium, styles as styles$a, LabelLarge } from '@khanacademy/wonder-blocks-typography';
+import { LabelMedium, LabelLarge } from '@khanacademy/wonder-blocks-typography';
 import { getClickableBehavior, isClientSideUrl, ClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
 import { addStyle, View } from '@khanacademy/wonder-blocks-core';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
@@ -13,7 +13,7 @@ import Icon, { icons } from '@khanacademy/wonder-blocks-icon';
 import ReactDOM from 'react-dom';
 import { VariableSizeList } from 'react-window';
 import { withActionScheduler } from '@khanacademy/wonder-blocks-timing';
-import IconButton from '@khanacademy/wonder-blocks-icon-button';
+import SearchField from '@khanacademy/wonder-blocks-search-field';
 import { Popper } from 'react-popper';
 import { maybeGetPortalMountedModalHostElement } from '@khanacademy/wonder-blocks-modal';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
@@ -93,7 +93,7 @@ class ActionItem extends React.Component {
         hovered,
         focused
       } = state;
-      const defaultStyle = [styles$9.shared, disabled && styles$9.disabled, !disabled && (pressed ? styles$9.active : (hovered || focused) && styles$9.focus), style];
+      const defaultStyle = [styles$8.shared, disabled && styles$8.disabled, !disabled && (pressed ? styles$8.active : (hovered || focused) && styles$8.focus), style];
 
       const props = _extends({
         "data-test-id": testId,
@@ -104,7 +104,7 @@ class ActionItem extends React.Component {
 
       const children = React.createElement(React.Fragment, null, React.createElement(LabelMedium, {
         lang: lang,
-        style: [indent && styles$9.indent, styles$9.label]
+        style: [indent && styles$8.indent, styles$8.label]
       }, label));
 
       if (href && !disabled) {
@@ -135,7 +135,7 @@ ActionItem.defaultProps = {
   role: "menuitem"
 };
 ActionItem.__IS_ACTION_ITEM__ = true;
-const styles$9 = StyleSheet.create({
+const styles$8 = StyleSheet.create({
   shared: {
     background: white$4,
     color: offBlack$3,
@@ -189,10 +189,10 @@ function Check(props) {
     icon: icons.check,
     size: "small",
     color: disabled ? offBlack32$3 : pressed || hovered || focused ? white$3 : offBlack$2,
-    style: [styles$8.bounds, !selected && styles$8.hide]
+    style: [styles$7.bounds, !selected && styles$7.hide]
   });
 }
-const styles$8 = StyleSheet.create({
+const styles$7 = StyleSheet.create({
   bounds: {
     minHeight: 16,
     minWidth: 16
@@ -226,17 +226,17 @@ function Checkbox(props) {
   const bgColor = disabled ? offWhite : selected && !clickInteraction ? blue$2 : white$2;
   const checkColor = disabled ? offBlack32$2 : clickInteraction ? pressed ? activeBlue : blue$2 : white$2;
   return React.createElement(View, {
-    style: [styles$7.checkbox, (clickInteraction || selected && !disabled) && styles$7.noBorder, disabled && styles$7.disabledCheckbox, {
+    style: [styles$6.checkbox, (clickInteraction || selected && !disabled) && styles$6.noBorder, disabled && styles$6.disabledCheckbox, {
       backgroundColor: bgColor
     }]
   }, selected && React.createElement(Icon, {
     icon: checkboxCheck,
     size: "small",
     color: checkColor,
-    style: [disabled && selected && styles$7.disabledCheckFormatting]
+    style: [disabled && selected && styles$6.disabledCheckFormatting]
   }));
 }
-const styles$7 = StyleSheet.create({
+const styles$6 = StyleSheet.create({
   checkbox: {
     minHeight: 16,
     minWidth: 16,
@@ -314,7 +314,7 @@ class OptionItem extends React.Component {
         hovered,
         focused
       } = state;
-      const defaultStyle = [styles$6.itemContainer, pressed ? styles$6.active : (hovered || focused) && styles$6.focus, disabled && styles$6.disabled, style];
+      const defaultStyle = [styles$5.itemContainer, pressed ? styles$5.active : (hovered || focused) && styles$5.focus, disabled && styles$5.disabled, style];
       return React.createElement(View, _extends({}, sharedProps, {
         testId: testId,
         style: defaultStyle,
@@ -327,7 +327,7 @@ class OptionItem extends React.Component {
         hovered: hovered,
         focused: focused
       }), React.createElement(LabelMedium, {
-        style: styles$6.label
+        style: styles$5.label
       }, label));
     });
   }
@@ -346,7 +346,7 @@ const {
   offBlack: offBlack$1,
   offBlack32: offBlack32$1
 } = Color;
-const styles$6 = StyleSheet.create({
+const styles$5 = StyleSheet.create({
   itemContainer: {
     flexDirection: "row",
     background: white$1,
@@ -392,14 +392,14 @@ class SeparatorItem extends React.Component {
 
   render() {
     return React.createElement(View, {
-      style: [styles$5.separator, this.props.style],
+      style: [styles$4.separator, this.props.style],
       "aria-hidden": "true"
     });
   }
 
 }
 SeparatorItem.__IS_SEPARATOR_ITEM__ = true;
-const styles$5 = StyleSheet.create({
+const styles$4 = StyleSheet.create({
   separator: {
     boxShadow: `0 -1px ${Color.offBlack16}`,
     height: 1,
@@ -487,110 +487,30 @@ class DropdownVirtualizedItem extends React.Component {
 }
 
 class SearchTextInput extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      focused: false,
-      labels: _extends({
-        clearSearch: defaultLabels.clearSearch,
-        filter: defaultLabels.filter
-      }, this.props.labels)
-    };
-
-    this.handleChange = e => {
-      e.preventDefault();
-      this.props.onChange(e.target.value);
-    };
-
-    this.handleDismiss = () => {
-      const {
-        onClick,
-        onChange
-      } = this.props;
-      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) {
-      this.setState({
-        labels: _extends({}, this.state.labels, this.props.labels)
-      });
-    }
-  }
-
-  maybeRenderDismissIconButton() {
-    const {
-      searchText
-    } = this.props;
-    const {
-      clearSearch
-    } = this.state.labels;
-
-    if (searchText.length > 0) {
-      return React.createElement(IconButton, {
-        icon: icons.dismiss,
-        kind: "tertiary",
-        onClick: this.handleDismiss,
-        style: styles$4.dismissIcon,
-        "aria-label": clearSearch
-      });
-    }
-
-    return null;
-  }
-
   render() {
     const {
+      labels,
+      onChange,
       onClick,
       itemRef,
       searchText,
       style,
       testId
     } = this.props;
-    const {
-      filter
-    } = this.state.labels;
-    return React.createElement(View, {
+    return React.createElement(SearchField, {
+      clearAriaLabel: labels.clearSearch,
+      onChange: onChange,
       onClick: onClick,
-      style: [styles$4.inputContainer, this.state.focused && styles$4.focused, style]
-    }, React.createElement(Icon, {
-      icon: icons.search,
-      size: "medium",
-      color: Color.offBlack64,
-      style: styles$4.searchIcon,
-      "aria-hidden": "true"
-    }), React.createElement("input", {
-      type: "text",
-      onChange: this.handleChange,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
+      placeholder: labels.filter,
       ref: itemRef,
-      placeholder: filter,
-      value: searchText,
-      className: css(styles$4.inputStyleReset, styles$a.LabelMedium),
-      "data-test-id": testId
-    }), this.maybeRenderDismissIconButton());
+      style: style,
+      testId: testId,
+      value: searchText
+    });
   }
 
 }
@@ -601,41 +521,6 @@ SearchTextInput.defaultProps = {
   }
 };
 SearchTextInput.__IS_SEARCH_TEXT_INPUT__ = true;
-const styles$4 = StyleSheet.create({
-  inputContainer: {
-    flexDirection: "row",
-    border: `1px solid ${Color.offBlack16}`,
-    borderRadius: Spacing.xxxSmall_4,
-    alignItems: "center",
-    height: DROPDOWN_ITEM_HEIGHT,
-    minHeight: DROPDOWN_ITEM_HEIGHT
-  },
-  focused: {
-    border: `1px solid ${Color.blue}`
-  },
-  searchIcon: {
-    marginLeft: Spacing.xSmall_8,
-    marginRight: Spacing.xSmall_8
-  },
-  dismissIcon: {
-    margin: 0,
-    ":hover": {
-      border: "none"
-    }
-  },
-  inputStyleReset: {
-    display: "flex",
-    flex: 1,
-    background: "inherit",
-    border: "none",
-    outline: "none",
-    "::placeholder": {
-      color: Color.offBlack64
-    },
-    width: "100%",
-    color: "inherit"
-  }
-});
 
 function getDropdownMenuHeight(items, initialHeight = 0) {
   return items.slice(0, MAX_VISIBLE_ITEMS).reduce((sum, item) => {

package/dist/index.js

@@ -178,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";
@@ -238,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__(29);
-/* 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__(2);
-/* 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__(1);
+/* 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 */ "e"].clearSearch,
-        filter: _util_constants_js__WEBPACK_IMPORTED_MODULE_8__[/* defaultLabels */ "e"].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 */ "e"].clearSearch,
-    filter: _util_constants_js__WEBPACK_IMPORTED_MODULE_8__[/* defaultLabels */ "e"].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 */
@@ -466,7 +324,7 @@ module.exports = require("@khanacademy/wonder-blocks-clickable");
 /* 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__);
@@ -630,7 +488,7 @@ 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__(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__);
@@ -859,7 +717,7 @@ 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__);
@@ -871,13 +729,13 @@ DropdownOpener.defaultProps = {
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5__);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(5);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__);
-/* harmony import */ var _khanacademy_wonder_blocks_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__(18);
 /* harmony import */ var _khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_8__);
 /* harmony import */ var _dropdown_core_virtualized_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(27);
-/* harmony import */ var _separator_item_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(7);
-/* harmony import */ var _search_text_input_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(10);
+/* 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);
@@ -1574,8 +1432,8 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
 /* 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__(7);
-/* harmony import */ var _components_search_text_input_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(10);
+/* 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);
 
 
 
@@ -1653,11 +1511,11 @@ module.exports = require("@khanacademy/wonder-blocks-timing");
 /* 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__(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); }
@@ -1887,7 +1745,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__(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__);
@@ -2101,13 +1959,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__(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__(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__(10);
+/* 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); }
 
 
@@ -2377,14 +2235,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__(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 _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__(7);
+/* 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); }
 
@@ -2795,7 +2653,7 @@ module.exports = require("react-router-dom");
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___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__);
 
 
@@ -2854,7 +2712,7 @@ 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_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__);
 
 
@@ -2940,15 +2798,15 @@ 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 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__(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__(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__(28);
-/* 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 _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);
 
@@ -3138,7 +2996,7 @@ class DropdownCoreVirtualized extends react__WEBPACK_IMPORTED_MODULE_0__["Compon
 "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);
 
 
 
@@ -3189,7 +3047,7 @@ class DropdownVirtualizedItem extends react__WEBPACK_IMPORTED_MODULE_0__["Compon
 /* 29 */
 /***/ (function(module, exports) {
 
-module.exports = require("@khanacademy/wonder-blocks-icon-button");
+module.exports = require("@khanacademy/wonder-blocks-search-field");
 
 /***/ }),
 /* 30 */
@@ -3199,7 +3057,7 @@ module.exports = require("@khanacademy/wonder-blocks-icon-button");
 /* 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__(31);
 /* harmony import */ var react_popper__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_popper__WEBPACK_IMPORTED_MODULE_2__);
@@ -3289,13 +3147,13 @@ 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__(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__);
@@ -3472,7 +3330,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__(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__(21);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "2.6.10",
+  "version": "2.7.0",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -24,6 +24,7 @@
     "@khanacademy/wonder-blocks-icon-button": "^3.4.6",
     "@khanacademy/wonder-blocks-layout": "^1.4.9",
     "@khanacademy/wonder-blocks-modal": "^2.3.1",
+    "@khanacademy/wonder-blocks-search-field": "^1.0.4",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
     "@khanacademy/wonder-blocks-timing": "^2.1.0",
     "@khanacademy/wonder-blocks-typography": "^1.1.31"

package/src/components/__tests__/search-text-input.test.js

@@ -1,14 +1,14 @@
 // @flow
 import * as React from "react";
-import {shallow} from "enzyme";
-import "jest-enzyme";
+import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import SearchTextInput from "../search-text-input.js";
 
 describe("SearchTextInput", () => {
-    it("text input container should be focused when focusing on the input", () => {
+    test("text input container should be focused when focusing on the input", () => {
         // Arrange
-        const wrapper = shallow(
+        render(
             <SearchTextInput
                 searchText=""
                 testId="search-text-input"
@@ -16,18 +16,18 @@ describe("SearchTextInput", () => {
             />,
         );
 
-        const input = wrapper.find(`[data-test-id="search-text-input"]`);
+        const input = screen.getByTestId("search-text-input");
 
         // Act
-        input.simulate("focus");
+        input.focus();
 
         // Assert
-        expect(wrapper).toHaveState({focused: true});
+        expect(input).toHaveFocus();
     });
 
-    it("text input should not be focused when losing focus", () => {
+    test("text input should not be focused when losing focus", () => {
         // Arrange
-        const wrapper = shallow(
+        render(
             <SearchTextInput
                 searchText=""
                 testId="search-text-input"
@@ -35,23 +35,23 @@ describe("SearchTextInput", () => {
             />,
         );
 
-        const input = wrapper.find(`[data-test-id="search-text-input"]`);
+        const input = screen.getByTestId("search-text-input");
         // focus in
-        input.simulate("focus");
+        input.focus();
 
         // Act
         // focus out
-        input.simulate("blur");
+        input.blur();
 
         // Assert
-        expect(wrapper).toHaveState({focused: false});
+        expect(input).not.toHaveFocus();
     });
 
-    it("onChange should be invoked if text input changes", () => {
+    test("onChange should be invoked if text input changes", () => {
         // Arrange
         const onChangeMock = jest.fn();
 
-        const wrapper = shallow(
+        render(
             <SearchTextInput
                 searchText=""
                 testId="search-text-input"
@@ -59,87 +59,154 @@ describe("SearchTextInput", () => {
             />,
         );
 
-        const input = wrapper.find(`[data-test-id="search-text-input"]`);
+        const input = screen.getByTestId("search-text-input");
 
         // Act
-        input.simulate("change", {
-            target: {value: "query"},
-            preventDefault: jest.fn(),
-        });
-
-        wrapper.update();
+        userEvent.paste(input, "value");
 
         // Assert
-        expect(onChangeMock).toHaveBeenCalledWith("query");
+        expect(onChangeMock).toHaveBeenCalledWith("value");
     });
 
-    it("displays the dismiss button when search text exists", () => {
+    test("displays the dismiss button when search text exists", () => {
         // Arrange
-        const wrapper = shallow(
-            <SearchTextInput
-                searchText="query"
-                testId="search-text-input"
-                onChange={() => jest.fn()}
-                onClick={() => jest.fn()}
-            />,
-        );
+        const SearchFieldWrapper = () => {
+            const [value, setValue] = React.useState("");
+            return (
+                <SearchTextInput
+                    searchText={value}
+                    testId="search-text-input"
+                    onChange={setValue}
+                />
+            );
+        };
+
+        render(<SearchFieldWrapper />);
+
+        const input = screen.getByTestId("search-text-input");
+
+        // Act
+        userEvent.paste(input, "value");
+
+        // Assert
+        const clearIconButton = screen.queryByRole("button");
+        expect(clearIconButton).toBeInTheDocument();
+    });
 
-        const input = wrapper.find(`[data-test-id="search-text-input"]`);
+    test("search should be cleared if the clear icon is clicked", () => {
+        // Arrange
+        const SearchFieldWrapper = () => {
+            const [value, setValue] = React.useState("initial value");
+            return (
+                <SearchTextInput
+                    searchText={value}
+                    testId="search-text-input"
+                    onChange={setValue}
+                />
+            );
+        };
+
+        render(<SearchFieldWrapper />);
+
+        const input = screen.getByTestId("search-text-input");
+        const clearIconButton = screen.queryByRole("button");
 
         // Act
-        input.simulate("change", {
-            target: {value: "query"},
-            preventDefault: jest.fn(),
-        });
+        userEvent.click(clearIconButton);
 
         // Assert
-        expect(wrapper.find("IconButton")).toExist();
+        expect(input).toHaveValue("");
     });
 
-    it("search should be dismissed if the close icon is clicked", () => {
+    test("focus should return to the input element after clear button is clicked", () => {
         // Arrange
-        const onClickMock = jest.fn();
+        const SearchFieldWrapper = () => {
+            const [value, setValue] = React.useState("");
+            return (
+                <SearchTextInput
+                    searchText={value}
+                    testId="search-text-input"
+                    onChange={setValue}
+                />
+            );
+        };
+
+        render(<SearchFieldWrapper />);
+
+        const input = screen.getByTestId("search-text-input");
+        userEvent.paste(input, "something");
 
-        const wrapper = shallow(
+        // Act
+        const clearIconButton = screen.queryByRole("button");
+        userEvent.click(clearIconButton);
+
+        // Assert
+        expect(input).toHaveFocus();
+    });
+
+    test("placeholder should be updated by the parent component", () => {
+        // Arrange
+        const {rerender} = render(
             <SearchTextInput
                 searchText="query"
-                onChange={() => jest.fn()}
-                onClick={onClickMock}
+                onChange={() => {}}
+                labels={{
+                    clearSearch: "Clear",
+                    filter: "Filter",
+                }}
+                testId="search-text-input"
             />,
         );
 
-        const dismissBtn = wrapper.find("IconButton");
+        const input = screen.getByTestId("search-text-input");
 
         // Act
-        dismissBtn.simulate("click");
-
-        wrapper.update();
+        rerender(
+            <SearchTextInput
+                searchText="query"
+                onChange={() => {}}
+                labels={{
+                    clearSearch: "Dismiss",
+                    filter: "Search",
+                }}
+                testId="search-text-input"
+            />,
+        );
 
         // Assert
-        expect(onClickMock).toHaveBeenCalled();
+        expect(input).toHaveAttribute("placeholder", "Search");
     });
 
-    it("labels should be updated by the parent component", () => {
+    test("button label should be updated by the parent component", () => {
         // Arrange
-        const wrapper = shallow(
+        const {rerender} = render(
             <SearchTextInput
                 searchText="query"
-                onChange={() => jest.fn()}
+                onChange={() => {}}
                 labels={{
                     clearSearch: "Clear",
                     filter: "Filter",
                 }}
+                testId="search-text-input"
             />,
         );
 
-        // Act
-        wrapper.setProps({labels: {clearSearch: "Dismiss", filter: "Search"}});
+        const clearIconButton = screen.queryByRole("button");
 
-        wrapper.update();
+        // Act
+        rerender(
+            <SearchTextInput
+                searchText="query"
+                onChange={() => {}}
+                labels={{
+                    clearSearch: "Dismiss",
+                    filter: "Search",
+                }}
+                testId="search-text-input"
+            />,
+        );
 
         // Assert
-        expect(wrapper).toHaveState({
-            labels: {clearSearch: "Dismiss", filter: "Search"},
-        });
+        expect(clearIconButton).toHaveAttribute("aria-label", "Dismiss");
     });
 });

package/src/components/search-text-input.js

@@ -2,17 +2,11 @@
 // A TextField with a search icon on its left side and X icon on its right side
 
 import * as React from "react";
-import {StyleSheet, css} from "aphrodite";
-
-import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";
-import {View} from "@khanacademy/wonder-blocks-core";
-import IconButton from "@khanacademy/wonder-blocks-icon-button";
-import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
-import Color from "@khanacademy/wonder-blocks-color";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
+
+import SearchField from "@khanacademy/wonder-blocks-search-field";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
-import {defaultLabels, DROPDOWN_ITEM_HEIGHT} from "../util/constants.js";
+import {defaultLabels} from "../util/constants.js";
 
 type Labels = {|
     clearSearch: string,
@@ -63,16 +57,7 @@ type DefaultProps = {|
     labels: $PropertyType<Props, "labels">,
 |};
 
-type State = {|
-    focused: boolean,
-
-    /**
-     * The object containing the custom labels used inside this component.
-     */
-    labels: Labels,
-|};
-
-export default class SearchTextInput extends React.Component<Props, State> {
+export default class SearchTextInput extends React.Component<Props> {
     static isClassOf(instance: React.Element<any>): boolean {
         return (
             instance && instance.type && instance.type.__IS_SEARCH_TEXT_INPUT__
@@ -86,142 +71,23 @@ export default class SearchTextInput extends React.Component<Props, State> {
         },
     };
 
-    state: State = {
-        focused: false,
-        labels: {
-            clearSearch: defaultLabels.clearSearch,
-            filter: defaultLabels.filter,
-            ...this.props.labels,
-        },
-    };
-
-    componentDidUpdate(prevProps: Props) {
-        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},
-            });
-        }
-    }
-
     static __IS_SEARCH_TEXT_INPUT__: boolean = true;
 
-    handleChange: (e: SyntheticInputEvent<>) => void = (e) => {
-        e.preventDefault();
-        this.props.onChange(e.target.value);
-    };
-
-    handleDismiss: () => void = () => {
-        const {onClick, onChange} = this.props;
-        // Empty the search text and focus the SearchTextInput
-        onChange("");
-        if (onClick) {
-            onClick();
-        }
-    };
-
-    handleBlur: (e: SyntheticInputEvent<>) => void = (e) => {
-        this.setState({focused: false});
-    };
-
-    handleFocus: (e: SyntheticInputEvent<>) => void = (e) => {
-        this.setState({focused: true});
-    };
-
-    maybeRenderDismissIconButton(): React.Node {
-        const {searchText} = this.props;
-        const {clearSearch} = this.state.labels;
-
-        if (searchText.length > 0) {
-            return (
-                <IconButton
-                    icon={icons.dismiss}
-                    kind="tertiary"
-                    onClick={this.handleDismiss}
-                    style={styles.dismissIcon}
-                    aria-label={clearSearch}
-                />
-            );
-        }
-        return null;
-    }
-
     render(): React.Node {
-        const {onClick, itemRef, searchText, style, testId} = this.props;
-        const {filter} = this.state.labels;
+        const {labels, onChange, onClick, itemRef, searchText, style, testId} =
+            this.props;
 
         return (
-            <View
+            <SearchField
+                clearAriaLabel={labels.clearSearch}
+                onChange={onChange}
                 onClick={onClick}
-                style={[
-                    styles.inputContainer,
-                    this.state.focused && styles.focused,
-                    style,
-                ]}
-            >
-                <Icon
-                    icon={icons.search}
-                    size="medium"
-                    color={Color.offBlack64}
-                    style={styles.searchIcon}
-                    aria-hidden="true"
-                />
-                <input
-                    type="text"
-                    onChange={this.handleChange}
-                    onFocus={this.handleFocus}
-                    onBlur={this.handleBlur}
-                    ref={itemRef}
-                    placeholder={filter}
-                    value={searchText}
-                    className={css(
-                        styles.inputStyleReset,
-                        typographyStyles.LabelMedium,
-                    )}
-                    data-test-id={testId}
-                />
-                {this.maybeRenderDismissIconButton()}
-            </View>
+                placeholder={labels.filter}
+                ref={itemRef}
+                style={style}
+                testId={testId}
+                value={searchText}
+            />
         );
     }
 }
-
-const styles = StyleSheet.create({
-    inputContainer: {
-        flexDirection: "row",
-        border: `1px solid ${Color.offBlack16}`,
-        borderRadius: Spacing.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: DROPDOWN_ITEM_HEIGHT,
-        minHeight: DROPDOWN_ITEM_HEIGHT,
-    },
-    focused: {
-        border: `1px solid ${Color.blue}`,
-    },
-    searchIcon: {
-        marginLeft: Spacing.xSmall_8,
-        marginRight: Spacing.xSmall_8,
-    },
-    dismissIcon: {
-        margin: 0,
-        ":hover": {
-            border: "none",
-        },
-    },
-    inputStyleReset: {
-        display: "flex",
-        flex: 1,
-        background: "inherit",
-        border: "none",
-        outline: "none",
-        "::placeholder": {
-            color: Color.offBlack64,
-        },
-        width: "100%",
-        color: "inherit",
-    },
-});