@khanacademy/wonder-blocks-dropdown 2.3.19

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Khan Academy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/es/index.js

@@ -0,0 +1,3403 @@
+import { createElement, Fragment, Component, cloneElement, Children, createRef } from 'react';
+import { StyleSheet, css } from 'aphrodite';
+import { Link } from 'react-router-dom';
+import { any } from 'prop-types';
+import Color, { mix, fade, SemanticColor } from '@khanacademy/wonder-blocks-color';
+import Spacing from '@khanacademy/wonder-blocks-spacing';
+import { LabelMedium, styles as styles$a, LabelLarge } from '@khanacademy/wonder-blocks-typography';
+import { getClickableBehavior, isClientSideUrl, ClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
+import { addStyle, View, getElementIntersection } from '@khanacademy/wonder-blocks-core';
+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 = {
+  tab: 9,
+  enter: 13,
+  escape: 27,
+  space: 32,
+  up: 38,
+  down: 40
+};
+var 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 = {
+  minHeight: 100,
+  maxHeight: 384
+};
+var 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
+
+var defaultLabels = {
+  clearSearch: "Clear search",
+  filter: "Filter",
+  noResults: "No results",
+  selectNoneLabel: "Select none",
+  selectAllLabel: function selectAllLabel(numOptions) {
+    return "Select all (".concat(numOptions, ")");
+  },
+  noneSelected: "0 items",
+  someSelected: function someSelected(numSelectedValues) {
+    return "".concat(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);
+/**
+ * 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__;
+    }
+  }]);
+
+  return ActionItem;
+}(Component);
+
+_defineProperty(ActionItem, "contextTypes", {
+  router: any
+});
+
+_defineProperty(ActionItem, "defaultProps", {
+  disabled: false,
+  indent: false,
+  role: "menuitem"
+});
+
+_defineProperty(ActionItem, "__IS_ACTION_ITEM__", true);
+var styles = StyleSheet.create({
+  shared: {
+    background: white,
+    color: offBlack,
+    textDecoration: "none",
+    border: "none",
+    outline: "none",
+    flexDirection: "row",
+    alignItems: "center",
+    display: "flex",
+    height: DROPDOWN_ITEM_HEIGHT,
+    minHeight: DROPDOWN_ITEM_HEIGHT,
+    paddingLeft: Spacing.medium_16,
+    paddingRight: Spacing.medium_16,
+    // This removes the 300ms click delay on mobile browsers by indicating that
+    // "double-tap to zoom" shouldn't be used on this element.
+    touchAction: "manipulation"
+  },
+  label: {
+    whiteSpace: "nowrap",
+    userSelect: "none"
+  },
+  indent: {
+    marginLeft: Spacing.medium_16
+  },
+  // hover and focus states
+  focus: {
+    color: white,
+    background: blue
+  },
+  // active and pressed states
+  active: {
+    color: mix(fade(blue, 0.32), white),
+    background: mix(offBlack32, blue)
+  },
+  // disabled state
+  disabled: {
+    color: offBlack32,
+    cursor: "default"
+  }
+});
+
+var offBlack$1 = Color.offBlack,
+    offBlack32$1 = Color.offBlack32,
+    white$1 = Color.white;
+/**
+ * Props describing the state of the OptionItem, shared by the checkbox
+ * component,
+ */
+
+/**
+ * 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;
+  return /*#__PURE__*/createElement(Icon, {
+    icon: icons.check,
+    size: "small",
+    color: disabled ? offBlack32$1 : pressed || hovered || focused ? white$1 : offBlack$1,
+    style: [styles$1.bounds, !selected && styles$1.hide]
+  });
+}
+var styles$1 = StyleSheet.create({
+  bounds: {
+    // Semantically, this are the constants for a small-sized icon
+    minHeight: 16,
+    minWidth: 16
+  },
+  hide: {
+    visibility: "hidden"
+  }
+});
+
+// NOTE(sophie): This is a smaller check specifically for use in checkboxes.
+// 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 = {
+  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;
+/**
+ * Props describing the state of the OptionItem, shared by the check
+ * component,
+ */
+
+/**
+ * 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;
+  return /*#__PURE__*/createElement(View, {
+    style: [styles$2.checkbox, (clickInteraction || selected && !disabled) && styles$2.noBorder, disabled && styles$2.disabledCheckbox, {
+      backgroundColor: bgColor
+    }]
+  }, selected && /*#__PURE__*/createElement(Icon, {
+    icon: checkboxCheck,
+    size: "small",
+    color: checkColor,
+    style: [disabled && selected && styles$2.disabledCheckFormatting]
+  }));
+}
+var styles$2 = StyleSheet.create({
+  checkbox: {
+    // Semantically, this are the constants for a small-sized icon
+    minHeight: 16,
+    minWidth: 16,
+    borderRadius: 3,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: offBlack50
+  },
+  noBorder: {
+    borderWidth: 0
+  },
+  disabledCheckbox: {
+    borderColor: offBlack16,
+    backgroundColor: offWhite
+  },
+  // The border of 1px on the selected, disabled checkbox pushes the check out
+  // of place. Move it back.
+  disabledCheckFormatting: {
+    position: "absolute",
+    top: -1,
+    left: -1
+  }
+});
+
+/**
+ * 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;
+      onToggle(value);
+
+      if (onClick) {
+        onClick();
+      }
+    });
+
+    return _this;
+  }
+
+  _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__;
+    }
+  }]);
+
+  return OptionItem;
+}(Component);
+
+_defineProperty(OptionItem, "contextTypes", {
+  router: any
+});
+
+_defineProperty(OptionItem, "defaultProps", {
+  disabled: false,
+  onToggle: function onToggle() {
+    return 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({
+  itemContainer: {
+    flexDirection: "row",
+    backgroundColor: white$3,
+    color: offBlack$2,
+    alignItems: "center",
+    height: DROPDOWN_ITEM_HEIGHT,
+    minHeight: DROPDOWN_ITEM_HEIGHT,
+    border: 0,
+    outline: 0,
+    paddingLeft: Spacing.xSmall_8,
+    paddingRight: Spacing.medium_16,
+    whiteSpace: "nowrap",
+    cursor: "default"
+  },
+  focus: {
+    color: white$3,
+    background: blue$2
+  },
+  active: {
+    color: mix(fade(blue$2, 0.32), white$3),
+    background: mix(offBlack32$3, blue$2)
+  },
+  disabled: {
+    color: offBlack32$3,
+    background: white$3
+  },
+  label: {
+    whiteSpace: "nowrap",
+    userSelect: "none",
+    marginLeft: Spacing.xSmall_8,
+    // added to truncate strings that are longer than expected
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  hide: {
+    visibility: "hidden"
+  }
+});
+
+/**
+ * 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);
+  }
+
+  _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);
+
+_defineProperty(SeparatorItem, "__IS_SEPARATOR_ITEM__", true);
+var styles$4 = StyleSheet.create({
+  separator: {
+    boxShadow: "0 -1px ".concat(Color.offBlack16),
+    height: 1,
+    minHeight: 1,
+    marginTop: Spacing.xxxSmall_4,
+    marginBottom: Spacing.xxxSmall_4
+  }
+});
+
+var DropdownOpener = /*#__PURE__*/function (_React$Component) {
+  _inherits(DropdownOpener, _React$Component);
+
+  var _super = _createSuper(DropdownOpener);
+
+  function DropdownOpener() {
+    var _this;
+
+    _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) {
+      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";
+  }
+
+  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.
+
+
+  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
+};
+
+/**
+ * A virtualized list item - It's created by decorating the DropdownItem
+ * (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];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      focused: false,
+      labels: _objectSpread2({
+        clearSearch: defaultLabels.clearSearch,
+        filter: defaultLabels.filter
+      }, _this.props.labels)
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function (e) {
+      e.preventDefault();
+
+      _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
+
+      onChange("");
+
+      if (onClick) {
+        onClick();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleBlur", function (e) {
+      _this.setState({
+        focused: false
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleFocus", function (e) {
+      _this.setState({
+        focused: true
+      });
+    });
+
+    return _this;
+  }
+
+  _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)
+        });
+      }
+    }
+  }, {
+    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__;
+    }
+  }]);
+
+  return SearchTextInput;
+}(Component);
+
+_defineProperty(SearchTextInput, "defaultProps", {
+  labels: {
+    clearSearch: defaultLabels.clearSearch,
+    filter: defaultLabels.filter
+  }
+});
+
+_defineProperty(SearchTextInput, "__IS_SEARCH_TEXT_INPUT__", true);
+var styles$5 = StyleSheet.create({
+  inputContainer: {
+    flexDirection: "row",
+    border: "1px solid ".concat(Color.offBlack16),
+    borderRadius: Spacing.xxxSmall_4,
+    alignItems: "center",
+    // The height of the text input is 40 in design spec and we need to
+    // specify the height as well as minHeight to make sure the search text
+    // input takes enough height to render. (otherwise, it will get
+    // squashed)
+    height: DROPDOWN_ITEM_HEIGHT,
+    minHeight: DROPDOWN_ITEM_HEIGHT
+  },
+  focused: {
+    border: "1px solid ".concat(Color.blue)
+  },
+  searchIcon: {
+    marginLeft: Spacing.xSmall_8,
+    marginRight: Spacing.xSmall_8
+  },
+  dismissIcon: {
+    margin: 0,
+    ":hover": {
+      border: "none"
+    }
+  },
+  inputStyleReset: {
+    display: "flex",
+    flex: 1,
+    background: "inherit",
+    border: "none",
+    outline: "none",
+    "::placeholder": {
+      color: Color.offBlack64
+    },
+    width: "100%",
+    color: "inherit"
+  }
+});
+
+/**
+ * Maximum visible items inside the dropdown list
+ */
+var MAX_VISIBLE_ITEMS = 10;
+/**
+ * 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
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getItemSize", function (index) {
+      // get the current item in the list
+      var item = _this.props.data[index];
+
+      if (SeparatorItem.isClassOf(item.component)) {
+        // this is the separator's height (1px) + vertical margin (8px)
+        return SEPARATOR_ITEM_HEIGHT;
+      } else if (SearchTextInput.isClassOf(item.component)) {
+        // search text input height
+        return SEARCH_ITEM_HEIGHT;
+      } else {
+        // default dropdown item height
+        return DROPDOWN_ITEM_HEIGHT;
+      }
+    });
+
+    return _this;
+  }
+
+  _createClass(DropdownCoreVirtualized, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      var schedule = this.props.schedule; // Wait for styles to be applied. This way, we can get a more precise
+      // value of the container dimensions.
+
+      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
+        });
+      }
+    }
+    /**
+     * Update container height
+     */
+
+  }, {
+    key: "setHeight",
+    value: function setHeight() {
+      // calculate dropdown's height depending on the type of items
+      var height = this.getHeight();
+      this.setState({
+        height: height
+      });
+    }
+    /**
+     * 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;
+        }
+
+        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();
+      } else {
+        // width has been provided, then render the virtualized list
+        return this.renderVirtualizedList();
+      }
+    }
+  }]);
+
+  return DropdownCoreVirtualized;
+}(Component);
+
+var DropdownCoreVirtualized$1 = withActionScheduler(DropdownCoreVirtualized);
+
+/**
+ * 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) {
+        return false;
+      }
+
+      for (var i = 0; i < prevItems.length; i++) {
+        if (prevItems[i].focusable !== currentItems[i].focusable) {
+          return false;
+        }
+      }
+
+      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
+            });
+          }
+        }
+
+        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);
+
+    _defineProperty(_assertThisInitialized(_this), "focusedIndex", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "focusedOriginalIndex", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "itemsClicked", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "popperElement", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "listRef", void 0);
+
+    _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));
+
+      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,
+          onSearchTextChanged = _this$props2.onSearchTextChanged,
+          searchText = _this$props2.searchText;
+      var keyCode = event.which || event.keyCode; // If menu isn't open and user presses down, open the menu
+
+      if (!open) {
+        if (keyCode === keyCodes.down) {
+          event.preventDefault();
+          onOpenChanged(true);
+          return;
+        }
+
+        return;
+      }
+
+      var showSearchTextInput = !!onSearchTextChanged && typeof searchText === "string"; // Handle all other key behavior
+
+      switch (keyCode) {
+        case keyCodes.tab:
+          // When we show SearchTextInput and that is focused and the
+          // searchText is entered at least one character, dismiss button
+          // is displayed. When user presses tab, we should move focus
+          // to the dismiss button.
+          if (showSearchTextInput && _this.focusedIndex === 0 && searchText) {
+            return;
+          }
+
+          _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 (showSearchTextInput && _this.focusedIndex === 0) {
+            return;
+          } // Prevent space from scrolling down the page
+
+
+          event.preventDefault();
+          return;
+
+        case keyCodes.up:
+          event.preventDefault();
+
+          _this.focusPreviousItem();
+
+          return;
+
+        case keyCodes.down:
+          event.preventDefault();
+
+          _this.focusNextItem();
+
+          return;
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleKeyUp", function (event) {
+      var _this$props3 = _this.props,
+          onOpenChanged = _this$props3.onOpenChanged,
+          open = _this$props3.open,
+          onSearchTextChanged = _this$props3.onSearchTextChanged,
+          searchText = _this$props3.searchText;
+      var keyCode = event.which || event.keyCode;
+      var showSearchTextInput = !!onSearchTextChanged && typeof searchText === "string";
+
+      switch (keyCode) {
+        case keyCodes.space:
+          // When we display SearchTextInput and the focus is on it,
+          // we should let the user type space.
+          if (showSearchTextInput && _this.focusedIndex === 0) {
+            return;
+          } // Prevent space from scrolling down the page
+
+
+          event.preventDefault();
+          return;
+
+        case keyCodes.escape:
+          // Close only the dropdown, not other elements that are
+          // listening for an escape press
+          if (open) {
+            event.stopPropagation();
+
+            _this.restoreTabOrder();
+
+            onOpenChanged(false);
+          }
+
+          return;
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleClickFocus", function (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;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleDropdownMouseUp", function (event) {
+      // $FlowIgnore[method-unbinding]
+      if (event.nativeEvent.stopImmediatePropagation) {
+        event.nativeEvent.stopImmediatePropagation();
+      } else {
+        // Workaround for jsdom
+        event.stopPropagation();
+      }
+    });
+
+    _this.focusedIndex = _this.props.initialFocusedIndex;
+    _this.state = {
+      prevItems: _this.props.items,
+      itemRefs: [],
+      sameItemsFocusable: false,
+      labels: _objectSpread2({
+        noResults: defaultLabels.noResults
+      }, props.labels)
+    };
+    _this.listRef = createRef();
+    return _this;
+  }
+
+  _createClass(DropdownCore, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      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();
+    } // Figure out focus states for the dropdown after it has changed from open
+    // to closed or vice versa
+
+  }, {
+    key: "initialFocusItem",
+    value: function initialFocusItem() {
+      var _this$props4 = this.props,
+          initialFocusedIndex = _this$props4.initialFocusedIndex,
+          open = _this$props4.open;
+
+      if (open) {
+        // Reset focused index
+        this.focusedIndex = initialFocusedIndex;
+        this.scheduleToFocusCurrentItem();
+      } else if (!open) {
+        this.itemsClicked = false;
+      }
+    }
+  }, {
+    key: "updateEventListeners",
+    value: function updateEventListeners() {
+      if (this.props.open) {
+        this.addEventListeners();
+      } else {
+        this.removeEventListeners();
+      }
+    }
+  }, {
+    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);
+    }
+  }, {
+    key: "scheduleToFocusCurrentItem",
+    value: function scheduleToFocusCurrentItem() {
+      var _this3 = this;
+
+      // wait for windowed items to be recalculated
+      this.props.schedule.animationFrame(function () {
+        return _this3.focusCurrentItem();
+      });
+    }
+  }, {
+    key: "focusCurrentItem",
+    value: function focusCurrentItem() {
+      var node = ReactDOM.findDOMNode(this.state.itemRefs[this.focusedIndex].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 = this.state.itemRefs[this.focusedIndex].originalIndex;
+      }
+    }
+  }, {
+    key: "focusPreviousItem",
+    value: function focusPreviousItem() {
+      if (this.focusedIndex === 0) {
+        this.focusedIndex = this.state.itemRefs.length - 1;
+      } else {
+        this.focusedIndex -= 1;
+      } // force react-window to scroll on the correct position
+
+
+      if (this.listRef.current) {
+        this.listRef.current.scrollToItem(this.focusedIndex);
+      }
+
+      this.scheduleToFocusCurrentItem();
+    }
+  }, {
+    key: "focusNextItem",
+    value: function focusNextItem() {
+      if (this.focusedIndex === this.state.itemRefs.length - 1) {
+        this.focusedIndex = 0;
+      } else {
+        this.focusedIndex += 1;
+      } // force react-window to scroll on the correct position
+
+
+      if (this.listRef.current) {
+        this.listRef.current.scrollToItem(this.focusedIndex);
+      }
+
+      this.scheduleToFocusCurrentItem();
+    }
+  }, {
+    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();
+      }
+    }
+  }, {
+    key: "getItemRole",
+    value: function getItemRole() {
+      var role = this.props.role;
+
+      switch (role) {
+        case "listbox":
+          return "option";
+
+        case "menu":
+          return "menuitem";
+
+        default:
+          throw new Error("Expected \"listbox\" or \"menu\" for role, but receieved \"".concat(role, "\" instead."));
+      }
+    }
+  }, {
+    key: "maybeRenderNoResults",
+    value: function maybeRenderNoResults() {
+      var _this$props5 = this.props,
+          items = _this$props5.items,
+          onSearchTextChanged = _this$props5.onSearchTextChanged,
+          searchText = _this$props5.searchText,
+          noResults = _this$props5.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);
+      }
+
+      return null;
+    }
+    /**
+     * 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 _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();
+            }
+
+            if (item.populatedProps.onClick) {
+              item.populatedProps.onClick();
+            }
+          }
+        });
+      });
+    }
+  }, {
+    key: "renderItems",
+    value: function renderItems(outOfBoundaries) {
+      var _this$props6 = this.props,
+          dropdownStyle = _this$props6.dropdownStyle,
+          light = _this$props6.light,
+          openerElement = _this$props6.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$props7 = this.props,
+          alignment = _this$props7.alignment,
+          openerElement = _this$props7.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
+            }
+          }
+        }, 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);
+      }
+
+      return null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props8 = this.props,
+          open = _this$props8.open,
+          opener = _this$props8.opener,
+          style = _this$props8.style,
+          className = _this$props8.className;
+      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", {
+  alignment: "left",
+  initialFocusedIndex: 0,
+  labels: {
+    noResults: defaultLabels.noResults
+  },
+  light: false
+});
+
+var styles$6 = StyleSheet.create({
+  menuWrapper: {
+    width: "fit-content"
+  },
+  dropdown: {
+    backgroundColor: Color.white,
+    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)),
+    overflowY: "auto"
+  },
+  light: {
+    // Pretty much just remove the border
+    border: "none"
+  },
+  hidden: {
+    visibility: "hidden"
+  },
+  noResult: {
+    color: Color.offBlack64,
+    alignSelf: "center",
+    marginTop: Spacing.xxSmall_6
+  }
+});
+var DropdownCore$1 = withActionScheduler(DropdownCore);
+
+var StyledButton$1 = addStyle("button");
+/**
+ * Although this component shares a lot with ButtonCore there are a couple
+ * of differences:
+ * - the down caret icon appears on the right instead of the left
+ * - 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);
+
+_defineProperty(ActionMenuOpenerCore, "contextTypes", {
+  router: any
+});
+var sharedStyles = StyleSheet.create({
+  shared: {
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: DROPDOWN_ITEM_HEIGHT,
+    border: "none",
+    borderRadius: Spacing.xxxSmall_4,
+    cursor: "pointer",
+    outline: "none",
+    textDecoration: "none",
+    boxSizing: "border-box",
+    // This removes the 300ms click delay on mobile browsers by indicating that
+    // "double-tap to zoom" shouldn't be used on this element.
+    touchAction: "manipulation",
+    ":focus": {
+      // Mobile: Removes a blue highlight style shown when the user clicks a button
+      WebkitTapHighlightColor: "rgba(0,0,0,0)"
+    }
+  },
+  disabled: {
+    cursor: "auto"
+  },
+  small: {
+    height: Spacing.xLarge_32
+  },
+  text: {
+    textAlign: "left",
+    display: "inline-block",
+    alignItems: "center",
+    fontWeight: "bold",
+    userSelect: "none",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    pointerEvents: "none" // fix Safari bug where the browser was eating mouse events
+
+  },
+  hiddenText: {
+    visibility: "hidden"
+  },
+  spinner: {
+    position: "absolute"
+  }
+});
+var styles$7 = {};
+
+var _generateStyles = function _generateStyles(color) {
+  var buttonType = color;
+
+  if (styles$7[buttonType]) {
+    return styles$7[buttonType];
+  }
+
+  var offBlack32 = Color.offBlack32;
+  var activeColor = mix(offBlack32, color);
+  var newStyles = {};
+  newStyles = {
+    default: {
+      background: "none",
+      color: color
+    },
+    focus: {
+      ":after": {
+        content: "''",
+        position: "absolute",
+        height: 2,
+        left: 0,
+        right: 0,
+        bottom: -1,
+        background: "currentColor",
+        borderRadius: 2
+      }
+    },
+    active: {
+      color: activeColor
+    },
+    disabled: {
+      color: offBlack32,
+      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));
+
+    _defineProperty(_assertThisInitialized(_this), "openerElement", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      opened: false
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleItemSelected", function () {
+      // close menu
+      _this.handleOpenChanged(false); // Bring focus back to the opener element.
+
+
+      if (_this.openerElement) {
+        _this.openerElement.focus();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleOpenChanged", function (opened) {
+      _this.setState({
+        opened: 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.
+
+      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)));
+        onChange(updatedSelection);
+      } else {
+        // Item was newly selected
+        onChange([].concat(_toConsumableArray(selectedValues), [selectedValue]));
+      }
+
+      _this.handleItemSelected();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleOpenerRef", function (node) {
+      _this.openerElement = ReactDOM.findDOMNode(node);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
+      _this.handleOpenChanged(!_this.state.opened);
+    });
+
+    return _this;
+  }
+
+  _createClass(ActionMenu, [{
+    key: "getMenuItems",
+    value: function getMenuItems() {
+      var _this2 = this;
+
+      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
+
+      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 _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
+      };
+    }
+  }]);
+
+  return ActionMenu;
+}(Component);
+
+_defineProperty(ActionMenu, "defaultProps", {
+  alignment: "left",
+  disabled: false
+});
+var styles$8 = StyleSheet.create({
+  caret: {
+    marginLeft: 4
+  },
+  // The design calls for additional offset around the opener.
+  opener: {
+    whiteSpace: "nowrap",
+    userSelect: "none",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  // This is to adjust the space between the menu and the opener.
+  menuTopSpace: {
+    top: -4
+  }
+});
+
+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;
+
+/**
+ * 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);
+    });
+
+    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, {
+        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);
+
+_defineProperty(SelectOpener, "contextTypes", {
+  router: any
+});
+
+_defineProperty(SelectOpener, "defaultProps", {
+  disabled: false,
+  light: false,
+  isPlaceholder: false
+});
+var buttonRadius = 4;
+var styles$9 = StyleSheet.create({
+  // TODO: Dedupe with Button styles
+  shared: {
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    color: offBlack$3,
+    height: DROPDOWN_ITEM_HEIGHT,
+    // This asymmetry arises from the Icon on the right side, which has
+    // extra padding built in. To have the component look more balanced,
+    // we need to take off some paddingRight here.
+    paddingLeft: 16,
+    paddingRight: 12,
+    borderWidth: 0,
+    borderRadius: buttonRadius,
+    borderStyle: "solid",
+    outline: "none",
+    textDecoration: "none",
+    boxSizing: "border-box",
+    whiteSpace: "nowrap",
+    // This removes the 300ms click delay on mobile browsers by indicating that
+    // "double-tap to zoom" shouldn't be used on this element.
+    touchAction: "manipulation"
+  },
+  text: {
+    marginRight: Spacing.xSmall_8,
+    whiteSpace: "nowrap",
+    userSelect: "none",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  caret: {
+    minWidth: 16
+  }
+}); // These values are default padding (16 and 12) minus 1, because
+// 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 = {};
+
+var _generateStyles$1 = function _generateStyles(light, placeholder) {
+  // "hash" the parameters
+  var styleKey = "".concat(String(light), "-").concat(String(placeholder));
+
+  if (stateStyles[styleKey]) {
+    return stateStyles[styleKey];
+  }
+
+  var newStyles = {};
+
+  if (light) {
+    newStyles = {
+      default: {
+        backgroundColor: "transparent",
+        color: placeholder ? white50 : white$4,
+        borderColor: white50,
+        borderWidth: 1
+      },
+      focus: {
+        borderColor: white$4,
+        borderWidth: 2,
+        paddingLeft: adjustedPaddingLeft,
+        paddingRight: adjustedPaddingRight
+      },
+      active: {
+        paddingLeft: adjustedPaddingLeft,
+        paddingRight: adjustedPaddingRight,
+        borderColor: mix(fade(blue$3, 0.32), white$4),
+        borderWidth: 2,
+        color: placeholder ? mix(fade(white$4, 0.32), blue$3) : mix(fade(blue$3, 0.32), white$4),
+        backgroundColor: mix(offBlack32$4, blue$3)
+      },
+      disabled: {
+        borderColor: mix(fade(white$4, 0.32), blue$3),
+        color: mix(fade(white$4, 0.32), blue$3),
+        cursor: "auto"
+      }
+    };
+  } else {
+    newStyles = {
+      default: {
+        backgroundColor: white$4,
+        borderColor: offBlack16$1,
+        borderWidth: 1,
+        color: placeholder ? offBlack64 : offBlack$3
+      },
+      focus: {
+        borderColor: blue$3,
+        borderWidth: 2,
+        paddingLeft: adjustedPaddingLeft,
+        paddingRight: adjustedPaddingRight
+      },
+      active: {
+        background: mix(fade(blue$3, 0.32), white$4),
+        borderColor: mix(offBlack32$4, blue$3),
+        borderWidth: 2,
+        paddingLeft: adjustedPaddingLeft,
+        paddingRight: adjustedPaddingRight
+      },
+      disabled: {
+        backgroundColor: "transparent",
+        borderColor: offBlack16$1,
+        color: offBlack64,
+        cursor: "auto"
+      }
+    };
+  }
+
+  stateStyles[styleKey] = StyleSheet.create(newStyles);
+  return stateStyles[styleKey];
+};
+
+/**
+ * The single select allows the selection of one item. Clients are responsible
+ * for keeping track of the selected item in the select.
+ *
+ * The single select dropdown closes after the selection of an item. If the same
+ * item is selected, there is no callback.
+ *
+ * *NOTE:* The component automatically uses
+ * [react-window](https://github.com/bvaughn/react-window) to improve
+ * performance when rendering these elements and is capable of handling many
+ * 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);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "selectedIndex", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "handleOpenChanged", function (opened) {
+      _this.setState({
+        open: opened,
+        searchText: ""
+      });
+
+      if (_this.props.onToggle) {
+        _this.props.onToggle(opened);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleToggle", function (selectedValue) {
+      // Call callback if selection changed.
+      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();
+      }
+
+      _this.setState({
+        open: false // close the menu upon selection
+
+      });
+
+      if (_this.props.onToggle) {
+        _this.props.onToggle(false);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "mapOptionItemsToDropdownItems", function (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;
+
+        if (!disabled) {
+          indexCounter += 1;
+        }
+
+        if (selected) {
+          _this.selectedIndex = indexCounter;
+        }
+
+        return {
+          component: option,
+          focusable: !disabled,
+          populatedProps: {
+            onToggle: _this.handleToggle,
+            selected: selected,
+            variant: "check"
+          }
+        };
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleSearchTextChanged", function (searchText) {
+      _this.setState({
+        searchText: searchText
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleOpenerRef", function (node) {
+      var openerElement = ReactDOM.findDOMNode(node);
+
+      _this.setState({
+        openerElement: openerElement
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
+      _this.handleOpenChanged(!_this.state.open);
+    });
+
+    _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
+   * 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.
+
+      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.
+
+      return this.mapOptionItemsToDropdownItems(isFilterable ? this.filterChildren(children) : children);
+    }
+  }, {
+    key: "getSearchField",
+    value: function getSearchField() {
+      if (!this.props.isFilterable) {
+        return null;
+      }
+
+      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
+      };
+    }
+  }]);
+
+  return SingleSelect;
+}(Component);
+
+_defineProperty(SingleSelect, "defaultProps", {
+  alignment: "left",
+  disabled: false,
+  light: false
+});
+
+/**
+ * A dropdown that consists of multiple selection items. This select allows
+ * multiple options to be selected. Clients are responsible for keeping track
+ * of the selected items.
+ *
+ * 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);
+
+  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({
+        open: opened,
+        searchText: "",
+        lastSelectedValues: _this.props.selectedValues
+      });
+
+      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;
+
+      if (selectedValues.includes(selectedValue)) {
+        var index = selectedValues.indexOf(selectedValue);
+        var updatedSelection = [].concat(_toConsumableArray(selectedValues.slice(0, index)), _toConsumableArray(selectedValues.slice(index + 1)));
+        onChange(updatedSelection);
+      } else {
+        // Item was newly selected
+        onChange([].concat(_toConsumableArray(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;
+      });
+      onChange(selected);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleSelectNone", function () {
+      var onChange = _this.props.onChange;
+      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;
+      return {
+        component: option,
+        focusable: !disabled,
+        populatedProps: {
+          onToggle: _this.handleToggle,
+          selected: selectedValues.includes(value),
+          variant: "checkbox"
+        }
+      };
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleOpenerRef", function (node) {
+      var openerElement = ReactDOM.findDOMNode(node);
+
+      _this.setState({
+        openerElement: openerElement
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleSearchTextChanged", function (searchText) {
+      _this.setState({
+        searchText: searchText
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
+      _this.handleOpenChanged(!_this.state.open);
+    });
+
+    _this.state = {
+      open: false,
+      searchText: "",
+      lastSelectedValues: [],
+      // merge custom labels with the default ones
+      labels: _objectSpread2(_objectSpread2({}, defaultLabels), props.labels),
+      openerElement: null
+    }; // merge custom labels with the default ones
+
+    _this.labels = _objectSpread2(_objectSpread2({}, defaultLabels), props.labels);
+    return _this;
+  }
+  /**
+   * Used to sync the `opened` state when this component acts as a controlled
+   * 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)
+        });
+      }
+    }
+  }, {
+    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;
+
+        default:
+          return someSelected(selectedValues.length);
+      }
+    }
+  }, {
+    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
+          }
+        }),
+        focusable: true,
+        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 [];
+      }
+    }
+  }, {
+    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.
+
+      var filteredChildren = children.filter(function (_ref) {
+        var props = _ref.props;
+        return !searchText || props.label.toLowerCase().indexOf(lowercasedSearchText) > -1;
+      });
+      var lastSelectedChildren = [];
+      var restOfTheChildren = [];
+
+      var _iterator = _createForOfIteratorHelper(filteredChildren),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var child = _step.value;
+
+          if (lastSelectedValues.includes(child.props.value)) {
+            lastSelectedChildren.push(child);
+          } else {
+            restOfTheChildren.push(child);
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+
+      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: {}
+        });
+      }
+
+      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
+        }
+      });
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      return {
+        open: typeof props.opened === "boolean" ? props.opened : state.open
+      };
+    }
+  }]);
+
+  return MultiSelect;
+}(Component);
+
+_defineProperty(MultiSelect, "defaultProps", {
+  alignment: "left",
+  disabled: false,
+  light: false,
+  shortcuts: false,
+  selectedValues: []
+});
+
+export { ActionItem, ActionMenu, MultiSelect, OptionItem, SeparatorItem, SingleSelect };