@khanacademy/wonder-blocks-dropdown 2.6.8 → 2.7.0

package/dist/es/index.js

@@ -1,11 +1,11 @@
 import _extends from '@babel/runtime/helpers/extends';
 import * as React from 'react';
-import { StyleSheet, css } from 'aphrodite';
+import { StyleSheet } from 'aphrodite';
 import { Link } from 'react-router-dom';
 import { __RouterContext } from 'react-router';
 import Color, { mix, fade, SemanticColor } from '@khanacademy/wonder-blocks-color';
 import Spacing from '@khanacademy/wonder-blocks-spacing';
-import { LabelMedium, styles as styles$a, LabelLarge } from '@khanacademy/wonder-blocks-typography';
+import { LabelMedium, LabelLarge } from '@khanacademy/wonder-blocks-typography';
 import { getClickableBehavior, isClientSideUrl, ClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
 import { addStyle, View } from '@khanacademy/wonder-blocks-core';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
@@ -13,7 +13,7 @@ import Icon, { icons } from '@khanacademy/wonder-blocks-icon';
 import ReactDOM from 'react-dom';
 import { VariableSizeList } from 'react-window';
 import { withActionScheduler } from '@khanacademy/wonder-blocks-timing';
-import IconButton from '@khanacademy/wonder-blocks-icon-button';
+import SearchField from '@khanacademy/wonder-blocks-search-field';
 import { Popper } from 'react-popper';
 import { maybeGetPortalMountedModalHostElement } from '@khanacademy/wonder-blocks-modal';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
@@ -29,22 +29,18 @@ const keyCodes = {
 const selectDropdownStyle = {
   marginTop: Spacing.xSmall_8,
   marginBottom: Spacing.xSmall_8
-}; // Filterable dropdown has minimum dimensions requested from Design.
-// Note that these can be overridden by the provided style if needed.
-
+};
 const filterableDropdownStyle = {
-  minHeight: 100,
-  maxHeight: 384
+  minHeight: 100
 };
 const searchInputStyle = {
   margin: Spacing.xSmall_8,
   marginTop: Spacing.xxxSmall_4
-}; // The default item height
-
+};
 const DROPDOWN_ITEM_HEIGHT = 40;
+const MAX_VISIBLE_ITEMS = 9;
 const SEPARATOR_ITEM_HEIGHT = 9;
