@khanacademy/wonder-blocks-dropdown 2.4.4 → 2.6.0

package/dist/index.js

@@ -453,8 +453,8 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(23);
 /* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_router_dom__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(13);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(16);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(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);
@@ -498,7 +498,7 @@ class ActionItem extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     return instance && instance.type && instance.type.__IS_ACTION_ITEM__;
   }
 
-  render() {
+  renderClickableBehavior(router) {
     const {
       skipClientNav,
       disabled,
@@ -506,14 +506,12 @@ class ActionItem extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       target,
       indent,
       label,
+      lang,
       onClick,
       role,
       style,
       testId
     } = this.props;
-    const {
-      router
-    } = this.context;
     const ClickableBehavior = Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_7__["getClickableBehavior"])(href, skipClientNav, router);
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ClickableBehavior, {
       disabled: disabled,
@@ -537,6 +535,7 @@ class ActionItem extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         ...childrenProps
       };
       const children = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__["LabelMedium"], {
+        lang: lang,
         style: [indent && styles.indent, styles.label]
       }, label));
 
@@ -557,10 +556,11 @@ class ActionItem extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     });
   }
 
+  render() {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_3__["__RouterContext"].Consumer, null, router => this.renderClickableBehavior(router));
+  }
+
 }
-ActionItem.contextTypes = {
-  router: prop_types__WEBPACK_IMPORTED_MODULE_3__["any"]
-};
 ActionItem.defaultProps = {
   disabled: false,
   indent: false,
@@ -611,12 +611,6 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
 
 /***/ }),
 /* 13 */
-/***/ (function(module, exports) {
-
-module.exports = require("prop-types");
-
-/***/ }),
-/* 14 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -625,21 +619,19 @@ module.exports = require("prop-types");
 /* 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 prop_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(13);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__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__);
-/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3);
-/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(7);
-/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__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_clickable__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(10);
-/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_7__);
-/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(2);
-/* harmony import */ var _check_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(24);
-/* harmony import */ var _checkbox_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(25);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(7);
+/* 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___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(2);
+/* harmony import */ var _check_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(24);
+/* harmony import */ var _checkbox_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(25);
 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); }
 
 
@@ -653,7 +645,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 
 
-
 /**
  * For option items that can be selected in a dropdown, selection denoted either
  * with a check ✔️ or a checkbox ☑️. Use as children in SingleSelect or
@@ -683,9 +674,9 @@ class OptionItem extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 
   getCheckComponent() {
     if (this.props.variant === "check") {
-      return _check_js__WEBPACK_IMPORTED_MODULE_9__[/* default */ "a"];
+      return _check_js__WEBPACK_IMPORTED_MODULE_8__[/* default */ "a"];
     } else {
-      return _checkbox_js__WEBPACK_IMPORTED_MODULE_10__[/* default */ "a"];
+      return _checkbox_js__WEBPACK_IMPORTED_MODULE_9__[/* default */ "a"];
     }
   }
 
@@ -708,7 +699,7 @@ class OptionItem extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       /* eslint-enable no-unused-vars */
       ...sharedProps
     } = this.props;
-    const ClickableBehavior = Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_7__["getClickableBehavior"])();
+    const ClickableBehavior = Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_6__["getClickableBehavior"])();
     const CheckComponent = this.getCheckComponent();
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ClickableBehavior, {
       disabled: disabled,
@@ -722,7 +713,7 @@ class OptionItem extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       } = state;
       const defaultStyle = [styles.itemContainer, pressed ? styles.active : (hovered || focused) && styles.focus, disabled && styles.disabled, // pass optional styles from react-window (if applies)
       style];
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__["View"], _extends({}, sharedProps, {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__["View"], _extends({}, sharedProps, {
         testId: testId,
         style: defaultStyle,
         "aria-selected": selected ? "true" : "false",
@@ -733,16 +724,13 @@ class OptionItem extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         pressed: pressed,
         hovered: hovered,
         focused: focused
-      }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__["LabelMedium"], {
+      }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["LabelMedium"], {
         style: styles.label
       }, label));
     });
   }
 
 }
