@zendeskgarden/react-dropdowns 8.46.0 → 8.48.0

package/dist/index.esm.js

@@ -6,15 +6,15 @@
  */
 
 import * as React from 'react';
-import React__default, { useContext, useRef, useState, Children, useEffect, useCallback, useMemo } from 'react';
+import React__default, { useContext, useRef, useState, Children, useEffect, useCallback, forwardRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import styled, { ThemeContext, css } from 'styled-components';
 import Downshift from 'downshift';
 export { resetIdCounter } from 'downshift';
 import { Manager, Reference, Popper } from 'react-popper';
-import { withTheme, isRtl, arrowStyles, retrieveComponentStyles, DEFAULT_THEME, menuStyles, getColor, getLineHeight } from '@zendeskgarden/react-theming';
 import { composeEventHandlers, KEY_CODES } from '@zendeskgarden/container-utilities';
-import styled, { css } from 'styled-components';
-import { math } from 'polished';
+import { arrowStyles, retrieveComponentStyles, DEFAULT_THEME, menuStyles, getColor, getLineHeight } from '@zendeskgarden/react-theming';
+import { rgba, math } from 'polished';
 import { FauxInput, Input, MediaInput, Field as Field$1, Hint as Hint$1, Label as Label$1, Message as Message$1 } from '@zendeskgarden/react-forms';
 import mergeRefs from 'react-merge-refs';
 import { useSelection } from '@zendeskgarden/container-selection';
@@ -24,14 +24,9 @@ function ownKeys(object, enumerableOnly) {
 
   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);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
   }
 
   return keys;
@@ -39,19 +34,12 @@ function ownKeys(object, enumerableOnly) {
 
 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));
-      });
-    }
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
   }
 
   return target;
