@khanacademy/wonder-blocks-dropdown 2.4.3 → 2.5.2

package/dist/es/index.js

@@ -2,7 +2,7 @@ import _extends from '@babel/runtime/helpers/extends';
 import { Component, createElement, Fragment, cloneElement, Children, createRef } from 'react';
 import { StyleSheet, css } from 'aphrodite';
 import { Link } from 'react-router-dom';
-import { any } from 'prop-types';
+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';
@@ -76,7 +76,7 @@ class ActionItem extends Component {
     return instance && instance.type && instance.type.__IS_ACTION_ITEM__;
   }
 
-  render() {
+  renderClickableBehavior(router) {
     const {
       skipClientNav,
       disabled,
@@ -89,9 +89,6 @@ class ActionItem extends Component {
       style,
       testId
     } = this.props;
-    const {
-      router
-    } = this.context;
     const ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
     return /*#__PURE__*/createElement(ClickableBehavior, {
       disabled: disabled,
@@ -136,10 +133,11 @@ class ActionItem extends Component {
     });
   }
 
+  render() {
+    return /*#__PURE__*/createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
+  }
+
 }
-ActionItem.contextTypes = {
-  router: any
-};
 ActionItem.defaultProps = {
   disabled: false,
   indent: false,
@@ -380,9 +378,6 @@ class OptionItem extends Component {
   }
 
 }
-OptionItem.contextTypes = {
-  router: any
-};
 OptionItem.defaultProps = {
   disabled: false,
   onToggle: () => void 0,
@@ -1564,9 +1559,6 @@ class ActionMenuOpenerCore extends Component {
   }
 
 }
-ActionMenuOpenerCore.contextTypes = {
-  router: any
-};
 const sharedStyles = StyleSheet.create({
   shared: {
     position: "relative",
@@ -1773,10 +1765,12 @@ class ActionMenu extends Component {
     const {
       disabled,
       menuText,
-      opened,
       opener,
       testId
     } = this.props;
+    const {
+      opened
+    } = this.state;
     return /*#__PURE__*/createElement(DropdownOpener, {
       onClick: this.handleClick,
       disabled: numItems === 0 || disabled,
@@ -1866,7 +1860,7 @@ class SelectOpener extends Component {
     };
   }
 
-  render() {
+  renderClickableBehavior(router) {
     const _this$props = this.props,
           {
       children,
@@ -1879,7 +1873,7 @@ class SelectOpener extends Component {
     } = _this$props,
           sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
 
-    const ClickableBehavior = getClickableBehavior(this.context.router);
+    const ClickableBehavior = getClickableBehavior(router);
     return /*#__PURE__*/createElement(ClickableBehavior, {
       disabled: disabled,
       onClick: this.handleClick
@@ -1915,10 +1909,11 @@ class SelectOpener extends Component {
     });
   }
 
+  render() {
+    return /*#__PURE__*/createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
+  }
+
 }
-SelectOpener.contextTypes = {
-  router: any
-};
 SelectOpener.defaultProps = {
   disabled: false,
   light: false,

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,
@@ -511,9 +511,6 @@ class ActionItem extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       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,
@@ -557,10 +554,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 +609,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 +617,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 +643,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 +672,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 +697,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 +711,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 +722,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 +741,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 +762,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 +772,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 +783,7 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
 });
 
 /***/ }),
-/* 15 */
+/* 14 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -858,7 +844,7 @@ DropdownOpener.defaultProps = {
 /* harmony default export */ __webpack_exports__["a"] = (DropdownOpener);
 
 /***/ }),
-/* 16 */
+/* 15 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1506,6 +1492,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 +1514,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 +1567,7 @@ class SelectOpener extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     };
   }
 
-  render() {
+  renderClickableBehavior(router) {
     const {
       children,
       disabled,
@@ -1588,7 +1580,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 +1616,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 +1760,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); }
 
@@ -1898,10 +1891,12 @@ class ActionMenu extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     const {
       disabled,
       menuText,
-      opened,
       opener,
       testId
     } = this.props;
+    const {
+      opened
+    } = this.state;
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_dropdown_opener_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], {
       onClick: this.handleClick,
       disabled: numItems === 0 || disabled,
@@ -1977,8 +1972,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);
@@ -2254,8 +2249,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);
@@ -3112,21 +3107,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); }
 
 
@@ -3138,8 +3131,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:
@@ -3161,13 +3153,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({
@@ -3179,30 +3171,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",
@@ -3219,7 +3208,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",
@@ -3251,8 +3240,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: {
@@ -3298,7 +3287,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.3",
+  "version": "2.5.2",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -15,31 +15,31 @@
     "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.0.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.0.3",
+    "@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"
+    "wb-dev-build-settings": "^0.2.0"
   },
-  "gitHead": "2a21f4ec19e5611fe716237c21f45c9164b65710"
+  "gitHead": "9ebea88533e702011165072f090a377e02fa3f0f"
 }

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

@@ -1,8 +1,7 @@
 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 ActionItem from "../action-item.js";
 
@@ -16,28 +15,18 @@ describe("ActionItem", () => {
     });
 
     it("should render an anchor if there's no router", () => {
-        const wrapper = shallow(<ActionItem href="/foo" />);
+        const wrapper = mount(<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);
+        expect(wrapper.find("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());
+        const wrapper = mount(
+            <MemoryRouter>
+                <ActionItem href="/foo" />
+            </MemoryRouter>,
+        );
 
-        expect(
-            wrapper.renderProp("children")({}, {}).first().shallow().find(Link),
-        ).toHaveLength(1);
+        expect(wrapper.find(Link)).toHaveLength(1);
     });
 });

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

@@ -8,6 +8,7 @@ import SeparatorItem from "../separator-item.js";
 import ActionMenu from "../action-menu.js";
 import DropdownOpener from "../dropdown-opener.js";
 import {keyCodes} from "../../util/constants.js";
+import ActionMenuOpenerCore from "../action-menu-opener-core.js";
 
 jest.mock("../dropdown-core-virtualized.js");
 
@@ -143,6 +144,38 @@ describe("ActionMenu", () => {
         expect(menu.state("opened")).toBe(false);
     });
 
+    it("updates the aria-expanded value when opening and closing", () => {
+        // Arrange
+        const menu = mount(
+            <ActionMenu
+                menuText={"Action menu!"}
+                testId="openTest"
+                onChange={onChange}
+                selectedValues={[]}
+            >
+                <ActionItem label="Action" onClick={onClick} />
+                <SeparatorItem />
+                <OptionItem label="Toggle" value="toggle" onClick={onToggle} />
+            </ActionMenu>,
+        );
+
+        let opener = menu.find(DropdownOpener);
+        let openerCore = menu.find(ActionMenuOpenerCore);
+        expect(openerCore.prop("opened")).toBe(false);
+        expect(opener.find("[aria-expanded='false']")).toExist();
+
+        // Act
+        opener.simulate("keydown", {keyCode: keyCodes.enter});
+        opener.simulate("keyup", {keyCode: keyCodes.enter});
+        menu.update();
+        openerCore = menu.find(ActionMenuOpenerCore);
+        opener = menu.find(DropdownOpener);
+
+        // Assert
+        expect(openerCore.prop("opened")).toBe(true);
+        expect(opener.find("[aria-expanded='true']")).toExist();
+    });
+
     it("triggers actions", () => {
         // Arrange
         const onChange = jest.fn();

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

@@ -8,6 +8,8 @@ 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 +26,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();
     });
 

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

@@ -8,6 +8,8 @@ import SearchTextInput from "../search-text-input.js";
 import DropdownCore from "../dropdown-core.js";
 import {keyCodes} from "../../util/constants.js";
 
+import {unmountAll} from "../../../../../utils/testing/enzyme-shim.js";
+
 jest.mock("../dropdown-core-virtualized.js");
 
 const elementAtIndex = (wrapper, index) =>
@@ -87,6 +89,12 @@ describe("DropdownCore", () => {
     });
 
     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();
     });
 

package/src/components/__tests__/multi-select.test.js

@@ -14,6 +14,8 @@ import MultiSelect from "../multi-select.js";
 import {keyCodes} from "../../util/constants.js";
 import SearchTextInput from "../search-text-input.js";
 
+import {unmountAll} from "../../../../../utils/testing/enzyme-shim.js";
+
 import type {Labels} from "../multi-select.js";
 
 jest.useFakeTimers();
@@ -68,6 +70,12 @@ describe("MultiSelect", () => {
     });
 
     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();
     });
 

package/src/components/__tests__/single-select.test.js

@@ -1,8 +1,6 @@
 //@flow
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
-// eslint-disable-next-line import/no-unassigned-import
-import "@testing-library/jest-dom/extend-expect";
 
 import OptionItem from "../option-item.js";
 import SingleSelect from "../single-select.js";
@@ -25,8 +23,7 @@ describe("SingleSelect", () => {
     afterEach(() => {
         window.scrollTo.mockClear();
         onChange.mockReset();
-        // $FlowIgnore[prop-missing]: Flow doesn't understand that we're mocking console.error
-        console.error.mockReset(); // eslint-disable-line no-console
+        jest.spyOn(console, "error").mockReset();
     });
 
     afterEach(() => {
@@ -52,7 +49,7 @@ describe("SingleSelect", () => {
                 userEvent.click(opener);
 
                 // Assert
-                expect(screen.queryByRole("listbox")).toBeInTheDocument();
+                expect(screen.getByRole("listbox")).toBeInTheDocument();
             });
 
             it("should focus the first item in the dropdown", () => {
@@ -121,9 +118,7 @@ describe("SingleSelect", () => {
                         userEvent.keyboard(key);
 
                         // Assert
-                        expect(
-                            screen.queryByRole("listbox"),
-                        ).toBeInTheDocument();
+                        expect(screen.getByRole("listbox")).toBeInTheDocument();
                     });
 
                     it("should focus the first item in the dropdown", () => {
@@ -152,7 +147,7 @@ describe("SingleSelect", () => {
 
                 // Assert
                 expect(onChange).not.toHaveBeenCalled();
-                expect(screen.queryByRole("listbox")).toBeInTheDocument();
+                expect(screen.getByRole("listbox")).toBeInTheDocument();
             });
 
             it("should select an item when pressing {space}", () => {
@@ -278,7 +273,7 @@ describe("SingleSelect", () => {
             userEvent.click(screen.getByText("Choose"));
 
             // Assert
-            expect(screen.queryByRole("listbox")).toBeInTheDocument();
+            expect(screen.getByRole("listbox")).toBeInTheDocument();
         });
 
         it("closes the menu when the anchor is clicked", () => {
@@ -321,7 +316,7 @@ describe("SingleSelect", () => {
             userEvent.click(opener);
 
             // Assert
-            expect(screen.queryByRole("listbox")).toBeInTheDocument();
+            expect(screen.getByRole("listbox")).toBeInTheDocument();
         });
 
         it("calls the custom onClick handler", () => {

package/src/components/action-item.js

@@ -3,7 +3,7 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import {Link} from "react-router-dom";
-import * as PropTypes from "prop-types";
+import {__RouterContext} from "react-router";
 
 import Color, {mix, fade} from "@khanacademy/wonder-blocks-color";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
@@ -103,10 +103,6 @@ type DefaultProps = {|
     role: $PropertyType<ActionProps, "role">,
 |};
 
-type ContextTypes = {|
-    router: $FlowFixMe,
-|};
-
 const StyledAnchor = addStyle("a");
 const StyledButton = addStyle("button");
 const StyledLink = addStyle(Link);
@@ -120,7 +116,6 @@ export default class ActionItem extends React.Component<ActionProps> {
     static isClassOf(instance: React.Element<any>): boolean {
         return instance && instance.type && instance.type.__IS_ACTION_ITEM__;
     }
-    static contextTypes: ContextTypes = {router: PropTypes.any};
     static defaultProps: DefaultProps = {
         disabled: false,
         indent: false,
@@ -128,7 +123,7 @@ export default class ActionItem extends React.Component<ActionProps> {
     };
     static __IS_ACTION_ITEM__: boolean = true;
 
-    render(): React.Node {
+    renderClickableBehavior(router: any): React.Node {
         const {
             skipClientNav,
             disabled,
@@ -141,7 +136,6 @@ export default class ActionItem extends React.Component<ActionProps> {
             style,
             testId,
         } = this.props;
-        const {router} = this.context;
 
         const ClickableBehavior = getClickableBehavior(
             href,
@@ -220,6 +214,14 @@ export default class ActionItem extends React.Component<ActionProps> {
             </ClickableBehavior>
         );
     }
+
+    render(): React.Node {
+        return (
+            <__RouterContext.Consumer>
+                {(router) => this.renderClickableBehavior(router)}
+            </__RouterContext.Consumer>
+        );
+    }
 }
 
 const styles = StyleSheet.create({

package/src/components/action-menu-opener-core.js

@@ -1,7 +1,6 @@
 // @flow
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
-import * as PropTypes from "prop-types";
 
 import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import Color, {SemanticColor, mix} from "@khanacademy/wonder-blocks-color";
@@ -39,10 +38,6 @@ type Props = {|
     opened: boolean,
 |};
 
-type ContextTypes = {|
-    router: $FlowFixMe,
-|};
-
 const StyledButton = addStyle<"button">("button");
 
 /**
@@ -52,8 +47,6 @@ const StyledButton = addStyle<"button">("button");
  * - the down caret icon is smaller that the one that would be used by ButtonCore
  */
 export default class ActionMenuOpenerCore extends React.Component<Props> {
-    static contextTypes: ContextTypes = {router: PropTypes.any};
-
     render(): React.Node {
         const {
             children,

package/src/components/action-menu.js

@@ -226,7 +226,8 @@ export default class ActionMenu extends React.Component<Props, State> {
     };
 
     renderOpener(numItems: number): React.Element<typeof DropdownOpener> {
-        const {disabled, menuText, opened, opener, testId} = this.props;
+        const {disabled, menuText, opener, testId} = this.props;
+        const {opened} = this.state;
 
         return (
             <DropdownOpener

package/src/components/checkbox.js

@@ -14,8 +14,7 @@ import type {IconAsset} from "@khanacademy/wonder-blocks-icon";
 // If the intended icon is a check without a checkbox, you should be using
 // icons.check from the Wonder Blocks Icon package.
 const checkboxCheck: IconAsset = {
-    small:
-        "M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z",
+    small: "M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z",
 };
 const {blue, white, offBlack16, offBlack32, offBlack50, offWhite} = Color;
 

package/src/components/dropdown-core.js

@@ -522,9 +522,8 @@ class DropdownCore extends React.Component<Props, State> {
         // appropriate item in handleKeyDown
         this.itemsClicked = true;
         this.focusedIndex = index;
-        this.focusedOriginalIndex = this.state.itemRefs[
-            this.focusedIndex
-        ].originalIndex;
+        this.focusedOriginalIndex =
+            this.state.itemRefs[this.focusedIndex].originalIndex;
     };
 
     handleDropdownMouseUp: (event: SyntheticMouseEvent<>) => void = (event) => {

package/src/components/multi-select.stories.js

@@ -83,12 +83,10 @@ export const customStyles: StoryComponentType = () => (
     <MultiSelectWithCustomStyles />
 );
 
-customStyles.story = {
-    parameters: {
-        chromatic: {
-            // we don't need screenshots because this story only tests behavior.
-            disable: true,
-        },
+customStyles.parameters = {
+    chromatic: {
+        // we don't need screenshots because this story only tests behavior.
+        disableSnapshot: true,
     },
 };
 

package/src/components/option-item.js

@@ -2,7 +2,6 @@
 
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
-import * as PropTypes from "prop-types";
 
 import Color, {mix, fade} from "@khanacademy/wonder-blocks-color";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
@@ -79,10 +78,6 @@ type OptionProps = {|
     style?: StyleType,
 |};
 
-type ContextTypes = {|
-    router: $FlowFixMe,
-|};
-
 type DefaultProps = {|
     disabled: $PropertyType<OptionProps, "disabled">,
     onToggle: $PropertyType<OptionProps, "onToggle">,
@@ -99,7 +94,6 @@ export default class OptionItem extends React.Component<OptionProps> {
     static isClassOf(instance: React.Element<any>): boolean {
         return instance && instance.type && instance.type.__IS_OPTION_ITEM__;
     }
-    static contextTypes: ContextTypes = {router: PropTypes.any};
     static defaultProps: DefaultProps = {
         disabled: false,
         onToggle: () => void 0,

package/src/components/select-opener.js

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
-import * as PropTypes from "prop-types";
+import {__RouterContext} from "react-router";
 
 import type {AriaProps} from "@khanacademy/wonder-blocks-core";
 
@@ -16,15 +16,8 @@ import {DROPDOWN_ITEM_HEIGHT} from "../util/constants.js";
 
 const StyledButton = addStyle("button");
 
-const {
-    blue,
-    white,
-    white50,
-    offBlack,
-    offBlack16,
-    offBlack32,
-    offBlack64,
-} = Color;
+const {blue, white, white50, offBlack, offBlack16, offBlack32, offBlack64} =
+    Color;
 
 type SelectOpenerProps = {|
     ...AriaProps,
@@ -77,10 +70,6 @@ type SelectOpenerProps = {|
     open: boolean,
 |};
 
-type ContextTypes = {|
-    router: $FlowFixMe,
-|};
-
 type DefaultProps = {|
     disabled: $PropertyType<SelectOpenerProps, "disabled">,
     light: $PropertyType<SelectOpenerProps, "light">,
@@ -91,7 +80,6 @@ type DefaultProps = {|
  * An opener that opens select boxes.
  */
 export default class SelectOpener extends React.Component<SelectOpenerProps> {
-    static contextTypes: ContextTypes = {router: PropTypes.any};
     static defaultProps: DefaultProps = {
         disabled: false,
         light: false,
@@ -103,7 +91,7 @@ export default class SelectOpener extends React.Component<SelectOpenerProps> {
         this.props.onOpenChanged(!open);
     };
 
-    render(): React.Node {
+    renderClickableBehavior(router: any): React.Node {
         const {
             children,
             disabled,
@@ -117,7 +105,7 @@ export default class SelectOpener extends React.Component<SelectOpenerProps> {
             ...sharedProps
         } = this.props;
 
-        const ClickableBehavior = getClickableBehavior(this.context.router);
+        const ClickableBehavior = getClickableBehavior(router);
 
         return (
             <ClickableBehavior disabled={disabled} onClick={this.handleClick}>
@@ -173,6 +161,14 @@ export default class SelectOpener extends React.Component<SelectOpenerProps> {
             </ClickableBehavior>
         );
     }
+
+    render(): React.Node {
+        return (
+            <__RouterContext.Consumer>
+                {(router) => this.renderClickableBehavior(router)}
+            </__RouterContext.Consumer>
+        );
+    }
 }
 
 const buttonRadius = 4;

package/src/components/single-select.stories.js

@@ -106,12 +106,10 @@ const styles = StyleSheet.create({
 
 export const WithFilter: StoryComponentType = () => <SingleSelectWithFilter />;
 
-WithFilter.story = {
-    parameters: {
-        chromatic: {
-            // we don't need screenshots because this story only tests behavior.
-            disable: true,
-        },
+WithFilter.parameters = {
+    chromatic: {
+        // we don't need screenshots because this story only tests behavior.
+        disableSnapshot: true,
     },
 };
 
@@ -163,13 +161,12 @@ export const DropdownInModal: StoryComponentType = () => {
     );
 };
 
-DropdownInModal.story = {
-    name: "Dropdown in a modal",
-    parameters: {
-        chromatic: {
-            // We don't need screenshots because this story can be tested after
-            // the modal is opened.
-            disable: true,
-        },
+DropdownInModal.storyName = "Dropdown in a modal";
+
+DropdownInModal.parameters = {
+    chromatic: {
+        // We don't need screenshots because this story can be tested after
+        // the modal is opened.
+        disableSnapshot: true,
     },
 };