-OptionItem.contextTypes = {
-  router: prop_types__WEBPACK_IMPORTED_MODULE_2__["any"]
-};
 OptionItem.defaultProps = {
   disabled: false,
   onToggle: () => void 0,
@@ -755,19 +743,19 @@ const {
   white,
   offBlack,
   offBlack32
-} = _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a;
+} = _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a;
 const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
   itemContainer: {
     flexDirection: "row",
     backgroundColor: white,
     color: offBlack,
     alignItems: "center",
-    height: _util_constants_js__WEBPACK_IMPORTED_MODULE_8__[/* DROPDOWN_ITEM_HEIGHT */ "a"],
-    minHeight: _util_constants_js__WEBPACK_IMPORTED_MODULE_8__[/* DROPDOWN_ITEM_HEIGHT */ "a"],
+    height: _util_constants_js__WEBPACK_IMPORTED_MODULE_7__[/* DROPDOWN_ITEM_HEIGHT */ "a"],
+    minHeight: _util_constants_js__WEBPACK_IMPORTED_MODULE_7__[/* DROPDOWN_ITEM_HEIGHT */ "a"],
     border: 0,
     outline: 0,
-    paddingLeft: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xSmall_8,
-    paddingRight: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.medium_16,
+    paddingLeft: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default.a.xSmall_8,
+    paddingRight: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default.a.medium_16,
     whiteSpace: "nowrap",
     cursor: "default"
   },
@@ -776,8 +764,8 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
     background: blue
   },
   active: {
-    color: Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["fade"])(blue, 0.32), white),
-    background: Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["mix"])(offBlack32, blue)
+    color: Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__["fade"])(blue, 0.32), white),
+    background: Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__["mix"])(offBlack32, blue)
   },
   disabled: {
     color: offBlack32,
@@ -786,7 +774,7 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
   label: {
     whiteSpace: "nowrap",
     userSelect: "none",
-    marginLeft: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xSmall_8,
+    marginLeft: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default.a.xSmall_8,
     // added to truncate strings that are longer than expected
     overflow: "hidden",
     textOverflow: "ellipsis"
@@ -797,7 +785,7 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
 });
 
 /***/ }),
-/* 15 */
+/* 14 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -858,7 +846,7 @@ DropdownOpener.defaultProps = {
 /* harmony default export */ __webpack_exports__["a"] = (DropdownOpener);
 
 /***/ }),
-/* 16 */
+/* 15 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1506,6 +1494,12 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_3__["StyleSheet"].create({
 });
 /* harmony default export */ __webpack_exports__["a"] = (Object(_khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_10__["withActionScheduler"])(DropdownCore));
 
+/***/ }),
+/* 16 */
+/***/ (function(module, exports) {
+
+module.exports = require("react-router");
+
 /***/ }),
 /* 17 */
 /***/ (function(module, exports) {
@@ -1522,8 +1516,8 @@ module.exports = require("@khanacademy/wonder-blocks-timing");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(13);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(16);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(5);
@@ -1575,7 +1569,7 @@ class SelectOpener extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     };
   }
 
-  render() {
+  renderClickableBehavior(router) {
     const {
       children,
       disabled,
@@ -1588,7 +1582,7 @@ class SelectOpener extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       onOpenChanged,
       ...sharedProps
     } = this.props;
-    const ClickableBehavior = Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_5__["getClickableBehavior"])(this.context.router);
+    const ClickableBehavior = Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_5__["getClickableBehavior"])(router);
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ClickableBehavior, {
       disabled: disabled,
       onClick: this.handleClick
@@ -1624,10 +1618,11 @@ class SelectOpener extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     });
   }
 
+  render() {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_2__["__RouterContext"].Consumer, null, router => this.renderClickableBehavior(router));
+  }
+
 }
