@khanacademy/wonder-blocks-dropdown 2.4.4 → 2.6.0

package/dist/es/index.js

@@ -1,8 +1,8 @@
 import _extends from '@babel/runtime/helpers/extends';
-import { Component, createElement, Fragment, cloneElement, Children, createRef } from 'react';
+import * as React 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';
@@ -57,13 +57,13 @@ const defaultLabels = {
 };
 
 const {
-  blue,
-  white,
-  offBlack,
-  offBlack32
+  blue: blue$3,
+  white: white$4,
+  offBlack: offBlack$3,
+  offBlack32: offBlack32$4
 } = Color;
 const StyledAnchor = addStyle("a");
-const StyledButton = addStyle("button");
+const StyledButton$2 = addStyle("button");
 const StyledLink = addStyle(Link);
 /**
  * The action item trigger actions, such as navigating to a different page or
@@ -71,12 +71,12 @@ const StyledLink = addStyle(Link);
  * ActionMenu.
  */
 
-class ActionItem extends Component {
+class ActionItem extends React.Component {
   static isClassOf(instance) {
     return instance && instance.type && instance.type.__IS_ACTION_ITEM__;
   }
 
-  render() {
+  renderClickableBehavior(router) {
     const {
       skipClientNav,
       disabled,
@@ -84,16 +84,14 @@ class ActionItem extends Component {
       target,
       indent,
       label,
+      lang,
       onClick,
       role,
       style,
       testId
     } = this.props;
-    const {
-      router
-    } = this.context;
     const ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
-    return /*#__PURE__*/createElement(ClickableBehavior, {
+    return /*#__PURE__*/React.createElement(ClickableBehavior, {
       disabled: disabled,
       onClick: onClick,
       href: href,
@@ -105,7 +103,7 @@ class ActionItem extends Component {
         hovered,
         focused
       } = state;
-      const defaultStyle = [styles.shared, disabled && styles.disabled, !disabled && (pressed ? styles.active : (hovered || focused) && styles.focus), // pass optional styles from react-window (if applies)
+      const defaultStyle = [styles$9.shared, disabled && styles$9.disabled, !disabled && (pressed ? styles$9.active : (hovered || focused) && styles$9.focus), // pass optional styles from react-window (if applies)
       style];
 
       const props = _extends({
@@ -115,19 +113,20 @@ class ActionItem extends Component {
         style: [defaultStyle]
       }, childrenProps);
 
-      const children = /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(LabelMedium, {
-        style: [indent && styles.indent, styles.label]
+      const children = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabelMedium, {
+        lang: lang,
+        style: [indent && styles$9.indent, styles$9.label]
       }, label));
 
       if (href && !disabled) {
-        return router && !skipClientNav && isClientSideUrl(href) ? /*#__PURE__*/createElement(StyledLink, _extends({}, props, {
+        return router && !skipClientNav && isClientSideUrl(href) ? /*#__PURE__*/React.createElement(StyledLink, _extends({}, props, {
           to: href
-        }), children) : /*#__PURE__*/createElement(StyledAnchor, _extends({}, props, {
+        }), children) : /*#__PURE__*/React.createElement(StyledAnchor, _extends({}, props, {
           href: href,
           target: target
         }), children);
       } else {
-        return /*#__PURE__*/createElement(StyledButton, _extends({
+        return /*#__PURE__*/React.createElement(StyledButton$2, _extends({
           type: "button"
         }, props, {
           disabled: disabled
@@ -136,20 +135,21 @@ class ActionItem extends Component {
     });
   }
 
+  render() {
+    return /*#__PURE__*/React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
+  }
+
 }
-ActionItem.contextTypes = {
-  router: any
-};
 ActionItem.defaultProps = {
   disabled: false,
   indent: false,
   role: "menuitem"
 };
 ActionItem.__IS_ACTION_ITEM__ = true;
-const styles = StyleSheet.create({
+const styles$9 = StyleSheet.create({
   shared: {
-    background: white,
-    color: offBlack,
+    background: white$4,
+    color: offBlack$3,
     textDecoration: "none",
     border: "none",
     outline: "none",
@@ -173,25 +173,25 @@ const styles = StyleSheet.create({
   },
   // hover and focus states
   focus: {
-    color: white,
-    background: blue
+    color: white$4,
+    background: blue$3
   },
   // active and pressed states
   active: {
-    color: mix(fade(blue, 0.32), white),
-    background: mix(offBlack32, blue)
+    color: mix(fade(blue$3, 0.32), white$4),
+    background: mix(offBlack32$4, blue$3)
   },
   // disabled state
   disabled: {
-    color: offBlack32,
+    color: offBlack32$4,
     cursor: "default"
   }
 });
 
 const {
-  offBlack: offBlack$1,
-  offBlack32: offBlack32$1,
-  white: white$1
+  offBlack: offBlack$2,
+  offBlack32: offBlack32$3,
+  white: white$3
 } = Color;
 /**
  * Props describing the state of the OptionItem, shared by the checkbox
@@ -209,14 +209,14 @@ function Check(props) {
     hovered,
     focused
   } = props;
-  return /*#__PURE__*/createElement(Icon, {
+  return /*#__PURE__*/React.createElement(Icon, {
     icon: icons.check,
     size: "small",
-    color: disabled ? offBlack32$1 : pressed || hovered || focused ? white$1 : offBlack$1,
-    style: [styles$1.bounds, !selected && styles$1.hide]
+    color: disabled ? offBlack32$3 : pressed || hovered || focused ? white$3 : offBlack$2,
+    style: [styles$8.bounds, !selected && styles$8.hide]
   });
 }
-const styles$1 = StyleSheet.create({
+const styles$8 = StyleSheet.create({
   bounds: {
     // Semantically, this are the constants for a small-sized icon
     minHeight: 16,
@@ -235,9 +235,9 @@ const checkboxCheck = {
   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: blue$1,
+  blue: blue$2,
   white: white$2,
-  offBlack16,
+  offBlack16: offBlack16$1,
   offBlack32: offBlack32$2,
   offBlack50,
   offWhite
@@ -258,22 +258,22 @@ function Checkbox(props) {
     hovered,
     focused
   } = props;
-  const activeBlue = mix(offBlack32$2, blue$1);
+  const activeBlue = mix(offBlack32$2, blue$2);
   const clickInteraction = pressed || hovered || focused;
-  const bgColor = disabled ? offWhite : selected && !clickInteraction ? blue$1 : white$2;
-  const checkColor = disabled ? offBlack32$2 : clickInteraction ? pressed ? activeBlue : blue$1 : white$2;
-  return /*#__PURE__*/createElement(View, {
-    style: [styles$2.checkbox, (clickInteraction || selected && !disabled) && styles$2.noBorder, disabled && styles$2.disabledCheckbox, {
+  const bgColor = disabled ? offWhite : selected && !clickInteraction ? blue$2 : white$2;
+  const checkColor = disabled ? offBlack32$2 : clickInteraction ? pressed ? activeBlue : blue$2 : white$2;
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles$7.checkbox, (clickInteraction || selected && !disabled) && styles$7.noBorder, disabled && styles$7.disabledCheckbox, {
       backgroundColor: bgColor
     }]
-  }, selected && /*#__PURE__*/createElement(Icon, {
+  }, selected && /*#__PURE__*/React.createElement(Icon, {
     icon: checkboxCheck,
     size: "small",
     color: checkColor,
-    style: [disabled && selected && styles$2.disabledCheckFormatting]
+    style: [disabled && selected && styles$7.disabledCheckFormatting]
   }));
 }
-const styles$2 = StyleSheet.create({
+const styles$7 = StyleSheet.create({
   checkbox: {
     // Semantically, this are the constants for a small-sized icon
     minHeight: 16,
@@ -287,7 +287,7 @@ const styles$2 = StyleSheet.create({
     borderWidth: 0
   },
   disabledCheckbox: {
-    borderColor: offBlack16,
+    borderColor: offBlack16$1,
     backgroundColor: offWhite
   },
   // The border of 1px on the selected, disabled checkbox pushes the check out
@@ -299,14 +299,14 @@ const styles$2 = StyleSheet.create({
   }
 });
 
-const _excluded = ["disabled", "label", "role", "selected", "testId", "style", "value", "onClick", "onToggle", "variant"];
+const _excluded$6 = ["disabled", "label", "role", "selected", "testId", "style", "value", "onClick", "onToggle", "variant"];
 
 /**
  * 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
  * MultiSelect.
  */
-class OptionItem extends Component {
+class OptionItem extends React.Component {
   constructor(...args) {
     super(...args);
 
@@ -346,11 +346,11 @@ class OptionItem extends Component {
       testId,
       style
     } = _this$props,
-          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
+          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$6);
 
     const ClickableBehavior = getClickableBehavior();
     const CheckComponent = this.getCheckComponent();
-    return /*#__PURE__*/createElement(ClickableBehavior, {
+    return /*#__PURE__*/React.createElement(ClickableBehavior, {
       disabled: disabled,
       onClick: this.handleClick,
       role: role
@@ -360,29 +360,26 @@ class OptionItem extends Component {
         hovered,
         focused
       } = state;
-      const defaultStyle = [styles$3.itemContainer, pressed ? styles$3.active : (hovered || focused) && styles$3.focus, disabled && styles$3.disabled, // pass optional styles from react-window (if applies)
+      const defaultStyle = [styles$6.itemContainer, pressed ? styles$6.active : (hovered || focused) && styles$6.focus, disabled && styles$6.disabled, // pass optional styles from react-window (if applies)
       style];
-      return /*#__PURE__*/createElement(View, _extends({}, sharedProps, {
+      return /*#__PURE__*/React.createElement(View, _extends({}, sharedProps, {
         testId: testId,
         style: defaultStyle,
         "aria-selected": selected ? "true" : "false",
         role: role
-      }, childrenProps), /*#__PURE__*/createElement(CheckComponent, {
+      }, childrenProps), /*#__PURE__*/React.createElement(CheckComponent, {
         disabled: disabled,
         selected: selected,
         pressed: pressed,
         hovered: hovered,
         focused: focused
-      }), /*#__PURE__*/createElement(LabelMedium, {
-        style: styles$3.label
+      }), /*#__PURE__*/React.createElement(LabelMedium, {
+        style: styles$6.label
       }, label));
     });
   }
 
 }
-OptionItem.contextTypes = {
-  router: any
-};
 OptionItem.defaultProps = {
   disabled: false,
   onToggle: () => void 0,
@@ -391,16 +388,16 @@ OptionItem.defaultProps = {
 };
 OptionItem.__IS_OPTION_ITEM__ = true;
 const {
-  blue: blue$2,
-  white: white$3,
-  offBlack: offBlack$2,
-  offBlack32: offBlack32$3
+  blue: blue$1,
+  white: white$1,
+  offBlack: offBlack$1,
+  offBlack32: offBlack32$1
 } = Color;
-const styles$3 = StyleSheet.create({
+const styles$6 = StyleSheet.create({
   itemContainer: {
     flexDirection: "row",
-    backgroundColor: white$3,
-    color: offBlack$2,
+    backgroundColor: white$1,
+    color: offBlack$1,
     alignItems: "center",
     height: DROPDOWN_ITEM_HEIGHT,
     minHeight: DROPDOWN_ITEM_HEIGHT,
@@ -412,16 +409,16 @@ const styles$3 = StyleSheet.create({
     cursor: "default"
   },
   focus: {
-    color: white$3,
-    background: blue$2
+    color: white$1,
+    background: blue$1
   },
   active: {
-    color: mix(fade(blue$2, 0.32), white$3),
-    background: mix(offBlack32$3, blue$2)
+    color: mix(fade(blue$1, 0.32), white$1),
+    background: mix(offBlack32$1, blue$1)
   },
   disabled: {
-    color: offBlack32$3,
-    background: white$3
+    color: offBlack32$1,
+    background: white$1
   },
   label: {
     whiteSpace: "nowrap",
@@ -441,7 +438,7 @@ const styles$3 = StyleSheet.create({
 /**
  * A separator used in a dropdown menu.
  */
-class SeparatorItem extends Component {
+class SeparatorItem extends React.Component {
   static isClassOf(instance) {
     return instance && instance.type && instance.type.__IS_SEPARATOR_ITEM__;
   }
@@ -450,8 +447,8 @@ class SeparatorItem extends Component {
     return (
       /*#__PURE__*/
       // pass optional styles from react-window (if applies)
-      createElement(View, {
-        style: [styles$4.separator, this.props.style],
+      React.createElement(View, {
+        style: [styles$5.separator, this.props.style],
         "aria-hidden": "true"
       })
     );
@@ -459,7 +456,7 @@ class SeparatorItem extends Component {
 
 }
 SeparatorItem.__IS_SEPARATOR_ITEM__ = true;
-const styles$4 = StyleSheet.create({
+const styles$5 = StyleSheet.create({
   separator: {
     boxShadow: `0 -1px ${Color.offBlack16}`,
     height: 1,
@@ -469,7 +466,7 @@ const styles$4 = StyleSheet.create({
   }
 });
 
-class DropdownOpener extends Component {
+class DropdownOpener extends React.Component {
   constructor(...args) {
     super(...args);
 
@@ -489,7 +486,7 @@ class DropdownOpener extends Component {
     }));
     const childrenProps = renderedChildren.props;
     const childrenTestId = this.getTestIdFromProps(childrenProps);
-    return /*#__PURE__*/cloneElement(renderedChildren, _extends({}, clickableChildrenProps, {
+    return /*#__PURE__*/React.cloneElement(renderedChildren, _extends({}, clickableChildrenProps, {
       disabled,
       onClick: childrenProps.onClick ? e => {
         // This is done to avoid overriding a
@@ -505,7 +502,7 @@ class DropdownOpener extends Component {
   }
 
   render() {
-    return /*#__PURE__*/createElement(ClickableBehavior, {
+    return /*#__PURE__*/React.createElement(ClickableBehavior, {
       onClick: this.props.onClick,
       disabled: this.props.disabled
     }, (eventState, handlers) => this.renderAnchorChildren(eventState, handlers));
@@ -522,7 +519,7 @@ DropdownOpener.defaultProps = {
  * (ActionItem, OptionItem, SeparatorItem) with custom styles to let
  * react-window make its own calculations.
  */
-class DropdownVirtualizedItem extends Component {
+class DropdownVirtualizedItem extends React.Component {
   render() {
     const {
       data,
@@ -534,7 +531,7 @@ class DropdownVirtualizedItem extends Component {
     if (SeparatorItem.isClassOf(item.component)) {
       // add react-window style to the separator to preserve the correct
       // position
-      return /*#__PURE__*/cloneElement(item.component, {
+      return /*#__PURE__*/React.cloneElement(item.component, {
         style
       });
     } else {
@@ -545,7 +542,7 @@ class DropdownVirtualizedItem extends Component {
         role,
         ref
       } = item;
-      return /*#__PURE__*/cloneElement(component, _extends({
+      return /*#__PURE__*/React.cloneElement(component, _extends({
         style
       }, populatedProps, {
         key: index,
@@ -558,7 +555,7 @@ class DropdownVirtualizedItem extends Component {
 
 }
 
-class SearchTextInput extends Component {
+class SearchTextInput extends React.Component {
   constructor(...args) {
     super(...args);
     this.state = {
@@ -622,11 +619,11 @@ class SearchTextInput extends Component {
     } = this.state.labels;
 
     if (searchText.length > 0) {
-      return /*#__PURE__*/createElement(IconButton, {
+      return /*#__PURE__*/React.createElement(IconButton, {
         icon: icons.dismiss,
         kind: "tertiary",
         onClick: this.handleDismiss,
-        style: styles$5.dismissIcon,
+        style: styles$4.dismissIcon,
         "aria-label": clearSearch
       });
     }
@@ -645,16 +642,16 @@ class SearchTextInput extends Component {
     const {
       filter
     } = this.state.labels;
-    return /*#__PURE__*/createElement(View, {
+    return /*#__PURE__*/React.createElement(View, {
       onClick: onClick,
-      style: [styles$5.inputContainer, this.state.focused && styles$5.focused, style]
-    }, /*#__PURE__*/createElement(Icon, {
+      style: [styles$4.inputContainer, this.state.focused && styles$4.focused, style]
+    }, /*#__PURE__*/React.createElement(Icon, {
       icon: icons.search,
       size: "medium",
       color: Color.offBlack64,
-      style: styles$5.searchIcon,
+      style: styles$4.searchIcon,
       "aria-hidden": "true"
-    }), /*#__PURE__*/createElement("input", {
+    }), /*#__PURE__*/React.createElement("input", {
       type: "text",
       onChange: this.handleChange,
       onFocus: this.handleFocus,
@@ -662,7 +659,7 @@ class SearchTextInput extends Component {
       ref: itemRef,
       placeholder: filter,
       value: searchText,
-      className: css(styles$5.inputStyleReset, styles$a.LabelMedium),
+      className: css(styles$4.inputStyleReset, styles$a.LabelMedium),
       "data-test-id": testId
     }), this.maybeRenderDismissIconButton());
   }
@@ -675,7 +672,7 @@ SearchTextInput.defaultProps = {
   }
 };
 SearchTextInput.__IS_SEARCH_TEXT_INPUT__ = true;
-const styles$5 = StyleSheet.create({
+const styles$4 = StyleSheet.create({
   inputContainer: {
     flexDirection: "row",
     border: `1px solid ${Color.offBlack16}`,
@@ -727,7 +724,7 @@ const MAX_VISIBLE_ITEMS = 9;
  * dynamically calculates the item height depending on the type
  */
 
-class DropdownCoreVirtualized extends Component {
+class DropdownCoreVirtualized extends React.Component {
   constructor(...args) {
     super(...args);
     this.state = {
@@ -844,7 +841,7 @@ class DropdownCoreVirtualized extends Component {
     const allComponents = data.map(e => e.component); // 1. get the children opaque data structure to sort each item by its
     //    label length
 
-    const longestItems = Children.toArray(allComponents).filter(Boolean).sort((a, b) => {
+    const longestItems = React.Children.toArray(allComponents).filter(Boolean).sort((a, b) => {
       // 2. only sort elements that contain a `label` prop
       if (b.props.label && a.props.label) {
         return b.props.label.length - a.props.label.length;
@@ -856,7 +853,7 @@ class DropdownCoreVirtualized extends Component {
     .slice(0, MAX_VISIBLE_ITEMS); // Append longest items to calculate the container width.
     // We need to hide these sorted elements to avoid any FOUC.
 
-    return longestItems.map(item => /*#__PURE__*/cloneElement(item, {
+    return longestItems.map(item => /*#__PURE__*/React.cloneElement(item, {
       style: {
         visibility: "hidden"
       }
@@ -876,7 +873,7 @@ class DropdownCoreVirtualized extends Component {
       /*#__PURE__*/
       // react-window has some issues for typing lists when passing refs
       // $FlowIgnore
-      createElement(VariableSizeList // react-window doesn't accept maybe numbers. It wants numbers
+      React.createElement(VariableSizeList // react-window doesn't accept maybe numbers. It wants numbers
       // or strings.
       // $FlowFixMe
       , {
@@ -912,14 +909,14 @@ class DropdownCoreVirtualized extends Component {
 
 var DropdownCoreVirtualized$1 = withActionScheduler(DropdownCoreVirtualized);
 
-const _excluded$1 = ["pointerEvents"];
+const _excluded$5 = ["pointerEvents"];
 
 /**
  * A core dropdown component that takes an opener and children to display as
  * part of the dropdown menu. Renders the dropdown as a portal to avoid clipping
  * in overflow: auto containers.
  */
-class DropdownCore extends Component {
+class DropdownCore extends React.Component {
   // Keeps track of the index of the focused item, out of a list of focusable items
   // Keeps track of the index of the focused item in the context of all the
   // items contained by this menu, whether focusable or not, used for figuring
@@ -952,7 +949,7 @@ class DropdownCore extends Component {
 
       for (let i = 0; i < props.items.length; i++) {
         if (props.items[i].focusable) {
-          const ref = /*#__PURE__*/createRef();
+          const ref = /*#__PURE__*/React.createRef();
           itemRefs.push({
             ref,
             originalIndex: i
@@ -1104,7 +1101,7 @@ class DropdownCore extends Component {
         noResults: defaultLabels.noResults
       }, props.labels)
     };
-    this.listRef = /*#__PURE__*/createRef();
+    this.listRef = /*#__PURE__*/React.createRef();
   }
 
   componentDidMount() {
@@ -1318,8 +1315,8 @@ class DropdownCore extends Component {
     const numResults = items.length - includeSearchCount;
 
     if (numResults === 0) {
-      return /*#__PURE__*/createElement(LabelMedium, {
-        style: styles$6.noResult,
+      return /*#__PURE__*/React.createElement(LabelMedium, {
+        style: styles$3.noResult,
         testId: "dropdown-core-no-results"
       }, noResults);
     }
@@ -1387,15 +1384,15 @@ class DropdownCore extends Component {
     const minDropdownWidth = openerStyle ? openerStyle.getPropertyValue("width") : 0; // preprocess items data to pass it to the renderer
 
     const itemsList = this.parseItemsList();
-    return /*#__PURE__*/createElement(View // Stop propagation to prevent the mouseup listener on the
+    return /*#__PURE__*/React.createElement(View // Stop propagation to prevent the mouseup listener on the
     // document from closing the menu.
     , {
       onMouseUp: this.handleDropdownMouseUp,
       role: this.props.role,
-      style: [styles$6.dropdown, light && styles$6.light, isReferenceHidden && styles$6.hidden, {
+      style: [styles$3.dropdown, light && styles$3.light, isReferenceHidden && styles$3.hidden, {
         minWidth: minDropdownWidth
       }, dropdownStyle]
-    }, /*#__PURE__*/createElement(DropdownCoreVirtualized$1, {
+    }, /*#__PURE__*/React.createElement(DropdownCoreVirtualized$1, {
       data: itemsList,
       listRef: this.listRef
     }), this.maybeRenderNoResults());
@@ -1413,7 +1410,7 @@ class DropdownCore extends Component {
     const modalHost = maybeGetPortalMountedModalHostElement(openerElement) || document.querySelector("body");
 
     if (modalHost) {
-      return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/createElement(Popper, {
+      return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Popper, {
         innerRef: node => {
           if (node) {
             this.popperElement = node;
@@ -1444,9 +1441,9 @@ class DropdownCore extends Component {
       }) => {
         // For some reason react-popper includes `pointerEvents: "none"`
         // in the `style` it passes to us, but only when running the tests.
-        const restStyle = _objectWithoutPropertiesLoose(style, _excluded$1);
+        const restStyle = _objectWithoutPropertiesLoose(style, _excluded$5);
 
-        return /*#__PURE__*/createElement("div", {
+        return /*#__PURE__*/React.createElement("div", {
           ref: ref,
           style: restStyle,
           "data-placement": placement
@@ -1464,10 +1461,10 @@ class DropdownCore extends Component {
       style,
       className
     } = this.props;
-    return /*#__PURE__*/createElement(View, {
+    return /*#__PURE__*/React.createElement(View, {
       onKeyDown: this.handleKeyDown,
       onKeyUp: this.handleKeyUp,
-      style: [styles$6.menuWrapper, style],
+      style: [styles$3.menuWrapper, style],
       className: className
     }, opener, open && this.renderDropdown());
   }
@@ -1481,7 +1478,7 @@ DropdownCore.defaultProps = {
   },
   light: false
 };
-const styles$6 = StyleSheet.create({
+const styles$3 = StyleSheet.create({
   menuWrapper: {
     width: "fit-content"
   },
@@ -1510,7 +1507,7 @@ const styles$6 = StyleSheet.create({
 });
 var DropdownCore$1 = withActionScheduler(DropdownCore);
 
-const _excluded$2 = ["children", "disabled", "focused", "hovered", "pressed", "waiting", "testId", "opened", "aria-label"];
+const _excluded$4 = ["children", "disabled", "focused", "hovered", "pressed", "waiting", "testId", "opened", "aria-label"];
 const StyledButton$1 = addStyle("button");
 /**
  * Although this component shares a lot with ButtonCore there are a couple
@@ -1519,7 +1516,7 @@ const StyledButton$1 = addStyle("button");
  * - the down caret icon is smaller that the one that would be used by ButtonCore
  */
 
-class ActionMenuOpenerCore extends Component {
+class ActionMenuOpenerCore extends React.Component {
   render() {
     const _this$props = this.props,
           {
@@ -1532,18 +1529,18 @@ class ActionMenuOpenerCore extends Component {
       opened,
       "aria-label": ariaLabel
     } = _this$props,
-          restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
+          restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
 
     const buttonColor = SemanticColor.controlDefault;
 
-    const buttonStyles = _generateStyles(buttonColor);
+    const buttonStyles = _generateStyles$1(buttonColor);
 
     const disabled = disabledProp;
     const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, buttonStyles.default, disabled && buttonStyles.disabled, !disabled && pressed && buttonStyles.active];
-    const label = /*#__PURE__*/createElement(LabelLarge, {
+    const label = /*#__PURE__*/React.createElement(LabelLarge, {
       style: sharedStyles.text
     }, children);
-    return /*#__PURE__*/createElement(StyledButton$1, _extends({
+    return /*#__PURE__*/React.createElement(StyledButton$1, _extends({
       "aria-expanded": opened ? "true" : "false",
       "aria-haspopup": "menu",
       "aria-label": ariaLabel,
@@ -1552,11 +1549,11 @@ class ActionMenuOpenerCore extends Component {
       type: "button"
     }, restProps, {
       "data-test-id": testId
-    }), /*#__PURE__*/createElement(View, {
+    }), /*#__PURE__*/React.createElement(View, {
       style: !disabled && (hovered || focused) && buttonStyles.focus
-    }, label), /*#__PURE__*/createElement(Strut, {
+    }, label), /*#__PURE__*/React.createElement(Strut, {
       size: Spacing.xxxSmall_4
-    }), /*#__PURE__*/createElement(Icon, {
+    }), /*#__PURE__*/React.createElement(Icon, {
       size: "small",
       color: "currentColor",
       icon: icons.caretDown
@@ -1564,9 +1561,6 @@ class ActionMenuOpenerCore extends Component {
   }
 
 }
-ActionMenuOpenerCore.contextTypes = {
-  router: any
-};
 const sharedStyles = StyleSheet.create({
   shared: {
     position: "relative",
@@ -1613,13 +1607,13 @@ const sharedStyles = StyleSheet.create({
     position: "absolute"
   }
 });
-const styles$7 = {};
+const styles$2 = {};
 
-const _generateStyles = color => {
+const _generateStyles$1 = color => {
   const buttonType = color;
 
-  if (styles$7[buttonType]) {
-    return styles$7[buttonType];
+  if (styles$2[buttonType]) {
+    return styles$2[buttonType];
   }
 
   const {
@@ -1652,8 +1646,8 @@ const _generateStyles = color => {
       cursor: "default"
     }
   };
-  styles$7[buttonType] = StyleSheet.create(newStyles);
-  return styles$7[buttonType];
+  styles$2[buttonType] = StyleSheet.create(newStyles);
+  return styles$2[buttonType];
 };
 
 const _excluded$3 = ["text"];
@@ -1661,7 +1655,7 @@ const _excluded$3 = ["text"];
 /**
  * A menu that consists of various types of items.
  */
-class ActionMenu extends Component {
+class ActionMenu extends React.Component {
   constructor(...args) {
     super(...args);
     this.state = {
@@ -1733,7 +1727,7 @@ class ActionMenu extends Component {
       children,
       selectedValues
     } = this.props;
-    const allChildren = Children.toArray(children).filter(Boolean); // verify if there's at least one OptionItem element to indent the
+    const allChildren = React.Children.toArray(children).filter(Boolean); // verify if there's at least one OptionItem element to indent the
     // possible Action items
 
     const isOptionItemIncluded = allChildren.some(item => OptionItem.isClassOf(item));
@@ -1779,7 +1773,7 @@ class ActionMenu extends Component {
     const {
       opened
     } = this.state;
-    return /*#__PURE__*/createElement(DropdownOpener, {
+    return /*#__PURE__*/React.createElement(DropdownOpener, {
       onClick: this.handleClick,
       disabled: numItems === 0 || disabled,
       text: menuText,
@@ -1788,7 +1782,7 @@ class ActionMenu extends Component {
     }, opener ? opener : openerProps => {
       const eventState = _objectWithoutPropertiesLoose(openerProps, _excluded$3);
 
-      return /*#__PURE__*/createElement(ActionMenuOpenerCore, _extends({}, eventState, {
+      return /*#__PURE__*/React.createElement(ActionMenuOpenerCore, _extends({}, eventState, {
         disabled: disabled,
         opened: !!opened,
         testId: testId
@@ -1805,7 +1799,7 @@ class ActionMenu extends Component {
     } = this.props;
     const items = this.getMenuItems();
     const dropdownOpener = this.renderOpener(items.length);
-    return /*#__PURE__*/createElement(DropdownCore$1, {
+    return /*#__PURE__*/React.createElement(DropdownCore$1, {
       role: "menu",
       style: style,
       className: className,
@@ -1815,7 +1809,7 @@ class ActionMenu extends Component {
       items: items,
       openerElement: this.openerElement,
       onOpenChanged: this.handleOpenChanged,
-      dropdownStyle: [styles$8.menuTopSpace, dropdownStyle]
+      dropdownStyle: [styles$1.menuTopSpace, dropdownStyle]
     });
   }
 
@@ -1824,7 +1818,7 @@ ActionMenu.defaultProps = {
   alignment: "left",
   disabled: false
 };
-const styles$8 = StyleSheet.create({
+const styles$1 = StyleSheet.create({
   caret: {
     marginLeft: 4
   },
@@ -1841,22 +1835,22 @@ const styles$8 = StyleSheet.create({
   }
 });
 
-const _excluded$4 = ["children", "disabled", "id", "isPlaceholder", "light", "open", "testId", "onOpenChanged"];
-const StyledButton$2 = addStyle("button");
+const _excluded$2 = ["children", "disabled", "id", "isPlaceholder", "light", "open", "testId", "onOpenChanged"];
+const StyledButton = addStyle("button");
 const {
-  blue: blue$3,
-  white: white$4,
+  blue,
+  white,
   white50,
-  offBlack: offBlack$3,
-  offBlack16: offBlack16$1,
-  offBlack32: offBlack32$4,
+  offBlack,
+  offBlack16,
+  offBlack32,
   offBlack64
 } = Color;
 
 /**
  * An opener that opens select boxes.
  */
-class SelectOpener extends Component {
+class SelectOpener extends React.Component {
   constructor(...args) {
     super(...args);
 
@@ -1868,7 +1862,7 @@ class SelectOpener extends Component {
     };
   }
 
-  render() {
+  renderClickableBehavior(router) {
     const _this$props = this.props,
           {
       children,
@@ -1879,14 +1873,14 @@ class SelectOpener extends Component {
       open,
       testId
     } = _this$props,
-          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
+          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
 
-    const ClickableBehavior = getClickableBehavior(this.context.router);
-    return /*#__PURE__*/createElement(ClickableBehavior, {
+    const ClickableBehavior = getClickableBehavior(router);
+    return /*#__PURE__*/React.createElement(ClickableBehavior, {
       disabled: disabled,
       onClick: this.handleClick
     }, (state, childrenProps) => {
-      const stateStyles = _generateStyles$1(light, isPlaceholder);
+      const stateStyles = _generateStyles(light, isPlaceholder);
 
       const {
         hovered,
@@ -1895,9 +1889,9 @@ class SelectOpener extends Component {
       } = state; // The icon colors are kind of fickle. This is just logic
       // based on the zeplin design.
 
-      const iconColor = light ? disabled || pressed ? "currentColor" : white$4 : disabled ? offBlack32$4 : offBlack64;
-      const style = [styles$9.shared, stateStyles.default, disabled && stateStyles.disabled, !disabled && (pressed ? stateStyles.active : (hovered || focused) && stateStyles.focus)];
-      return /*#__PURE__*/createElement(StyledButton$2, _extends({}, sharedProps, {
+      const iconColor = light ? disabled || pressed ? "currentColor" : white : disabled ? offBlack32 : offBlack64;
+      const style = [styles.shared, stateStyles.default, disabled && stateStyles.disabled, !disabled && (pressed ? stateStyles.active : (hovered || focused) && stateStyles.focus)];
+      return /*#__PURE__*/React.createElement(StyledButton, _extends({}, sharedProps, {
         "aria-expanded": open ? "true" : "false",
         "aria-haspopup": "listbox",
         "data-test-id": testId,
@@ -1905,36 +1899,37 @@ class SelectOpener extends Component {
         id: id,
         style: style,
         type: "button"
-      }, childrenProps), /*#__PURE__*/createElement(LabelMedium, {
-        style: styles$9.text
-      }, children), /*#__PURE__*/createElement(Icon, {
+      }, childrenProps), /*#__PURE__*/React.createElement(LabelMedium, {
+        style: styles.text
+      }, children), /*#__PURE__*/React.createElement(Icon, {
         icon: icons.caretDown,
         color: iconColor,
         size: "small",
-        style: styles$9.caret,
+        style: styles.caret,
         "aria-hidden": "true"
       }));
     });
   }
 
+  render() {
+    return /*#__PURE__*/React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
+  }
+
 }
-SelectOpener.contextTypes = {
-  router: any
-};
 SelectOpener.defaultProps = {
   disabled: false,
   light: false,
   isPlaceholder: false
 };
 const buttonRadius = 4;
-const styles$9 = StyleSheet.create({
+const styles = StyleSheet.create({
   // TODO: Dedupe with Button styles
   shared: {
     position: "relative",
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "space-between",
-    color: offBlack$3,
+    color: offBlack,
     height: DROPDOWN_ITEM_HEIGHT,
     // This asymmetry arises from the Icon on the right side, which has
     // extra padding built in. To have the component look more balanced,
@@ -1970,7 +1965,7 @@ const adjustedPaddingLeft = 16 - 1;
 const adjustedPaddingRight = 12 - 1;
 const stateStyles = {};
 
-const _generateStyles$1 = (light, placeholder) => {
+const _generateStyles = (light, placeholder) => {
   // "hash" the parameters
   const styleKey = `${String(light)}-${String(placeholder)}`;
 
@@ -1984,12 +1979,12 @@ const _generateStyles$1 = (light, placeholder) => {
     newStyles = {
       default: {
         backgroundColor: "transparent",
-        color: placeholder ? white50 : white$4,
+        color: placeholder ? white50 : white,
         borderColor: white50,
         borderWidth: 1
       },
       focus: {
-        borderColor: white$4,
+        borderColor: white,
         borderWidth: 2,
         paddingLeft: adjustedPaddingLeft,
         paddingRight: adjustedPaddingRight
@@ -1997,41 +1992,41 @@ const _generateStyles$1 = (light, placeholder) => {
       active: {
         paddingLeft: adjustedPaddingLeft,
         paddingRight: adjustedPaddingRight,
-        borderColor: mix(fade(blue$3, 0.32), white$4),
+        borderColor: mix(fade(blue, 0.32), white),
         borderWidth: 2,
-        color: placeholder ? mix(fade(white$4, 0.32), blue$3) : mix(fade(blue$3, 0.32), white$4),
-        backgroundColor: mix(offBlack32$4, blue$3)
+        color: placeholder ? mix(fade(white, 0.32), blue) : mix(fade(blue, 0.32), white),
+        backgroundColor: mix(offBlack32, blue)
       },
       disabled: {
-        borderColor: mix(fade(white$4, 0.32), blue$3),
-        color: mix(fade(white$4, 0.32), blue$3),
+        borderColor: mix(fade(white, 0.32), blue),
+        color: mix(fade(white, 0.32), blue),
         cursor: "auto"
       }
     };
   } else {
     newStyles = {
       default: {
-        backgroundColor: white$4,
-        borderColor: offBlack16$1,
+        backgroundColor: white,
+        borderColor: offBlack16,
         borderWidth: 1,
-        color: placeholder ? offBlack64 : offBlack$3
+        color: placeholder ? offBlack64 : offBlack
       },
       focus: {
-        borderColor: blue$3,
+        borderColor: blue,
         borderWidth: 2,
         paddingLeft: adjustedPaddingLeft,
         paddingRight: adjustedPaddingRight
       },
       active: {
-        background: mix(fade(blue$3, 0.32), white$4),
-        borderColor: mix(offBlack32$4, blue$3),
+        background: mix(fade(blue, 0.32), white),
+        borderColor: mix(offBlack32, blue),
         borderWidth: 2,
         paddingLeft: adjustedPaddingLeft,
         paddingRight: adjustedPaddingRight
       },
       disabled: {
         backgroundColor: "transparent",
-        borderColor: offBlack16$1,
+        borderColor: offBlack16,
         color: offBlack64,
         cursor: "auto"
       }
@@ -2042,7 +2037,7 @@ const _generateStyles$1 = (light, placeholder) => {
   return stateStyles[styleKey];
 };
 
-const _excluded$5 = ["children", "disabled", "id", "light", "opener", "placeholder", "selectedValue", "testId", "alignment", "dropdownStyle", "isFilterable", "onChange", "onToggle", "opened", "style", "className"];
+const _excluded$1 = ["children", "disabled", "id", "light", "opener", "placeholder", "selectedValue", "testId", "alignment", "dropdownStyle", "isFilterable", "onChange", "onToggle", "opened", "style", "className"];
 
 /**
  * The single select allows the selection of one item. Clients are responsible
@@ -2057,7 +2052,7 @@ const _excluded$5 = ["children", "disabled", "id", "light", "opener", "placehold
  * hundreds of items without performance problems.
  *
  */
-class SingleSelect extends Component {
+class SingleSelect extends React.Component {
   constructor(props) {
     super(props);
 
@@ -2190,7 +2185,7 @@ class SingleSelect extends Component {
     }
 
     return {
-      component: /*#__PURE__*/createElement(SearchTextInput, {
+      component: /*#__PURE__*/React.createElement(SearchTextInput, {
         key: "search-text-input",
         onChange: this.handleSearchTextChanged,
         searchText: this.state.searchText,
@@ -2216,18 +2211,18 @@ class SingleSelect extends Component {
       selectedValue,
       testId
     } = _this$props,
-          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$5);
+          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
 
-    const selectedItem = Children.toArray(children).find(option => option.props.value === selectedValue); // If nothing is selected, or if the selectedValue doesn't match any
+    const selectedItem = React.Children.toArray(children).find(option => option.props.value === selectedValue); // If nothing is selected, or if the selectedValue doesn't match any
     // item in the menu, use the placeholder.
 
     const menuText = selectedItem ? selectedItem.props.label : placeholder;
-    const dropdownOpener = opener ? /*#__PURE__*/createElement(DropdownOpener, {
+    const dropdownOpener = opener ? /*#__PURE__*/React.createElement(DropdownOpener, {
       onClick: this.handleClick,
       disabled: numItems === 0 || disabled,
       ref: this.handleOpenerRef,
       text: menuText
-    }, opener) : /*#__PURE__*/createElement(SelectOpener, _extends({}, sharedProps, {
+    }, opener) : /*#__PURE__*/React.createElement(SelectOpener, _extends({}, sharedProps, {
       disabled: numItems === 0 || disabled,
       id: id,
       isPlaceholder: !selectedItem,
@@ -2253,12 +2248,12 @@ class SingleSelect extends Component {
     const {
       searchText
     } = this.state;
-    const allChildren = Children.toArray(children).filter(Boolean);
+    const allChildren = React.Children.toArray(children).filter(Boolean);
     const filteredItems = this.getMenuItems(allChildren);
     const opener = this.renderOpener(allChildren.length);
     const searchField = this.getSearchField();
     const items = searchField ? [searchField].concat(filteredItems) : filteredItems;
-    return /*#__PURE__*/createElement(DropdownCore$1, {
+    return /*#__PURE__*/React.createElement(DropdownCore$1, {
       role: "listbox",
       alignment: alignment,
       dropdownStyle: [isFilterable && filterableDropdownStyle, selectDropdownStyle, dropdownStyle],
@@ -2283,7 +2278,7 @@ SingleSelect.defaultProps = {
   light: false
 };
 
-const _excluded$6 = ["disabled", "id", "light", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className"];
+const _excluded = ["disabled", "id", "light", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className"];
 
 /**
  * A dropdown that consists of multiple selection items. This select allows
@@ -2293,7 +2288,7 @@ const _excluded$6 = ["disabled", "id", "light", "opener", "testId", "alignment",
  * The multi select stays open until closed by the user. The onChange callback
  * happens every time there is a change in the selection of the items.
  */
-class MultiSelect extends Component {
+class MultiSelect extends React.Component {
   constructor(props) {
     super(props);
 
@@ -2330,7 +2325,7 @@ class MultiSelect extends Component {
         children,
         onChange
       } = this.props;
-      const selected = Children.toArray(children).filter(Boolean).map(option => option.props.value);
+      const selected = React.Children.toArray(children).filter(Boolean).map(option => option.props.value);
       onChange(selected);
     };
 
@@ -2452,7 +2447,7 @@ class MultiSelect extends Component {
       filter
     } = this.state.labels;
     return [{
-      component: /*#__PURE__*/createElement(SearchTextInput, {
+      component: /*#__PURE__*/React.createElement(SearchTextInput, {
         key: "search-text-input",
         onChange: this.handleSearchTextChanged,
         searchText: this.state.searchText,
@@ -2479,7 +2474,7 @@ class MultiSelect extends Component {
     if (shortcuts && !this.state.searchText) {
       const selectAllDisabled = numOptions === selectedValues.length;
       const selectAll = {
-        component: /*#__PURE__*/createElement(ActionItem, {
+        component: /*#__PURE__*/React.createElement(ActionItem, {
           disabled: selectAllDisabled,
           label: selectAllLabel(numOptions),
           indent: true,
@@ -2490,7 +2485,7 @@ class MultiSelect extends Component {
       };
       const selectNoneDisabled = selectedValues.length === 0;
       const selectNone = {
-        component: /*#__PURE__*/createElement(ActionItem, {
+        component: /*#__PURE__*/React.createElement(ActionItem, {
           disabled: selectNoneDisabled,
           label: selectNoneLabel,
           indent: true,
@@ -2500,7 +2495,7 @@ class MultiSelect extends Component {
         populatedProps: {}
       };
       const separator = {
-        component: /*#__PURE__*/createElement(SeparatorItem, {
+        component: /*#__PURE__*/React.createElement(SeparatorItem, {
           key: "shortcuts-separator"
         }),
         focusable: false,
@@ -2547,7 +2542,7 @@ class MultiSelect extends Component {
 
     if (lastSelectedChildren.length && restOfTheChildren.length) {
       lastSelectedItems.push({
-        component: /*#__PURE__*/createElement(SeparatorItem, {
+        component: /*#__PURE__*/React.createElement(SeparatorItem, {
           key: "selected-separator"
         }),
         focusable: false,
@@ -2567,19 +2562,19 @@ class MultiSelect extends Component {
       opener,
       testId
     } = _this$props,
-          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$6);
+          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
 
     const {
       noneSelected
     } = this.state.labels;
     const menuText = this.getMenuText(allChildren);
     const numOptions = allChildren.length;
-    const dropdownOpener = opener ? /*#__PURE__*/createElement(DropdownOpener, {
+    const dropdownOpener = opener ? /*#__PURE__*/React.createElement(DropdownOpener, {
       onClick: this.handleClick,
       disabled: numOptions === 0 || disabled,
       ref: this.handleOpenerRef,
       text: menuText
-    }, opener) : /*#__PURE__*/createElement(SelectOpener, _extends({}, sharedProps, {
+    }, opener) : /*#__PURE__*/React.createElement(SelectOpener, _extends({}, sharedProps, {
       disabled: numOptions === 0 || disabled,
       id: id,
       isPlaceholder: menuText === noneSelected,
@@ -2609,11 +2604,11 @@ class MultiSelect extends Component {
     const {
       noResults
     } = this.state.labels;
-    const allChildren = Children.toArray(children).filter(Boolean);
+    const allChildren = React.Children.toArray(children).filter(Boolean);
     const numOptions = allChildren.length;
     const filteredItems = this.getMenuItems(allChildren);
     const opener = this.renderOpener(allChildren);
-    return /*#__PURE__*/createElement(DropdownCore$1, {
+    return /*#__PURE__*/React.createElement(DropdownCore$1, {
       role: "listbox",
       alignment: alignment,
       dropdownStyle: [isFilterable && filterableDropdownStyle, selectDropdownStyle, dropdownStyle],