-const SEARCH_ITEM_HEIGHT = DROPDOWN_ITEM_HEIGHT + searchInputStyle.margin + searchInputStyle.marginTop; // The default labels that will be used by different components
-
+const SEARCH_ITEM_HEIGHT = DROPDOWN_ITEM_HEIGHT + searchInputStyle.margin + searchInputStyle.marginTop;
 const defaultLabels = {
   clearSearch: "Clear search",
   filter: "Filter",
@@ -65,12 +61,6 @@ const {
 const StyledAnchor = addStyle("a");
 const StyledButton$2 = addStyle("button");
 const StyledLink = addStyle(Link);
-/**
- * The action item trigger actions, such as navigating to a different page or
- * opening a modal. Supply the href and/or onClick props. Used as a child of
- * ActionMenu.
- */
-
 class ActionItem extends React.Component {
   static isClassOf(instance) {
     return instance && instance.type && instance.type.__IS_ACTION_ITEM__;
@@ -91,7 +81,7 @@ class ActionItem extends React.Component {
       testId
     } = this.props;
     const ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
-    return /*#__PURE__*/React.createElement(ClickableBehavior, {
+    return React.createElement(ClickableBehavior, {
       disabled: disabled,
       onClick: onClick,
       href: href,
@@ -103,8 +93,7 @@ class ActionItem extends React.Component {
         hovered,
         focused
       } = state;
-      const defaultStyle = [styles$9.shared, disabled && styles$9.disabled, !disabled && (pressed ? styles$9.active : (hovered || focused) && styles$9.focus), // pass optional styles from react-window (if applies)
-      style];
+      const defaultStyle = [styles$8.shared, disabled && styles$8.disabled, !disabled && (pressed ? styles$8.active : (hovered || focused) && styles$8.focus), style];
 
       const props = _extends({
         "data-test-id": testId,
@@ -113,20 +102,20 @@ class ActionItem extends React.Component {
         style: [defaultStyle]
       }, childrenProps);
 
-      const children = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabelMedium, {
+      const children = React.createElement(React.Fragment, null, React.createElement(LabelMedium, {
         lang: lang,
-        style: [indent && styles$9.indent, styles$9.label]
+        style: [indent && styles$8.indent, styles$8.label]
       }, label));
 
       if (href && !disabled) {
-        return router && !skipClientNav && isClientSideUrl(href) ? /*#__PURE__*/React.createElement(StyledLink, _extends({}, props, {
+        return router && !skipClientNav && isClientSideUrl(href) ? React.createElement(StyledLink, _extends({}, props, {
           to: href
-        }), children) : /*#__PURE__*/React.createElement(StyledAnchor, _extends({}, props, {
+        }), children) : React.createElement(StyledAnchor, _extends({}, props, {
           href: href,
           target: target
         }), children);
       } else {
-        return /*#__PURE__*/React.createElement(StyledButton$2, _extends({
+        return React.createElement(StyledButton$2, _extends({
           type: "button"
         }, props, {
           disabled: disabled
@@ -136,7 +125,7 @@ class ActionItem extends React.Component {
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
+    return React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
   }
 
 }
@@ -146,7 +135,7 @@ ActionItem.defaultProps = {
   role: "menuitem"
 };
 ActionItem.__IS_ACTION_ITEM__ = true;
-const styles$9 = StyleSheet.create({
+const styles$8 = StyleSheet.create({
   shared: {
     background: white$4,
     color: offBlack$3,
@@ -160,8 +149,6 @@ const styles$9 = StyleSheet.create({
     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: {
@@ -171,17 +158,14 @@ const styles$9 = StyleSheet.create({
   indent: {
     marginLeft: Spacing.medium_16
   },
-  // hover and focus states
   focus: {
     color: white$4,
     background: blue$3
   },
-  // active and pressed states
   active: {
     color: mix(fade(blue$3, 0.32), white$4),
     background: mix(offBlack32$4, blue$3)
   },
-  // disabled state
   disabled: {
     color: offBlack32$4,
     cursor: "default"
@@ -193,14 +177,6 @@ const {
   offBlack32: offBlack32$3,
   white: white$3
 } = Color;
-/**
- * Props describing the state of the OptionItem, shared by the checkbox
- * component,
- */
-
-/**
- * The check component used by OptionItem.
- */
 function Check(props) {
   const {
     disabled,
@@ -209,16 +185,15 @@ function Check(props) {
     hovered,
     focused
   } = props;
-  return /*#__PURE__*/React.createElement(Icon, {
+  return React.createElement(Icon, {
     icon: icons.check,
     size: "small",
     color: disabled ? offBlack32$3 : pressed || hovered || focused ? white$3 : offBlack$2,
-    style: [styles$8.bounds, !selected && styles$8.hide]
+    style: [styles$7.bounds, !selected && styles$7.hide]
   });
 }
-const styles$8 = StyleSheet.create({
+const styles$7 = StyleSheet.create({
   bounds: {
-    // Semantically, this are the constants for a small-sized icon
     minHeight: 16,
     minWidth: 16
   },
@@ -227,10 +202,6 @@ const styles$8 = StyleSheet.create({
   }
 });
 
-// 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.
 const checkboxCheck = {
   small: "M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z"
 };
@@ -242,14 +213,6 @@ const {
   offBlack50,
   offWhite
 } = Color;
-/**
- * Props describing the state of the OptionItem, shared by the check
- * component,
- */
-
-/**
- * The checkbox component used by OptionItem.
- */
 function Checkbox(props) {
   const {
     disabled,
@@ -262,20 +225,19 @@ function Checkbox(props) {
   const clickInteraction = pressed || hovered || focused;
   const bgColor = disabled ? offWhite : selected && !clickInteraction ? blue$2 : white$2;
   const checkColor = disabled ? offBlack32$2 : clickInteraction ? pressed ? activeBlue : blue$2 : white$2;
-  return /*#__PURE__*/React.createElement(View, {
-    style: [styles$7.checkbox, (clickInteraction || selected && !disabled) && styles$7.noBorder, disabled && styles$7.disabledCheckbox, {
+  return React.createElement(View, {
+    style: [styles$6.checkbox, (clickInteraction || selected && !disabled) && styles$6.noBorder, disabled && styles$6.disabledCheckbox, {
       backgroundColor: bgColor
     }]
-  }, selected && /*#__PURE__*/React.createElement(Icon, {
+  }, selected && React.createElement(Icon, {
     icon: checkboxCheck,
     size: "small",
     color: checkColor,
-    style: [disabled && selected && styles$7.disabledCheckFormatting]
+    style: [disabled && selected && styles$6.disabledCheckFormatting]
   }));
 }
-const styles$7 = StyleSheet.create({
+const styles$6 = StyleSheet.create({
   checkbox: {
-    // Semantically, this are the constants for a small-sized icon
     minHeight: 16,
     minWidth: 16,
     borderRadius: 3,
@@ -290,8 +252,6 @@ const styles$7 = StyleSheet.create({
     borderColor: offBlack16$1,
     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,
@@ -300,12 +260,6 @@ const styles$7 = StyleSheet.create({
 });
 
 const _excluded$5 = ["disabled", "label", "role", "selected", "testId", "style", "value", "onClick", "onToggle", "variant"];
-
-/**
- * For option items that can be selected in a dropdown, selection denoted either
- * with a check ✔️ or a checkbox ☑️. Use as children in SingleSelect or
- * MultiSelect.
- */
 class OptionItem extends React.Component {
   constructor(...args) {
     super(...args);
@@ -350,7 +304,7 @@ class OptionItem extends React.Component {
 
     const ClickableBehavior = getClickableBehavior();
     const CheckComponent = this.getCheckComponent();
-    return /*#__PURE__*/React.createElement(ClickableBehavior, {
+    return React.createElement(ClickableBehavior, {
       disabled: disabled,
       onClick: this.handleClick,
       role: role
@@ -360,21 +314,20 @@ class OptionItem extends React.Component {
         hovered,
         focused
       } = state;
-      const defaultStyle = [styles$6.itemContainer, pressed ? styles$6.active : (hovered || focused) && styles$6.focus, disabled && styles$6.disabled, // pass optional styles from react-window (if applies)
-      style];
-      return /*#__PURE__*/React.createElement(View, _extends({}, sharedProps, {
+      const defaultStyle = [styles$5.itemContainer, pressed ? styles$5.active : (hovered || focused) && styles$5.focus, disabled && styles$5.disabled, style];
+      return React.createElement(View, _extends({}, sharedProps, {
         testId: testId,
         style: defaultStyle,
         "aria-selected": selected ? "true" : "false",
         role: role
-      }, childrenProps), /*#__PURE__*/React.createElement(CheckComponent, {
+      }, childrenProps), React.createElement(CheckComponent, {
         disabled: disabled,
         selected: selected,
         pressed: pressed,
         hovered: hovered,
         focused: focused
-      }), /*#__PURE__*/React.createElement(LabelMedium, {
-        style: styles$6.label
+      }), React.createElement(LabelMedium, {
+        style: styles$5.label
       }, label));
     });
   }
@@ -393,7 +346,7 @@ const {
   offBlack: offBlack$1,
   offBlack32: offBlack32$1
 } = Color;
-const styles$6 = StyleSheet.create({
+const styles$5 = StyleSheet.create({
   itemContainer: {
     flexDirection: "row",
     background: white$1,
@@ -424,7 +377,6 @@ const styles$6 = StyleSheet.create({
     whiteSpace: "nowrap",
     userSelect: "none",
     marginLeft: Spacing.xSmall_8,
-    // added to truncate strings that are longer than expected
     overflow: "hidden",
     textOverflow: "ellipsis"
   },
@@ -433,30 +385,21 @@ const styles$6 = StyleSheet.create({
   }
 });
 
-// Separator item in a dropdown, used to denote a semantic break.
-
-/**
- * A separator used in a dropdown menu.
- */
 class SeparatorItem extends React.Component {
   static isClassOf(instance) {
     return instance && instance.type && instance.type.__IS_SEPARATOR_ITEM__;
   }
 
   render() {
-    return (
-      /*#__PURE__*/
-      // pass optional styles from react-window (if applies)
-      React.createElement(View, {
-        style: [styles$5.separator, this.props.style],
-        "aria-hidden": "true"
-      })
-    );
+    return React.createElement(View, {
+      style: [styles$4.separator, this.props.style],
+      "aria-hidden": "true"
+    });
   }
 
 }
 SeparatorItem.__IS_SEPARATOR_ITEM__ = true;
-const styles$5 = StyleSheet.create({
+const styles$4 = StyleSheet.create({
   separator: {
     boxShadow: `0 -1px ${Color.offBlack16}`,
     height: 1,
@@ -486,23 +429,18 @@ class DropdownOpener extends React.Component {
     }));
     const childrenProps = renderedChildren.props;
     const childrenTestId = this.getTestIdFromProps(childrenProps);
-    return /*#__PURE__*/React.cloneElement(renderedChildren, _extends({}, clickableChildrenProps, {
+    return React.cloneElement(renderedChildren, _extends({}, clickableChildrenProps, {
       disabled,
       onClick: childrenProps.onClick ? e => {
-        // This is done to avoid overriding a
-        // custom onClick handler inside the
-        // children node
         childrenProps.onClick(e);
         clickableChildrenProps.onClick(e);
       } : clickableChildrenProps.onClick,
-      // try to get the testId from the child element
-      // If it's not set, try to fallback to the parent's testId
       "data-test-id": childrenTestId || testId
     }));
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(ClickableBehavior, {
+    return React.createElement(ClickableBehavior, {
       onClick: this.props.onClick,
       disabled: this.props.disabled
     }, (eventState, handlers) => this.renderAnchorChildren(eventState, handlers));
@@ -514,11 +452,6 @@ DropdownOpener.defaultProps = {
   disabled: false
 };
 
-/**
- * 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.
- */
 class DropdownVirtualizedItem extends React.Component {
   render() {
     const {
@@ -529,9 +462,7 @@ class DropdownVirtualizedItem extends React.Component {
     const item = data[index];
 
     if (SeparatorItem.isClassOf(item.component)) {
-      // add react-window style to the separator to preserve the correct
-      // position
-      return /*#__PURE__*/React.cloneElement(item.component, {
+      return React.cloneElement(item.component, {
         style
       });
     } else {
@@ -542,7 +473,7 @@ class DropdownVirtualizedItem extends React.Component {
         role,
         ref
       } = item;
-      return /*#__PURE__*/React.cloneElement(component, _extends({
+      return React.cloneElement(component, _extends({
         style
       }, populatedProps, {
         key: index,
@@ -556,112 +487,30 @@ class DropdownVirtualizedItem extends React.Component {
 }
 
 class SearchTextInput extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      focused: false,
-      labels: _extends({
-        clearSearch: defaultLabels.clearSearch,
-        filter: defaultLabels.filter
-      }, this.props.labels)
-    };
-
-    this.handleChange = e => {
-      e.preventDefault();
-      this.props.onChange(e.target.value);
-    };
-
-    this.handleDismiss = () => {
-      const {
-        onClick,
-        onChange
-      } = this.props; // Empty the search text and focus the SearchTextInput
-
-      onChange("");
-
-      if (onClick) {
-        onClick();
-      }
-    };
-
-    this.handleBlur = e => {
-      this.setState({
-        focused: false
-      });
-    };
-
-    this.handleFocus = e => {
-      this.setState({
-        focused: true
-      });
-    };
-  }
-
   static isClassOf(instance) {
     return instance && instance.type && instance.type.__IS_SEARCH_TEXT_INPUT__;
   }
 
-  componentDidUpdate(prevProps) {
-    if (this.props.labels !== prevProps.labels) {
-      // eslint-disable-next-line react/no-did-update-set-state
-      this.setState({
-        labels: _extends({}, this.state.labels, this.props.labels)
-      });
-    }
-  }
-
-  maybeRenderDismissIconButton() {
-    const {
-      searchText
-    } = this.props;
-    const {
-      clearSearch
-    } = this.state.labels;
-
-    if (searchText.length > 0) {
-      return /*#__PURE__*/React.createElement(IconButton, {
-        icon: icons.dismiss,
-        kind: "tertiary",
-        onClick: this.handleDismiss,
-        style: styles$4.dismissIcon,
-        "aria-label": clearSearch
-      });
-    }
-
-    return null;
-  }
-
   render() {
     const {
+      labels,
+      onChange,
       onClick,
       itemRef,
       searchText,
       style,
       testId
     } = this.props;
-    const {
-      filter
-    } = this.state.labels;
-    return /*#__PURE__*/React.createElement(View, {
+    return React.createElement(SearchField, {
+      clearAriaLabel: labels.clearSearch,
+      onChange: onChange,
       onClick: onClick,
-      style: [styles$4.inputContainer, this.state.focused && styles$4.focused, style]
-    }, /*#__PURE__*/React.createElement(Icon, {
-      icon: icons.search,
-      size: "medium",
-      color: Color.offBlack64,
-      style: styles$4.searchIcon,
-      "aria-hidden": "true"
-    }), /*#__PURE__*/React.createElement("input", {
-      type: "text",
-      onChange: this.handleChange,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
+      placeholder: labels.filter,
       ref: itemRef,
-      placeholder: filter,
-      value: searchText,
-      className: css(styles$4.inputStyleReset, styles$a.LabelMedium),
-      "data-test-id": testId
-    }), this.maybeRenderDismissIconButton());
+      style: style,
+      testId: testId,
+      value: searchText
+    });
   }
 
 }
@@ -672,89 +521,54 @@ SearchTextInput.defaultProps = {
   }
 };
 SearchTextInput.__IS_SEARCH_TEXT_INPUT__ = true;
-const styles$4 = StyleSheet.create({
-  inputContainer: {
-    flexDirection: "row",
-    border: `1px solid ${Color.offBlack16}`,
-    borderRadius: Spacing.xxxSmall_4,
-    alignItems: "center",
-    // The height of the text input is 40 in design spec and we need to
-    // 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 ${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.
- * Based on the defined height that we're using, this is the maximium
- * number of items that can fit into the visible porition of the
- * dropdowns list box.
- */
-const MAX_VISIBLE_ITEMS = 9;
-/**
- * A react-window's List wrapper that instantiates the virtualized list and
- * dynamically calculates the item height depending on the type
- */
+function getDropdownMenuHeight(items, initialHeight = 0) {
+  return items.slice(0, MAX_VISIBLE_ITEMS).reduce((sum, item) => {
+    if (SeparatorItem.isClassOf(item.component)) {
+      return sum + SEPARATOR_ITEM_HEIGHT;
+    } else if (SearchTextInput.isClassOf(item.component)) {
+      return sum + SEARCH_ITEM_HEIGHT;
+    } else {
+      return sum + DROPDOWN_ITEM_HEIGHT;
+    }
+  }, initialHeight);
+}
+function generateDropdownMenuStyles(minWidth, maxHeight) {
+  const styles = StyleSheet.create({
+    dropdownMenu: {
+      minWidth,
+      maxHeight
+    }
+  });
+  return styles.dropdownMenu;
+}
 
 class DropdownCoreVirtualized extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      height: this.getHeight(),
-      width: this.props.width
-    };
+  constructor(props) {
+    super(props);
 
     this.getItemSize = index => {
-      // get the current item in the list
       const 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;
       }
     };
+
+    this.state = {
+      height: getDropdownMenuHeight(props.data),
+      width: props.width
+    };
   }
 
   componentDidMount() {
     const {
       schedule
-    } = this.props; // Wait for styles to be applied. This way, we can get a more precise
-    // value of the container dimensions.
-
+    } = this.props;
     schedule.animationFrame(() => {
       this.setWidth();
     });
@@ -764,27 +578,20 @@ class DropdownCoreVirtualized extends React.Component {
     const {
       data,
       listRef
-    } = this.props; // if the items size has changed, then recalculate each item position
+    } = this.props;
 
     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
-   */
-
 
   setWidth() {
     const rootNode = ReactDOM.findDOMNode(this);
-    const parentNode = rootNode == null ? void 0 : rootNode.parentElement; // after the non-virtualized items are rendered, we get the container
-    //  width to pass it to react-window's List
+    const parentNode = rootNode == null ? void 0 : rootNode.parentElement;
 
     if (parentNode) {
       const width = parentNode.getBoundingClientRect().width;
@@ -793,67 +600,27 @@ class DropdownCoreVirtualized extends React.Component {
       });
     }
   }
-  /**
-   * Update container height
-   */
-
 
   setHeight() {
-    // calculate dropdown's height depending on the type of items
-    const height = this.getHeight();
+    const height = getDropdownMenuHeight(this.props.data);
     this.setState({
       height
     });
   }
-  /**
-   * The list height that is automatically calculated depending on the
-   * component's type of each item (e.g. Separator, Option, Search, etc)
-   */
-
 
-  getHeight() {
-    // calculate using the first 10 items on the array as we want to display
-    // this number of elements in the visible area
-    return this.props.data.slice(0, MAX_VISIBLE_ITEMS).reduce((sum, item) => {
-      if (SeparatorItem.isClassOf(item.component)) {
-        return sum + SEPARATOR_ITEM_HEIGHT;
-      } else if (SearchTextInput.isClassOf(item.component)) {
-        // search text input height
-        return sum + SEARCH_ITEM_HEIGHT;
-      } else {
-        return sum + DROPDOWN_ITEM_HEIGHT;
-      }
-    }, 0);
-  }
-  /**
-   * Calculates item height
-   */
-
-
-  /**
-   * render non virtualized items to calculate the container max-width that
-   * will be used by DropdownCoreVirtualized
-   */
   renderInitialItems() {
     const {
       data
     } = this.props;
-    const allComponents = data.map(e => e.component); // 1. get the children opaque data structure to sort each item by its
-    //    label length
-
+    const allComponents = data.map(e => e.component);
     const longestItems = React.Children.toArray(allComponents).filter(Boolean).sort((a, b) => {
-      // 2. only sort elements that contain a `label` prop
       if (b.props.label && a.props.label) {
         return b.props.label.length - a.props.label.length;
       }
 
       return -1;
-    }) // 3. only render the possible visible items to minimize layout
-    //    jumps
-    .slice(0, MAX_VISIBLE_ITEMS); // Append longest items to calculate the container width.
-    // We need to hide these sorted elements to avoid any FOUC.
-
-    return longestItems.map(item => /*#__PURE__*/React.cloneElement(item, {
+    }).slice(0, MAX_VISIBLE_ITEMS);
+    return longestItems.map(item => React.cloneElement(item, {
       style: {
         visibility: "hidden"
       }
@@ -869,38 +636,24 @@ class DropdownCoreVirtualized extends React.Component {
       height,
       width
     } = this.state;
-    return (
-      /*#__PURE__*/
-      // react-window has some issues for typing lists when passing refs
-      // $FlowIgnore
-      React.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)
-    );
+    return React.createElement(VariableSizeList, {
+      height: height,
+      itemCount: data.length,
+      itemSize: this.getItemSize,
+      itemData: data,
+      style: {
+        overflowX: "hidden"
+      },
+      width: width,
+      overscanCount: 5,
+      ref: listRef
+    }, DropdownVirtualizedItem);
   }
 
   render() {
     if (this.state.width === undefined) {
-      // if we don't pass a fixed value, then we need to render
-      // non-virtualized items to calculate width
       return this.renderInitialItems();
     } else {
-      // width has been provided, then render the virtualized list
       return this.renderVirtualizedList();
     }
   }
@@ -913,34 +666,23 @@ const modifiers = [{
   name: "preventOverflow",
   options: {
     rootBoundary: "viewport",
-    // Allows to overlap the popper in case there's no more vertical
-    // room in the viewport.
     altAxis: true,
-    // Also needed to make sure the Popper will be displayed correctly
-    // in different contexts (e.g inside a Modal)
     tether: false
   }
 }];
-
-/**
- * A wrapper for PopperJS that renders the children inside a portal.
- */
 function DropdownPopper({
   children,
   alignment = "left",
   onPopperElement,
   referenceElement
 }) {
-  // If we are in a modal, we find where we should be portalling the menu by
-  // using the helper function from the modal package on the opener element.
-  // If we are not in a modal, we use body as the location to portal to.
   const modalHost = maybeGetPortalMountedModalHostElement(referenceElement) || document.querySelector("body");
 
   if (!modalHost) {
     return null;
   }
 
-  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Popper, {
+  return ReactDOM.createPortal(React.createElement(Popper, {
     innerRef: node => {
       if (node && onPopperElement) {
         onPopperElement(node);
@@ -958,7 +700,7 @@ function DropdownPopper({
     isReferenceHidden
   }) => {
     const shouldHidePopper = !!(hasPopperEscaped || isReferenceHidden);
-    return /*#__PURE__*/React.createElement("div", {
+    return React.createElement("div", {
       ref: ref,
       style: style,
       "data-test-id": "dropdown-popper",
@@ -967,34 +709,9 @@ function DropdownPopper({
   }), modalHost);
 }
 
-/**
- * The number of options to apply the virtualized list to.
- *
- * NOTE: The threshold is defined taking into account performance
- * implications (e.g. process input events for users should not be longer
- * than 100ms).
- * @see https://web.dev/rail/?utm_source=devtools#goals-and-guidelines
- *
- * TODO(juan, WB-1263): Improve performance by refactoring this component.
- */
-
 const VIRTUALIZE_THRESHOLD = 125;
 
-/**
- * A core dropdown component that takes an opener and children to display as
- * part of the dropdown menu. Renders the dropdown as a portal to avoid clipping
- * in overflow: auto containers.
- */
 class DropdownCore extends React.Component {
-  // Keeps track of the index of the focused item, out of a list of focusable items
-  // Keeps track of the index of the focused item in the context of all the
-  // items contained by this menu, whether focusable or not, used for figuring
-  // out focus correctly when the items have changed in terms of whether
-  // they're focusable or not
-  // Whether any items have been selected since the menu was opened
-  // Keeps a reference of the virtualized list instance
-  // Figure out if the same items are focusable. If an item has been added or
-  // removed, this method will return false.
   static sameItemsFocusable(prevItems, currentItems) {
     if (prevItems.length !== currentItems.length) {
       return false;
@@ -1009,16 +726,13 @@ class DropdownCore extends React.Component {
     return true;
   }
 
-  // This is here to avoid calling React.createRef on each rerender. Instead,
-  // we create the itemRefs only if it's the first time or if the set of items
-  // that are focusable has changed.
   static getDerivedStateFromProps(props, state) {
     if (state.itemRefs.length === 0 && props.open || !DropdownCore.sameItemsFocusable(state.prevItems, props.items)) {
       const itemRefs = [];
 
       for (let i = 0; i < props.items.length; i++) {
         if (props.items[i].focusable) {
-          const ref = /*#__PURE__*/React.createRef();
+          const ref = React.createRef();
           itemRefs.push({
             ref,
             originalIndex: i
@@ -1040,7 +754,7 @@ class DropdownCore extends React.Component {
   }
 
   constructor(props) {
-    super(props); // Apply our initial focus index
+    super(props);
 
     this.handleInteract = event => {
       const {
@@ -1061,7 +775,7 @@ class DropdownCore extends React.Component {
         open,
         searchText
       } = this.props;
-      const keyCode = event.which || event.keyCode; // If menu isn't open and user presses down, open the menu
+      const keyCode = event.which || event.keyCode;
 
       if (!open) {
         if (keyCode === keyCodes.down) {
@@ -1071,15 +785,10 @@ class DropdownCore extends React.Component {
         }
 
         return;
-      } // 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 (this.hasSearchBox() && this.focusedIndex === 0 && searchText) {
             return;
           }
@@ -1089,12 +798,9 @@ class DropdownCore extends React.Component {
           return;
 
         case keyCodes.space:
-          // When we display SearchTextInput and the focus is on it,
-          // we should let the user type space.
           if (this.hasSearchBox() && this.focusedIndex === 0) {
             return;
-          } // Prevent space from scrolling down the page
-
+          }
 
           event.preventDefault();
           return;
@@ -1120,19 +826,14 @@ class DropdownCore extends React.Component {
 
       switch (keyCode) {
         case keyCodes.space:
-          // When we display SearchTextInput and the focus is on it,
-          // we should let the user type space.
           if (this.hasSearchBox() && this.focusedIndex === 0) {
             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();
@@ -1144,19 +845,15 @@ class DropdownCore extends React.Component {
     };
 
     this.handleClickFocus = index => {
-      // Turn itemsClicked on so pressing up or down would focus the
-      // appropriate item in handleKeyDown
       this.itemsClicked = true;
       this.focusedIndex = index;
       this.focusedOriginalIndex = this.state.itemRefs[this.focusedIndex].originalIndex;
     };
 
     this.handleDropdownMouseUp = event => {
-      // $FlowIgnore[method-unbinding]
       if (event.nativeEvent.stopImmediatePropagation) {
         event.nativeEvent.stopImmediatePropagation();
       } else {
-        // Workaround for jsdom
         event.stopPropagation();
       }
     };
@@ -1182,7 +879,7 @@ class DropdownCore extends React.Component {
         noResults: defaultLabels.noResults
       }, props.labels)
     };
-    this.virtualizedListRef = /*#__PURE__*/React.createRef();
+    this.virtualizedListRef = React.createRef();
   }
 
   componentDidMount() {
@@ -1198,33 +895,19 @@ class DropdownCore extends React.Component {
     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) {
+    } else if (open) {
       const {
         itemRefs,
         sameItemsFocusable
-      } = this.state; // Check if the same items are focused by comparing the items at
-      // each index and seeing if the {focusable} property is the same.
-      // Very rarely do the set of focusable items change if the menu
-      // hasn't been re-opened. This is for cases like a {Select all}
-      // option that becomes disabled iff all the options are selected.
+      } = this.state;
 
       if (sameItemsFocusable) {
         return;
       } else {
-        // If the set of items that was focusabled changed, it's very
-        // likely that the previously focused item no longer has the
-        // same index relative to the list of focusable items. Instead,
-        // use the focusedOriginalIndex to find the new index of the
-        // last item that was focused before this change
         const newFocusableIndex = itemRefs.findIndex(ref => ref.originalIndex === this.focusedOriginalIndex);
 
         if (newFocusableIndex === -1) {
-          // Can't find the originally focused item, return focus to
-          // the first item that IS focusable
-          this.focusedIndex = 0; // Reset the knowlege that things had been clicked
-
+          this.focusedIndex = 0;
           this.itemsClicked = false;
           this.scheduleToFocusCurrentItem();
         } else {
@@ -1233,7 +916,6 @@ class DropdownCore extends React.Component {
       }
 
       if (this.props.labels !== prevProps.labels) {
-        // eslint-disable-next-line react/no-did-update-set-state
         this.setState({
           labels: _extends({}, this.state.labels, this.props.labels)
         });
@@ -1247,21 +929,14 @@ class DropdownCore extends React.Component {
 
   hasSearchBox() {
     return !!this.props.onSearchTextChanged && typeof this.props.searchText === "string";
-  } // Resets our initial focus index to what was passed in
-  // via the props
-
+  }
 
   resetFocusedIndex() {
     const {
       initialFocusedIndex
-    } = this.props; // If we are given an initial focus index, select it.  Otherwise
-    // default to the first item
+    } = this.props;
 
     if (initialFocusedIndex) {
-      // If we have a search box visible, then our focus
-      // index is going to be offset by 1, since the orginal
-      // index doesn't account for the search box's
-      // existence.
       if (this.hasSearchBox()) {
         this.focusedIndex = initialFocusedIndex + 1;
       } else {
@@ -1270,9 +945,7 @@ class DropdownCore extends React.Component {
     } else {
       this.focusedIndex = 0;
     }
-  } // Figure out focus states for the dropdown after it has changed from open
-  // to closed or vice versa
-
+  }
 
   initialFocusItem() {
     const {
@@ -1307,10 +980,8 @@ class DropdownCore extends React.Component {
 
   scheduleToFocusCurrentItem() {
     if (this.shouldVirtualizeList()) {
-      // wait for windowed items to be recalculated
       this.props.schedule.animationFrame(() => this.focusCurrentItem());
     } else {
-      // immediately focus the current item if we're not virtualizing
       this.focusCurrentItem();
     }
   }
@@ -1319,21 +990,14 @@ class DropdownCore extends React.Component {
     const fousedItemRef = this.state.itemRefs[this.focusedIndex];
 
     if (fousedItemRef) {
-      // force react-window to scroll to ensure the focused item is visible
       if (this.virtualizedListRef.current) {
-        // Our focused index does not include disabled items, but the
-        // react-window index system does include the disabled items
-        // in the count.  So we need to use "originalIndex", which
-        // does account for disabled items.
         this.virtualizedListRef.current.scrollToItem(fousedItemRef.originalIndex);
       }
 
       const node = ReactDOM.findDOMNode(fousedItemRef.ref.current);
 
       if (node) {
-        node.focus(); // Keep track of the original index of the newly focused item.
-        // To be used if the set of focusable items in the menu changes
-
+        node.focus();
         this.focusedOriginalIndex = fousedItemRef.originalIndex;
       }
     }
@@ -1360,10 +1024,6 @@ class DropdownCore extends React.Component {
   }
 
   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();
     }
@@ -1396,12 +1056,11 @@ class DropdownCore extends React.Component {
       }
     } = this.props;
     const showSearchTextInput = !!onSearchTextChanged && typeof searchText === "string";
-    const includeSearchCount = showSearchTextInput ? 1 : 0; // Verify if there are items to be rendered or not
-
+    const includeSearchCount = showSearchTextInput ? 1 : 0;
     const numResults = items.length - includeSearchCount;
 
     if (numResults === 0) {
-      return /*#__PURE__*/React.createElement(LabelMedium, {
+      return React.createElement(LabelMedium, {
         style: styles$3.noResult,
         testId: "dropdown-core-no-results"
       }, noResults);
@@ -1409,29 +1068,14 @@ class DropdownCore extends React.Component {
 
     return null;
   }
-  /**
-   * Handles click events for each item in the dropdown.
-   */
 
-
-  /**
-   * Determines which rendering strategy we are going to apply to the options
-   * list.
-   */
   shouldVirtualizeList() {
-    // Verify if the list is long enough to be virtualized (passes the
-    // threshold).
     return this.props.items.length > VIRTUALIZE_THRESHOLD;
   }
-  /**
-   * Renders the non-virtualized list of items.
-   */
-
 
   renderList() {
     let focusCounter = 0;
-    const itemRole = this.getItemRole(); // if we don't need to virtualize, we can render the list directly
-
+    const itemRole = this.getItemRole();
     return this.props.items.map((item, index) => {
       if (SeparatorItem.isClassOf(item.component)) {
         return item.component;
@@ -1447,46 +1091,31 @@ class DropdownCore extends React.Component {
         focusCounter += 1;
       }
 
-      const focusIndex = focusCounter - 1; // The reference to the item is used to restore focus.
-
-      const currentRef = this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null; // Render the SearchField component.
+      const focusIndex = focusCounter - 1;
+      const currentRef = this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null;
 
       if (SearchTextInput.isClassOf(component)) {
-        return /*#__PURE__*/React.cloneElement(component, _extends({}, populatedProps, {
+        return React.cloneElement(component, _extends({}, populatedProps, {
           key: "search-text-input",
-          // pass the current ref down to the input element
           itemRef: currentRef,
-          // override to avoid losing focus when pressing a key
           onClick: () => {
             this.handleClickFocus(0);
             this.focusCurrentItem();
           },
-          // apply custom styles
           style: searchInputStyle
         }));
-      } // Render OptionItem and/or ActionItem elements.
-
+      }
 
-      return /*#__PURE__*/React.cloneElement(component, _extends({}, populatedProps, {
+      return React.cloneElement(component, _extends({}, populatedProps, {
         key: index,
         onClick: () => {
           this.handleItemClick(focusIndex, item);
         },
-        // Only pass the ref if the item is focusable.
         ref: focusable ? currentRef : null,
         role: itemRole
       }));
     });
   }
-  /**
-   * Process the items and wrap them into an array that react-window can
-   * interpret.
-   *
-   * NOTE: The main difference with the collection in renderList() is that we
-   * massage the items to be able to clone them later in
-   * DropdownVirtualizedItem, where as renderList() clones the items directly.
-   */
-
 
   parseVirtualizedItems() {
     let focusCounter = 0;
@@ -1500,14 +1129,12 @@ class DropdownCore extends React.Component {
 
       if (SearchTextInput.isClassOf(item.component)) {
         return _extends({}, item, {
-          // override to avoid losing focus when pressing a key
           onClick: () => {
             this.handleClickFocus(0);
             this.focusCurrentItem();
           },
           populatedProps: {
             style: searchInputStyle,
-            // pass the current ref down to the input element
             itemRef: this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null
           }
         });
@@ -1522,15 +1149,10 @@ class DropdownCore extends React.Component {
       });
     });
   }
-  /**
-   * Render the items using a virtualized list
-   */
-
 
   renderVirtualizedList() {
-    // preprocess items data to pass it to the renderer
     const virtualizedItems = this.parseVirtualizedItems();
-    return /*#__PURE__*/React.createElement(DropdownCoreVirtualized$1, {
+    return React.createElement(DropdownCoreVirtualized$1, {
       data: virtualizedItems,
       listRef: this.virtualizedListRef
     });
@@ -1541,19 +1163,15 @@ class DropdownCore extends React.Component {
       dropdownStyle,
       light,
       openerElement
-    } = this.props; // The dropdown width is at least the width of the opener.
-    // It's only used if the element exists in the DOM
-
+    } = this.props;
     const openerStyle = openerElement && window.getComputedStyle(openerElement);
     const minDropdownWidth = openerStyle ? openerStyle.getPropertyValue("width") : 0;
-    return /*#__PURE__*/React.createElement(View // Stop propagation to prevent the mouseup listener on the
-    // document from closing the menu.
-    , {
+    const initialHeight = 12;
+    const maxDropdownHeight = getDropdownMenuHeight(this.props.items, initialHeight);
+    return React.createElement(View, {
       onMouseUp: this.handleDropdownMouseUp,
       role: this.props.role,
-      style: [styles$3.dropdown, light && styles$3.light, isReferenceHidden && styles$3.hidden, {
-        minWidth: minDropdownWidth
-      }, dropdownStyle]
+      style: [styles$3.dropdown, light && styles$3.light, isReferenceHidden && styles$3.hidden, generateDropdownMenuStyles(minDropdownWidth, maxDropdownHeight), dropdownStyle]
     }, listRenderer, this.maybeRenderNoResults());
   }
 
@@ -1561,14 +1179,9 @@ class DropdownCore extends React.Component {
     const {
       alignment,
       openerElement
-    } = this.props; // Preprocess the items that are used inside the Popper instance. By
-    // doing this, we optimize the list to be processed only one time
-    // instead of every time popper changes.
-    // NOTE: This improves the performance impact of the dropdown by
-    // reducing the execution time up to 2.5X.
-
+    } = this.props;
     const listRenderer = this.shouldVirtualizeList() ? this.renderVirtualizedList() : this.renderList();
-    return /*#__PURE__*/React.createElement(DropdownPopper, {
+    return React.createElement(DropdownPopper, {
       alignment: alignment,
       onPopperElement: popperElement => {
         this.popperElement = popperElement;
@@ -1584,7 +1197,7 @@ class DropdownCore extends React.Component {
       style,
       className
     } = this.props;
-    return /*#__PURE__*/React.createElement(View, {
+    return React.createElement(View, {
       onKeyDown: this.handleKeyDown,
       onKeyUp: this.handleKeyUp,
       style: [styles$3.menuWrapper, style],
@@ -1615,7 +1228,6 @@ const styles$3 = StyleSheet.create({
     overflowY: "auto"
   },
   light: {
-    // Pretty much just remove the border
     border: "none"
   },
   hidden: {
@@ -1632,13 +1244,6 @@ var DropdownCore$1 = withActionScheduler(DropdownCore);
 
 const _excluded$4 = ["children", "disabled", "focused", "hovered", "pressed", "waiting", "testId", "opened", "aria-label"];
 const StyledButton$1 = addStyle("button");
-/**
- * Although this component shares a lot with ButtonCore there are a couple
- * 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
- */
-
 class ActionMenuOpenerCore extends React.Component {
   render() {
     const _this$props = this.props,
@@ -1660,10 +1265,10 @@ class ActionMenuOpenerCore extends React.Component {
 
     const disabled = disabledProp;
     const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, buttonStyles.default, disabled && buttonStyles.disabled, !disabled && pressed && buttonStyles.active];
-    const label = /*#__PURE__*/React.createElement(LabelLarge, {
+    const label = React.createElement(LabelLarge, {
       style: sharedStyles.text
     }, children);
-    return /*#__PURE__*/React.createElement(StyledButton$1, _extends({
+    return React.createElement(StyledButton$1, _extends({
       "aria-expanded": opened ? "true" : "false",
       "aria-haspopup": "menu",
       "aria-label": ariaLabel,
@@ -1672,11 +1277,11 @@ class ActionMenuOpenerCore extends React.Component {
       type: "button"
     }, restProps, {
       "data-test-id": testId
-    }), /*#__PURE__*/React.createElement(View, {
+    }), React.createElement(View, {
       style: !disabled && (hovered || focused) && buttonStyles.focus
-    }, label), /*#__PURE__*/React.createElement(Strut, {
+    }, label), React.createElement(Strut, {
       size: Spacing.xxxSmall_4
-    }), /*#__PURE__*/React.createElement(Icon, {
+    }), React.createElement(Icon, {
       size: "small",
       color: "currentColor",
       icon: icons.caretDown
@@ -1697,11 +1302,8 @@ const sharedStyles = StyleSheet.create({
     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)"
     }
   },
@@ -1720,8 +1322,7 @@ const sharedStyles = StyleSheet.create({
     whiteSpace: "nowrap",
     overflow: "hidden",
     textOverflow: "ellipsis",
-    pointerEvents: "none" // fix Safari bug where the browser was eating mouse events
-
+    pointerEvents: "none"
   },
   hiddenText: {
     visibility: "hidden"
@@ -1774,10 +1375,6 @@ const _generateStyles$1 = color => {
 };
 
 const _excluded$3 = ["text"];
-
-/**
- * A menu that consists of various types of items.
- */
 class ActionMenu extends React.Component {
   constructor(...args) {
     super(...args);
@@ -1786,8 +1383,7 @@ class ActionMenu extends React.Component {
     };
 
     this.handleItemSelected = () => {
-      // close menu
-      this.handleOpenChanged(false); // Bring focus back to the opener element.
+      this.handleOpenChanged(false);
 
       if (this.openerElement) {
         this.openerElement.focus();
@@ -1808,7 +1404,7 @@ class ActionMenu extends React.Component {
       const {
         onChange,
         selectedValues
-      } = this.props; // If either of these are not defined, return.
+      } = this.props;
 
       if (!onChange || !selectedValues) {
         return;
@@ -1819,7 +1415,6 @@ class ActionMenu extends React.Component {
         const updatedSelection = [].concat(selectedValues.slice(0, index), selectedValues.slice(index + 1));
         onChange(updatedSelection);
       } else {
-        // Item was newly selected
         onChange([].concat(selectedValues, [selectedValue]));
       }
 
@@ -1835,10 +1430,6 @@ class ActionMenu extends React.Component {
     };
   }
 
-  /**
-   * Used to sync the `opened` state when this component acts as a controlled
-   * component
-   */
   static getDerivedStateFromProps(props, state) {
     return {
       opened: typeof props.opened === "boolean" ? props.opened : state.opened
@@ -1850,9 +1441,7 @@ class ActionMenu extends React.Component {
       children,
       selectedValues
     } = this.props;
-    const allChildren = React.Children.toArray(children).filter(Boolean); // verify if there's at least one OptionItem element to indent the
-    // possible Action items
-
+    const allChildren = React.Children.toArray(children).filter(Boolean);
     const isOptionItemIncluded = allChildren.some(item => OptionItem.isClassOf(item));
     return allChildren.map(item => {
       const {
@@ -1896,7 +1485,7 @@ class ActionMenu extends React.Component {
     const {
       opened
     } = this.state;
-    return /*#__PURE__*/React.createElement(DropdownOpener, {
+    return React.createElement(DropdownOpener, {
       onClick: this.handleClick,
       disabled: numItems === 0 || disabled,
       text: menuText,
@@ -1905,7 +1494,7 @@ class ActionMenu extends React.Component {
     }, opener ? opener : openerProps => {
       const eventState = _objectWithoutPropertiesLoose(openerProps, _excluded$3);
 
-      return /*#__PURE__*/React.createElement(ActionMenuOpenerCore, _extends({}, eventState, {
+      return React.createElement(ActionMenuOpenerCore, _extends({}, eventState, {
         disabled: disabled,
         opened: !!opened,
         testId: testId
@@ -1922,7 +1511,7 @@ class ActionMenu extends React.Component {
     } = this.props;
     const items = this.getMenuItems();
     const dropdownOpener = this.renderOpener(items.length);
-    return /*#__PURE__*/React.createElement(DropdownCore$1, {
+    return React.createElement(DropdownCore$1, {
       role: "menu",
       style: style,
       className: className,
@@ -1945,14 +1534,12 @@ const styles$1 = 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
   }
@@ -1969,10 +1556,6 @@ const {
   offBlack32,
   offBlack64
 } = Color;
-
-/**
- * An opener that opens select boxes.
- */
 class SelectOpener extends React.Component {
   constructor(...args) {
     super(...args);
@@ -1999,7 +1582,7 @@ class SelectOpener extends React.Component {
           sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
 
     const ClickableBehavior = getClickableBehavior(router);
-    return /*#__PURE__*/React.createElement(ClickableBehavior, {
+    return React.createElement(ClickableBehavior, {
       disabled: disabled,
       onClick: this.handleClick
     }, (state, childrenProps) => {
@@ -2009,12 +1592,10 @@ class SelectOpener extends React.Component {
         hovered,
         focused,
         pressed
-      } = state; // The icon colors are kind of fickle. This is just logic
-      // based on the zeplin design.
-
+      } = state;
       const iconColor = light ? disabled || pressed ? "currentColor" : white : disabled ? offBlack32 : offBlack64;
       const style = [styles.shared, stateStyles.default, disabled && stateStyles.disabled, !disabled && (pressed ? stateStyles.active : (hovered || focused) && stateStyles.focus)];
-      return /*#__PURE__*/React.createElement(StyledButton, _extends({}, sharedProps, {
+      return React.createElement(StyledButton, _extends({}, sharedProps, {
         "aria-expanded": open ? "true" : "false",
         "aria-haspopup": "listbox",
         "data-test-id": testId,
@@ -2022,9 +1603,9 @@ class SelectOpener extends React.Component {
         id: id,
         style: style,
         type: "button"
-      }, childrenProps), /*#__PURE__*/React.createElement(LabelMedium, {
+      }, childrenProps), React.createElement(LabelMedium, {
         style: styles.text
-      }, children), /*#__PURE__*/React.createElement(Icon, {
+      }, children), React.createElement(Icon, {
         icon: icons.caretDown,
         color: iconColor,
         size: "small",
@@ -2035,7 +1616,7 @@ class SelectOpener extends React.Component {
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
+    return React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
   }
 
 }
@@ -2046,7 +1627,6 @@ SelectOpener.defaultProps = {
 };
 const buttonRadius = 4;
 const styles = StyleSheet.create({
-  // TODO: Dedupe with Button styles
   shared: {
     position: "relative",
     display: "inline-flex",
@@ -2054,9 +1634,6 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     color: offBlack,
     height: DROPDOWN_ITEM_HEIGHT,
-    // This asymmetry arises from the Icon on the right side, which has
-    // extra padding built in. To have the component look more balanced,
-    // we need to take off some paddingRight here.
     paddingLeft: 16,
     paddingRight: 12,
     borderWidth: 0,
@@ -2066,8 +1643,6 @@ const styles = StyleSheet.create({
     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: {
@@ -2080,16 +1655,12 @@ const styles = StyleSheet.create({
   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.
-
+});
 const adjustedPaddingLeft = 16 - 1;
 const adjustedPaddingRight = 12 - 1;
 const stateStyles = {};
 
 const _generateStyles = (light, placeholder) => {
-  // "hash" the parameters
   const styleKey = `${String(light)}-${String(placeholder)}`;
 
   if (stateStyles[styleKey]) {
@@ -2161,20 +1732,6 @@ const _generateStyles = (light, placeholder) => {
 };
 
 const _excluded$1 = ["children", "disabled", "id", "light", "opener", "placeholder", "selectedValue", "testId", "alignment", "dropdownStyle", "isFilterable", "onChange", "onToggle", "opened", "style", "className"];
-
-/**
- * The single select allows the selection of one item. Clients are responsible
- * 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.
- *
- */
 class SingleSelect extends React.Component {
   constructor(props) {
     super(props);
@@ -2191,19 +1748,16 @@ class SingleSelect extends React.Component {
     };
 
     this.handleToggle = 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
-
+        open: false
       });
 
       if (this.props.onToggle) {
@@ -2212,8 +1766,6 @@ class SingleSelect extends React.Component {
     };
 
     this.mapOptionItemsToDropdownItems = children => {
-      // Figure out which index should receive focus when this select opens
-      // Needs to exclude counting items that are disabled
       let indexCounter = 0;
       this.selectedIndex = 0;
       return children.map(option => {
@@ -2270,11 +1822,6 @@ class SingleSelect extends React.Component {
       openerElement: null
     };
   }
-  /**
-   * Used to sync the `opened` state when this component acts as a controlled
-   * component
-   */
-
 
   static getDerivedStateFromProps(props, state) {
     return {
@@ -2286,8 +1833,7 @@ class SingleSelect extends React.Component {
     const {
       searchText
     } = this.state;
-    const lowercasedSearchText = searchText.toLowerCase(); // Filter the children with the searchText if any.
-
+    const lowercasedSearchText = searchText.toLowerCase();
     return children.filter(({
       props
     }) => !searchText || props.label.toLowerCase().indexOf(lowercasedSearchText) > -1);
@@ -2296,9 +1842,7 @@ class SingleSelect extends React.Component {
   getMenuItems(children) {
     const {
       isFilterable
-    } = this.props; // If it's not filterable, no need to do any extra besides mapping the
-    // option items to dropdown items.
-
+    } = this.props;
     return this.mapOptionItemsToDropdownItems(isFilterable ? this.filterChildren(children) : children);
   }
 
@@ -2308,7 +1852,7 @@ class SingleSelect extends React.Component {
     }
 
     return {
-      component: /*#__PURE__*/React.createElement(SearchTextInput, {
+      component: React.createElement(SearchTextInput, {
         key: "search-text-input",
         onChange: this.handleSearchTextChanged,
         searchText: this.state.searchText,
@@ -2336,16 +1880,14 @@ class SingleSelect extends React.Component {
     } = _this$props,
           sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
 
-    const selectedItem = React.Children.toArray(children).find(option => option.props.value === selectedValue); // If nothing is selected, or if the selectedValue doesn't match any
-    // item in the menu, use the placeholder.
-
+    const selectedItem = React.Children.toArray(children).find(option => option.props.value === selectedValue);
     const menuText = selectedItem ? selectedItem.props.label : placeholder;
-    const dropdownOpener = opener ? /*#__PURE__*/React.createElement(DropdownOpener, {
+    const dropdownOpener = opener ? React.createElement(DropdownOpener, {
       onClick: this.handleClick,
       disabled: numItems === 0 || disabled,
       ref: this.handleOpenerRef,
       text: menuText
-    }, opener) : /*#__PURE__*/React.createElement(SelectOpener, _extends({}, sharedProps, {
+    }, opener) : React.createElement(SelectOpener, _extends({}, sharedProps, {
       disabled: numItems === 0 || disabled,
       id: id,
       isPlaceholder: !selectedItem,
@@ -2376,7 +1918,7 @@ class SingleSelect extends React.Component {
     const opener = this.renderOpener(allChildren.length);
     const searchField = this.getSearchField();
     const items = searchField ? [searchField].concat(filteredItems) : filteredItems;
-    return /*#__PURE__*/React.createElement(DropdownCore$1, {
+    return React.createElement(DropdownCore$1, {
       role: "listbox",
       alignment: alignment,
       dropdownStyle: [isFilterable && filterableDropdownStyle, selectDropdownStyle, dropdownStyle],
@@ -2402,15 +1944,6 @@ SingleSelect.defaultProps = {
 };
 
 const _excluded = ["disabled", "id", "light", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className"];
-
-/**
- * A dropdown that consists of multiple selection items. This select allows
- * 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.
- */
 class MultiSelect extends React.Component {
   constructor(props) {
     super(props);
@@ -2438,7 +1971,6 @@ class MultiSelect extends React.Component {
         const updatedSelection = [].concat(selectedValues.slice(0, index), selectedValues.slice(index + 1));
         onChange(updatedSelection);
       } else {
-        // Item was newly selected
         onChange([].concat(selectedValues, [selectedValue]));
       }
     };
@@ -2499,18 +2031,11 @@ class MultiSelect extends React.Component {
       open: false,
       searchText: "",
       lastSelectedValues: [],
-      // merge custom labels with the default ones
       labels: _extends({}, defaultLabels, props.labels),
       openerElement: null
-    }; // merge custom labels with the default ones
-
+    };
     this.labels = _extends({}, defaultLabels, props.labels);
   }
-  /**
-   * Used to sync the `opened` state when this component acts as a controlled
-   * component
-   */
-
 
   static getDerivedStateFromProps(props, state) {
     return {
@@ -2520,7 +2045,6 @@ class MultiSelect extends React.Component {
 
   componentDidUpdate(prevProps) {
     if (this.props.labels !== prevProps.labels) {
-      // eslint-disable-next-line react/no-did-update-set-state
       this.setState({
         labels: _extends({}, this.state.labels, this.props.labels)
       });
@@ -2536,9 +2060,7 @@ class MultiSelect extends React.Component {
       noneSelected,
       someSelected,
       allSelected
-    } = this.state.labels; // When implicit all enabled, use `labels.allSelected` when no selection
-    // otherwise, use the `labels.noneSelected` value
-
+    } = this.state.labels;
     const noSelectionText = implicitAllEnabled ? allSelected : noneSelected;
 
     switch (selectedValues.length) {
@@ -2546,9 +2068,6 @@ class MultiSelect extends React.Component {
         return noSelectionText;
 
       case 1:
-        // If there is one item selected, we display its label. If for
-        // some reason we can't find the selected item, we use the
-        // display text for the case where nothing is selected.
         const selectedItem = children.find(option => option.props.value === selectedValues[0]);
         return selectedItem ? selectedItem.props.label : noSelectionText;
 
@@ -2570,7 +2089,7 @@ class MultiSelect extends React.Component {
       filter
     } = this.state.labels;
     return [{
-      component: /*#__PURE__*/React.createElement(SearchTextInput, {
+      component: React.createElement(SearchTextInput, {
         key: "search-text-input",
         onChange: this.handleSearchTextChanged,
         searchText: this.state.searchText,
@@ -2592,12 +2111,12 @@ class MultiSelect extends React.Component {
     const {
       selectAllLabel,
       selectNoneLabel
-    } = this.state.labels; // When there's search text input to filter, shortcuts should be hidden
+    } = this.state.labels;
 
     if (shortcuts && !this.state.searchText) {
       const selectAllDisabled = numOptions === selectedValues.length;
       const selectAll = {
-        component: /*#__PURE__*/React.createElement(ActionItem, {
+        component: React.createElement(ActionItem, {
           disabled: selectAllDisabled,
           label: selectAllLabel(numOptions),
           indent: true,
@@ -2608,7 +2127,7 @@ class MultiSelect extends React.Component {
       };
       const selectNoneDisabled = selectedValues.length === 0;
       const selectNone = {
-        component: /*#__PURE__*/React.createElement(ActionItem, {
+        component: React.createElement(ActionItem, {
           disabled: selectNoneDisabled,
           label: selectNoneLabel,
           indent: true,
@@ -2618,7 +2137,7 @@ class MultiSelect extends React.Component {
         populatedProps: {}
       };
       const separator = {
-        component: /*#__PURE__*/React.createElement(SeparatorItem, {
+        component: React.createElement(SeparatorItem, {
           key: "shortcuts-separator"
         }),
         focusable: false,
@@ -2633,8 +2152,7 @@ class MultiSelect extends React.Component {
   getMenuItems(children) {
     const {
       isFilterable
-    } = this.props; // If it's not filterable, no need to do any extra besides mapping the
-    // option items to dropdown items.
+    } = this.props;
 
     if (!isFilterable) {
       return children.map(this.mapOptionItemToDropdownItem);
@@ -2644,8 +2162,7 @@ class MultiSelect extends React.Component {
       searchText,
       lastSelectedValues
     } = this.state;
-    const lowercasedSearchText = searchText.toLowerCase(); // Filter the children with the searchText if any.
-
+    const lowercasedSearchText = searchText.toLowerCase();
     const filteredChildren = children.filter(({
       props
     }) => !searchText || props.label.toLowerCase().indexOf(lowercasedSearchText) > -1);
@@ -2660,12 +2177,11 @@ class MultiSelect extends React.Component {
       }
     }
 
-    const lastSelectedItems = lastSelectedChildren.map(this.mapOptionItemToDropdownItem); // We want to add SeparatorItem in between last selected items and the
-    // rest of the items only when both of them exists.
+    const lastSelectedItems = lastSelectedChildren.map(this.mapOptionItemToDropdownItem);
 
     if (lastSelectedChildren.length && restOfTheChildren.length) {
       lastSelectedItems.push({
-        component: /*#__PURE__*/React.createElement(SeparatorItem, {
+        component: React.createElement(SeparatorItem, {
           key: "selected-separator"
         }),
         focusable: false,
@@ -2692,12 +2208,12 @@ class MultiSelect extends React.Component {
     } = this.state.labels;
     const menuText = this.getMenuText(allChildren);
     const numOptions = allChildren.length;
-    const dropdownOpener = opener ? /*#__PURE__*/React.createElement(DropdownOpener, {
+    const dropdownOpener = opener ? React.createElement(DropdownOpener, {
       onClick: this.handleClick,
       disabled: numOptions === 0 || disabled,
       ref: this.handleOpenerRef,
       text: menuText
-    }, opener) : /*#__PURE__*/React.createElement(SelectOpener, _extends({}, sharedProps, {
+    }, opener) : React.createElement(SelectOpener, _extends({}, sharedProps, {
       disabled: numOptions === 0 || disabled,
       id: id,
       isPlaceholder: menuText === noneSelected,
@@ -2731,7 +2247,7 @@ class MultiSelect extends React.Component {
     const numOptions = allChildren.length;
     const filteredItems = this.getMenuItems(allChildren);
     const opener = this.renderOpener(allChildren);
-    return /*#__PURE__*/React.createElement(DropdownCore$1, {
+    return React.createElement(DropdownCore$1, {
       role: "listbox",
       alignment: alignment,
       dropdownStyle: [isFilterable && filterableDropdownStyle, selectDropdownStyle, dropdownStyle],