-SelectOpener.contextTypes = {
-  router: prop_types__WEBPACK_IMPORTED_MODULE_2__["any"]
-};
 SelectOpener.defaultProps = {
   disabled: false,
   light: false,
@@ -1767,10 +1762,10 @@ module.exports = require("react-window");
 /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _dropdown_opener_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(15);
+/* harmony import */ var _dropdown_opener_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(14);
 /* harmony import */ var _action_item_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(12);
-/* harmony import */ var _option_item_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(14);
-/* harmony import */ var _dropdown_core_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(16);
+/* 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);
 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); }
 
@@ -1979,8 +1974,8 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9);
 /* 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__(16);
-/* harmony import */ var _dropdown_opener_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(15);
+/* 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);
@@ -2256,8 +2251,8 @@ SingleSelect.defaultProps = {
 /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9);
 /* 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__(16);
-/* harmony import */ var _dropdown_opener_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(15);
+/* 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 _select_opener_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(18);
 /* harmony import */ var _separator_item_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(8);
@@ -3114,21 +3109,19 @@ 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 prop_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(13);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(7);
-/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__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_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_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_layout__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(32);
-/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_8__);
-/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(2);
+/* 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___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__);
+/* 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___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___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); }
 
 
@@ -3140,8 +3133,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 
 
-
-const StyledButton = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__["addStyle"])("button");
+const StyledButton = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["addStyle"])("button");
 /**
  * Although this component shares a lot with ButtonCore there are a couple
  * of differences:
@@ -3163,13 +3155,13 @@ class ActionMenuOpenerCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component
       "aria-label": ariaLabel,
       ...restProps
     } = this.props;
-    const buttonColor = _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__["SemanticColor"].controlDefault;
+    const buttonColor = _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["SemanticColor"].controlDefault;
 
     const buttonStyles = _generateStyles(buttonColor);
 
     const disabled = disabledProp;
     const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, buttonStyles.default, disabled && buttonStyles.disabled, !disabled && pressed && buttonStyles.active];
-    const label = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_3__["LabelLarge"], {
+    const label = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_2__["LabelLarge"], {
       style: sharedStyles.text
     }, children);
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledButton, _extends({
@@ -3181,30 +3173,27 @@ class ActionMenuOpenerCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component
       type: "button"
     }, restProps, {
       "data-test-id": testId
-    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__["View"], {
+    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["View"], {
       style: !disabled && (hovered || focused) && buttonStyles.focus
-    }, label), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_8__["Strut"], {
-      size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7___default.a.xxxSmall_4
-    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_6___default.a, {
+    }, label), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_7__["Strut"], {
+      size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6___default.a.xxxSmall_4
+    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5___default.a, {
       size: "small",
       color: "currentColor",
-      icon: _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_6__["icons"].caretDown
+      icon: _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5__["icons"].caretDown
     }));
   }
 
 }
-ActionMenuOpenerCore.contextTypes = {
-  router: prop_types__WEBPACK_IMPORTED_MODULE_2__["any"]
-};
 const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
   shared: {
     position: "relative",
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    height: _util_constants_js__WEBPACK_IMPORTED_MODULE_9__[/* DROPDOWN_ITEM_HEIGHT */ "a"],
+    height: _util_constants_js__WEBPACK_IMPORTED_MODULE_8__[/* DROPDOWN_ITEM_HEIGHT */ "a"],
     border: "none",
-    borderRadius: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7___default.a.xxxSmall_4,
+    borderRadius: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6___default.a.xxxSmall_4,
     cursor: "pointer",
     outline: "none",
     textDecoration: "none",