@@ -218,6 +206,7 @@ var Dropdown = function Dropdown(props) {
       _useState2 = _slicedToArray(_useState, 2),
       dropdownType = _useState2[0],
       setDropdownType = _useState2[1];
+  var themeContext = useContext(ThemeContext);
   var hasMenuRef = useRef(false);
   var popperReferenceElementRef = useRef(null);
   var customGetInputProps = function customGetInputProps(_ref, downshift, rtl) {
@@ -255,7 +244,7 @@ var Dropdown = function Dropdown(props) {
         downshift = _objectWithoutProperties(_ref2, _excluded2$6);
     return _objectSpread2({
       getInputProps: function getInputProps(p) {
-        return _getInputProps(customGetInputProps(p, downshift, isRtl(props)));
+        return _getInputProps(customGetInputProps(p, downshift, themeContext.rtl));
       },
       getToggleButtonProps: function getToggleButtonProps(p) {
         return _getToggleButtonProps(_objectSpread2({
@@ -352,7 +341,6 @@ Dropdown.propTypes = {
   onStateChange: PropTypes.func,
   downshiftProps: PropTypes.object
 };
-var Dropdown$1 = withTheme(Dropdown);
 
 function getPopperPlacement(gardenPlacement) {
   switch (gardenPlacement) {
@@ -428,7 +416,7 @@ var COMPONENT_ID$m = 'dropdowns.menu';
 var StyledMenu = styled.ul.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$m,
-    'data-garden-version': '8.46.0',
+    'data-garden-version': '8.48.0',
     className: props.isAnimated && 'is-animated'
   };
 }).withConfig({
@@ -453,7 +441,7 @@ var COMPONENT_ID$l = 'dropdowns.menu_wrapper';
 var StyledMenuWrapper = styled.div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$l,
-    'data-garden-version': '8.46.0',
+    'data-garden-version': '8.48.0',
     className: props.isAnimated && 'is-animated'
   };
 }).withConfig({
@@ -477,7 +465,7 @@ StyledMenuWrapper.defaultProps = {
 var COMPONENT_ID$k = 'dropdowns.separator';
 var StyledSeparator = styled.li.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.46.0',
+  'data-garden-version': '8.48.0',
   role: 'separator'
 }).withConfig({
   displayName: "StyledSeparator",
@@ -501,18 +489,29 @@ var getItemPaddingVertical = function getItemPaddingVertical(props) {
   return "".concat(props.theme.space.base * 2, "px");
 };
 var getColorStyles = function getColorStyles(props) {
-  return css(["background-color:", ";color:", ";& a,& a:hover,& a:focus,& a:active{color:inherit;}"], props.isFocused && !props.disabled && getColor('primaryHue', 600, props.theme, 0.08), props.disabled ? getColor('neutralHue', 400, props.theme) : props.theme.colors.foreground);
+  var foregroundColor;
+  var backgroundColor;
+  if (props.disabled) {
+    foregroundColor = getColor('neutralHue', 400, props.theme);
+  } else if (props.isDanger) {
+    foregroundColor = getColor('dangerHue', 600, props.theme);
+    backgroundColor = props.isFocused ? rgba(foregroundColor, 0.08) : 'inherit';
+  } else {
+    foregroundColor = props.theme.colors.foreground;
+    backgroundColor = props.isFocused ? getColor('primaryHue', 600, props.theme, 0.08) : 'inherit';
+  }
+  return css(["background-color:", ";color:", ";& a,& a:hover,& a:focus,& a:active{color:inherit;}"], backgroundColor, foregroundColor);
 };
 var StyledItem = styled.li.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$j,
-    'data-garden-version': '8.46.0',
+    'data-garden-version': '8.48.0',
     'aria-disabled': props.disabled
   };
 }).withConfig({
   displayName: "StyledItem",
   componentId: "sc-1xeog7q-0"
-})(["display:block;position:relative;z-index:0;cursor:", ";padding:", " ", "px;text-decoration:none;line-height:", "px;word-wrap:break-word;user-select:none;&:first-child{margin-top:", "px;}&:last-child{margin-bottom:", "px;}&:focus{outline:none;}& a,& a:hover,& a:focus,& a:active{text-decoration:none;}", " ", ";"], function (props) {
+})(["display:block;position:relative;z-index:0;cursor:", ";padding:", " ", "px;text-decoration:none;line-height:", "px;word-wrap:break-word;user-select:none;&:first-child{margin-top:", "px;}&:last-child{margin-bottom:", "px;}&:focus{outline:none;}& a,& a:hover,& a:focus,& a:active{text-decoration:none;}", ";", ";"], function (props) {
   return props.disabled ? 'default' : 'pointer';
 }, function (props) {
   return getItemPaddingVertical(props);
@@ -536,7 +535,7 @@ StyledItem.defaultProps = {
 var COMPONENT_ID$i = 'dropdowns.add_item';
 var StyledAddItem = styled(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledAddItem",
   componentId: "sc-ekqk50-0"
@@ -552,7 +551,7 @@ StyledAddItem.defaultProps = {
 var COMPONENT_ID$h = 'dropdowns.item_meta';
 var StyledItemMeta = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-k6xy28-0"
@@ -575,7 +574,7 @@ var getSizeStyles = function getSizeStyles(props) {
 };
 var StyledItemIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-1v0ty11-0"
@@ -601,7 +600,7 @@ StyledItemIcon.defaultProps = {
 var COMPONENT_ID$f = 'dropdowns.next_item';
 var StyledNextItem = styled(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledNextItem",
   componentId: "sc-1bcygn5-0"
@@ -616,30 +615,30 @@ StyledNextItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-function _extends$4() { _extends$4 = 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$4.apply(this, arguments); }
+var _path$4;
 
-var _ref$4 = /*#__PURE__*/React.createElement("path", {
-  fill: "currentColor",
-  d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
-});
+function _extends$4() { _extends$4 = 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$4.apply(this, arguments); }
 
-function SvgChevronRightStroke(props) {
+var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
     focusable: "false",
-    role: "presentation"
-  }, props), _ref$4);
-}
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
+  })));
+};
 
 var COMPONENT_ID$e = 'dropdowns.next_item_icon';
 var NextIconComponent = function NextIconComponent(_ref) {
   var className = _ref.className;
   return React__default.createElement(SvgChevronRightStroke, {
     "data-garden-id": COMPONENT_ID$e,
-    "data-garden-version": '8.46.0',
+    "data-garden-version": '8.48.0',
     className: className
   });
 };
@@ -660,7 +659,7 @@ StyledNextIcon.defaultProps = {
 var COMPONENT_ID$d = 'dropdowns.previous_item';
 var StyledPreviousItem = styled(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledPreviousItem",
   componentId: "sc-1nmdds9-0"
@@ -673,30 +672,30 @@ StyledPreviousItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-function _extends$3() { _extends$3 = 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$3.apply(this, arguments); }
+var _path$3;
 
-var _ref$3 = /*#__PURE__*/React.createElement("path", {
-  fill: "currentColor",
-  d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
-});
+function _extends$3() { _extends$3 = 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$3.apply(this, arguments); }
 
-function SvgChevronLeftStroke(props) {
+var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
     focusable: "false",
-    role: "presentation"
-  }, props), _ref$3);
-}
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
+  })));
+};
 
 var COMPONENT_ID$c = 'dropdowns.previous_item_icon';
 var PreviousIconComponent = function PreviousIconComponent(_ref) {
   var className = _ref.className;
   return React__default.createElement(SvgChevronLeftStroke, {
     "data-garden-id": COMPONENT_ID$c,
-    "data-garden-version": '8.46.0',
+    "data-garden-version": '8.48.0',
     className: className
   });
 };
