@khanacademy/wonder-blocks-dropdown 2.3.20 → 2.4.3

package/dist/es/index.js

@@ -1,4 +1,5 @@
-import { createElement, Fragment, Component, cloneElement, Children, createRef } from 'react';
+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';
@@ -6,312 +7,18 @@ import Color, { mix, fade, SemanticColor } from '@khanacademy/wonder-blocks-colo
 import Spacing from '@khanacademy/wonder-blocks-spacing';
 import { LabelMedium, styles as styles$a, LabelLarge } from '@khanacademy/wonder-blocks-typography';
 import { getClickableBehavior, isClientSideUrl, ClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
-import { addStyle, View, getElementIntersection } from '@khanacademy/wonder-blocks-core';
+import { addStyle, View } from '@khanacademy/wonder-blocks-core';
+import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import Icon, { icons } from '@khanacademy/wonder-blocks-icon';
 import ReactDOM from 'react-dom';
 import { Popper } from 'react-popper';
 import { VariableSizeList } from 'react-window';
 import { maybeGetPortalMountedModalHostElement } from '@khanacademy/wonder-blocks-modal';
 import { withActionScheduler } from '@khanacademy/wonder-blocks-timing';
-import PopperJS from 'popper.js';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
 
-function _classCallCheck(instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-}
-
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, descriptor.key, descriptor);
-  }
-}
-
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  return Constructor;
-}
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-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);
-}
-
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
-    keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
-  }
-
-  return target;
-}
-
-function _inherits(subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function");
-  }
-
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) _setPrototypeOf(subClass, superClass);
-}
-
-function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
-    return o.__proto__ || Object.getPrototypeOf(o);
-  };
-  return _getPrototypeOf(o);
-}
-
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
-function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-  if (Reflect.construct.sham) return false;
-  if (typeof Proxy === "function") return true;
-
-  try {
-    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
-}
-
-function _possibleConstructorReturn(self, call) {
-  if (call && (typeof call === "object" || typeof call === "function")) {
-    return call;
-  }
-
-  return _assertThisInitialized(self);
-}
-
-function _createSuper(Derived) {
-  var hasNativeReflectConstruct = _isNativeReflectConstruct();
-
-  return function _createSuperInternal() {
-    var Super = _getPrototypeOf(Derived),
-        result;
-
-    if (hasNativeReflectConstruct) {
-      var NewTarget = _getPrototypeOf(this).constructor;
-
-      result = Reflect.construct(Super, arguments, NewTarget);
-    } else {
-      result = Super.apply(this, arguments);
-    }
-
-    return _possibleConstructorReturn(this, result);
-  };
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _createForOfIteratorHelper(o, allowArrayLike) {
-  var it;
-
-  if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
-    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-      if (it) o = it;
-      var i = 0;
-
-      var F = function () {};
-
-      return {
-        s: F,
-        n: function () {
-          if (i >= o.length) return {
-            done: true
-          };
-          return {
-            done: false,
-            value: o[i++]
-          };
-        },
-        e: function (e) {
-          throw e;
-        },
-        f: F
-      };
-    }
-
-    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-
-  var normalCompletion = true,
-      didErr = false,
-      err;
-  return {
-    s: function () {
-      it = o[Symbol.iterator]();
-    },
-    n: function () {
-      var step = it.next();
-      normalCompletion = step.done;
-      return step;
-    },
-    e: function (e) {
-      didErr = true;
-      err = e;
-    },
-    f: function () {
-      try {
-        if (!normalCompletion && it.return != null) it.return();
-      } finally {
-        if (didErr) throw err;
-      }
-    }
-  };
-}
-
-var keyCodes = {
+const keyCodes = {
   tab: 9,
   enter: 13,
   escape: 27,
@@ -319,142 +26,127 @@ var keyCodes = {
   up: 38,
   down: 40
 };
-var selectDropdownStyle = {
+const selectDropdownStyle = {
   marginTop: Spacing.xSmall_8,
   marginBottom: Spacing.xSmall_8
 }; // Filterable dropdown has minimum dimensions requested from Design.
 // Note that these can be overridden by the provided style if needed.
 
-var filterableDropdownStyle = {
+const filterableDropdownStyle = {
   minHeight: 100,
   maxHeight: 384
 };
-var searchInputStyle = {
+const searchInputStyle = {
   margin: Spacing.xSmall_8,
   marginTop: Spacing.xxxSmall_4
 }; // The default item height
 
-var DROPDOWN_ITEM_HEIGHT = 40;
-var SEPARATOR_ITEM_HEIGHT = 9;
-var SEARCH_ITEM_HEIGHT = DROPDOWN_ITEM_HEIGHT + searchInputStyle.margin + searchInputStyle.marginTop; // The default labels that will be used by different components
+const DROPDOWN_ITEM_HEIGHT = 40;
+const SEPARATOR_ITEM_HEIGHT = 9;
+const SEARCH_ITEM_HEIGHT = DROPDOWN_ITEM_HEIGHT + searchInputStyle.margin + searchInputStyle.marginTop; // The default labels that will be used by different components
 
-var defaultLabels = {
+const defaultLabels = {
   clearSearch: "Clear search",
   filter: "Filter",
   noResults: "No results",
   selectNoneLabel: "Select none",
-  selectAllLabel: function selectAllLabel(numOptions) {
-    return "Select all (".concat(numOptions, ")");
-  },
+  selectAllLabel: numOptions => `Select all (${numOptions})`,
   noneSelected: "0 items",
-  someSelected: function someSelected(numSelectedValues) {
-    return "".concat(numSelectedValues, " items");
-  },
+  someSelected: numSelectedValues => `${numSelectedValues} items`,
   allSelected: "All items"
 };
 
-var blue = Color.blue,
-    white = Color.white,
-    offBlack = Color.offBlack,
-    offBlack32 = Color.offBlack32;
-var StyledAnchor = addStyle("a");
-var StyledButton = addStyle("button");
-var StyledLink = addStyle(Link);
+const {
+  blue,
+  white,
+  offBlack,
+  offBlack32
+} = Color;
+const StyledAnchor = addStyle("a");
+const StyledButton = addStyle("button");
+const StyledLink = addStyle(Link);
 /**
  * The action item trigger actions, such as navigating to a different page or
  * opening a modal. Supply the href and/or onClick props. Used as a child of
  * ActionMenu.
  */
 
-var ActionItem = /*#__PURE__*/function (_React$Component) {
-  _inherits(ActionItem, _React$Component);
-
-  var _super = _createSuper(ActionItem);
-
-  function ActionItem() {
-    _classCallCheck(this, ActionItem);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(ActionItem, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          skipClientNav = _this$props.skipClientNav,
-          disabled = _this$props.disabled,
-          href = _this$props.href,
-          target = _this$props.target,
-          indent = _this$props.indent,
-          label = _this$props.label,
-          onClick = _this$props.onClick,
-          role = _this$props.role,
-          style = _this$props.style,
-          testId = _this$props.testId;
-      var router = this.context.router;
-      var ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
-      return /*#__PURE__*/createElement(ClickableBehavior, {
-        disabled: disabled,
-        onClick: onClick,
-        href: href,
-        role: role,
-        target: target
-      }, function (state, childrenProps) {
-        var pressed = state.pressed,
-            hovered = state.hovered,
-            focused = state.focused;
-        var defaultStyle = [styles.shared, disabled && styles.disabled, !disabled && (pressed ? styles.active : (hovered || focused) && styles.focus), // pass optional styles from react-window (if applies)
-        style];
-
-        var props = _objectSpread2({
-          "data-test-id": testId,
-          disabled: disabled,
-          role: role,
-          style: [defaultStyle]
-        }, childrenProps);
-
-        var children = /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(LabelMedium, {
-          style: [indent && styles.indent, styles.label]
-        }, label));
-
-        if (href && !disabled) {
-          return router && !skipClientNav && isClientSideUrl(href) ? /*#__PURE__*/createElement(StyledLink, _extends({}, props, {
-            to: href
-          }), children) : /*#__PURE__*/createElement(StyledAnchor, _extends({}, props, {
-            href: href,
-            target: target
-          }), children);
-        } else {
-          return /*#__PURE__*/createElement(StyledButton, _extends({
-            type: "button"
-          }, props, {
-            disabled: disabled
-          }), children);
-        }
-      });
-    }
-  }], [{
-    key: "isClassOf",
-    value: function isClassOf(instance) {
-      return instance && instance.type && instance.type.__IS_ACTION_ITEM__;
-    }
-  }]);
+class ActionItem extends Component {
+  static isClassOf(instance) {
+    return instance && instance.type && instance.type.__IS_ACTION_ITEM__;
+  }
 
-  return ActionItem;
-}(Component);
+  render() {
+    const {
+      skipClientNav,
+      disabled,
+      href,
+      target,
+      indent,
+      label,
+      onClick,
+      role,
+      style,
+      testId
+    } = this.props;
+    const {
+      router
+    } = this.context;
+    const ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
+    return /*#__PURE__*/createElement(ClickableBehavior, {
+      disabled: disabled,
+      onClick: onClick,
+      href: href,
+      role: role,
+      target: target
+    }, (state, childrenProps) => {
+      const {
+        pressed,
+        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)
+      style];
+
+      const props = _extends({
+        "data-test-id": testId,
+        disabled,
+        role,
+        style: [defaultStyle]
+      }, childrenProps);
+
+      const children = /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(LabelMedium, {
+        style: [indent && styles.indent, styles.label]
+      }, label));
+
+      if (href && !disabled) {
+        return router && !skipClientNav && isClientSideUrl(href) ? /*#__PURE__*/createElement(StyledLink, _extends({}, props, {
+          to: href
+        }), children) : /*#__PURE__*/createElement(StyledAnchor, _extends({}, props, {
+          href: href,
+          target: target
+        }), children);
+      } else {
+        return /*#__PURE__*/createElement(StyledButton, _extends({
+          type: "button"
+        }, props, {
+          disabled: disabled
+        }), children);
+      }
+    });
+  }
 
-_defineProperty(ActionItem, "contextTypes", {
+}
+ActionItem.contextTypes = {
   router: any
-});
-
-_defineProperty(ActionItem, "defaultProps", {
+};
+ActionItem.defaultProps = {
   disabled: false,
   indent: false,
   role: "menuitem"
-});
-
-_defineProperty(ActionItem, "__IS_ACTION_ITEM__", true);
-var styles = StyleSheet.create({
+};
+ActionItem.__IS_ACTION_ITEM__ = true;
+const styles = StyleSheet.create({
   shared: {
     background: white,
     color: offBlack,
@@ -496,9 +188,11 @@ var styles = StyleSheet.create({
   }
 });
 
-var offBlack$1 = Color.offBlack,
-    offBlack32$1 = Color.offBlack32,
-    white$1 = Color.white;
+const {
+  offBlack: offBlack$1,
+  offBlack32: offBlack32$1,
+  white: white$1
+} = Color;
 /**
  * Props describing the state of the OptionItem, shared by the checkbox
  * component,
@@ -508,11 +202,13 @@ var offBlack$1 = Color.offBlack,
  * The check component used by OptionItem.
  */
 function Check(props) {
-  var disabled = props.disabled,
-      selected = props.selected,
-      pressed = props.pressed,
-      hovered = props.hovered,
-      focused = props.focused;
+  const {
+    disabled,
+    selected,
+    pressed,
+    hovered,
+    focused
+  } = props;
   return /*#__PURE__*/createElement(Icon, {
     icon: icons.check,
     size: "small",
@@ -520,7 +216,7 @@ function Check(props) {
     style: [styles$1.bounds, !selected && styles$1.hide]
   });
 }
-var styles$1 = StyleSheet.create({
+const styles$1 = StyleSheet.create({
   bounds: {
     // Semantically, this are the constants for a small-sized icon
     minHeight: 16,
@@ -535,15 +231,17 @@ var styles$1 = StyleSheet.create({
 // Please don't copy it automatically and check with designers before using.
 // If the intended icon is a check without a checkbox, you should be using
 // icons.check from the Wonder Blocks Icon package.
-var checkboxCheck = {
+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"
 };
-var blue$1 = Color.blue,
-    white$2 = Color.white,
-    offBlack16 = Color.offBlack16,
-    offBlack32$2 = Color.offBlack32,
-    offBlack50 = Color.offBlack50,
-    offWhite = Color.offWhite;
+const {
+  blue: blue$1,
+  white: white$2,
+  offBlack16,
+  offBlack32: offBlack32$2,
+  offBlack50,
+  offWhite
+} = Color;
 /**
  * Props describing the state of the OptionItem, shared by the check
  * component,
@@ -553,15 +251,17 @@ var blue$1 = Color.blue,
  * The checkbox component used by OptionItem.
  */
 function Checkbox(props) {
-  var disabled = props.disabled,
-      selected = props.selected,
-      pressed = props.pressed,
-      hovered = props.hovered,
-      focused = props.focused;
-  var activeBlue = mix(offBlack32$2, blue$1);
-  var clickInteraction = pressed || hovered || focused;
-  var bgColor = disabled ? offWhite : selected && !clickInteraction ? blue$1 : white$2;
-  var checkColor = disabled ? offBlack32$2 : clickInteraction ? pressed ? activeBlue : blue$1 : white$2;
+  const {
+    disabled,
+    selected,
+    pressed,
+    hovered,
+    focused
+  } = props;
+  const activeBlue = mix(offBlack32$2, blue$1);
+  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, {
       backgroundColor: bgColor
@@ -573,7 +273,7 @@ function Checkbox(props) {
     style: [disabled && selected && styles$2.disabledCheckFormatting]
   }));
 }
-var styles$2 = StyleSheet.create({
+const styles$2 = StyleSheet.create({
   checkbox: {
     // Semantically, this are the constants for a small-sized icon
     minHeight: 16,
@@ -599,124 +299,104 @@ var styles$2 = StyleSheet.create({
   }
 });
 
+const _excluded = ["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.
  */
-var OptionItem = /*#__PURE__*/function (_React$Component) {
-  _inherits(OptionItem, _React$Component);
-
-  var _super = _createSuper(OptionItem);
-
-  function OptionItem() {
-    var _this;
-
-    _classCallCheck(this, OptionItem);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "handleClick", function () {
-      var _this$props = _this.props,
-          onClick = _this$props.onClick,
-          onToggle = _this$props.onToggle,
-          value = _this$props.value;
+class OptionItem extends Component {
+  constructor(...args) {
+    super(...args);
+
+    this.handleClick = () => {
+      const {
+        onClick,
+        onToggle,
+        value
+      } = this.props;
       onToggle(value);
 
       if (onClick) {
         onClick();
       }
-    });
+    };
+  }
 
-    return _this;
+  static isClassOf(instance) {
+    return instance && instance.type && instance.type.__IS_OPTION_ITEM__;
   }
 
-  _createClass(OptionItem, [{
-    key: "getCheckComponent",
-    value: function getCheckComponent() {
-      if (this.props.variant === "check") {
-        return Check;
-      } else {
-        return Checkbox;
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          disabled = _this$props2.disabled,
-          label = _this$props2.label,
-          role = _this$props2.role,
-          selected = _this$props2.selected,
-          testId = _this$props2.testId,
-          style = _this$props2.style,
-          value = _this$props2.value,
-          onClick = _this$props2.onClick,
-          onToggle = _this$props2.onToggle,
-          variant = _this$props2.variant,
-          sharedProps = _objectWithoutProperties(_this$props2, ["disabled", "label", "role", "selected", "testId", "style", "value", "onClick", "onToggle", "variant"]);
-
-      var ClickableBehavior = getClickableBehavior();
-      var CheckComponent = this.getCheckComponent();
-      return /*#__PURE__*/createElement(ClickableBehavior, {
-        disabled: disabled,
-        onClick: this.handleClick,
-        role: role
-      }, function (state, childrenProps) {
-        var pressed = state.pressed,
-            hovered = state.hovered,
-            focused = state.focused;
-        var 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)
-        style];
-        return /*#__PURE__*/createElement(View, _extends({}, sharedProps, {
-          testId: testId,
-          style: defaultStyle,
-          "aria-selected": selected ? "true" : "false",
-          role: role
-        }, childrenProps), /*#__PURE__*/createElement(CheckComponent, {
-          disabled: disabled,
-          selected: selected,
-          pressed: pressed,
-          hovered: hovered,
-          focused: focused
-        }), /*#__PURE__*/createElement(LabelMedium, {
-          style: styles$3.label
-        }, label));
-      });
-    }
-  }], [{
-    key: "isClassOf",
-    value: function isClassOf(instance) {
-      return instance && instance.type && instance.type.__IS_OPTION_ITEM__;
+  getCheckComponent() {
+    if (this.props.variant === "check") {
+      return Check;
+    } else {
+      return Checkbox;
     }
-  }]);
+  }
 
-  return OptionItem;
-}(Component);
+  render() {
+    const _this$props = this.props,
+          {
+      disabled,
+      label,
+      role,
+      selected,
+      testId,
+      style
+    } = _this$props,
+          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
+
+    const ClickableBehavior = getClickableBehavior();
+    const CheckComponent = this.getCheckComponent();
+    return /*#__PURE__*/createElement(ClickableBehavior, {
+      disabled: disabled,
+      onClick: this.handleClick,
+      role: role
+    }, (state, childrenProps) => {
+      const {
+        pressed,
+        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)
+      style];
+      return /*#__PURE__*/createElement(View, _extends({}, sharedProps, {
+        testId: testId,
+        style: defaultStyle,
+        "aria-selected": selected ? "true" : "false",
+        role: role
+      }, childrenProps), /*#__PURE__*/createElement(CheckComponent, {
+        disabled: disabled,
+        selected: selected,
+        pressed: pressed,
+        hovered: hovered,
+        focused: focused
+      }), /*#__PURE__*/createElement(LabelMedium, {
+        style: styles$3.label
+      }, label));
+    });
+  }
 
-_defineProperty(OptionItem, "contextTypes", {
+}
+OptionItem.contextTypes = {
   router: any
-});
-
-_defineProperty(OptionItem, "defaultProps", {
+};
+OptionItem.defaultProps = {
   disabled: false,
-  onToggle: function onToggle() {
-    return void 0;
-  },
+  onToggle: () => void 0,
   role: "option",
   selected: false
-});
-
-_defineProperty(OptionItem, "__IS_OPTION_ITEM__", true);
-var blue$2 = Color.blue,
-    white$3 = Color.white,
-    offBlack$2 = Color.offBlack,
-    offBlack32$3 = Color.offBlack32;
-var styles$3 = StyleSheet.create({
+};
+OptionItem.__IS_OPTION_ITEM__ = true;
+const {
+  blue: blue$2,
+  white: white$3,
+  offBlack: offBlack$2,
+  offBlack32: offBlack32$3
+} = Color;
+const styles$3 = StyleSheet.create({
   itemContainer: {
     flexDirection: "row",
     backgroundColor: white$3,
@@ -756,46 +436,32 @@ var styles$3 = StyleSheet.create({
   }
 });
 
+// Separator item in a dropdown, used to denote a semantic break.
+
 /**
  * A separator used in a dropdown menu.
  */
-var SeparatorItem = /*#__PURE__*/function (_React$Component) {
-  _inherits(SeparatorItem, _React$Component);
-
-  var _super = _createSuper(SeparatorItem);
-
-  function SeparatorItem() {
-    _classCallCheck(this, SeparatorItem);
-
-    return _super.apply(this, arguments);
+class SeparatorItem extends Component {
+  static isClassOf(instance) {
+    return instance && instance.type && instance.type.__IS_SEPARATOR_ITEM__;
   }
 
-  _createClass(SeparatorItem, [{
-    key: "render",
-    value: function render() {
-      return (
-        /*#__PURE__*/
-        // pass optional styles from react-window (if applies)
-        createElement(View, {
-          style: [styles$4.separator, this.props.style],
-          "aria-hidden": "true"
-        })
-      );
-    }
-  }], [{
-    key: "isClassOf",
-    value: function isClassOf(instance) {
-      return instance && instance.type && instance.type.__IS_SEPARATOR_ITEM__;
-    }
-  }]);
-
-  return SeparatorItem;
-}(Component);
+  render() {
+    return (
+      /*#__PURE__*/
+      // pass optional styles from react-window (if applies)
+      createElement(View, {
+        style: [styles$4.separator, this.props.style],
+        "aria-hidden": "true"
+      })
+    );
+  }
 
-_defineProperty(SeparatorItem, "__IS_SEPARATOR_ITEM__", true);
-var styles$4 = StyleSheet.create({
+}
+SeparatorItem.__IS_SEPARATOR_ITEM__ = true;
+const styles$4 = StyleSheet.create({
   separator: {
-    boxShadow: "0 -1px ".concat(Color.offBlack16),
+    boxShadow: `0 -1px ${Color.offBlack16}`,
     height: 1,
     minHeight: 1,
     marginTop: Spacing.xxxSmall_4,
@@ -803,314 +469,52 @@ var styles$4 = StyleSheet.create({
   }
 });
 
-var DropdownOpener = /*#__PURE__*/function (_React$Component) {
-  _inherits(DropdownOpener, _React$Component);
-
-  var _super = _createSuper(DropdownOpener);
-
-  function DropdownOpener() {
-    var _this;
+class DropdownOpener extends Component {
+  constructor(...args) {
+    super(...args);
 
-    _classCallCheck(this, DropdownOpener);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "getTestIdFromProps", function (childrenProps) {
+    this.getTestIdFromProps = childrenProps => {
       return childrenProps.testId || childrenProps["data-test-id"];
-    });
-
-    return _this;
-  }
-
-  _createClass(DropdownOpener, [{
-    key: "renderAnchorChildren",
-    value: function renderAnchorChildren(eventState, clickableChildrenProps) {
-      var _this$props = this.props,
-          disabled = _this$props.disabled,
-          testId = _this$props.testId,
-          text = _this$props.text;
-      var renderedChildren = this.props.children(_objectSpread2(_objectSpread2({}, eventState), {}, {
-        text: text
-      }));
-      var childrenProps = renderedChildren.props;
-      var childrenTestId = this.getTestIdFromProps(childrenProps);
-      return cloneElement(renderedChildren, _objectSpread2(_objectSpread2({}, clickableChildrenProps), {}, {
-        disabled: disabled,
-        onClick: childrenProps.onClick ? function (e) {
-          // This is done to avoid overriding a
-          // custom onClick handler inside the
-          // children node
-          childrenProps.onClick(e);
-          clickableChildrenProps.onClick(e);
-        } : clickableChildrenProps.onClick,
-        // try to get the testId from the child element
-        // If it's not set, try to fallback to the parent's testId
-        "data-test-id": childrenTestId || testId
-      }));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      return /*#__PURE__*/createElement(ClickableBehavior, {
-        onClick: this.props.onClick,
-        disabled: this.props.disabled
-      }, function (eventState, handlers) {
-        return _this2.renderAnchorChildren(eventState, handlers);
-      });
-    }
-  }]);
-
-  return DropdownOpener;
-}(Component);
-
-_defineProperty(DropdownOpener, "defaultProps", {
-  disabled: false
-});
-
-var EmptySizes = Object.freeze({
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0
-});
-/**
- * Get the margin, padding, and border edges for a given element.
- */
-
-function getEdges(element, withoutEdges) {
-  if (!withoutEdges && element instanceof Element) {
-    var style = element.currentStyle || window.getComputedStyle(element);
-    return {
-      margin: {
-        left: parseFloat(style.marginLeft),
-        top: parseFloat(style.marginTop),
-        right: parseFloat(style.marginRight),
-        bottom: parseFloat(style.marginBottom)
-      },
-      padding: {
-        left: parseFloat(style.paddingLeft),
-        top: parseFloat(style.paddingTop),
-        right: parseFloat(style.paddingRight),
-        bottom: parseFloat(style.paddingBottom)
-      },
-      border: {
-        left: parseFloat(style.borderLeftWidth),
-        top: parseFloat(style.borderTopWidth),
-        right: parseFloat(style.borderRightWidth),
-        bottom: parseFloat(style.borderBottomWidth)
-      }
     };
   }
 
-  return {
-    margin: EmptySizes,
-    padding: EmptySizes,
-    border: EmptySizes
-  };
-}
-
-function getBounds(element) {
-  var withoutEdges = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var elementRect = element.getBoundingClientRect();
-  var edges = getEdges(element, withoutEdges);
-  return {
-    left: elementRect.left + edges.margin.left + edges.padding.left + edges.border.left,
-    top: elementRect.top + edges.margin.top + edges.padding.top + edges.border.top,
-    right: elementRect.right - edges.margin.right - edges.padding.right - edges.border.right,
-    bottom: elementRect.bottom - edges.margin.bottom - edges.padding.bottom - edges.border.bottom
-  };
-}
-
-function getAxisIntersection(intersectingRect, boundsRect, axis) {
-  var start = function start(rect) {
-    return axis === "horizontal" ? rect.left : rect.top;
-  };
-
-  var end = function end(rect) {
-    return axis === "horizontal" ? rect.right : rect.bottom;
-  };
-
-  if (end(intersectingRect) <= start(boundsRect)) {
-    return "before";
-  } else if (start(intersectingRect) >= end(boundsRect)) {
-    return "after";
+  renderAnchorChildren(eventState, clickableChildrenProps) {
+    const {
+      disabled,
+      testId,
+      text
+    } = this.props;
+    const renderedChildren = this.props.children(_extends({}, eventState, {
+      text
+    }));
+    const childrenProps = renderedChildren.props;
+    const childrenTestId = this.getTestIdFromProps(childrenProps);
+    return /*#__PURE__*/cloneElement(renderedChildren, _extends({}, clickableChildrenProps, {
+      disabled,
+      onClick: childrenProps.onClick ? e => {
+        // This is done to avoid overriding a
+        // custom onClick handler inside the
+        // children node
+        childrenProps.onClick(e);
+        clickableChildrenProps.onClick(e);
+      } : clickableChildrenProps.onClick,
+      // try to get the testId from the child element
+      // If it's not set, try to fallback to the parent's testId
+      "data-test-id": childrenTestId || testId
+    }));
   }
 
-  return "within";
-}
-
-/**
- * Determine how one rectangle intersects another.
- *
- * The intersection should be interpreted as whether the first rectangle is
- * within the second.
- */
-
-function getIntersection(intersectingRect, boundsRect) {
-  var horizontal = getAxisIntersection(intersectingRect, boundsRect, "horizontal");
-  var vertical = getAxisIntersection(intersectingRect, boundsRect, "vertical");
-  return {
-    horizontal: horizontal,
-    vertical: vertical
-  };
-}
-
-/**
- * Determine if an element is obscured by other elements.
- *
- * This uses document.elementFromPoint to see if the given element is being
- * overdrawn by another element. Note that this won't work if the given element
- * has `pointer-events: none`.
- */
-
-function isObscured(anchorElement, popperElement) {
-  // TODO(somewhatabstract): We should be smarter in this algorithm and
-  // actually look at the intersection of the elements doing the obscuring
-  // just as we already do with our scroll parent intersections. That way we
-  // can not only check that the entire element is obscured, but think about
-  // partial obscurement so we can move the tooltip bubble when it's anchor
-  // point is not visible.
-  // Before we assume we're visible let's check to see if something else
-  // is obscuring us. Here we check a variety of points of the element
-  // like topleft, bottomright, and center to see if they are covered by
-  // something, and if so, assume we're not visible.
-  // There are ways that this can still not work, such as different
-  // elements only covering those points and the remainder being visible,
-  // or if some covering element has none for pointer-events style, but
-  // those edge cases shouldn't bother the main usages for this method.
-  // NOTE: If the anchor element has `pointer-events: none`, we're always
-  // going to end up hiding, so, you know, probably don't do that.
-  // We're not explicitly checking for that CSS since it's a corner-case and
-  // would impact perf of the regular cases if we were always checking it.
-  // TODO(somewhatabstract, WB-300): Need to cater to the case where the
-  // viewport is zoomed such that both corners are off screen but the rest
-  // isn't. In this case some browsers don't return the element from
-  // `elementFromPoint` then doesn't return the element.
-  // Also, consider how we might mitigate the pointer-events issue and make
-  // this call more robust.
-  var bounds = getBounds(anchorElement); // This method does the main work, taking some coordinates and determining
-  // if our element is visible at that point or not.
-
-  var isVisible = function isVisible(x, y) {
-    var elAtPoint = document.elementFromPoint(x, y);
-
-    if (elAtPoint != null && (elAtPoint === popperElement || popperElement.contains(elAtPoint))) {
-      // Oh no, we're being obscured by our own popper.
-      // We need to look behind it. Shenanigans time.
-      var pointerEventsStyle = elAtPoint.style.pointerEvents; // Remove pointer events so that we can look through it.
-
-      elAtPoint.style.pointerEvents = "none";
-
-      try {
-        var visible = isVisible(x, y);
-        return visible;
-      } finally {
-        // Make sure we put things back the way we found them. :)
-        elAtPoint.style.pointerEvents = pointerEventsStyle;
-      }
-    }
-
-    if (anchorElement instanceof Element) {
-      // If we are working with an element, then we can do some decendency checks
-      // to ensure we're not just hitting a child. We're ok with saying that
-      // we're visible if we hit a parent because we check them for visibility
-      // elsewhere.
-      return elAtPoint != null && (anchorElement.contains(elAtPoint) || elAtPoint.contains(anchorElement));
-    } // If element is a reference object, all we have to work with is
-    // intersection for checking obscurity. Since this doesn't cover
-    // parent/child relationships in the DOM, it's not really effective
-    // on its own and is possibly about as good as just returning `true`.
-
-
-    var intersection = elAtPoint && getIntersection(bounds, getBounds(elAtPoint, true));
-    return (intersection === null || intersection === void 0 ? void 0 : intersection.horizontal) !== "within" || (intersection === null || intersection === void 0 ? void 0 : intersection.vertical) !== "within";
-  }; // NOTE: We are using functions here so that we only do as much work
-  // as we need to, short-circuiting as soon as we have a definitive
-  // answer.
-
-
-  var isTopLeftVisible = function isTopLeftVisible() {
-    return isVisible(bounds.left, bounds.top);
-  };
-
-  var isBottomRightVisible = function isBottomRightVisible() {
-    return isVisible(bounds.right, bounds.bottom);
-  };
-
-  var isCenterVisible = function isCenterVisible() {
-    return isVisible(bounds.left + (bounds.right - bounds.left) / 2, bounds.top + (bounds.bottom - bounds.top) / 2);
-  };
-
-  return !isTopLeftVisible() && !isBottomRightVisible() && !isCenterVisible();
-}
-
-var _PopperJS$Defaults$mo, _PopperJS$Defaults$mo2;
-/**
- * The function that implements the modifier.
- */
-
-function visibilityModifierFn(data) {
-  var anchorElement = data.instance.reference; // First, we see how the element intersects with its scroll parents.
-  // If it doesn't, then we should hide it.
-  // Otherwise, we check to see if anything else obscures the component (like
-  // a fixed or absolute positioned element).
-
-  var _getElementIntersecti = getElementIntersection(anchorElement),
-      horizontal = _getElementIntersecti.horizontal,
-      vertical = _getElementIntersecti.vertical;
-
-  var hide = horizontal !== "within" || vertical !== "within" || isObscured(anchorElement, data.instance.popper); // If we're hidden, we mimic what the built-in hide method does,
-  // and set the hide flag and the OOB attribute with appropriate
-  // short-circuiting.
-  // https://github.com/FezVrasta/popper.js/blob/08c5d6010346bf9df06e9f81a54fa6c2c51e3639/packages/popper/src/modifiers/hide.js#L29-L42
-
-  if (hide) {
-    if (data.hide) {
-      return data;
-    }
-
-    data.hide = true;
-    data.attributes["x-out-of-boundaries"] = "";
-  } else {
-    // Avoid unnecessary DOM access if visibility hasn't changed
-    if (!data.hide) {
-      return data;
-    }
-
-    data.hide = false;
-    data.attributes["x-out-of-boundaries"] = false;
-  } // Always have to return the data object to ensure the modifier chain
-  // in popper.js is unbroken.
-
+  render() {
+    return /*#__PURE__*/createElement(ClickableBehavior, {
+      onClick: this.props.onClick,
+      disabled: this.props.disabled
+    }, (eventState, handlers) => this.renderAnchorChildren(eventState, handlers));
+  }
 
-  return data;
 }
-/**
- * Default configuration that sets things up how usually want them.
- * Usage:
- * ```js
- *     import visibilityModifier from "visibility-modifier.js";
- *     const modifiers = [
- *         wbvisibility: visibilityModifier,
- *     ];
- * ```
- *
- * Where `wbvisibility` is a unique name to give the modifier entry,
- * and `modifiers` is the popper.js or react-popper modifiers array.
- */
-
 
-var visibilityModifierDefaultConfig = {
-  enabled: true,
-  // We want this to run after the "hide" modifier, by default.
-  order: (((_PopperJS$Defaults$mo = PopperJS.Defaults.modifiers) === null || _PopperJS$Defaults$mo === void 0 ? void 0 : (_PopperJS$Defaults$mo2 = _PopperJS$Defaults$mo.hide) === null || _PopperJS$Defaults$mo2 === void 0 ? void 0 : _PopperJS$Defaults$mo2.order) || 0) + 1,
-  fn: visibilityModifierFn
+DropdownOpener.defaultProps = {
+  disabled: false
 };
 
 /**
@@ -1118,191 +522,163 @@ var visibilityModifierDefaultConfig = {
  * (ActionItem, OptionItem, SeparatorItem) with custom styles to let
  * react-window make its own calculations.
  */
-var DropdownVirtualizedItem = /*#__PURE__*/function (_React$Component) {
-  _inherits(DropdownVirtualizedItem, _React$Component);
-
-  var _super = _createSuper(DropdownVirtualizedItem);
-
-  function DropdownVirtualizedItem() {
-    _classCallCheck(this, DropdownVirtualizedItem);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(DropdownVirtualizedItem, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          data = _this$props.data,
-          index = _this$props.index,
-          style = _this$props.style;
-      var item = data[index];
-
-      if (SeparatorItem.isClassOf(item.component)) {
-        // add react-window style to the separator to preserve the correct
-        // position
-        return cloneElement(item.component, {
-          style: style
-        });
-      } else {
-        var component = item.component,
-            populatedProps = item.populatedProps,
-            onClick = item.onClick,
-            role = item.role,
-            ref = item.ref;
-        return cloneElement(component, _objectSpread2(_objectSpread2({
-          style: style
-        }, populatedProps), {}, {
-          key: index,
-          onClick: onClick,
-          ref: item.focusable && ref,
-          role: role
-        }));
-      }
-    }
-  }]);
-
-  return DropdownVirtualizedItem;
-}(Component);
-
-var SearchTextInput = /*#__PURE__*/function (_React$Component) {
-  _inherits(SearchTextInput, _React$Component);
-
-  var _super = _createSuper(SearchTextInput);
-
-  function SearchTextInput() {
-    var _this;
-
-    _classCallCheck(this, SearchTextInput);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+class DropdownVirtualizedItem extends Component {
+  render() {
+    const {
+      data,
+      index,
+      style
+    } = this.props;
+    const item = data[index];
+
+    if (SeparatorItem.isClassOf(item.component)) {
+      // add react-window style to the separator to preserve the correct
+      // position
+      return /*#__PURE__*/cloneElement(item.component, {
+        style
+      });
+    } else {
+      const {
+        component,
+        populatedProps,
+        onClick,
+        role,
+        ref
+      } = item;
+      return /*#__PURE__*/cloneElement(component, _extends({
+        style
+      }, populatedProps, {
+        key: index,
+        onClick,
+        ref: item.focusable && ref,
+        role
+      }));
     }
+  }
 
-    _this = _super.call.apply(_super, [this].concat(args));
+}
 
-    _defineProperty(_assertThisInitialized(_this), "state", {
+class SearchTextInput extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
       focused: false,
-      labels: _objectSpread2({
+      labels: _extends({
         clearSearch: defaultLabels.clearSearch,
         filter: defaultLabels.filter
-      }, _this.props.labels)
-    });
+      }, this.props.labels)
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleChange", function (e) {
+    this.handleChange = e => {
       e.preventDefault();
+      this.props.onChange(e.target.value);
+    };
 
-      _this.props.onChange(e.target.value);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleDismiss", function () {
-      var _this$props = _this.props,
-          onClick = _this$props.onClick,
-          onChange = _this$props.onChange; // Empty the search text and focus the SearchTextInput
+    this.handleDismiss = () => {
+      const {
+        onClick,
+        onChange
+      } = this.props; // Empty the search text and focus the SearchTextInput
 
       onChange("");
 
       if (onClick) {
         onClick();
       }
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleBlur", function (e) {
-      _this.setState({
+    this.handleBlur = e => {
+      this.setState({
         focused: false
       });
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleFocus", function (e) {
-      _this.setState({
+    this.handleFocus = e => {
+      this.setState({
         focused: true
       });
-    });
+    };
+  }
 
-    return _this;
+  static isClassOf(instance) {
+    return instance && instance.type && instance.type.__IS_SEARCH_TEXT_INPUT__;
   }
 
-  _createClass(SearchTextInput, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (this.props.labels !== prevProps.labels) {
-        // eslint-disable-next-line react/no-did-update-set-state
-        this.setState({
-          labels: _objectSpread2(_objectSpread2({}, this.state.labels), this.props.labels)
-        });
-      }
+  componentDidUpdate(prevProps) {
+    if (this.props.labels !== prevProps.labels) {
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState({
+        labels: _extends({}, this.state.labels, this.props.labels)
+      });
     }
-  }, {
-    key: "maybeRenderDismissIconButton",
-    value: function maybeRenderDismissIconButton() {
-      var searchText = this.props.searchText;
-      var clearSearch = this.state.labels.clearSearch;
-
-      if (searchText.length > 0) {
-        return /*#__PURE__*/createElement(IconButton, {
-          icon: icons.dismiss,
-          kind: "tertiary",
-          onClick: this.handleDismiss,
-          style: styles$5.dismissIcon,
-          "aria-label": clearSearch
-        });
-      }
+  }
 
-      return null;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          onClick = _this$props2.onClick,
-          itemRef = _this$props2.itemRef,
-          searchText = _this$props2.searchText,
-          style = _this$props2.style,
-          testId = _this$props2.testId;
-      var filter = this.state.labels.filter;
-      return /*#__PURE__*/createElement(View, {
-        onClick: onClick,
-        style: [styles$5.inputContainer, this.state.focused && styles$5.focused, style]
-      }, /*#__PURE__*/createElement(Icon, {
-        icon: icons.search,
-        size: "medium",
-        color: Color.offBlack64,
-        style: styles$5.searchIcon,
-        "aria-hidden": "true"
-      }), /*#__PURE__*/createElement("input", {
-        type: "text",
-        onChange: this.handleChange,
-        onFocus: this.handleFocus,
-        onBlur: this.handleBlur,
-        ref: itemRef,
-        placeholder: filter,
-        value: searchText,
-        className: css(styles$5.inputStyleReset, styles$a.LabelMedium),
-        "data-test-id": testId
-      }), this.maybeRenderDismissIconButton());
-    }
-  }], [{
-    key: "isClassOf",
-    value: function isClassOf(instance) {
-      return instance && instance.type && instance.type.__IS_SEARCH_TEXT_INPUT__;
+  maybeRenderDismissIconButton() {
+    const {
+      searchText
+    } = this.props;
+    const {
+      clearSearch
+    } = this.state.labels;
+
+    if (searchText.length > 0) {
+      return /*#__PURE__*/createElement(IconButton, {
+        icon: icons.dismiss,
+        kind: "tertiary",
+        onClick: this.handleDismiss,
+        style: styles$5.dismissIcon,
+        "aria-label": clearSearch
+      });
     }
-  }]);
 
-  return SearchTextInput;
-}(Component);
+    return null;
+  }
+
+  render() {
+    const {
+      onClick,
+      itemRef,
+      searchText,
+      style,
+      testId
+    } = this.props;
+    const {
+      filter
+    } = this.state.labels;
+    return /*#__PURE__*/createElement(View, {
+      onClick: onClick,
+      style: [styles$5.inputContainer, this.state.focused && styles$5.focused, style]
+    }, /*#__PURE__*/createElement(Icon, {
+      icon: icons.search,
+      size: "medium",
+      color: Color.offBlack64,
+      style: styles$5.searchIcon,
+      "aria-hidden": "true"
+    }), /*#__PURE__*/createElement("input", {
+      type: "text",
+      onChange: this.handleChange,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      ref: itemRef,
+      placeholder: filter,
+      value: searchText,
+      className: css(styles$5.inputStyleReset, styles$a.LabelMedium),
+      "data-test-id": testId
+    }), this.maybeRenderDismissIconButton());
+  }
 
-_defineProperty(SearchTextInput, "defaultProps", {
+}
+SearchTextInput.defaultProps = {
   labels: {
     clearSearch: defaultLabels.clearSearch,
     filter: defaultLabels.filter
   }
-});
-
-_defineProperty(SearchTextInput, "__IS_SEARCH_TEXT_INPUT__", true);
-var styles$5 = StyleSheet.create({
+};
+SearchTextInput.__IS_SEARCH_TEXT_INPUT__ = true;
+const styles$5 = StyleSheet.create({
   inputContainer: {
     flexDirection: "row",
-    border: "1px solid ".concat(Color.offBlack16),
+    border: `1px solid ${Color.offBlack16}`,
     borderRadius: Spacing.xxxSmall_4,
     alignItems: "center",
     // The height of the text input is 40 in design spec and we need to
@@ -1313,7 +689,7 @@ var styles$5 = StyleSheet.create({
     minHeight: DROPDOWN_ITEM_HEIGHT
   },
   focused: {
-    border: "1px solid ".concat(Color.blue)
+    border: `1px solid ${Color.blue}`
   },
   searchIcon: {
     marginLeft: Spacing.xSmall_8,
@@ -1345,36 +721,23 @@ var styles$5 = StyleSheet.create({
  * number of items that can fit into the visible porition of the
  * dropdowns list box.
  */
-var MAX_VISIBLE_ITEMS = 9;
+const MAX_VISIBLE_ITEMS = 9;
 /**
  * A react-window's List wrapper that instantiates the virtualized list and
  * dynamically calculates the item height depending on the type
  */
 
-var DropdownCoreVirtualized = /*#__PURE__*/function (_React$Component) {
-  _inherits(DropdownCoreVirtualized, _React$Component);
-
-  var _super = _createSuper(DropdownCoreVirtualized);
-
-  function DropdownCoreVirtualized() {
-    var _this;
-
-    _classCallCheck(this, DropdownCoreVirtualized);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      height: _this.getHeight(),
-      width: _this.props.width
-    });
+class DropdownCoreVirtualized extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      height: this.getHeight(),
+      width: this.props.width
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "getItemSize", function (index) {
+    this.getItemSize = index => {
       // get the current item in the list
-      var item = _this.props.data[index];
+      const item = this.props.data[index];
 
       if (SeparatorItem.isClassOf(item.component)) {
         // this is the separator's height (1px) + vertical margin (8px)
@@ -1386,284 +749,253 @@ var DropdownCoreVirtualized = /*#__PURE__*/function (_React$Component) {
         // default dropdown item height
         return DROPDOWN_ITEM_HEIGHT;
       }
-    });
+    };
+  }
 
-    return _this;
+  componentDidMount() {
+    const {
+      schedule
+    } = this.props; // Wait for styles to be applied. This way, we can get a more precise
+    // value of the container dimensions.
+
+    schedule.animationFrame(() => {
+      this.setWidth();
+    });
   }
 
-  _createClass(DropdownCoreVirtualized, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
+  componentDidUpdate(prevProps) {
+    const {
+      data,
+      listRef
+    } = this.props; // if the items size has changed, then recalculate each item position
 
-      var schedule = this.props.schedule; // Wait for styles to be applied. This way, we can get a more precise
-      // value of the container dimensions.
+    if (prevProps.data.length !== data.length) {
+      this.setHeight();
 
-      schedule.animationFrame(function () {
-        _this2.setWidth();
-      });
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var _this$props = this.props,
-          data = _this$props.data,
-          listRef = _this$props.listRef; // if the items size has changed, then recalculate each item position
-
-      if (prevProps.data.length !== data.length) {
-        this.setHeight();
-
-        if (listRef && listRef.current) {
-          // the ref can't associate this instance method
-          // $FlowIgnore
-          listRef.current.resetAfterIndex(1);
-        }
-      }
-    }
-    /**
-     * Update container width
-     */
-
-  }, {
-    key: "setWidth",
-    value: function setWidth() {
-      var rootNode = ReactDOM.findDOMNode(this);
-      var parentNode = rootNode === null || rootNode === void 0 ? void 0 : rootNode.parentElement; // after the non-virtualized items are rendered, we get the container
-      //  width to pass it to react-window's List
-
-      if (parentNode) {
-        var width = parentNode.getBoundingClientRect().width;
-        this.setState({
-          width: width
-        });
+      if (listRef && listRef.current) {
+        // the ref can't associate this instance method
+        // $FlowIgnore
+        listRef.current.resetAfterIndex(1);
       }
     }
-    /**
-     * Update container height
-     */
-
-  }, {
-    key: "setHeight",
-    value: function setHeight() {
-      // calculate dropdown's height depending on the type of items
-      var height = this.getHeight();
+  }
+  /**
+   * Update container width
+   */
+
+
+  setWidth() {
+    const rootNode = ReactDOM.findDOMNode(this);
+    const parentNode = rootNode == null ? void 0 : rootNode.parentElement; // after the non-virtualized items are rendered, we get the container
+    //  width to pass it to react-window's List
+
+    if (parentNode) {
+      const width = parentNode.getBoundingClientRect().width;
       this.setState({
-        height: height
+        width
       });
     }
-    /**
-     * The list height that is automatically calculated depending on the
-     * component's type of each item (e.g. Separator, Option, Search, etc)
-     */
-
-  }, {
-    key: "getHeight",
-    value: function getHeight() {
-      // calculate using the first 10 items on the array as we want to display
-      // this number of elements in the visible area
-      return this.props.data.slice(0, MAX_VISIBLE_ITEMS).reduce(function (sum, item) {
-        if (SeparatorItem.isClassOf(item.component)) {
-          return sum + SEPARATOR_ITEM_HEIGHT;
-        } else if (SearchTextInput.isClassOf(item.component)) {
-          // search text input height
-          return sum + SEARCH_ITEM_HEIGHT;
-        } else {
-          return sum + DROPDOWN_ITEM_HEIGHT;
-        }
-      }, 0);
-    }
-    /**
-     * Calculates item height
-     */
-
-  }, {
-    key: "renderInitialItems",
-
-    /**
-     * render non virtualized items to calculate the container max-width that
-     * will be used by DropdownCoreVirtualized
-     */
-    value: function renderInitialItems() {
-      var data = this.props.data;
-      var allComponents = data.map(function (e) {
-        return e.component;
-      }); // 1. get the children opaque data structure to sort each item by its
-      //    label length
-
-      var longestItems = Children.toArray(allComponents).filter(Boolean).sort(function (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;
-        }
+  }
+  /**
+   * Update container height
+   */
 
-        return -1;
-      }) // 3. only render the possible visible items to minimize layout
-      //    jumps
-      .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(function (item) {
-        return cloneElement(item, {
-          style: {
-            visibility: "hidden"
-          }
-        });
-      });
-    }
-  }, {
-    key: "renderVirtualizedList",
-    value: function renderVirtualizedList() {
-      var _this$props2 = this.props,
-          data = _this$props2.data,
-          listRef = _this$props2.listRef;
-      var _this$state = this.state,
-          height = _this$state.height,
-          width = _this$state.width;
-      return (
-        /*#__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
-        // or strings.
-        // $FlowFixMe
-        , {
-          height: height,
-          itemCount: data.length,
-          itemSize: this.getItemSize,
-          itemData: data,
-          style: {
-            overflowX: "hidden"
-          } // react-window doesn't accept maybe numbers. It wants numbers
-          // or strings.
-          // $FlowFixMe
-          ,
-          width: width,
-          overscanCount: 5,
-          ref: listRef
-        }, DropdownVirtualizedItem)
-      );
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      if (this.state.width === undefined) {
-        // if we don't pass a fixed value, then we need to render
-        // non-virtualized items to calculate width
-        return this.renderInitialItems();
+  setHeight() {
+    // calculate dropdown's height depending on the type of items
+    const height = this.getHeight();
+    this.setState({
+      height
+    });
+  }
+  /**
+   * The list height that is automatically calculated depending on the
+   * component's type of each item (e.g. Separator, Option, Search, etc)
+   */
+
+
+  getHeight() {
+    // calculate using the first 10 items on the array as we want to display
+    // this number of elements in the visible area
+    return this.props.data.slice(0, MAX_VISIBLE_ITEMS).reduce((sum, item) => {
+      if (SeparatorItem.isClassOf(item.component)) {
+        return sum + SEPARATOR_ITEM_HEIGHT;
+      } else if (SearchTextInput.isClassOf(item.component)) {
+        // search text input height
+        return sum + SEARCH_ITEM_HEIGHT;
       } else {
-        // width has been provided, then render the virtualized list
-        return this.renderVirtualizedList();
+        return sum + DROPDOWN_ITEM_HEIGHT;
+      }
+    }, 0);
+  }
+  /**
+   * Calculates item height
+   */
+
+
+  /**
+   * render non virtualized items to calculate the container max-width that
+   * will be used by DropdownCoreVirtualized
+   */
+  renderInitialItems() {
+    const {
+      data
+    } = this.props;
+    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) => {
+      // 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;
+      }
+
+      return -1;
+    }) // 3. only render the possible visible items to minimize layout
+    //    jumps
+    .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, {
+      style: {
+        visibility: "hidden"
       }
+    }));
+  }
+
+  renderVirtualizedList() {
+    const {
+      data,
+      listRef
+    } = this.props;
+    const {
+      height,
+      width
+    } = this.state;
+    return (
+      /*#__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
+      // or strings.
+      // $FlowFixMe
+      , {
+        height: height,
+        itemCount: data.length,
+        itemSize: this.getItemSize,
+        itemData: data,
+        style: {
+          overflowX: "hidden"
+        } // react-window doesn't accept maybe numbers. It wants numbers
+        // or strings.
+        // $FlowFixMe
+        ,
+        width: width,
+        overscanCount: 5,
+        ref: listRef
+      }, DropdownVirtualizedItem)
+    );
+  }
+
+  render() {
+    if (this.state.width === undefined) {
+      // if we don't pass a fixed value, then we need to render
+      // non-virtualized items to calculate width
+      return this.renderInitialItems();
+    } else {
+      // width has been provided, then render the virtualized list
+      return this.renderVirtualizedList();
     }
-  }]);
+  }
 
-  return DropdownCoreVirtualized;
-}(Component);
+}
 
 var DropdownCoreVirtualized$1 = withActionScheduler(DropdownCoreVirtualized);
 
+const _excluded$1 = ["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.
  */
-var DropdownCore = /*#__PURE__*/function (_React$Component) {
-  _inherits(DropdownCore, _React$Component);
-
-  var _super = _createSuper(DropdownCore);
-
-  _createClass(DropdownCore, null, [{
-    key: "sameItemsFocusable",
-    // 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
-    // out focus correctly when the items have changed in terms of whether
-    // they're focusable or not
-    // Whether any items have been selected since the menu was opened
-    // Keeps a reference of the virtualized list instance
-    // Figure out if the same items are focusable. If an item has been added or
-    // removed, this method will return false.
-    value: function sameItemsFocusable(prevItems, currentItems) {
-      if (prevItems.length !== currentItems.length) {
+class DropdownCore extends 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
+  // out focus correctly when the items have changed in terms of whether
+  // they're focusable or not
+  // Whether any items have been selected since the menu was opened
+  // Keeps a reference of the virtualized list instance
+  // Figure out if the same items are focusable. If an item has been added or
+  // removed, this method will return false.
+  static sameItemsFocusable(prevItems, currentItems) {
+    if (prevItems.length !== currentItems.length) {
+      return false;
+    }
+
+    for (let i = 0; i < prevItems.length; i++) {
+      if (prevItems[i].focusable !== currentItems[i].focusable) {
         return false;
       }
+    }
 
-      for (var i = 0; i < prevItems.length; i++) {
-        if (prevItems[i].focusable !== currentItems[i].focusable) {
-          return false;
-        }
-      }
+    return true;
+  }
 
-      return true;
-    }
-  }, {
-    key: "getDerivedStateFromProps",
-    // This is here to avoid calling React.createRef on each rerender. Instead,
-    // we create the itemRefs only if it's the first time or if the set of items
-    // that are focusable has changed.
-    value: function getDerivedStateFromProps(props, state) {
-      if (state.itemRefs.length === 0 && props.open || !DropdownCore.sameItemsFocusable(state.prevItems, props.items)) {
-        var itemRefs = [];
-
-        for (var i = 0; i < props.items.length; i++) {
-          if (props.items[i].focusable) {
-            var ref = createRef();
-            itemRefs.push({
-              ref: ref,
-              originalIndex: i
-            });
-          }
+  // This is here to avoid calling React.createRef on each rerender. Instead,
+  // we create the itemRefs only if it's the first time or if the set of items
+  // that are focusable has changed.
+  static getDerivedStateFromProps(props, state) {
+    if (state.itemRefs.length === 0 && props.open || !DropdownCore.sameItemsFocusable(state.prevItems, props.items)) {
+      const itemRefs = [];
+
+      for (let i = 0; i < props.items.length; i++) {
+        if (props.items[i].focusable) {
+          const ref = /*#__PURE__*/createRef();
+          itemRefs.push({
+            ref,
+            originalIndex: i
+          });
         }
-
-        return {
-          itemRefs: itemRefs,
-          prevItems: props.items,
-          sameItemsFocusable: false
-        };
-      } else {
-        return {
-          prevItems: props.items,
-          sameItemsFocusable: true
-        };
       }
-    }
-  }]);
-
-  function DropdownCore(props) {
-    var _this;
 
-    _classCallCheck(this, DropdownCore);
-
-    _this = _super.call(this, props); // Apply our initial focus index
-
-    _defineProperty(_assertThisInitialized(_this), "focusedIndex", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "focusedOriginalIndex", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "itemsClicked", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "popperElement", void 0);
+      return {
+        itemRefs,
+        prevItems: props.items,
+        sameItemsFocusable: false
+      };
+    } else {
+      return {
+        prevItems: props.items,
+        sameItemsFocusable: true
+      };
+    }
+  }
 
-    _defineProperty(_assertThisInitialized(_this), "listRef", void 0);
+  constructor(props) {
+    super(props); // Apply our initial focus index
 
-    _defineProperty(_assertThisInitialized(_this), "handleInteract", function (event) {
-      var _this$props = _this.props,
-          open = _this$props.open,
-          onOpenChanged = _this$props.onOpenChanged;
-      var target = event.target;
-      var thisElement = ReactDOM.findDOMNode(_assertThisInitialized(_this));
+    this.handleInteract = event => {
+      const {
+        open,
+        onOpenChanged
+      } = this.props;
+      const target = event.target;
+      const thisElement = ReactDOM.findDOMNode(this);
 
-      if (open && thisElement && !thisElement.contains(target) && _this.popperElement && !_this.popperElement.contains(target)) {
+      if (open && thisElement && !thisElement.contains(target) && this.popperElement && !this.popperElement.contains(target)) {
         onOpenChanged(false);
       }
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
-      var _this$props2 = _this.props,
-          onOpenChanged = _this$props2.onOpenChanged,
-          open = _this$props2.open,
-          searchText = _this$props2.searchText;
-      var keyCode = event.which || event.keyCode; // If menu isn't open and user presses down, open the menu
+    this.handleKeyDown = event => {
+      const {
+        onOpenChanged,
+        open,
+        searchText
+      } = this.props;
+      const keyCode = event.which || event.keyCode; // If menu isn't open and user presses down, open the menu
 
       if (!open) {
         if (keyCode === keyCodes.down) {
@@ -1682,19 +1014,18 @@ var DropdownCore = /*#__PURE__*/function (_React$Component) {
           // searchText is entered at least one character, dismiss button
           // is displayed. When user presses tab, we should move focus
           // to the dismiss button.
-          if (_this.hasSearchBox() && _this.focusedIndex === 0 && searchText) {
+          if (this.hasSearchBox() && this.focusedIndex === 0 && searchText) {
             return;
           }
 
-          _this.restoreTabOrder();
-
+          this.restoreTabOrder();
           onOpenChanged(false);
           return;
 
         case keyCodes.space:
           // When we display SearchTextInput and the focus is on it,
           // we should let the user type space.
-          if (_this.hasSearchBox() && _this.focusedIndex === 0) {
+          if (this.hasSearchBox() && this.focusedIndex === 0) {
             return;
           } // Prevent space from scrolling down the page
 
@@ -1704,31 +1035,28 @@ var DropdownCore = /*#__PURE__*/function (_React$Component) {
 
         case keyCodes.up:
           event.preventDefault();
-
-          _this.focusPreviousItem();
-
+          this.focusPreviousItem();
           return;
 
         case keyCodes.down:
           event.preventDefault();
-
-          _this.focusNextItem();
-
+          this.focusNextItem();
           return;
       }
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleKeyUp", function (event) {
-      var _this$props3 = _this.props,
-          onOpenChanged = _this$props3.onOpenChanged,
-          open = _this$props3.open;
-      var keyCode = event.which || event.keyCode;
+    this.handleKeyUp = event => {
+      const {
+        onOpenChanged,
+        open
+      } = this.props;
+      const keyCode = event.which || event.keyCode;
 
       switch (keyCode) {
         case keyCodes.space:
           // When we display SearchTextInput and the focus is on it,
           // we should let the user type space.
-          if (_this.hasSearchBox() && _this.focusedIndex === 0) {
+          if (this.hasSearchBox() && this.focusedIndex === 0) {
             return;
           } // Prevent space from scrolling down the page
 
@@ -1741,25 +1069,23 @@ var DropdownCore = /*#__PURE__*/function (_React$Component) {
           // listening for an escape press
           if (open) {
             event.stopPropagation();
-
-            _this.restoreTabOrder();
-
+            this.restoreTabOrder();
             onOpenChanged(false);
           }
 
           return;
       }
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleClickFocus", function (index) {
+    this.handleClickFocus = index => {
       // Turn itemsClicked on so pressing up or down would focus the
       // appropriate item in handleKeyDown
-      _this.itemsClicked = true;
-      _this.focusedIndex = index;
-      _this.focusedOriginalIndex = _this.state.itemRefs[_this.focusedIndex].originalIndex;
-    });
+      this.itemsClicked = true;
+      this.focusedIndex = index;
+      this.focusedOriginalIndex = this.state.itemRefs[this.focusedIndex].originalIndex;
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleDropdownMouseUp", function (event) {
+    this.handleDropdownMouseUp = event => {
       // $FlowIgnore[method-unbinding]
       if (event.nativeEvent.stopImmediatePropagation) {
         event.nativeEvent.stopImmediatePropagation();
@@ -1767,412 +1093,395 @@ var DropdownCore = /*#__PURE__*/function (_React$Component) {
         // Workaround for jsdom
         event.stopPropagation();
       }
-    });
-
-    _this.resetFocusedIndex();
+    };
 
-    _this.state = {
-      prevItems: _this.props.items,
+    this.resetFocusedIndex();
+    this.state = {
+      prevItems: this.props.items,
       itemRefs: [],
       sameItemsFocusable: false,
-      labels: _objectSpread2({
+      labels: _extends({
         noResults: defaultLabels.noResults
       }, props.labels)
     };
-    _this.listRef = createRef();
-    return _this;
+    this.listRef = /*#__PURE__*/createRef();
+  }
+
+  componentDidMount() {
+    this.updateEventListeners();
+    this.initialFocusItem();
   }
 
-  _createClass(DropdownCore, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
+  componentDidUpdate(prevProps) {
+    const {
+      open
+    } = this.props;
+
+    if (prevProps.open !== open) {
       this.updateEventListeners();
       this.initialFocusItem();
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var _this2 = this;
-
-      var open = this.props.open;
-
-      if (prevProps.open !== open) {
-        this.updateEventListeners();
-        this.initialFocusItem();
-      } // If the menu changed, but from open to open, figure out if we need
-      // to recalculate the focus somehow.
-      else if (open) {
-          var _this$state = this.state,
-              itemRefs = _this$state.itemRefs,
-              sameItemsFocusable = _this$state.sameItemsFocusable; // Check if the same items are focused by comparing the items at
-          // each index and seeing if the {focusable} property is the same.
-          // Very rarely do the set of focusable items change if the menu
-          // hasn't been re-opened. This is for cases like a {Select all}
-          // option that becomes disabled iff all the options are selected.
-
-          if (sameItemsFocusable) {
-            return;
-          } else {
-            // If the set of items that was focusabled changed, it's very
-            // likely that the previously focused item no longer has the
-            // same index relative to the list of focusable items. Instead,
-            // use the focusedOriginalIndex to find the new index of the
-            // last item that was focused before this change
-            var newFocusableIndex = itemRefs.findIndex(function (ref) {
-              return ref.originalIndex === _this2.focusedOriginalIndex;
-            });
-
-            if (newFocusableIndex === -1) {
-              // Can't find the originally focused item, return focus to
-              // the first item that IS focusable
-              this.focusedIndex = 0; // Reset the knowlege that things had been clicked
-
-              this.itemsClicked = false;
-              this.scheduleToFocusCurrentItem();
-            } else {
-              this.focusedIndex = newFocusableIndex;
-            }
-          }
-
-          if (this.props.labels !== prevProps.labels) {
-            // eslint-disable-next-line react/no-did-update-set-state
-            this.setState({
-              labels: _objectSpread2(_objectSpread2({}, this.state.labels), this.props.labels)
-            });
-          }
-        }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.removeEventListeners();
-    }
-  }, {
-    key: "hasSearchBox",
-    value: function hasSearchBox() {
-      return !!this.props.onSearchTextChanged && typeof this.props.searchText === "string";
-    } // Resets our initial focus index to what was passed in
-    // via the props
-
-  }, {
-    key: "resetFocusedIndex",
-    value: function resetFocusedIndex() {
-      var initialFocusedIndex = this.props.initialFocusedIndex; // If we are given an initial focus index, select it.  Otherwise
-      // default to the first item
-
-      if (initialFocusedIndex) {
-        // If we have a search box visible, then our focus
-        // index is going to be offset by 1, since the orginal
-        // index doesn't account for the search box's
-        // existence.
-        if (this.hasSearchBox()) {
-          this.focusedIndex = initialFocusedIndex + 1;
+    } // If the menu changed, but from open to open, figure out if we need
+    // to recalculate the focus somehow.
+    else if (open) {
+      const {
+        itemRefs,
+        sameItemsFocusable
+      } = this.state; // Check if the same items are focused by comparing the items at
+      // each index and seeing if the {focusable} property is the same.
+      // Very rarely do the set of focusable items change if the menu
+      // hasn't been re-opened. This is for cases like a {Select all}
+      // option that becomes disabled iff all the options are selected.
+
+      if (sameItemsFocusable) {
+        return;
+      } else {
+        // If the set of items that was focusabled changed, it's very
+        // likely that the previously focused item no longer has the
+        // same index relative to the list of focusable items. Instead,
+        // use the focusedOriginalIndex to find the new index of the
+        // last item that was focused before this change
+        const newFocusableIndex = itemRefs.findIndex(ref => ref.originalIndex === this.focusedOriginalIndex);
+
+        if (newFocusableIndex === -1) {
+          // Can't find the originally focused item, return focus to
+          // the first item that IS focusable
+          this.focusedIndex = 0; // Reset the knowlege that things had been clicked
+
+          this.itemsClicked = false;
+          this.scheduleToFocusCurrentItem();
         } else {
-          this.focusedIndex = initialFocusedIndex;
+          this.focusedIndex = newFocusableIndex;
         }
-      } else {
-        this.focusedIndex = 0;
       }
-    } // Figure out focus states for the dropdown after it has changed from open
-    // to closed or vice versa
-
-  }, {
-    key: "initialFocusItem",
-    value: function initialFocusItem() {
-      var open = this.props.open;
-
-      if (open) {
-        this.resetFocusedIndex();
-        this.scheduleToFocusCurrentItem();
-      } else if (!open) {
-        this.itemsClicked = false;
+
+      if (this.props.labels !== prevProps.labels) {
+        // eslint-disable-next-line react/no-did-update-set-state
+        this.setState({
+          labels: _extends({}, this.state.labels, this.props.labels)
+        });
       }
     }
-  }, {
-    key: "updateEventListeners",
-    value: function updateEventListeners() {
-      if (this.props.open) {
-        this.addEventListeners();
+  }
+
+  componentWillUnmount() {
+    this.removeEventListeners();
+  }
+
+  hasSearchBox() {
+    return !!this.props.onSearchTextChanged && typeof this.props.searchText === "string";
+  } // Resets our initial focus index to what was passed in
+  // via the props
+
+
+  resetFocusedIndex() {
+    const {
+      initialFocusedIndex
+    } = this.props; // If we are given an initial focus index, select it.  Otherwise
+    // default to the first item
+
+    if (initialFocusedIndex) {
+      // If we have a search box visible, then our focus
+      // index is going to be offset by 1, since the orginal
+      // index doesn't account for the search box's
+      // existence.
+      if (this.hasSearchBox()) {
+        this.focusedIndex = initialFocusedIndex + 1;
       } else {
-        this.removeEventListeners();
+        this.focusedIndex = initialFocusedIndex;
       }
+    } else {
+      this.focusedIndex = 0;
     }
-  }, {
-    key: "addEventListeners",
-    value: function addEventListeners() {
-      document.addEventListener("mouseup", this.handleInteract);
-      document.addEventListener("touchend", this.handleInteract);
-    }
-  }, {
-    key: "removeEventListeners",
-    value: function removeEventListeners() {
-      document.removeEventListener("mouseup", this.handleInteract);
-      document.removeEventListener("touchend", this.handleInteract);
+  } // Figure out focus states for the dropdown after it has changed from open
+  // to closed or vice versa
+
+
+  initialFocusItem() {
+    const {
+      open
+    } = this.props;
+
+    if (open) {
+      this.resetFocusedIndex();
+      this.scheduleToFocusCurrentItem();
+    } else if (!open) {
+      this.itemsClicked = false;
     }
-  }, {
-    key: "scheduleToFocusCurrentItem",
-    value: function scheduleToFocusCurrentItem() {
-      var _this3 = this;
-
-      // wait for windowed items to be recalculated
-      this.props.schedule.animationFrame(function () {
-        return _this3.focusCurrentItem();
-      });
+  }
+
+  updateEventListeners() {
+    if (this.props.open) {
+      this.addEventListeners();
+    } else {
+      this.removeEventListeners();
     }
-  }, {
-    key: "focusCurrentItem",
-    value: function focusCurrentItem() {
-      var fousedItemRef = this.state.itemRefs[this.focusedIndex];
-
-      if (fousedItemRef) {
-        // force react-window to scroll to ensure the focused item is visible
-        if (this.listRef.current) {
-          // Our focused index does not include disabled items, but the
-          // react-window index system does include the disabled items
-          // in the count.  So we need to use "originalIndex", which
-          // does account for disabled items.
-          this.listRef.current.scrollToItem(fousedItemRef.originalIndex);
-        }
+  }
+
+  addEventListeners() {
+    document.addEventListener("mouseup", this.handleInteract);
+    document.addEventListener("touchend", this.handleInteract);
+  }
 
-        var node = ReactDOM.findDOMNode(fousedItemRef.ref.current);
+  removeEventListeners() {
+    document.removeEventListener("mouseup", this.handleInteract);
+    document.removeEventListener("touchend", this.handleInteract);
+  }
 
-        if (node) {
-          node.focus(); // Keep track of the original index of the newly focused item.
-          // To be used if the set of focusable items in the menu changes
+  scheduleToFocusCurrentItem() {
+    // wait for windowed items to be recalculated
+    this.props.schedule.animationFrame(() => this.focusCurrentItem());
+  }
 
-          this.focusedOriginalIndex = fousedItemRef.originalIndex;
-        }
+  focusCurrentItem() {
+    const fousedItemRef = this.state.itemRefs[this.focusedIndex];
+
+    if (fousedItemRef) {
+      // force react-window to scroll to ensure the focused item is visible
+      if (this.listRef.current) {
+        // Our focused index does not include disabled items, but the
+        // react-window index system does include the disabled items
+        // in the count.  So we need to use "originalIndex", which
+        // does account for disabled items.
+        this.listRef.current.scrollToItem(fousedItemRef.originalIndex);
       }
-    }
-  }, {
-    key: "focusPreviousItem",
-    value: function focusPreviousItem() {
-      if (this.focusedIndex === 0) {
-        this.focusedIndex = this.state.itemRefs.length - 1;
-      } else {
-        this.focusedIndex -= 1;
+
+      const node = ReactDOM.findDOMNode(fousedItemRef.ref.current);
+
+      if (node) {
+        node.focus(); // Keep track of the original index of the newly focused item.
+        // To be used if the set of focusable items in the menu changes
+
+        this.focusedOriginalIndex = fousedItemRef.originalIndex;
       }
+    }
+  }
 
-      this.scheduleToFocusCurrentItem();
+  focusPreviousItem() {
+    if (this.focusedIndex === 0) {
+      this.focusedIndex = this.state.itemRefs.length - 1;
+    } else {
+      this.focusedIndex -= 1;
     }
-  }, {
-    key: "focusNextItem",
-    value: function focusNextItem() {
-      if (this.focusedIndex === this.state.itemRefs.length - 1) {
-        this.focusedIndex = 0;
-      } else {
-        this.focusedIndex += 1;
-      }
 
-      this.scheduleToFocusCurrentItem();
+    this.scheduleToFocusCurrentItem();
+  }
+
+  focusNextItem() {
+    if (this.focusedIndex === this.state.itemRefs.length - 1) {
+      this.focusedIndex = 0;
+    } else {
+      this.focusedIndex += 1;
     }
-  }, {
-    key: "restoreTabOrder",
-    value: function restoreTabOrder() {
-      // NOTE: Because the dropdown is portalled out of its natural
-      // position in the DOM, we need to manually return focus to the
-      // opener element before we let the natural propagation of tab
-      // shift the focus to the next element in the tab order.
-      if (this.props.openerElement) {
-        this.props.openerElement.focus();
-      }
+
+    this.scheduleToFocusCurrentItem();
+  }
+
+  restoreTabOrder() {
+    // NOTE: Because the dropdown is portalled out of its natural
+    // position in the DOM, we need to manually return focus to the
+    // opener element before we let the natural propagation of tab
+    // shift the focus to the next element in the tab order.
+    if (this.props.openerElement) {
+      this.props.openerElement.focus();
     }
-  }, {
-    key: "getItemRole",
-    value: function getItemRole() {
-      var role = this.props.role;
+  }
 
-      switch (role) {
-        case "listbox":
-          return "option";
+  getItemRole() {
+    const {
+      role
+    } = this.props;
 
-        case "menu":
-          return "menuitem";
+    switch (role) {
+      case "listbox":
+        return "option";
 
-        default:
-          throw new Error("Expected \"listbox\" or \"menu\" for role, but receieved \"".concat(role, "\" instead."));
-      }
+      case "menu":
+        return "menuitem";
+
+      default:
+        throw new Error(`Expected "listbox" or "menu" for role, but receieved "${role}" instead.`);
     }
-  }, {
-    key: "maybeRenderNoResults",
-    value: function maybeRenderNoResults() {
-      var _this$props4 = this.props,
-          items = _this$props4.items,
-          onSearchTextChanged = _this$props4.onSearchTextChanged,
-          searchText = _this$props4.searchText,
-          noResults = _this$props4.labels.noResults;
-      var showSearchTextInput = !!onSearchTextChanged && typeof searchText === "string";
-      var includeSearchCount = showSearchTextInput ? 1 : 0; // Verify if there are items to be rendered or not
-
-      var numResults = items.length - includeSearchCount;
-
-      if (numResults === 0) {
-        return /*#__PURE__*/createElement(LabelMedium, {
-          style: styles$6.noResult,
-          testId: "dropdown-core-no-results"
-        }, noResults);
+  }
+
+  maybeRenderNoResults() {
+    const {
+      items,
+      onSearchTextChanged,
+      searchText,
+      labels: {
+        noResults
       }
+    } = this.props;
+    const showSearchTextInput = !!onSearchTextChanged && typeof searchText === "string";
+    const includeSearchCount = showSearchTextInput ? 1 : 0; // Verify if there are items to be rendered or not
 
-      return null;
+    const numResults = items.length - includeSearchCount;
+
+    if (numResults === 0) {
+      return /*#__PURE__*/createElement(LabelMedium, {
+        style: styles$6.noResult,
+        testId: "dropdown-core-no-results"
+      }, noResults);
     }
-    /**
-     * Process the items and wrap them into an array that react-window can
-     * interpret
-     */
-
-  }, {
-    key: "parseItemsList",
-    value: function parseItemsList() {
-      var _this4 = this;
-
-      var focusCounter = 0;
-      var itemRole = this.getItemRole();
-      return this.props.items.map(function (item, index) {
-        if (!SeparatorItem.isClassOf(item.component) && item.focusable) {
-          focusCounter += 1;
-        }
 
-        var focusIndex = focusCounter - 1;
-
-        if (SearchTextInput.isClassOf(item.component)) {
-          return _objectSpread2(_objectSpread2({}, item), {}, {
-            // override to avoid losing focus when pressing a key
-            onClick: function onClick() {
-              _this4.handleClickFocus(0);
-
-              _this4.focusCurrentItem();
-            },
-            populatedProps: {
-              style: searchInputStyle,
-              // pass the current ref down to the input element
-              itemRef: _this4.state.itemRefs[focusIndex] ? _this4.state.itemRefs[focusIndex].ref : null
-            }
-          });
-        }
+    return null;
+  }
+  /**
+   * Process the items and wrap them into an array that react-window can
+   * interpret
+   */
 
-        return _objectSpread2(_objectSpread2({}, item), {}, {
-          role: itemRole,
-          ref: item.focusable ? _this4.state.itemRefs[focusIndex] ? _this4.state.itemRefs[focusIndex].ref : null : null,
-          onClick: function onClick() {
-            _this4.handleClickFocus(focusIndex);
 
-            if (item.component.props.onClick) {
-              item.component.props.onClick();
-            }
+  parseItemsList() {
+    let focusCounter = 0;
+    const itemRole = this.getItemRole();
+    return this.props.items.map((item, index) => {
+      if (!SeparatorItem.isClassOf(item.component) && item.focusable) {
+        focusCounter += 1;
+      }
+
+      const focusIndex = focusCounter - 1;
 
-            if (item.populatedProps.onClick) {
-              item.populatedProps.onClick();
-            }
+      if (SearchTextInput.isClassOf(item.component)) {
+        return _extends({}, item, {
+          // override to avoid losing focus when pressing a key
+          onClick: () => {
+            this.handleClickFocus(0);
+            this.focusCurrentItem();
+          },
+          populatedProps: {
+            style: searchInputStyle,
+            // pass the current ref down to the input element
+            itemRef: this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null
           }
         });
+      }
+
+      return _extends({}, item, {
+        role: itemRole,
+        ref: item.focusable ? this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null : null,
+        onClick: () => {
+          this.handleClickFocus(focusIndex);
+
+          if (item.component.props.onClick) {
+            item.component.props.onClick();
+          }
+
+          if (item.populatedProps.onClick) {
+            item.populatedProps.onClick();
+          }
+        }
       });
-    }
-  }, {
-    key: "renderItems",
-    value: function renderItems(outOfBoundaries) {
-      var _this$props5 = this.props,
-          dropdownStyle = _this$props5.dropdownStyle,
-          light = _this$props5.light,
-          openerElement = _this$props5.openerElement; // The dropdown width is at least the width of the opener.
-      // It's only used if the element exists in the DOM
-
-      var openerStyle = openerElement && window.getComputedStyle(openerElement);
-      var minDropdownWidth = openerStyle ? openerStyle.getPropertyValue("width") : 0; // preprocess items data to pass it to the renderer
-
-      var itemsList = this.parseItemsList();
-      return /*#__PURE__*/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, outOfBoundaries && styles$6.hidden, {
-          minWidth: minDropdownWidth
-        }, dropdownStyle]
-      }, /*#__PURE__*/createElement(DropdownCoreVirtualized$1, {
-        data: itemsList,
-        listRef: this.listRef
-      }), this.maybeRenderNoResults());
-    }
-  }, {
-    key: "renderDropdown",
-    value: function renderDropdown() {
-      var _this5 = this;
-
-      var _this$props6 = this.props,
-          alignment = _this$props6.alignment,
-          openerElement = _this$props6.openerElement; // If we are in a modal, we find where we should be portalling the menu
-      // by using the helper function from the modal package on the opener
-      // element.
-      // If we are not in a modal, we use body as the location to portal to.
-
-      var modalHost = maybeGetPortalMountedModalHostElement(openerElement) || document.querySelector("body");
-
-      if (modalHost) {
-        return ReactDOM.createPortal( /*#__PURE__*/createElement(Popper, {
-          innerRef: function innerRef(node) {
-            if (node) {
-              _this5.popperElement = node;
-            }
-          },
-          referenceElement: this.props.openerElement,
-          placement: alignment === "left" ? "bottom-start" : "bottom-end",
-          modifiers: {
-            wbVisibility: visibilityModifierDefaultConfig,
-            preventOverflow: {
-              boundariesElement: "viewport",
-              escapeWithReference: true
-            }
+    });
+  }
+
+  renderItems(isReferenceHidden) {
+    const {
+      dropdownStyle,
+      light,
+      openerElement
+    } = this.props; // The dropdown width is at least the width of the opener.
+    // It's only used if the element exists in the DOM
+
+    const openerStyle = openerElement && window.getComputedStyle(openerElement);
+    const minDropdownWidth = openerStyle ? openerStyle.getPropertyValue("width") : 0; // preprocess items data to pass it to the renderer
+
+    const itemsList = this.parseItemsList();
+    return /*#__PURE__*/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, {
+        minWidth: minDropdownWidth
+      }, dropdownStyle]
+    }, /*#__PURE__*/createElement(DropdownCoreVirtualized$1, {
+      data: itemsList,
+      listRef: this.listRef
+    }), this.maybeRenderNoResults());
+  }
+
+  renderDropdown() {
+    const {
+      alignment,
+      openerElement
+    } = this.props; // If we are in a modal, we find where we should be portalling the menu
+    // by using the helper function from the modal package on the opener
+    // element.
+    // If we are not in a modal, we use body as the location to portal to.
+
+    const modalHost = maybeGetPortalMountedModalHostElement(openerElement) || document.querySelector("body");
+
+    if (modalHost) {
+      return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/createElement(Popper, {
+        innerRef: node => {
+          if (node) {
+            this.popperElement = node;
           }
-        }, function (_ref) {
-          var placement = _ref.placement,
-              ref = _ref.ref,
-              style = _ref.style,
-              outOfBoundaries = _ref.outOfBoundaries;
-
-          // For some reason react-popper includes `pointerEvents: "none"`
-          // in the `style` it passes to us, but only when running the tests.
-          var _ = style.pointerEvents,
-              restStyle = _objectWithoutProperties(style, ["pointerEvents"]);
-
-          return /*#__PURE__*/createElement("div", {
-            ref: ref,
-            style: restStyle,
-            "data-placement": placement
-          }, _this5.renderItems(outOfBoundaries));
-        }), modalHost);
-      }
+        },
+        referenceElement: this.props.openerElement,
+        strategy: "fixed",
+        placement: alignment === "left" ? "bottom-start" : "bottom-end",
+        modifiers: [{
+          name: "preventOverflow",
+          options: {
+            rootBoundary: "viewport",
+            // Allows to overlap the popper in case there's
+            // no more vertical room in the viewport.
+            altAxis: true,
+            // Also needed to make sure the Popper will be
+            // displayed correctly in different contexts
+            // (e.g inside a Modal)
+            tether: false
+          }
+        }]
+      }, ({
+        placement,
+        ref,
+        style,
+        hasPopperEscaped,
+        isReferenceHidden
+      }) => {
+        // For some reason react-popper includes `pointerEvents: "none"`
+        // in the `style` it passes to us, but only when running the tests.
+        const restStyle = _objectWithoutPropertiesLoose(style, _excluded$1);
+
+        return /*#__PURE__*/createElement("div", {
+          ref: ref,
+          style: restStyle,
+          "data-placement": placement
+        }, this.renderItems(hasPopperEscaped || isReferenceHidden));
+      }), modalHost);
+    }
+
+    return null;
+  }
 
-      return null;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props7 = this.props,
-          open = _this$props7.open,
-          opener = _this$props7.opener,
-          style = _this$props7.style,
-          className = _this$props7.className;
-      return /*#__PURE__*/createElement(View, {
-        onKeyDown: this.handleKeyDown,
-        onKeyUp: this.handleKeyUp,
-        style: [styles$6.menuWrapper, style],
-        className: className
-      }, opener, open && this.renderDropdown());
-    }
-  }]);
+  render() {
+    const {
+      open,
+      opener,
+      style,
+      className
+    } = this.props;
+    return /*#__PURE__*/createElement(View, {
+      onKeyDown: this.handleKeyDown,
+      onKeyUp: this.handleKeyUp,
+      style: [styles$6.menuWrapper, style],
+      className: className
+    }, opener, open && this.renderDropdown());
+  }
 
-  return DropdownCore;
-}(Component);
+}
 
-_defineProperty(DropdownCore, "defaultProps", {
+DropdownCore.defaultProps = {
   alignment: "left",
   labels: {
     noResults: defaultLabels.noResults
   },
   light: false
-});
-
-var styles$6 = StyleSheet.create({
+};
+const styles$6 = StyleSheet.create({
   menuWrapper: {
     width: "fit-content"
   },
@@ -2181,8 +1490,8 @@ var styles$6 = StyleSheet.create({
     borderRadius: 4,
     paddingTop: Spacing.xxxSmall_4,
     paddingBottom: Spacing.xxxSmall_4,
-    border: "solid 1px ".concat(Color.offBlack16),
-    boxShadow: "0px 8px 8px 0px ".concat(fade(Color.offBlack, 0.1)),
+    border: `solid 1px ${Color.offBlack16}`,
+    boxShadow: `0px 8px 8px 0px ${fade(Color.offBlack, 0.1)}`,
     overflowY: "auto"
   },
   light: {
@@ -2190,6 +1499,7 @@ var styles$6 = StyleSheet.create({
     border: "none"
   },
   hidden: {
+    pointerEvents: "none",
     visibility: "hidden"
   },
   noResult: {
@@ -2200,7 +1510,8 @@ var styles$6 = StyleSheet.create({
 });
 var DropdownCore$1 = withActionScheduler(DropdownCore);
 
-var StyledButton$1 = addStyle("button");
+const _excluded$2 = ["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
  * of differences:
@@ -2208,69 +1519,55 @@ var StyledButton$1 = addStyle("button");
  * - the down caret icon is smaller that the one that would be used by ButtonCore
  */
 
-var ActionMenuOpenerCore = /*#__PURE__*/function (_React$Component) {
-  _inherits(ActionMenuOpenerCore, _React$Component);
-
-  var _super = _createSuper(ActionMenuOpenerCore);
-
-  function ActionMenuOpenerCore() {
-    _classCallCheck(this, ActionMenuOpenerCore);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(ActionMenuOpenerCore, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          disabledProp = _this$props.disabled,
-          focused = _this$props.focused,
-          hovered = _this$props.hovered,
-          pressed = _this$props.pressed,
-          _ = _this$props.waiting,
-          testId = _this$props.testId,
-          opened = _this$props.opened,
-          ariaLabel = _this$props["aria-label"],
-          restProps = _objectWithoutProperties(_this$props, ["children", "disabled", "focused", "hovered", "pressed", "waiting", "testId", "opened", "aria-label"]);
-
-      var buttonColor = SemanticColor.controlDefault;
-
-      var buttonStyles = _generateStyles(buttonColor);
-
-      var disabled = disabledProp;
-      var defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, buttonStyles.default, disabled && buttonStyles.disabled, !disabled && pressed && buttonStyles.active];
-      var label = /*#__PURE__*/createElement(LabelLarge, {
-        style: sharedStyles.text
-      }, children);
-      return /*#__PURE__*/createElement(StyledButton$1, _extends({
-        "aria-expanded": opened ? "true" : "false",
-        "aria-haspopup": "menu",
-        "aria-label": ariaLabel,
-        disabled: disabled,
-        style: defaultStyle,
-        type: "button"
-      }, restProps, {
-        "data-test-id": testId
-      }), /*#__PURE__*/createElement(View, {
-        style: !disabled && (hovered || focused) && buttonStyles.focus
-      }, label), /*#__PURE__*/createElement(Strut, {
-        size: Spacing.xxxSmall_4
-      }), /*#__PURE__*/createElement(Icon, {
-        size: "small",
-        color: "currentColor",
-        icon: icons.caretDown
-      }));
-    }
-  }]);
-
-  return ActionMenuOpenerCore;
-}(Component);
+class ActionMenuOpenerCore extends Component {
+  render() {
+    const _this$props = this.props,
+          {
+      children,
+      disabled: disabledProp,
+      focused,
+      hovered,
+      pressed,
+      testId,
+      opened,
+      "aria-label": ariaLabel
+    } = _this$props,
+          restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
+
+    const buttonColor = 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__*/createElement(LabelLarge, {
+      style: sharedStyles.text
+    }, children);
+    return /*#__PURE__*/createElement(StyledButton$1, _extends({
+      "aria-expanded": opened ? "true" : "false",
+      "aria-haspopup": "menu",
+      "aria-label": ariaLabel,
+      disabled: disabled,
+      style: defaultStyle,
+      type: "button"
+    }, restProps, {
+      "data-test-id": testId
+    }), /*#__PURE__*/createElement(View, {
+      style: !disabled && (hovered || focused) && buttonStyles.focus
+    }, label), /*#__PURE__*/createElement(Strut, {
+      size: Spacing.xxxSmall_4
+    }), /*#__PURE__*/createElement(Icon, {
+      size: "small",
+      color: "currentColor",
+      icon: icons.caretDown
+    }));
+  }
 
-_defineProperty(ActionMenuOpenerCore, "contextTypes", {
+}
+ActionMenuOpenerCore.contextTypes = {
   router: any
-});
-var sharedStyles = StyleSheet.create({
+};
+const sharedStyles = StyleSheet.create({
   shared: {
     position: "relative",
     display: "inline-flex",
@@ -2316,18 +1613,20 @@ var sharedStyles = StyleSheet.create({
     position: "absolute"
   }
 });
-var styles$7 = {};
+const styles$7 = {};
 
-var _generateStyles = function _generateStyles(color) {
-  var buttonType = color;
+const _generateStyles = color => {
+  const buttonType = color;
 
   if (styles$7[buttonType]) {
     return styles$7[buttonType];
   }
 
-  var offBlack32 = Color.offBlack32;
-  var activeColor = mix(offBlack32, color);
-  var newStyles = {};
+  const {
+    offBlack32
+  } = Color;
+  const activeColor = mix(offBlack32, color);
+  let newStyles = {};
   newStyles = {
     default: {
       background: "none",
@@ -2353,202 +1652,177 @@ var _generateStyles = function _generateStyles(color) {
       cursor: "default"
     }
   };
-  styles$7[buttonType] = StyleSheet.create(newStyles);
-  return styles$7[buttonType];
-};
-
-/**
- * A menu that consists of various types of items.
- */
-var ActionMenu = /*#__PURE__*/function (_React$Component) {
-  _inherits(ActionMenu, _React$Component);
-
-  var _super = _createSuper(ActionMenu);
-
-  function ActionMenu() {
-    var _this;
-
-    _classCallCheck(this, ActionMenu);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
+  styles$7[buttonType] = StyleSheet.create(newStyles);
+  return styles$7[buttonType];
+};
 
-    _defineProperty(_assertThisInitialized(_this), "openerElement", void 0);
+const _excluded$3 = ["text"];
 
-    _defineProperty(_assertThisInitialized(_this), "state", {
+/**
+ * A menu that consists of various types of items.
+ */
+class ActionMenu extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
       opened: false
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleItemSelected", function () {
+    this.handleItemSelected = () => {
       // close menu
-      _this.handleOpenChanged(false); // Bring focus back to the opener element.
+      this.handleOpenChanged(false); // Bring focus back to the opener element.
 
-
-      if (_this.openerElement) {
-        _this.openerElement.focus();
+      if (this.openerElement) {
+        this.openerElement.focus();
       }
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleOpenChanged", function (opened) {
-      _this.setState({
-        opened: opened
+    this.handleOpenChanged = opened => {
+      this.setState({
+        opened
       });
 
-      if (_this.props.onToggle) {
-        _this.props.onToggle(opened);
+      if (this.props.onToggle) {
+        this.props.onToggle(opened);
       }
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleOptionSelected", function (selectedValue) {
-      var _this$props = _this.props,
-          onChange = _this$props.onChange,
-          selectedValues = _this$props.selectedValues; // If either of these are not defined, return.
+    this.handleOptionSelected = selectedValue => {
+      const {
+        onChange,
+        selectedValues
+      } = this.props; // If either of these are not defined, return.
 
       if (!onChange || !selectedValues) {
         return;
       }
 
       if (selectedValues.includes(selectedValue)) {
-        var index = selectedValues.indexOf(selectedValue);
-        var updatedSelection = [].concat(_toConsumableArray(selectedValues.slice(0, index)), _toConsumableArray(selectedValues.slice(index + 1)));
+        const index = selectedValues.indexOf(selectedValue);
+        const updatedSelection = [].concat(selectedValues.slice(0, index), selectedValues.slice(index + 1));
         onChange(updatedSelection);
       } else {
         // Item was newly selected
-        onChange([].concat(_toConsumableArray(selectedValues), [selectedValue]));
+        onChange([].concat(selectedValues, [selectedValue]));
       }
 
-      _this.handleItemSelected();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleOpenerRef", function (node) {
-      _this.openerElement = ReactDOM.findDOMNode(node);
-    });
+      this.handleItemSelected();
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
-      _this.handleOpenChanged(!_this.state.opened);
-    });
+    this.handleOpenerRef = node => {
+      this.openerElement = ReactDOM.findDOMNode(node);
+    };
 
-    return _this;
+    this.handleClick = e => {
+      this.handleOpenChanged(!this.state.opened);
+    };
   }
 
-  _createClass(ActionMenu, [{
-    key: "getMenuItems",
-    value: function getMenuItems() {
-      var _this2 = this;
+  /**
+   * Used to sync the `opened` state when this component acts as a controlled
+   * component
+   */
+  static getDerivedStateFromProps(props, state) {
+    return {
+      opened: typeof props.opened === "boolean" ? props.opened : state.opened
+    };
+  }
 
-      var _this$props2 = this.props,
-          children = _this$props2.children,
-          selectedValues = _this$props2.selectedValues;
-      var allChildren = Children.toArray(children).filter(Boolean); // verify if there's at least one OptionItem element to indent the
-      // possible Action items
+  getMenuItems() {
+    const {
+      children,
+      selectedValues
+    } = this.props;
+    const allChildren = 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));
+    return allChildren.map(item => {
+      const {
+        value,
+        disabled
+      } = item.props;
+      const itemObject = {
+        component: item,
+        focusable: ActionItem.isClassOf(item) || OptionItem.isClassOf(item) ? !disabled : false,
+        populatedProps: {}
+      };
 
-      var isOptionItemIncluded = allChildren.some(function (item) {
-        return OptionItem.isClassOf(item);
-      });
-      return allChildren.map(function (item) {
-        var _item$props = item.props,
-            value = _item$props.value,
-            disabled = _item$props.disabled;
-        var itemObject = {
-          component: item,
-          focusable: ActionItem.isClassOf(item) || OptionItem.isClassOf(item) ? !disabled : false,
-          populatedProps: {}
-        };
+      if (ActionItem.isClassOf(item)) {
+        return _extends({}, itemObject, {
+          populatedProps: {
+            indent: isOptionItemIncluded,
+            onClick: this.handleItemSelected
+          }
+        });
+      } else if (OptionItem.isClassOf(item)) {
+        return _extends({}, itemObject, {
+          populatedProps: {
+            onToggle: this.handleOptionSelected,
+            selected: selectedValues ? selectedValues.includes(value) : false,
+            variant: "check"
+          }
+        });
+      } else {
+        return itemObject;
+      }
+    });
+  }
 
-        if (ActionItem.isClassOf(item)) {
-          return _objectSpread2(_objectSpread2({}, itemObject), {}, {
-            populatedProps: {
-              indent: isOptionItemIncluded,
-              onClick: _this2.handleItemSelected
-            }
-          });
-        } else if (OptionItem.isClassOf(item)) {
-          return _objectSpread2(_objectSpread2({}, itemObject), {}, {
-            populatedProps: {
-              onToggle: _this2.handleOptionSelected,
-              selected: selectedValues ? selectedValues.includes(value) : false,
-              variant: "check"
-            }
-          });
-        } else {
-          return itemObject;
-        }
-      });
-    }
-  }, {
-    key: "renderOpener",
-    value: function renderOpener(numItems) {
-      var _this$props3 = this.props,
-          disabled = _this$props3.disabled,
-          menuText = _this$props3.menuText,
-          opened = _this$props3.opened,
-          opener = _this$props3.opener,
-          testId = _this$props3.testId;
-      return /*#__PURE__*/createElement(DropdownOpener, {
-        onClick: this.handleClick,
-        disabled: numItems === 0 || disabled,
-        text: menuText,
-        ref: this.handleOpenerRef,
-        testId: opener ? undefined : testId
-      }, opener ? opener : function (openerProps) {
-        var text = openerProps.text,
-            eventState = _objectWithoutProperties(openerProps, ["text"]);
-
-        return /*#__PURE__*/createElement(ActionMenuOpenerCore, _extends({}, eventState, {
-          disabled: disabled,
-          opened: !!opened,
-          testId: testId
-        }), menuText);
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props4 = this.props,
-          alignment = _this$props4.alignment,
-          dropdownStyle = _this$props4.dropdownStyle,
-          style = _this$props4.style,
-          className = _this$props4.className;
-      var items = this.getMenuItems();
-      var dropdownOpener = this.renderOpener(items.length);
-      return /*#__PURE__*/createElement(DropdownCore$1, {
-        role: "menu",
-        style: style,
-        className: className,
-        opener: dropdownOpener,
-        alignment: alignment,
-        open: this.state.opened,
-        items: items,
-        openerElement: this.openerElement,
-        onOpenChanged: this.handleOpenChanged,
-        dropdownStyle: [styles$8.menuTopSpace, dropdownStyle]
-      });
-    }
-  }], [{
-    key: "getDerivedStateFromProps",
-
-    /**
-     * Used to sync the `opened` state when this component acts as a controlled
-     * component
-     */
-    value: function getDerivedStateFromProps(props, state) {
-      return {
-        opened: typeof props.opened === "boolean" ? props.opened : state.opened
-      };
-    }
-  }]);
+  renderOpener(numItems) {
+    const {
+      disabled,
+      menuText,
+      opened,
+      opener,
+      testId
+    } = this.props;
+    return /*#__PURE__*/createElement(DropdownOpener, {
+      onClick: this.handleClick,
+      disabled: numItems === 0 || disabled,
+      text: menuText,
+      ref: this.handleOpenerRef,
+      testId: opener ? undefined : testId
+    }, opener ? opener : openerProps => {
+      const eventState = _objectWithoutPropertiesLoose(openerProps, _excluded$3);
+
+      return /*#__PURE__*/createElement(ActionMenuOpenerCore, _extends({}, eventState, {
+        disabled: disabled,
+        opened: !!opened,
+        testId: testId
+      }), menuText);
+    });
+  }
 
-  return ActionMenu;
-}(Component);
+  render() {
+    const {
+      alignment,
+      dropdownStyle,
+      style,
+      className
+    } = this.props;
+    const items = this.getMenuItems();
+    const dropdownOpener = this.renderOpener(items.length);
+    return /*#__PURE__*/createElement(DropdownCore$1, {
+      role: "menu",
+      style: style,
+      className: className,
+      opener: dropdownOpener,
+      alignment: alignment,
+      open: this.state.opened,
+      items: items,
+      openerElement: this.openerElement,
+      onOpenChanged: this.handleOpenChanged,
+      dropdownStyle: [styles$8.menuTopSpace, dropdownStyle]
+    });
+  }
 
-_defineProperty(ActionMenu, "defaultProps", {
+}
+ActionMenu.defaultProps = {
   alignment: "left",
   disabled: false
-});
-var styles$8 = StyleSheet.create({
+};
+const styles$8 = StyleSheet.create({
   caret: {
     marginLeft: 4
   },
@@ -2565,106 +1839,93 @@ var styles$8 = StyleSheet.create({
   }
 });
 
-var StyledButton$2 = addStyle("button");
-var blue$3 = Color.blue,
-    white$4 = Color.white,
-    white50 = Color.white50,
-    offBlack$3 = Color.offBlack,
-    offBlack16$1 = Color.offBlack16,
-    offBlack32$4 = Color.offBlack32,
-    offBlack64 = Color.offBlack64;
+const _excluded$4 = ["children", "disabled", "id", "isPlaceholder", "light", "open", "testId", "onOpenChanged"];
+const StyledButton$2 = addStyle("button");
+const {
+  blue: blue$3,
+  white: white$4,
+  white50,
+  offBlack: offBlack$3,
+  offBlack16: offBlack16$1,
+  offBlack32: offBlack32$4,
+  offBlack64
+} = Color;
 
 /**
  * An opener that opens select boxes.
  */
-var SelectOpener = /*#__PURE__*/function (_React$Component) {
-  _inherits(SelectOpener, _React$Component);
-
-  var _super = _createSuper(SelectOpener);
-
-  function SelectOpener() {
-    var _this;
-
-    _classCallCheck(this, SelectOpener);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
-      var open = _this.props.open;
-
-      _this.props.onOpenChanged(!open);
-    });
+class SelectOpener extends Component {
+  constructor(...args) {
+    super(...args);
+
+    this.handleClick = e => {
+      const {
+        open
+      } = this.props;
+      this.props.onOpenChanged(!open);
+    };
+  }
 
-    return _this;
-  }
-
-  _createClass(SelectOpener, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          disabled = _this$props.disabled,
-          id = _this$props.id,
-          isPlaceholder = _this$props.isPlaceholder,
-          light = _this$props.light,
-          open = _this$props.open,
-          testId = _this$props.testId,
-          onOpenChanged = _this$props.onOpenChanged,
-          sharedProps = _objectWithoutProperties(_this$props, ["children", "disabled", "id", "isPlaceholder", "light", "open", "testId", "onOpenChanged"]);
-
-      var ClickableBehavior = getClickableBehavior(this.context.router);
-      return /*#__PURE__*/createElement(ClickableBehavior, {
+  render() {
+    const _this$props = this.props,
+          {
+      children,
+      disabled,
+      id,
+      isPlaceholder,
+      light,
+      open,
+      testId
+    } = _this$props,
+          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
+
+    const ClickableBehavior = getClickableBehavior(this.context.router);
+    return /*#__PURE__*/createElement(ClickableBehavior, {
+      disabled: disabled,
+      onClick: this.handleClick
+    }, (state, childrenProps) => {
+      const stateStyles = _generateStyles$1(light, isPlaceholder);
+
+      const {
+        hovered,
+        focused,
+        pressed
+      } = 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, {
+        "aria-expanded": open ? "true" : "false",
+        "aria-haspopup": "listbox",
+        "data-test-id": testId,
         disabled: disabled,
-        onClick: this.handleClick
-      }, function (state, childrenProps) {
-        var stateStyles = _generateStyles$1(light, isPlaceholder);
-
-        var hovered = state.hovered,
-            focused = state.focused,
-            pressed = state.pressed; // The icon colors are kind of fickle. This is just logic
-        // based on the zeplin design.
-
-        var iconColor = light ? disabled || pressed ? "currentColor" : white$4 : disabled ? offBlack32$4 : offBlack64;
-        var style = [styles$9.shared, stateStyles.default, disabled && stateStyles.disabled, !disabled && (pressed ? stateStyles.active : (hovered || focused) && stateStyles.focus)];
-        return /*#__PURE__*/createElement(StyledButton$2, _extends({}, sharedProps, {
-          "aria-expanded": open ? "true" : "false",
-          "aria-haspopup": "listbox",
-          "data-test-id": testId,
-          disabled: disabled,
-          id: id,
-          style: style,
-          type: "button"
-        }, childrenProps), /*#__PURE__*/createElement(LabelMedium, {
-          style: styles$9.text
-        }, children), /*#__PURE__*/createElement(Icon, {
-          icon: icons.caretDown,
-          color: iconColor,
-          size: "small",
-          style: styles$9.caret,
-          "aria-hidden": "true"
-        }));
-      });
-    }
-  }]);
-
-  return SelectOpener;
-}(Component);
+        id: id,
+        style: style,
+        type: "button"
+      }, childrenProps), /*#__PURE__*/createElement(LabelMedium, {
+        style: styles$9.text
+      }, children), /*#__PURE__*/createElement(Icon, {
+        icon: icons.caretDown,
+        color: iconColor,
+        size: "small",
+        style: styles$9.caret,
+        "aria-hidden": "true"
+      }));
+    });
+  }
 
-_defineProperty(SelectOpener, "contextTypes", {
+}
+SelectOpener.contextTypes = {
   router: any
-});
-
-_defineProperty(SelectOpener, "defaultProps", {
+};
+SelectOpener.defaultProps = {
   disabled: false,
   light: false,
   isPlaceholder: false
-});
-var buttonRadius = 4;
-var styles$9 = StyleSheet.create({
+};
+const buttonRadius = 4;
+const styles$9 = StyleSheet.create({
   // TODO: Dedupe with Button styles
   shared: {
     position: "relative",
@@ -2703,19 +1964,19 @@ var styles$9 = StyleSheet.create({
 // changing the borderWidth to 2 messes up the button width
 // and causes it to move a couple pixels. This fixes that.
 
-var adjustedPaddingLeft = 16 - 1;
-var adjustedPaddingRight = 12 - 1;
-var stateStyles = {};
+const adjustedPaddingLeft = 16 - 1;
+const adjustedPaddingRight = 12 - 1;
+const stateStyles = {};
 
-var _generateStyles$1 = function _generateStyles(light, placeholder) {
+const _generateStyles$1 = (light, placeholder) => {
   // "hash" the parameters
-  var styleKey = "".concat(String(light), "-").concat(String(placeholder));
+  const styleKey = `${String(light)}-${String(placeholder)}`;
 
   if (stateStyles[styleKey]) {
     return stateStyles[styleKey];
   }
 
-  var newStyles = {};
+  let newStyles = {};
 
   if (light) {
     newStyles = {
@@ -2779,6 +2040,8 @@ var _generateStyles$1 = function _generateStyles(light, placeholder) {
   return stateStyles[styleKey];
 };
 
+const _excluded$5 = ["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
  * for keeping track of the selected item in the select.
@@ -2792,66 +2055,59 @@ var _generateStyles$1 = function _generateStyles(light, placeholder) {
  * hundreds of items without performance problems.
  *
  */
-var SingleSelect = /*#__PURE__*/function (_React$Component) {
-  _inherits(SingleSelect, _React$Component);
-
-  var _super = _createSuper(SingleSelect);
-
-  function SingleSelect(props) {
-    var _this;
-
-    _classCallCheck(this, SingleSelect);
+class SingleSelect extends Component {
+  constructor(props) {
+    super(props);
 
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "selectedIndex", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "handleOpenChanged", function (opened) {
-      _this.setState({
+    this.handleOpenChanged = opened => {
+      this.setState({
         open: opened,
         searchText: ""
       });
 
-      if (_this.props.onToggle) {
-        _this.props.onToggle(opened);
+      if (this.props.onToggle) {
+        this.props.onToggle(opened);
       }
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleToggle", function (selectedValue) {
+    this.handleToggle = selectedValue => {
       // Call callback if selection changed.
-      if (selectedValue !== _this.props.selectedValue) {
-        _this.props.onChange(selectedValue);
+      if (selectedValue !== this.props.selectedValue) {
+        this.props.onChange(selectedValue);
       } // Bring focus back to the opener element.
 
 
-      if (_this.state.open && _this.state.openerElement) {
-        _this.state.openerElement.focus();
+      if (this.state.open && this.state.openerElement) {
+        this.state.openerElement.focus();
       }
 
-      _this.setState({
+      this.setState({
         open: false // close the menu upon selection
 
       });
 
-      if (_this.props.onToggle) {
-        _this.props.onToggle(false);
+      if (this.props.onToggle) {
+        this.props.onToggle(false);
       }
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "mapOptionItemsToDropdownItems", function (children) {
+    this.mapOptionItemsToDropdownItems = children => {
       // Figure out which index should receive focus when this select opens
       // Needs to exclude counting items that are disabled
-      var indexCounter = 0;
-      _this.selectedIndex = 0;
-      return children.map(function (option) {
-        var selectedValue = _this.props.selectedValue;
-        var _option$props = option.props,
-            disabled = _option$props.disabled,
-            value = _option$props.value;
-        var selected = selectedValue === value;
+      let indexCounter = 0;
+      this.selectedIndex = 0;
+      return children.map(option => {
+        const {
+          selectedValue
+        } = this.props;
+        const {
+          disabled,
+          value
+        } = option.props;
+        const selected = selectedValue === value;
 
         if (selected) {
-          _this.selectedIndex = indexCounter;
+          this.selectedIndex = indexCounter;
         }
 
         if (!disabled) {
@@ -2862,39 +2118,37 @@ var SingleSelect = /*#__PURE__*/function (_React$Component) {
           component: option,
           focusable: !disabled,
           populatedProps: {
-            onToggle: _this.handleToggle,
+            onToggle: this.handleToggle,
             selected: selected,
             variant: "check"
           }
         };
       });
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleSearchTextChanged", function (searchText) {
-      _this.setState({
-        searchText: searchText
+    this.handleSearchTextChanged = searchText => {
+      this.setState({
+        searchText
       });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleOpenerRef", function (node) {
-      var openerElement = ReactDOM.findDOMNode(node);
+    };
 
-      _this.setState({
-        openerElement: openerElement
+    this.handleOpenerRef = node => {
+      const openerElement = ReactDOM.findDOMNode(node);
+      this.setState({
+        openerElement
       });
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
-      _this.handleOpenChanged(!_this.state.open);
-    });
+    this.handleClick = e => {
+      this.handleOpenChanged(!this.state.open);
+    };
 
-    _this.selectedIndex = 0;
-    _this.state = {
+    this.selectedIndex = 0;
+    this.state = {
       open: false,
       searchText: "",
       openerElement: null
     };
-    return _this;
   }
   /**
    * Used to sync the `opened` state when this component acts as a controlled
@@ -2902,142 +2156,132 @@ var SingleSelect = /*#__PURE__*/function (_React$Component) {
    */
 
 
-  _createClass(SingleSelect, [{
-    key: "filterChildren",
-    value: function filterChildren(children) {
-      var searchText = this.state.searchText;
-      var lowercasedSearchText = searchText.toLowerCase(); // Filter the children with the searchText if any.
+  static getDerivedStateFromProps(props, state) {
+    return {
+      open: typeof props.opened === "boolean" ? props.opened : state.open
+    };
+  }
 
-      return children.filter(function (_ref) {
-        var props = _ref.props;
-        return !searchText || props.label.toLowerCase().indexOf(lowercasedSearchText) > -1;
-      });
-    }
-  }, {
-    key: "getMenuItems",
-    value: function getMenuItems(children) {
-      var isFilterable = this.props.isFilterable; // If it's not filterable, no need to do any extra besides mapping the
-      // option items to dropdown items.
+  filterChildren(children) {
+    const {
+      searchText
+    } = this.state;
+    const lowercasedSearchText = searchText.toLowerCase(); // Filter the children with the searchText if any.
 
-      return this.mapOptionItemsToDropdownItems(isFilterable ? this.filterChildren(children) : children);
-    }
-  }, {
-    key: "getSearchField",
-    value: function getSearchField() {
-      if (!this.props.isFilterable) {
-        return null;
-      }
+    return children.filter(({
+      props
+    }) => !searchText || props.label.toLowerCase().indexOf(lowercasedSearchText) > -1);
+  }
 
-      return {
-        component: /*#__PURE__*/createElement(SearchTextInput, {
-          key: "search-text-input",
-          onChange: this.handleSearchTextChanged,
-          searchText: this.state.searchText,
-          labels: {
-            clearSearch: defaultLabels.clearSearch,
-            filter: defaultLabels.filter
-          }
-        }),
-        focusable: true,
-        populatedProps: {}
-      };
-    }
-  }, {
-    key: "renderOpener",
-    value: function renderOpener(numItems) {
-      var _this$props = this.props,
-          children = _this$props.children,
-          disabled = _this$props.disabled,
-          id = _this$props.id,
-          light = _this$props.light,
-          opener = _this$props.opener,
-          placeholder = _this$props.placeholder,
-          selectedValue = _this$props.selectedValue,
-          testId = _this$props.testId,
-          alignment = _this$props.alignment,
-          dropdownStyle = _this$props.dropdownStyle,
-          isFilterable = _this$props.isFilterable,
-          onChange = _this$props.onChange,
-          onToggle = _this$props.onToggle,
-          opened = _this$props.opened,
-          style = _this$props.style,
-          className = _this$props.className,
-          sharedProps = _objectWithoutProperties(_this$props, ["children", "disabled", "id", "light", "opener", "placeholder", "selectedValue", "testId", "alignment", "dropdownStyle", "isFilterable", "onChange", "onToggle", "opened", "style", "className"]);
-
-      var selectedItem = Children.toArray(children).find(function (option) {
-        return option.props.value === selectedValue;
-      }); // If nothing is selected, or if the selectedValue doesn't match any
-      // item in the menu, use the placeholder.
-
-      var menuText = selectedItem ? selectedItem.props.label : placeholder;
-      var dropdownOpener = opener ? /*#__PURE__*/createElement(DropdownOpener, {
-        onClick: this.handleClick,
-        disabled: numItems === 0 || disabled,
-        ref: this.handleOpenerRef,
-        text: menuText
-      }, opener) : /*#__PURE__*/createElement(SelectOpener, _extends({}, sharedProps, {
-        disabled: numItems === 0 || disabled,
-        id: id,
-        isPlaceholder: !selectedItem,
-        light: light,
-        onOpenChanged: this.handleOpenChanged,
-        open: this.state.open,
-        ref: this.handleOpenerRef,
-        testId: testId
-      }), menuText);
-      return dropdownOpener;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          alignment = _this$props2.alignment,
-          children = _this$props2.children,
-          dropdownStyle = _this$props2.dropdownStyle,
-          isFilterable = _this$props2.isFilterable,
-          light = _this$props2.light,
-          style = _this$props2.style,
-          className = _this$props2.className;
-      var searchText = this.state.searchText;
-      var allChildren = Children.toArray(children).filter(Boolean);
-      var filteredItems = this.getMenuItems(allChildren);
-      var opener = this.renderOpener(allChildren.length);
-      var searchField = this.getSearchField();
-      var items = searchField ? [searchField].concat(_toConsumableArray(filteredItems)) : filteredItems;
-      return /*#__PURE__*/createElement(DropdownCore$1, {
-        role: "listbox",
-        alignment: alignment,
-        dropdownStyle: [isFilterable && filterableDropdownStyle, selectDropdownStyle, dropdownStyle],
-        initialFocusedIndex: this.selectedIndex,
-        items: items,
-        light: light,
-        onOpenChanged: this.handleOpenChanged,
-        open: this.state.open,
-        opener: opener,
-        openerElement: this.state.openerElement,
-        style: style,
-        className: className,
-        onSearchTextChanged: isFilterable ? this.handleSearchTextChanged : null,
-        searchText: isFilterable ? searchText : ""
-      });
-    }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(props, state) {
-      return {
-        open: typeof props.opened === "boolean" ? props.opened : state.open
-      };
+  getMenuItems(children) {
+    const {
+      isFilterable
+    } = this.props; // If it's not filterable, no need to do any extra besides mapping the
+    // option items to dropdown items.
+
+    return this.mapOptionItemsToDropdownItems(isFilterable ? this.filterChildren(children) : children);
+  }
+
+  getSearchField() {
+    if (!this.props.isFilterable) {
+      return null;
     }
-  }]);
 
-  return SingleSelect;
-}(Component);
+    return {
+      component: /*#__PURE__*/createElement(SearchTextInput, {
+        key: "search-text-input",
+        onChange: this.handleSearchTextChanged,
+        searchText: this.state.searchText,
+        labels: {
+          clearSearch: defaultLabels.clearSearch,
+          filter: defaultLabels.filter
+        }
+      }),
+      focusable: true,
+      populatedProps: {}
+    };
+  }
+
+  renderOpener(numItems) {
+    const _this$props = this.props,
+          {
+      children,
+      disabled,
+      id,
+      light,
+      opener,
+      placeholder,
+      selectedValue,
+      testId
+    } = _this$props,
+          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$5);
+
+    const selectedItem = 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, {
+      onClick: this.handleClick,
+      disabled: numItems === 0 || disabled,
+      ref: this.handleOpenerRef,
+      text: menuText
+    }, opener) : /*#__PURE__*/createElement(SelectOpener, _extends({}, sharedProps, {
+      disabled: numItems === 0 || disabled,
+      id: id,
+      isPlaceholder: !selectedItem,
+      light: light,
+      onOpenChanged: this.handleOpenChanged,
+      open: this.state.open,
+      ref: this.handleOpenerRef,
+      testId: testId
+    }), menuText);
+    return dropdownOpener;
+  }
+
+  render() {
+    const {
+      alignment,
+      children,
+      dropdownStyle,
+      isFilterable,
+      light,
+      style,
+      className
+    } = this.props;
+    const {
+      searchText
+    } = this.state;
+    const allChildren = 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, {
+      role: "listbox",
+      alignment: alignment,
+      dropdownStyle: [isFilterable && filterableDropdownStyle, selectDropdownStyle, dropdownStyle],
+      initialFocusedIndex: this.selectedIndex,
+      items: items,
+      light: light,
+      onOpenChanged: this.handleOpenChanged,
+      open: this.state.open,
+      opener: opener,
+      openerElement: this.state.openerElement,
+      style: style,
+      className: className,
+      onSearchTextChanged: isFilterable ? this.handleSearchTextChanged : null,
+      searchText: isFilterable ? searchText : ""
+    });
+  }
 
-_defineProperty(SingleSelect, "defaultProps", {
+}
+SingleSelect.defaultProps = {
   alignment: "left",
   disabled: false,
   light: false
-});
+};
+
+const _excluded$6 = ["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
@@ -3047,107 +2291,100 @@ _defineProperty(SingleSelect, "defaultProps", {
  * 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.
  */
-var MultiSelect = /*#__PURE__*/function (_React$Component) {
-  _inherits(MultiSelect, _React$Component);
+class MultiSelect extends Component {
+  constructor(props) {
+    super(props);
 
-  var _super = _createSuper(MultiSelect);
-
-  function MultiSelect(props) {
-    var _this;
-
-    _classCallCheck(this, MultiSelect);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "labels", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "handleOpenChanged", function (opened) {
-      _this.setState({
+    this.handleOpenChanged = opened => {
+      this.setState({
         open: opened,
         searchText: "",
-        lastSelectedValues: _this.props.selectedValues
+        lastSelectedValues: this.props.selectedValues
       });
 
-      if (_this.props.onToggle) {
-        _this.props.onToggle(opened);
+      if (this.props.onToggle) {
+        this.props.onToggle(opened);
       }
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleToggle", function (selectedValue) {
-      var _this$props = _this.props,
-          onChange = _this$props.onChange,
-          selectedValues = _this$props.selectedValues;
+    this.handleToggle = selectedValue => {
+      const {
+        onChange,
+        selectedValues
+      } = this.props;
 
       if (selectedValues.includes(selectedValue)) {
-        var index = selectedValues.indexOf(selectedValue);
-        var updatedSelection = [].concat(_toConsumableArray(selectedValues.slice(0, index)), _toConsumableArray(selectedValues.slice(index + 1)));
+        const index = selectedValues.indexOf(selectedValue);
+        const updatedSelection = [].concat(selectedValues.slice(0, index), selectedValues.slice(index + 1));
         onChange(updatedSelection);
       } else {
         // Item was newly selected
-        onChange([].concat(_toConsumableArray(selectedValues), [selectedValue]));
+        onChange([].concat(selectedValues, [selectedValue]));
       }
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleSelectAll", function () {
-      var _this$props2 = _this.props,
-          children = _this$props2.children,
-          onChange = _this$props2.onChange;
-      var selected = Children.toArray(children).filter(Boolean).map(function (option) {
-        return option.props.value;
-      });
+    this.handleSelectAll = () => {
+      const {
+        children,
+        onChange
+      } = this.props;
+      const selected = Children.toArray(children).filter(Boolean).map(option => option.props.value);
       onChange(selected);
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleSelectNone", function () {
-      var onChange = _this.props.onChange;
+    this.handleSelectNone = () => {
+      const {
+        onChange
+      } = this.props;
       onChange([]);
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "mapOptionItemToDropdownItem", function (option) {
-      var selectedValues = _this.props.selectedValues;
-      var _option$props = option.props,
-          disabled = _option$props.disabled,
-          value = _option$props.value;
+    this.mapOptionItemToDropdownItem = option => {
+      const {
+        selectedValues
+      } = this.props;
+      const {
+        disabled,
+        value
+      } = option.props;
       return {
         component: option,
         focusable: !disabled,
         populatedProps: {
-          onToggle: _this.handleToggle,
+          onToggle: this.handleToggle,
           selected: selectedValues.includes(value),
           variant: "checkbox"
         }
       };
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleOpenerRef", function (node) {
-      var openerElement = ReactDOM.findDOMNode(node);
+    };
 
-      _this.setState({
-        openerElement: openerElement
+    this.handleOpenerRef = node => {
+      const openerElement = ReactDOM.findDOMNode(node);
+      this.setState({
+        openerElement
       });
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleSearchTextChanged", function (searchText) {
-      _this.setState({
-        searchText: searchText
+    this.handleSearchTextChanged = searchText => {
+      this.setState({
+        searchText
       });
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
-      _this.handleOpenChanged(!_this.state.open);
-    });
+    this.handleClick = e => {
+      this.handleOpenChanged(!this.state.open);
+    };
 
-    _this.state = {
+    this.state = {
       open: false,
       searchText: "",
       lastSelectedValues: [],
       // merge custom labels with the default ones
-      labels: _objectSpread2(_objectSpread2({}, defaultLabels), props.labels),
+      labels: _extends({}, defaultLabels, props.labels),
       openerElement: null
     }; // merge custom labels with the default ones
 
-    _this.labels = _objectSpread2(_objectSpread2({}, defaultLabels), props.labels);
-    return _this;
+    this.labels = _extends({}, defaultLabels, props.labels);
   }
   /**
    * Used to sync the `opened` state when this component acts as a controlled
@@ -3155,274 +2392,252 @@ var MultiSelect = /*#__PURE__*/function (_React$Component) {
    */
 
 
-  _createClass(MultiSelect, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (this.props.labels !== prevProps.labels) {
-        // eslint-disable-next-line react/no-did-update-set-state
-        this.setState({
-          labels: _objectSpread2(_objectSpread2({}, this.state.labels), this.props.labels)
-        });
-      }
+  static getDerivedStateFromProps(props, state) {
+    return {
+      open: typeof props.opened === "boolean" ? props.opened : state.open
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.labels !== prevProps.labels) {
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState({
+        labels: _extends({}, this.state.labels, this.props.labels)
+      });
     }
-  }, {
-    key: "getMenuText",
-    value: function getMenuText(children) {
-      var _this$props3 = this.props,
-          implicitAllEnabled = _this$props3.implicitAllEnabled,
-          selectedValues = _this$props3.selectedValues;
-      var _this$state$labels = this.state.labels,
-          noneSelected = _this$state$labels.noneSelected,
-          someSelected = _this$state$labels.someSelected,
-          allSelected = _this$state$labels.allSelected; // When implicit all enabled, use `labels.allSelected` when no selection
-      // otherwise, use the `labels.noneSelected` value
-
-      var noSelectionText = implicitAllEnabled ? allSelected : noneSelected;
-
-      switch (selectedValues.length) {
-        case 0:
-          return noSelectionText;
-
-        case 1:
-          // If there is one item selected, we display its label. If for
-          // some reason we can't find the selected item, we use the
-          // display text for the case where nothing is selected.
-          var selectedItem = children.find(function (option) {
-            return option.props.value === selectedValues[0];
-          });
-          return selectedItem ? selectedItem.props.label : noSelectionText;
+  }
 
-        case children.length:
-          return allSelected;
+  getMenuText(children) {
+    const {
+      implicitAllEnabled,
+      selectedValues
+    } = this.props;
+    const {
+      noneSelected,
+      someSelected,
+      allSelected
+    } = this.state.labels; // When implicit all enabled, use `labels.allSelected` when no selection
+    // otherwise, use the `labels.noneSelected` value
+
+    const noSelectionText = implicitAllEnabled ? allSelected : noneSelected;
+
+    switch (selectedValues.length) {
+      case 0:
+        return noSelectionText;
+
+      case 1:
+        // If there is one item selected, we display its label. If for
+        // some reason we can't find the selected item, we use the
+        // display text for the case where nothing is selected.
+        const selectedItem = children.find(option => option.props.value === selectedValues[0]);
+        return selectedItem ? selectedItem.props.label : noSelectionText;
+
+      case children.length:
+        return allSelected;
+
+      default:
+        return someSelected(selectedValues.length);
+    }
+  }
 
-        default:
-          return someSelected(selectedValues.length);
-      }
+  getSearchField() {
+    if (!this.props.isFilterable) {
+      return [];
     }
-  }, {
-    key: "getSearchField",
-    value: function getSearchField() {
-      if (!this.props.isFilterable) {
-        return [];
-      }
 
-      var _this$state$labels2 = this.state.labels,
-          clearSearch = _this$state$labels2.clearSearch,
-          filter = _this$state$labels2.filter;
-      return [{
-        component: /*#__PURE__*/createElement(SearchTextInput, {
-          key: "search-text-input",
-          onChange: this.handleSearchTextChanged,
-          searchText: this.state.searchText,
-          labels: {
-            clearSearch: clearSearch,
-            filter: filter
-          }
+    const {
+      clearSearch,
+      filter
+    } = this.state.labels;
+    return [{
+      component: /*#__PURE__*/createElement(SearchTextInput, {
+        key: "search-text-input",
+        onChange: this.handleSearchTextChanged,
+        searchText: this.state.searchText,
+        labels: {
+          clearSearch,
+          filter
+        }
+      }),
+      focusable: true,
+      populatedProps: {}
+    }];
+  }
+
+  getShortcuts(numOptions) {
+    const {
+      selectedValues,
+      shortcuts
+    } = this.props;
+    const {
+      selectAllLabel,
+      selectNoneLabel
+    } = this.state.labels; // When there's search text input to filter, shortcuts should be hidden
+
+    if (shortcuts && !this.state.searchText) {
+      const selectAllDisabled = numOptions === selectedValues.length;
+      const selectAll = {
+        component: /*#__PURE__*/createElement(ActionItem, {
+          disabled: selectAllDisabled,
+          label: selectAllLabel(numOptions),
+          indent: true,
+          onClick: this.handleSelectAll
         }),
-        focusable: true,
+        focusable: !selectAllDisabled,
         populatedProps: {}
-      }];
-    }
-  }, {
-    key: "getShortcuts",
-    value: function getShortcuts(numOptions) {
-      var _this$props4 = this.props,
-          selectedValues = _this$props4.selectedValues,
-          shortcuts = _this$props4.shortcuts;
-      var _this$state$labels3 = this.state.labels,
-          selectAllLabel = _this$state$labels3.selectAllLabel,
-          selectNoneLabel = _this$state$labels3.selectNoneLabel; // When there's search text input to filter, shortcuts should be hidden
-
-      if (shortcuts && !this.state.searchText) {
-        var selectAllDisabled = numOptions === selectedValues.length;
-        var selectAll = {
-          component: /*#__PURE__*/createElement(ActionItem, {
-            disabled: selectAllDisabled,
-            label: selectAllLabel(numOptions),
-            indent: true,
-            onClick: this.handleSelectAll
-          }),
-          focusable: !selectAllDisabled,
-          populatedProps: {}
-        };
-        var selectNoneDisabled = selectedValues.length === 0;
-        var selectNone = {
-          component: /*#__PURE__*/createElement(ActionItem, {
-            disabled: selectNoneDisabled,
-            label: selectNoneLabel,
-            indent: true,
-            onClick: this.handleSelectNone
-          }),
-          focusable: !selectNoneDisabled,
-          populatedProps: {}
-        };
-        var separator = {
-          component: /*#__PURE__*/createElement(SeparatorItem, {
-            key: "shortcuts-separator"
-          }),
-          focusable: false,
-          populatedProps: {}
-        };
-        return [selectAll, selectNone, separator];
-      } else {
-        return [];
-      }
+      };
+      const selectNoneDisabled = selectedValues.length === 0;
+      const selectNone = {
+        component: /*#__PURE__*/createElement(ActionItem, {
+          disabled: selectNoneDisabled,
+          label: selectNoneLabel,
+          indent: true,
+          onClick: this.handleSelectNone
+        }),
+        focusable: !selectNoneDisabled,
+        populatedProps: {}
+      };
+      const separator = {
+        component: /*#__PURE__*/createElement(SeparatorItem, {
+          key: "shortcuts-separator"
+        }),
+        focusable: false,
+        populatedProps: {}
+      };
+      return [selectAll, selectNone, separator];
+    } else {
+      return [];
     }
-  }, {
-    key: "getMenuItems",
-    value: function getMenuItems(children) {
-      var isFilterable = this.props.isFilterable; // If it's not filterable, no need to do any extra besides mapping the
-      // option items to dropdown items.
-
-      if (!isFilterable) {
-        return children.map(this.mapOptionItemToDropdownItem);
-      }
+  }
 
-      var _this$state = this.state,
-          searchText = _this$state.searchText,
-          lastSelectedValues = _this$state.lastSelectedValues;
-      var lowercasedSearchText = searchText.toLowerCase(); // Filter the children with the searchText if any.
+  getMenuItems(children) {
+    const {
+      isFilterable
+    } = this.props; // If it's not filterable, no need to do any extra besides mapping the
+    // option items to dropdown items.
 
-      var filteredChildren = children.filter(function (_ref) {
-        var props = _ref.props;
-        return !searchText || props.label.toLowerCase().indexOf(lowercasedSearchText) > -1;
-      });
-      var lastSelectedChildren = [];
-      var restOfTheChildren = [];
+    if (!isFilterable) {
+      return children.map(this.mapOptionItemToDropdownItem);
+    }
 
-      var _iterator = _createForOfIteratorHelper(filteredChildren),
-          _step;
+    const {
+      searchText,
+      lastSelectedValues
+    } = this.state;
+    const lowercasedSearchText = searchText.toLowerCase(); // Filter the children with the searchText if any.
 
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var child = _step.value;
+    const filteredChildren = children.filter(({
+      props
+    }) => !searchText || props.label.toLowerCase().indexOf(lowercasedSearchText) > -1);
+    const lastSelectedChildren = [];
+    const restOfTheChildren = [];
 
-          if (lastSelectedValues.includes(child.props.value)) {
-            lastSelectedChildren.push(child);
-          } else {
-            restOfTheChildren.push(child);
-          }
-        }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
+    for (const child of filteredChildren) {
+      if (lastSelectedValues.includes(child.props.value)) {
+        lastSelectedChildren.push(child);
+      } else {
+        restOfTheChildren.push(child);
       }
+    }
 
-      var lastSelectedItems = lastSelectedChildren.map(this.mapOptionItemToDropdownItem); // We want to add SeparatorItem in between last selected items and the
-      // rest of the items only when both of them exists.
-
-      if (lastSelectedChildren.length && restOfTheChildren.length) {
-        lastSelectedItems.push({
-          component: /*#__PURE__*/createElement(SeparatorItem, {
-            key: "selected-separator"
-          }),
-          focusable: false,
-          populatedProps: {}
-        });
-      }
+    const lastSelectedItems = lastSelectedChildren.map(this.mapOptionItemToDropdownItem); // We want to add SeparatorItem in between last selected items and the
+    // rest of the items only when both of them exists.
 
-      return [].concat(_toConsumableArray(lastSelectedItems), _toConsumableArray(restOfTheChildren.map(this.mapOptionItemToDropdownItem)));
-    }
-  }, {
-    key: "renderOpener",
-    value: function renderOpener(allChildren) {
-      var _this$props5 = this.props,
-          disabled = _this$props5.disabled,
-          id = _this$props5.id,
-          light = _this$props5.light,
-          opener = _this$props5.opener,
-          testId = _this$props5.testId,
-          alignment = _this$props5.alignment,
-          dropdownStyle = _this$props5.dropdownStyle,
-          implicitAllEnabled = _this$props5.implicitAllEnabled,
-          isFilterable = _this$props5.isFilterable,
-          labels = _this$props5.labels,
-          onChange = _this$props5.onChange,
-          onToggle = _this$props5.onToggle,
-          opened = _this$props5.opened,
-          selectedValues = _this$props5.selectedValues,
-          shortcuts = _this$props5.shortcuts,
-          style = _this$props5.style,
-          className = _this$props5.className,
-          sharedProps = _objectWithoutProperties(_this$props5, ["disabled", "id", "light", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className"]);
-
-      var noneSelected = this.state.labels.noneSelected;
-      var menuText = this.getMenuText(allChildren);
-      var numOptions = allChildren.length;
-      var dropdownOpener = opener ? /*#__PURE__*/createElement(DropdownOpener, {
-        onClick: this.handleClick,
-        disabled: numOptions === 0 || disabled,
-        ref: this.handleOpenerRef,
-        text: menuText
-      }, opener) : /*#__PURE__*/createElement(SelectOpener, _extends({}, sharedProps, {
-        disabled: numOptions === 0 || disabled,
-        id: id,
-        isPlaceholder: menuText === noneSelected,
-        light: light,
-        onOpenChanged: this.handleOpenChanged,
-        open: this.state.open,
-        ref: this.handleOpenerRef,
-        testId: testId
-      }), menuText);
-      return dropdownOpener;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props6 = this.props,
-          alignment = _this$props6.alignment,
-          light = _this$props6.light,
-          style = _this$props6.style,
-          className = _this$props6.className,
-          dropdownStyle = _this$props6.dropdownStyle,
-          children = _this$props6.children,
-          isFilterable = _this$props6.isFilterable;
-      var _this$state2 = this.state,
-          open = _this$state2.open,
-          searchText = _this$state2.searchText;
-      var noResults = this.state.labels.noResults;
-      var allChildren = Children.toArray(children).filter(Boolean);
-      var numOptions = allChildren.length;
-      var filteredItems = this.getMenuItems(allChildren);
-      var opener = this.renderOpener(allChildren);
-      return /*#__PURE__*/createElement(DropdownCore$1, {
-        role: "listbox",
-        alignment: alignment,
-        dropdownStyle: [isFilterable && filterableDropdownStyle, selectDropdownStyle, dropdownStyle],
-        items: [].concat(_toConsumableArray(this.getSearchField()), _toConsumableArray(this.getShortcuts(numOptions)), _toConsumableArray(filteredItems)),
-        light: light,
-        onOpenChanged: this.handleOpenChanged,
-        open: open,
-        opener: opener,
-        openerElement: this.state.openerElement,
-        style: style,
-        className: className,
-        onSearchTextChanged: isFilterable ? this.handleSearchTextChanged : null,
-        searchText: isFilterable ? searchText : "",
-        labels: {
-          noResults: noResults
-        }
+    if (lastSelectedChildren.length && restOfTheChildren.length) {
+      lastSelectedItems.push({
+        component: /*#__PURE__*/createElement(SeparatorItem, {
+          key: "selected-separator"
+        }),
+        focusable: false,
+        populatedProps: {}
       });
     }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(props, state) {
-      return {
-        open: typeof props.opened === "boolean" ? props.opened : state.open
-      };
-    }
-  }]);
 
-  return MultiSelect;
-}(Component);
+    return [].concat(lastSelectedItems, restOfTheChildren.map(this.mapOptionItemToDropdownItem));
+  }
+
+  renderOpener(allChildren) {
+    const _this$props = this.props,
+          {
+      disabled,
+      id,
+      light,
+      opener,
+      testId
+    } = _this$props,
+          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$6);
+
+    const {
+      noneSelected
+    } = this.state.labels;
+    const menuText = this.getMenuText(allChildren);
+    const numOptions = allChildren.length;
+    const dropdownOpener = opener ? /*#__PURE__*/createElement(DropdownOpener, {
+      onClick: this.handleClick,
+      disabled: numOptions === 0 || disabled,
+      ref: this.handleOpenerRef,
+      text: menuText
+    }, opener) : /*#__PURE__*/createElement(SelectOpener, _extends({}, sharedProps, {
+      disabled: numOptions === 0 || disabled,
+      id: id,
+      isPlaceholder: menuText === noneSelected,
+      light: light,
+      onOpenChanged: this.handleOpenChanged,
+      open: this.state.open,
+      ref: this.handleOpenerRef,
+      testId: testId
+    }), menuText);
+    return dropdownOpener;
+  }
+
+  render() {
+    const {
+      alignment,
+      light,
+      style,
+      className,
+      dropdownStyle,
+      children,
+      isFilterable
+    } = this.props;
+    const {
+      open,
+      searchText
+    } = this.state;
+    const {
+      noResults
+    } = this.state.labels;
+    const allChildren = Children.toArray(children).filter(Boolean);
+    const numOptions = allChildren.length;
+    const filteredItems = this.getMenuItems(allChildren);
+    const opener = this.renderOpener(allChildren);
+    return /*#__PURE__*/createElement(DropdownCore$1, {
+      role: "listbox",
+      alignment: alignment,
+      dropdownStyle: [isFilterable && filterableDropdownStyle, selectDropdownStyle, dropdownStyle],
+      items: [].concat(this.getSearchField(), this.getShortcuts(numOptions), filteredItems),
+      light: light,
+      onOpenChanged: this.handleOpenChanged,
+      open: open,
+      opener: opener,
+      openerElement: this.state.openerElement,
+      style: style,
+      className: className,
+      onSearchTextChanged: isFilterable ? this.handleSearchTextChanged : null,
+      searchText: isFilterable ? searchText : "",
+      labels: {
+        noResults
+      }
+    });
+  }
 
-_defineProperty(MultiSelect, "defaultProps", {
+}
+MultiSelect.defaultProps = {
   alignment: "left",
   disabled: false,
   light: false,
   shortcuts: false,
   selectedValues: []
-});
+};
 
 export { ActionItem, ActionMenu, MultiSelect, OptionItem, SeparatorItem, SingleSelect };