@@ -3221,7 +3210,7 @@ const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create
     cursor: "auto"
   },
   small: {
-    height: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7___default.a.xLarge_32
+    height: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6___default.a.xLarge_32
   },
   text: {
     textAlign: "left",
@@ -3253,8 +3242,8 @@ const _generateStyles = color => {
 
   const {
     offBlack32
-  } = _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a;
-  const activeColor = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__["mix"])(offBlack32, color);
+  } = _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a;
+  const activeColor = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["mix"])(offBlack32, color);
   let newStyles = {};
   newStyles = {
     default: {
@@ -3300,7 +3289,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _components_action_item_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(12);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ActionItem", function() { return _components_action_item_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
 
-/* harmony import */ var _components_option_item_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(14);
+/* 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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "2.4.4",
+  "version": "2.6.0",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -15,31 +15,30 @@
     "access": "public"
   },
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
-    "@khanacademy/wonder-blocks-button": "^2.9.14",
-    "@khanacademy/wonder-blocks-clickable": "^2.1.3",
-    "@khanacademy/wonder-blocks-color": "^1.1.19",
-    "@khanacademy/wonder-blocks-core": "^3.1.5",
-    "@khanacademy/wonder-blocks-icon": "^1.2.22",
-    "@khanacademy/wonder-blocks-icon-button": "^3.3.14",
-    "@khanacademy/wonder-blocks-layout": "^1.4.4",
-    "@khanacademy/wonder-blocks-modal": "^2.1.43",
-    "@khanacademy/wonder-blocks-spacing": "^3.0.4",
-    "@khanacademy/wonder-blocks-timing": "^2.0.1",
-    "@khanacademy/wonder-blocks-typography": "^1.1.26"
+    "@babel/runtime": "^7.16.3",
+    "@khanacademy/wonder-blocks-button": "^2.10.2",
+    "@khanacademy/wonder-blocks-clickable": "^2.2.1",
+    "@khanacademy/wonder-blocks-color": "^1.1.20",
+    "@khanacademy/wonder-blocks-core": "^4.1.0",
+    "@khanacademy/wonder-blocks-icon": "^1.2.24",
+    "@khanacademy/wonder-blocks-icon-button": "^3.4.1",
+    "@khanacademy/wonder-blocks-layout": "^1.4.6",
+    "@khanacademy/wonder-blocks-modal": "^2.1.45",
+    "@khanacademy/wonder-blocks-spacing": "^3.0.5",
+    "@khanacademy/wonder-blocks-timing": "^2.1.0",
+    "@khanacademy/wonder-blocks-typography": "^1.1.28"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.10.1",
     "aphrodite": "^1.2.5",
-    "prop-types": "^15.6.2",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
     "react-popper": "^2.0.0",
-    "react-router-dom": "^4.2.2",
+    "react-router": "5.2.1",
+    "react-router-dom": "5.3.0",
     "react-window": "^1.8.5"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.1.2"
-  },
-  "gitHead": "7e879c62ab49bf48f1debb96bcbc9d612e4689a6"
+    "wb-dev-build-settings": "^0.2.0"
+  }
 }

package/src/components/__tests__/action-item.test.js

@@ -1,43 +1,54 @@
+// @flow
 import * as React from "react";
-import renderer from "react-test-renderer";
-import {Link} from "react-router-dom";
-import {shallow} from "enzyme";
-import ReactRouterEnzymeContext from "react-router-enzyme-context";
+import {MemoryRouter, Link} from "react-router-dom";
+import {mount} from "enzyme";
+import {render, screen} from "@testing-library/react";
 
 import ActionItem from "../action-item.js";
 
 describe("ActionItem", () => {
     it("should render with disabled styles", () => {
-        const actionItem = renderer.create(
-            <ActionItem href="/foo" disabled={true} />,
-        );
+        // Arrange
+
+        // Act
+        render(<ActionItem href="/foo" label="Example" disabled={true} />);
 
-        expect(actionItem).toMatchSnapshot();
+        // Assert
+        expect(screen.getByRole("menuitem")).toBeDisabled();
     });
 
     it("should render an anchor if there's no router", () => {
-        const wrapper = shallow(<ActionItem href="/foo" />);
-
-        expect(
-            wrapper
-                // call the props.children(state, handlers) with empty objects for both params
-                .renderProp("children")({}, {})
-                // shallow render the first child of that result to unwrap StyledAnchor HOC
-                .first()
-                .shallow()
-                // check that it includes an <a> tag
-                .find("a"),
-        ).toHaveLength(1);
+        // Arrange
+
+        // Act
+        render(<ActionItem href="/foo" label="Example" />);
+
+        // Assert
+        // eslint-disable-next-line testing-library/no-node-access
+        expect(document.querySelectorAll("a")).toHaveLength(1);
     });
 
     it("should render a Link if there's a router", () => {
-        // Same thing as the previous test but this time include a router context
-        // when shallow rendering.
-        const options = new ReactRouterEnzymeContext();
-        const wrapper = shallow(<ActionItem href="/foo" />, options.get());
-
-        expect(
-            wrapper.renderProp("children")({}, {}).first().shallow().find(Link),
-        ).toHaveLength(1);
+        // Arrange
+
+        // Act
+        const wrapper = mount(
+            <MemoryRouter>
+                <ActionItem href="/foo" label="Example" />
+            </MemoryRouter>,
+        );
+
+        // Assert
+        expect(wrapper.find(Link)).toHaveLength(1);
+    });
+
+    it("should set the lang attribute if it's passed down", () => {
+        // Arrange
+
+        // Act
+        render(<ActionItem label="Español" lang="es" />);
+
+        // Assert
+        expect(screen.getByText("Español")).toHaveAttribute("lang", "es");
     });
 });

package/src/components/__tests__/action-menu.test.js

@@ -1,6 +1,7 @@
 //@flow
 import * as React from "react";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import ActionItem from "../action-item.js";
 import OptionItem from "../option-item.js";

package/src/components/__tests__/dropdown-core-virtualized.test.js

@@ -2,12 +2,15 @@
 import * as React from "react";
 import {VariableSizeList as List} from "react-window";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import OptionItem from "../option-item.js";
 import SeparatorItem from "../separator-item.js";
 import DropdownCoreVirtualized from "../dropdown-core-virtualized.js";
 import SearchTextInput from "../search-text-input.js";
 
+import {unmountAll} from "../../../../../utils/testing/enzyme-shim.js";
+
 describe("DropdownCoreVirtualized", () => {
     beforeEach(() => {
         jest.useFakeTimers();
@@ -24,6 +27,12 @@ describe("DropdownCoreVirtualized", () => {
     });
 
     afterEach(() => {
+        // We have to explicitly unmount before clearing mocks, otherwise jest
+        // timers will throw because we'll try to clear an animation frame that
+        // we set with a setTimeout but are clearing with clearAnimationFrame
+        // because we restored the clearAnimationFrame mock (and we won't
+        // have cleared the timeout we actually set!)
+        unmountAll();
         jest.restoreAllMocks();
     });