@@ -717,7 +716,7 @@ StyledPreviousIcon.defaultProps = {
 var COMPONENT_ID$b = 'dropdowns.header_icon';
 var StyledHeaderIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledHeaderIcon",
   componentId: "sc-1fl6nsz-0"
@@ -747,7 +746,7 @@ var getHorizontalPadding = function getHorizontalPadding(props) {
 };
 var StyledHeaderItem = styled(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledHeaderItem",
   componentId: "sc-137filx-0"
@@ -767,7 +766,7 @@ StyledHeaderItem.defaultProps = {
 var COMPONENT_ID$9 = 'dropdowns.media_body';
 var StyledMediaBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledMediaBody",
   componentId: "sc-36j7ef-0"
@@ -795,7 +794,7 @@ function (_ref) {
   );
 }).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledMediaFigure",
   componentId: "sc-2f2x8x-0"
@@ -817,7 +816,7 @@ StyledMediaFigure.defaultProps = {
 var COMPONENT_ID$7 = 'dropdowns.media_item';
 var StyledMediaItem = styled(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledMediaItem",
   componentId: "sc-ikwshz-0"
@@ -832,7 +831,7 @@ var COMPONENT_ID$6 = 'dropdowns.faux_input';
 var StyledFauxInput = styled(FauxInput).attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$6,
-    'data-garden-version': '8.46.0',
+    'data-garden-version': '8.48.0',
     mediaLayout: true,
     theme: props.theme
   };
@@ -854,7 +853,7 @@ var COMPONENT_ID$5 = 'dropdowns.input';
 var hiddenStyling = css(["position:fixed;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
 var StyledInput = styled(Input).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.46.0',
+  'data-garden-version': '8.48.0',
   isBare: true
 }).withConfig({
   displayName: "StyledInput",
@@ -871,7 +870,7 @@ StyledInput.defaultProps = {
 var COMPONENT_ID$4 = 'dropdowns.select';
 var StyledSelect = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledSelect",
   componentId: "sc-xifmwj-0"
@@ -894,7 +893,7 @@ var visibleStyling = function visibleStyling(props) {
 };
 var StyledMultiselectInput = styled(StyledInput).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledMultiselectInput",
   componentId: "sc-1avnf6f-0"
@@ -924,7 +923,7 @@ var sizeStyles = function sizeStyles(props) {
 };
 var StyledMultiselectItemsContainer = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledMultiselectItemsContainer",
   componentId: "sc-1jzhet8-0"
@@ -940,7 +939,7 @@ StyledMultiselectItemsContainer.defaultProps = {
 var COMPONENT_ID$1 = 'dropdowns.multiselect_item_wrapper';
 var StyledMultiselectItemWrapper = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledMultiselectItemWrapper",
   componentId: "sc-1rb2bye-0"
@@ -956,7 +955,7 @@ StyledMultiselectItemWrapper.defaultProps = {
 var COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
 var StyledMultiselectMoreAnchor = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledMultiselectMoreAnchor",
   componentId: "sc-1m9v46e-0"
@@ -1117,23 +1116,23 @@ Trigger.defaultProps = {
   refKey: 'ref'
 };
 
-function _extends$2() { _extends$2 = 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$2.apply(this, arguments); }
+var _path$2;
 
-var _ref$2 = /*#__PURE__*/React.createElement("path", {
-  fill: "currentColor",
-  d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
-});
+function _extends$2() { _extends$2 = 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$2.apply(this, arguments); }
 
-function SvgChevronDownStroke(props) {
+var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
     focusable: "false",
-    role: "presentation"
-  }, props), _ref$2);
-}
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
+  })));
+};
 
 var FieldContext = React__default.createContext(undefined);
 var useFieldContext = function useFieldContext() {
@@ -1146,7 +1145,7 @@ var useFieldContext = function useFieldContext() {
 
 var _excluded$9 = ["children", "inputRef", "start"],
     _excluded2$4 = ["type"];
-var Autocomplete = React__default.forwardRef(function (_ref, _ref3) {
+var Autocomplete = forwardRef(function (_ref, _ref3) {
   var children = _ref.children,
       controlledInputRef = _ref.inputRef,
       start = _ref.start,
@@ -1249,7 +1248,7 @@ Autocomplete.propTypes = {
 };
 
 var _excluded$8 = ["isCompact", "isBare", "disabled", "focusInset", "placeholder", "validation", "inputRef", "start", "end"];
-var Combobox = React__default.forwardRef(function (_ref, ref) {
+var Combobox = forwardRef(function (_ref, ref) {
   var isCompact = _ref.isCompact,
       isBare = _ref.isBare,
       disabled = _ref.disabled,
@@ -1331,7 +1330,7 @@ Combobox.propTypes = {
   validation: PropTypes.oneOf(['success', 'warning', 'error'])
 };
 
-var _excluded$7 = ["renderItem", "placeholder", "maxItems", "renderShowMore", "inputRef", "start"],
+var _excluded$7 = ["renderItem", "placeholder", "maxItems", "renderShowMore", "inputRef", "start", "onKeyDown"],
     _excluded2$3 = ["type"];
 var Multiselect = React__default.forwardRef(function (_ref, _ref3) {
   var renderItem = _ref.renderItem,
@@ -1341,6 +1340,7 @@ var Multiselect = React__default.forwardRef(function (_ref, _ref3) {
       _ref$inputRef = _ref.inputRef,
       externalInputRef = _ref$inputRef === void 0 ? null : _ref$inputRef,
       start = _ref.start,
+      onKeyDown = _ref.onKeyDown,
       props = _objectWithoutProperties(_ref, _excluded$7);
   var _useDropdownContext = useDropdownContext(),
       popperReferenceElementRef = _useDropdownContext.popperReferenceElementRef,
@@ -1377,8 +1377,9 @@ var Multiselect = React__default.forwardRef(function (_ref, _ref3) {
       _useState6 = _slicedToArray(_useState5, 2),
       focusedItem = _useState6[0],
       setFocusedItem = _useState6[1];
+  var themeContext = useContext(ThemeContext);
   var _useSelection = useSelection({
-    rtl: isRtl(props),
+    rtl: themeContext.rtl,
     focusedItem: focusedItem,
     selectedItem: undefined,
     onFocus: function onFocus(item) {
@@ -1412,14 +1413,14 @@ var Multiselect = React__default.forwardRef(function (_ref, _ref3) {
   }, [focusedItem, isOpen, closeMenu]);
   var _getToggleButtonProps = getToggleButtonProps(getRootProps(_objectSpread2({
     tabIndex: props.disabled ? undefined : -1,
-    onKeyDown: function onKeyDown(e) {
+    onKeyDown: composeEventHandlers(onKeyDown, function (e) {
       if (isOpen) {
         e.nativeEvent.preventDownshiftDefault = true;
       } else if (!inputValue && e.keyCode === KEY_CODES.HOME) {
         setFocusedItem(selectedItems[0]);
         e.preventDefault();
       }
-    },
+    }),
     onFocus: function onFocus() {
       setIsFocused(true);
     },
@@ -1466,7 +1467,7 @@ var Multiselect = React__default.forwardRef(function (_ref, _ref3) {
           inputRef.current && inputRef.current.focus();
           e.preventDefault();
         }
-        if (isRtl(props)) {
+        if (themeContext.rtl) {
           if (e.keyCode === KEY_CODES.RIGHT && index === 0) {
             e.preventDefault();
           }
@@ -1495,7 +1496,7 @@ var Multiselect = React__default.forwardRef(function (_ref, _ref3) {
     return React__default.createElement(StyledMultiselectItemWrapper, {
       key: key
     }, clonedChild);
-  }, [getItemProps, inputValue, renderItem, setDownshiftState, itemToString, selectedItems, props, inputRef]);
+  }, [getItemProps, inputValue, renderItem, setDownshiftState, itemToString, selectedItems, props, inputRef, themeContext.rtl]);
   var items = useMemo(function () {
     var itemValues = selectedItems || [];
     var output = [];
@@ -1564,9 +1565,9 @@ var Multiselect = React__default.forwardRef(function (_ref, _ref3) {
       },
       onKeyDown: function onKeyDown(e) {
         if (!inputValue) {
-          if (isRtl(props) && e.keyCode === KEY_CODES.RIGHT && selectedItems.length > 0 && previousIndexRef.current === undefined) {
+          if (themeContext.rtl && e.keyCode === KEY_CODES.RIGHT && selectedItems.length > 0 && previousIndexRef.current === undefined) {
             setFocusedItem(selectedItems[selectedItems.length - 1]);
-          } else if (!isRtl(props) && e.keyCode === KEY_CODES.LEFT && selectedItems.length > 0 && previousIndexRef.current === undefined) {
+          } else if (!themeContext.rtl && e.keyCode === KEY_CODES.LEFT && selectedItems.length > 0 && previousIndexRef.current === undefined) {
             setFocusedItem(selectedItems[selectedItems.length - 1]);
           } else if (e.keyCode === KEY_CODES.BACKSPACE && selectedItems.length > 0) {
             setDownshiftState({
@@ -1604,7 +1605,7 @@ Multiselect.propTypes = {
 Multiselect.defaultProps = {
   maxItems: 4
 };
-var Multiselect$1 = withTheme(Multiselect);
+Multiselect.displayName = 'Multiselect';
 
 var _excluded$6 = ["children", "start"],
     _excluded2$2 = ["type"];
@@ -1769,7 +1770,7 @@ Select.propTypes = {
   validation: PropTypes.oneOf(['success', 'warning', 'error'])
 };
 
-var Field = function Field(props) {
+var Field = forwardRef(function (props, fieldRef) {
   var _useDropdownContext = useDropdownContext(),
       getRootProps = _useDropdownContext.downshift.getRootProps;
   var _useState = useState(false),
@@ -1787,9 +1788,10 @@ var Field = function Field(props) {
   return React__default.createElement(FieldContext.Provider, {
     value: value
   }, React__default.createElement(Field$1, _extends$5({
-    ref: ref
+    ref: mergeRefs([ref, fieldRef])
   }, props)));
-};
+});
+Field.displayName = 'Field';
 
 var Hint = React__default.forwardRef(function (props, ref) {
   return React__default.createElement(Hint$1, _extends$5({
@@ -1844,7 +1846,7 @@ var useMenuContext = function useMenuContext() {
 };
 
 var _excluded$4 = ["placement", "popperModifiers", "eventsEnabled", "isAnimated", "maxHeight", "style", "zIndex", "isCompact", "children"];
-var Menu = function Menu(props) {
+var Menu = forwardRef(function (props, menuRef) {
   var placement = props.placement,
       popperModifiers = props.popperModifiers,
       eventsEnabled = props.eventsEnabled,
@@ -1890,11 +1892,12 @@ var Menu = function Menu(props) {
       return clearTimeout(timeout);
     };
   }, [isOpen, isAnimated]);
+  var themeContext = useContext(ThemeContext);
   itemIndexRef.current = 0;
   nextItemsHashRef.current = {};
   previousIndexRef.current = undefined;
   itemSearchRegistry.current = [];
-  var popperPlacement = isRtl(props) ? getRtlPopperPlacement(placement) : getPopperPlacement(placement);
+  var popperPlacement = themeContext.rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement);
   return (
     React__default.createElement(MenuContext.Provider, {
       value: {
@@ -1932,13 +1935,15 @@ var Menu = function Menu(props) {
         isAnimated: menuProps.isAnimated,
         zIndex: zIndex
       }, React__default.createElement(StyledMenu, _extends$5({
+        ref: menuRef,
         isCompact: isCompact,
         maxHeight: maxHeight,
         style: computedStyle
       }, menuProps), (isOpen || isVisible) && children));
     }))
   );
-};
+});
+Menu.displayName = 'Menu';
 Menu.propTypes = {
   popperModifiers: PropTypes.any,
   eventsEnabled: PropTypes.bool,
@@ -1957,7 +1962,6 @@ Menu.defaultProps = {
   maxHeight: '400px',
   zIndex: 1000
 };
-var Menu$1 = withTheme(Menu);
 
 var Separator = React__default.forwardRef(function (props, ref) {
   return React__default.createElement(StyledSeparator, _extends$5({
@@ -1966,45 +1970,45 @@ var Separator = React__default.forwardRef(function (props, ref) {
 });
 Separator.displayName = 'Separator';
 
-function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
+var _path$1;
 
-var _ref$1 = /*#__PURE__*/React.createElement("path", {
-  stroke: "currentColor",
-  strokeLinecap: "round",
-  d: "M7.5 2.5v12m6-6h-12"
-});
+function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
 
-function SvgPlusStroke(props) {
+var SvgPlusStroke = function SvgPlusStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
     focusable: "false",
-    role: "presentation"
-  }, props), _ref$1);
-}
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    d: "M7.5 2.5v12m6-6h-12"
+  })));
+};
 
-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); }
+var _path;
 
-var _ref = /*#__PURE__*/React.createElement("path", {
-  fill: "none",
-  stroke: "currentColor",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  d: "M1 9l4 4L15 3"
-});
+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 SvgCheckLgStroke(props) {
+var SvgCheckLgStroke = function SvgCheckLgStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
     focusable: "false",
-    role: "presentation"
-  }, props), _ref);
-}
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M1 9l4 4L15 3"
+  })));
+};
 
 var ItemContext = React__default.createContext(undefined);
 var useItemContext = function useItemContext() {
@@ -2015,10 +2019,11 @@ var useItemContext = function useItemContext() {
   return context;
 };
 
-var _excluded$3 = ["value", "disabled", "component", "children"];
+var _excluded$3 = ["value", "disabled", "isDanger", "component", "children"];
 var Item = React__default.forwardRef(function (_ref, forwardRef) {
   var value = _ref.value,
       disabled = _ref.disabled,
+      isDanger = _ref.isDanger,
       _ref$component = _ref.component,
       component = _ref$component === void 0 ? StyledItem : _ref$component,
       children = _ref.children,
@@ -2081,6 +2086,7 @@ var Item = React__default.forwardRef(function (_ref, forwardRef) {
     }, React__default.createElement(Component, _extends$5({
       ref: ref,
       disabled: disabled,
+      isDanger: isDanger,
       isCompact: isCompact
     }, props), isSelected && React__default.createElement(StyledItemIcon, {
       isCompact: isCompact,
@@ -2095,7 +2101,8 @@ var Item = React__default.forwardRef(function (_ref, forwardRef) {
     item: value,
     isFocused: isFocused,
     ref: ref,
-    isCompact: isCompact
+    isCompact: isCompact,
+    isDanger: isDanger
   }, hasMenuRef.current && {
     role: 'menuitem',
     'aria-selected': null
@@ -2291,4 +2298,4 @@ PreviousItem.propTypes = {
   disabled: PropTypes.bool
 };
 
-export { AddItem, Autocomplete, Combobox, Dropdown$1 as Dropdown, Field, HeaderIcon, HeaderItem, Hint, Item, ItemMeta, Label, MediaBody, MediaFigure, MediaItem, Menu$1 as Menu, Message, Multiselect$1 as Multiselect, NextItem, PreviousItem, Select, Separator, Trigger };
+export { AddItem, Autocomplete, Combobox, Dropdown, Field, HeaderIcon, HeaderItem, Hint, Item, ItemMeta, Label, MediaBody, MediaFigure, MediaItem, Menu, Message, Multiselect, NextItem, PreviousItem, Select, Separator, Trigger };