@zendeskgarden/react-dropdowns 8.47.2 → 8.48.0

package/dist/index.cjs.js

@@ -445,7 +445,7 @@ var COMPONENT_ID$m = 'dropdowns.menu';
 var StyledMenu = styled__default["default"].ul.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$m,
-    'data-garden-version': '8.47.2',
+    'data-garden-version': '8.48.0',
     className: props.isAnimated && 'is-animated'
   };
 }).withConfig({
@@ -470,7 +470,7 @@ var COMPONENT_ID$l = 'dropdowns.menu_wrapper';
 var StyledMenuWrapper = styled__default["default"].div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$l,
-    'data-garden-version': '8.47.2',
+    'data-garden-version': '8.48.0',
     className: props.isAnimated && 'is-animated'
   };
 }).withConfig({
@@ -494,7 +494,7 @@ StyledMenuWrapper.defaultProps = {
 var COMPONENT_ID$k = 'dropdowns.separator';
 var StyledSeparator = styled__default["default"].li.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.47.2',
+  'data-garden-version': '8.48.0',
   role: 'separator'
 }).withConfig({
   displayName: "StyledSeparator",
@@ -534,7 +534,7 @@ var getColorStyles = function getColorStyles(props) {
 var StyledItem = styled__default["default"].li.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$j,
-    'data-garden-version': '8.47.2',
+    'data-garden-version': '8.48.0',
     'aria-disabled': props.disabled
   };
 }).withConfig({
@@ -564,7 +564,7 @@ StyledItem.defaultProps = {
 var COMPONENT_ID$i = 'dropdowns.add_item';
 var StyledAddItem = styled__default["default"](StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledAddItem",
   componentId: "sc-ekqk50-0"
@@ -580,7 +580,7 @@ StyledAddItem.defaultProps = {
 var COMPONENT_ID$h = 'dropdowns.item_meta';
 var StyledItemMeta = styled__default["default"].span.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-k6xy28-0"
@@ -603,7 +603,7 @@ var getSizeStyles = function getSizeStyles(props) {
 };
 var StyledItemIcon = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-1v0ty11-0"
@@ -629,7 +629,7 @@ StyledItemIcon.defaultProps = {
 var COMPONENT_ID$f = 'dropdowns.next_item';
 var StyledNextItem = styled__default["default"](StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledNextItem",
   componentId: "sc-1bcygn5-0"
@@ -667,7 +667,7 @@ var NextIconComponent = function NextIconComponent(_ref) {
   var className = _ref.className;
   return React__default["default"].createElement(SvgChevronRightStroke, {
     "data-garden-id": COMPONENT_ID$e,
-    "data-garden-version": '8.47.2',
+    "data-garden-version": '8.48.0',
     className: className
   });
 };
@@ -688,7 +688,7 @@ StyledNextIcon.defaultProps = {
 var COMPONENT_ID$d = 'dropdowns.previous_item';
 var StyledPreviousItem = styled__default["default"](StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledPreviousItem",
   componentId: "sc-1nmdds9-0"
@@ -724,7 +724,7 @@ var PreviousIconComponent = function PreviousIconComponent(_ref) {
   var className = _ref.className;
   return React__default["default"].createElement(SvgChevronLeftStroke, {
     "data-garden-id": COMPONENT_ID$c,
-    "data-garden-version": '8.47.2',
+    "data-garden-version": '8.48.0',
     className: className
   });
 };
@@ -745,7 +745,7 @@ StyledPreviousIcon.defaultProps = {
 var COMPONENT_ID$b = 'dropdowns.header_icon';
 var StyledHeaderIcon = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledHeaderIcon",
   componentId: "sc-1fl6nsz-0"
@@ -775,7 +775,7 @@ var getHorizontalPadding = function getHorizontalPadding(props) {
 };
 var StyledHeaderItem = styled__default["default"](StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledHeaderItem",
   componentId: "sc-137filx-0"
@@ -795,7 +795,7 @@ StyledHeaderItem.defaultProps = {
 var COMPONENT_ID$9 = 'dropdowns.media_body';
 var StyledMediaBody = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledMediaBody",
   componentId: "sc-36j7ef-0"
@@ -823,7 +823,7 @@ function (_ref) {
   );
 }).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledMediaFigure",
   componentId: "sc-2f2x8x-0"
@@ -845,7 +845,7 @@ StyledMediaFigure.defaultProps = {
 var COMPONENT_ID$7 = 'dropdowns.media_item';
 var StyledMediaItem = styled__default["default"](StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledMediaItem",
   componentId: "sc-ikwshz-0"
@@ -860,7 +860,7 @@ var COMPONENT_ID$6 = 'dropdowns.faux_input';
 var StyledFauxInput = styled__default["default"](reactForms.FauxInput).attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$6,
-    'data-garden-version': '8.47.2',
+    'data-garden-version': '8.48.0',
     mediaLayout: true,
     theme: props.theme
   };
@@ -882,7 +882,7 @@ var COMPONENT_ID$5 = 'dropdowns.input';
 var hiddenStyling = styled.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__default["default"](reactForms.Input).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.47.2',
+  'data-garden-version': '8.48.0',
   isBare: true
 }).withConfig({
   displayName: "StyledInput",
@@ -899,7 +899,7 @@ StyledInput.defaultProps = {
 var COMPONENT_ID$4 = 'dropdowns.select';
 var StyledSelect = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledSelect",
   componentId: "sc-xifmwj-0"
@@ -922,7 +922,7 @@ var visibleStyling = function visibleStyling(props) {
 };
 var StyledMultiselectInput = styled__default["default"](StyledInput).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledMultiselectInput",
   componentId: "sc-1avnf6f-0"
@@ -952,7 +952,7 @@ var sizeStyles = function sizeStyles(props) {
 };
 var StyledMultiselectItemsContainer = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledMultiselectItemsContainer",
   componentId: "sc-1jzhet8-0"
@@ -968,7 +968,7 @@ StyledMultiselectItemsContainer.defaultProps = {
 var COMPONENT_ID$1 = 'dropdowns.multiselect_item_wrapper';
 var StyledMultiselectItemWrapper = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledMultiselectItemWrapper",
   componentId: "sc-1rb2bye-0"
@@ -984,7 +984,7 @@ StyledMultiselectItemWrapper.defaultProps = {
 var COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
 var StyledMultiselectMoreAnchor = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledMultiselectMoreAnchor",
   componentId: "sc-1m9v46e-0"
@@ -1174,7 +1174,7 @@ var useFieldContext = function useFieldContext() {
 
 var _excluded$9 = ["children", "inputRef", "start"],
     _excluded2$4 = ["type"];
-var Autocomplete = React__default["default"].forwardRef(function (_ref, _ref3) {
+var Autocomplete = React.forwardRef(function (_ref, _ref3) {
   var children = _ref.children,
       controlledInputRef = _ref.inputRef,
       start = _ref.start,
@@ -1277,7 +1277,7 @@ Autocomplete.propTypes = {
 };
 
 var _excluded$8 = ["isCompact", "isBare", "disabled", "focusInset", "placeholder", "validation", "inputRef", "start", "end"];
-var Combobox = React__default["default"].forwardRef(function (_ref, ref) {
+var Combobox = React.forwardRef(function (_ref, ref) {
   var isCompact = _ref.isCompact,
       isBare = _ref.isBare,
       disabled = _ref.disabled,
@@ -1359,7 +1359,7 @@ Combobox.propTypes = {
   validation: PropTypes__default["default"].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["default"].forwardRef(function (_ref, _ref3) {
   var renderItem = _ref.renderItem,
@@ -1369,6 +1369,7 @@ var Multiselect = React__default["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,
@@ -1441,14 +1442,14 @@ var Multiselect = React__default["default"].forwardRef(function (_ref, _ref3) {
   }, [focusedItem, isOpen, closeMenu]);
   var _getToggleButtonProps = getToggleButtonProps(getRootProps(_objectSpread2({
     tabIndex: props.disabled ? undefined : -1,
-    onKeyDown: function onKeyDown(e) {
+    onKeyDown: containerUtilities.composeEventHandlers(onKeyDown, function (e) {
       if (isOpen) {
         e.nativeEvent.preventDownshiftDefault = true;
       } else if (!inputValue && e.keyCode === containerUtilities.KEY_CODES.HOME) {
         setFocusedItem(selectedItems[0]);
         e.preventDefault();
       }
-    },
+    }),
     onFocus: function onFocus() {
       setIsFocused(true);
     },
@@ -1798,7 +1799,7 @@ Select.propTypes = {
   validation: PropTypes__default["default"].oneOf(['success', 'warning', 'error'])
 };
 
-var Field = function Field(props) {
+var Field = React.forwardRef(function (props, fieldRef) {
   var _useDropdownContext = useDropdownContext(),
       getRootProps = _useDropdownContext.downshift.getRootProps;
   var _useState = React.useState(false),
@@ -1816,9 +1817,10 @@ var Field = function Field(props) {
   return React__default["default"].createElement(FieldContext.Provider, {
     value: value
   }, React__default["default"].createElement(reactForms.Field, _extends$5({
-    ref: ref
+    ref: mergeRefs__default["default"]([ref, fieldRef])
   }, props)));
-};
+});
+Field.displayName = 'Field';
 
 var Hint = React__default["default"].forwardRef(function (props, ref) {
   return React__default["default"].createElement(reactForms.Hint, _extends$5({
@@ -1873,7 +1875,7 @@ var useMenuContext = function useMenuContext() {
 };
 
 var _excluded$4 = ["placement", "popperModifiers", "eventsEnabled", "isAnimated", "maxHeight", "style", "zIndex", "isCompact", "children"];
-var Menu = function Menu(props) {
+var Menu = React.forwardRef(function (props, menuRef) {
   var placement = props.placement,
       popperModifiers = props.popperModifiers,
       eventsEnabled = props.eventsEnabled,
@@ -1962,13 +1964,15 @@ var Menu = function Menu(props) {
         isAnimated: menuProps.isAnimated,
         zIndex: zIndex
       }, React__default["default"].createElement(StyledMenu, _extends$5({
+        ref: menuRef,
         isCompact: isCompact,
         maxHeight: maxHeight,
         style: computedStyle
       }, menuProps), (isOpen || isVisible) && children));
     }))
   );
-};
+});
+Menu.displayName = 'Menu';
 Menu.propTypes = {
   popperModifiers: PropTypes__default["default"].any,
   eventsEnabled: PropTypes__default["default"].bool,

package/dist/index.esm.js

@@ -6,7 +6,7 @@
  */
 
 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';
@@ -416,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.47.2',
+    'data-garden-version': '8.48.0',
     className: props.isAnimated && 'is-animated'
   };
 }).withConfig({
@@ -441,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.47.2',
+    'data-garden-version': '8.48.0',
     className: props.isAnimated && 'is-animated'
   };
 }).withConfig({
@@ -465,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.47.2',
+  'data-garden-version': '8.48.0',
   role: 'separator'
 }).withConfig({
   displayName: "StyledSeparator",
@@ -505,7 +505,7 @@ var getColorStyles = function getColorStyles(props) {
 var StyledItem = styled.li.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$j,
-    'data-garden-version': '8.47.2',
+    'data-garden-version': '8.48.0',
     'aria-disabled': props.disabled
   };
 }).withConfig({
@@ -535,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.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledAddItem",
   componentId: "sc-ekqk50-0"
@@ -551,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.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-k6xy28-0"
@@ -574,7 +574,7 @@ var getSizeStyles = function getSizeStyles(props) {
 };
 var StyledItemIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-1v0ty11-0"
@@ -600,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.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledNextItem",
   componentId: "sc-1bcygn5-0"
@@ -638,7 +638,7 @@ var NextIconComponent = function NextIconComponent(_ref) {
   var className = _ref.className;
   return React__default.createElement(SvgChevronRightStroke, {
     "data-garden-id": COMPONENT_ID$e,
-    "data-garden-version": '8.47.2',
+    "data-garden-version": '8.48.0',
     className: className
   });
 };
@@ -659,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.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledPreviousItem",
   componentId: "sc-1nmdds9-0"
@@ -695,7 +695,7 @@ var PreviousIconComponent = function PreviousIconComponent(_ref) {
   var className = _ref.className;
   return React__default.createElement(SvgChevronLeftStroke, {
     "data-garden-id": COMPONENT_ID$c,
-    "data-garden-version": '8.47.2',
+    "data-garden-version": '8.48.0',
     className: className
   });
 };
@@ -716,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.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledHeaderIcon",
   componentId: "sc-1fl6nsz-0"
@@ -746,7 +746,7 @@ var getHorizontalPadding = function getHorizontalPadding(props) {
 };
 var StyledHeaderItem = styled(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledHeaderItem",
   componentId: "sc-137filx-0"
@@ -766,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.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledMediaBody",
   componentId: "sc-36j7ef-0"
@@ -794,7 +794,7 @@ function (_ref) {
   );
 }).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledMediaFigure",
   componentId: "sc-2f2x8x-0"
@@ -816,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.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledMediaItem",
   componentId: "sc-ikwshz-0"
@@ -831,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.47.2',
+    'data-garden-version': '8.48.0',
     mediaLayout: true,
     theme: props.theme
   };
@@ -853,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.47.2',
+  'data-garden-version': '8.48.0',
   isBare: true
 }).withConfig({
   displayName: "StyledInput",
@@ -870,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.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledSelect",
   componentId: "sc-xifmwj-0"
@@ -893,7 +893,7 @@ var visibleStyling = function visibleStyling(props) {
 };
 var StyledMultiselectInput = styled(StyledInput).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledMultiselectInput",
   componentId: "sc-1avnf6f-0"
@@ -923,7 +923,7 @@ var sizeStyles = function sizeStyles(props) {
 };
 var StyledMultiselectItemsContainer = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledMultiselectItemsContainer",
   componentId: "sc-1jzhet8-0"
@@ -939,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.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledMultiselectItemWrapper",
   componentId: "sc-1rb2bye-0"
@@ -955,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.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledMultiselectMoreAnchor",
   componentId: "sc-1m9v46e-0"
@@ -1145,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,
@@ -1248,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,
@@ -1330,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,
@@ -1340,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,
@@ -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);
     },
@@ -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,
@@ -1933,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,

package/dist/typings/elements/Autocomplete/Autocomplete.d.ts

@@ -22,8 +22,7 @@ export interface IAutocompleteProps extends HTMLAttributes<HTMLDivElement> {
     /** Defines the icon rendered in the start position */
     start?: any;
 }
-declare const _default: React.FunctionComponent<IAutocompleteProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export default _default;
+export declare const Autocomplete: React.ForwardRefExoticComponent<IAutocompleteProps & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/Combobox/Combobox.d.ts

@@ -4,9 +4,9 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import React, { ComponentPropsWithoutRef } from 'react';
+import React, { HTMLAttributes } from 'react';
 import { VALIDATION } from '../../utils/validation';
-export interface IComboboxProps extends ComponentPropsWithoutRef<'div'> {
+export interface IComboboxProps extends HTMLAttributes<HTMLDivElement> {
     /** Applies compact styling */
     isCompact?: boolean;
     /** Removes borders and padding */
@@ -26,8 +26,7 @@ export interface IComboboxProps extends ComponentPropsWithoutRef<'div'> {
     /** Defines the icon rendered in the end position */
     end?: any;
 }
-declare const _default: React.FC<IComboboxProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export default _default;
+export declare const Combobox: React.ForwardRefExoticComponent<IComboboxProps & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/Dropdown/Dropdown.d.ts

@@ -4,7 +4,8 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import React from 'react';
+import { PropsWithChildren } from 'react';
+import PropTypes from 'prop-types';
 import { ControllerStateAndHelpers, StateChangeOptions } from 'downshift';
 export declare const REMOVE_ITEM_STATE_TYPE = "REMOVE_ITEM";
 export interface IDropdownProps {
@@ -42,4 +43,16 @@ export interface IDropdownProps {
     /** Passes customization props to the [Downshift](https://www.downshift-js.com/) component */
     downshiftProps?: Record<string, any>;
 }
-export declare const Dropdown: React.FunctionComponent<IDropdownProps>;
+export declare const Dropdown: {
+    (props: PropsWithChildren<IDropdownProps>): JSX.Element;
+    propTypes: {
+        isOpen: PropTypes.Requireable<boolean>;
+        selectedItem: PropTypes.Requireable<any>;
+        selectedItems: PropTypes.Requireable<any[]>;
+        highlightedIndex: PropTypes.Requireable<number>;
+        inputValue: PropTypes.Requireable<string>;
+        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
+        onStateChange: PropTypes.Requireable<(...args: any[]) => any>;
+        downshiftProps: PropTypes.Requireable<object>;
+    };
+};

package/dist/typings/elements/Fields/Field.d.ts

@@ -4,8 +4,8 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import React, { HTMLAttributes } from 'react';
+import React from 'react';
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export declare const Field: React.FunctionComponent<HTMLAttributes<HTMLDivElement>>;
+export declare const Field: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/Menu/Items/MediaFigure.d.ts

@@ -4,8 +4,8 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import React, { HTMLAttributes } from 'react';
+import { HTMLAttributes } from 'react';
 /**
- * @extends HTMLAttributes<any>
+ * @extends HTMLAttributes<Element>
  */
-export declare const MediaFigure: React.FC<HTMLAttributes<any>>;
+export declare const MediaFigure: (props: HTMLAttributes<Element>) => JSX.Element;

package/dist/typings/elements/Menu/Items/MediaItem.d.ts

@@ -9,4 +9,4 @@ import { IItemProps } from './Item';
 /**
  * @extends LiHTMLAttributes<HTMLLIElement>
  */
-export declare const MediaItem: React.ForwardRefExoticComponent<IItemProps & React.RefAttributes<HTMLLIElement>>;
+export declare const MediaItem: React.ForwardRefExoticComponent<Omit<IItemProps, "component"> & React.RefAttributes<HTMLLIElement>>;

package/dist/typings/elements/Menu/Menu.d.ts

@@ -44,4 +44,4 @@ export interface IMenuProps extends HTMLAttributes<HTMLUListElement> {
 /**
  * @extends HTMLAttributes<HTMLUListElement>
  */
-export declare const Menu: React.FunctionComponent<IMenuProps>;
+export declare const Menu: React.ForwardRefExoticComponent<IMenuProps & React.RefAttributes<HTMLUListElement>>;

package/dist/typings/elements/Select/Select.d.ts

@@ -21,8 +21,6 @@ export interface ISelectProps extends HTMLAttributes<HTMLDivElement> {
     start?: any;
 }
 /**
- * Applies state and a11y attributes to its children. Must be nested within a `<Field>` component.
- *
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export declare const Select: React.ForwardRefExoticComponent<ISelectProps & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/Trigger/Trigger.d.ts

@@ -4,7 +4,8 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import React, { HTMLAttributes } from 'react';
+import { HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
 export interface ITriggerProps extends HTMLAttributes<HTMLElement> {
     /** Passes the ref callback to components with non-standard ref props (i.e. `innerRef`) */
     refKey?: string;
@@ -12,5 +13,13 @@ export interface ITriggerProps extends HTMLAttributes<HTMLElement> {
 /**
  * @extends HTMLAttributes<HTMLElement>
  */
-declare const Trigger: React.FunctionComponent<ITriggerProps>;
-export default Trigger;
+export declare const Trigger: {
+    ({ children, refKey, ...triggerProps }: ITriggerProps): JSX.Element;
+    propTypes: {
+        children: PropTypes.Requireable<any>;
+        refKey: PropTypes.Requireable<string>;
+    };
+    defaultProps: {
+        refKey: string;
+    };
+};

package/dist/typings/index.d.ts

@@ -6,11 +6,11 @@
  */
 export { Dropdown } from './elements/Dropdown/Dropdown';
 export type { IDropdownProps } from './elements/Dropdown/Dropdown';
-export { default as Trigger } from './elements/Trigger/Trigger';
+export { Trigger } from './elements/Trigger/Trigger';
 export type { ITriggerProps } from './elements/Trigger/Trigger';
-export { default as Autocomplete } from './elements/Autocomplete/Autocomplete';
+export { Autocomplete } from './elements/Autocomplete/Autocomplete';
 export type { IAutocompleteProps } from './elements/Autocomplete/Autocomplete';
-export { default as Combobox } from './elements/Combobox/Combobox';
+export { Combobox } from './elements/Combobox/Combobox';
 export type { IComboboxProps } from './elements/Combobox/Combobox';
 export { Multiselect } from './elements/Multiselect/Multiselect';
 export type { IMultiselectProps } from './elements/Multiselect/Multiselect';

package/dist/typings/styled/select/StyledFauxInput.d.ts

@@ -4,7 +4,17 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-export declare const StyledFauxInput: import("styled-components").StyledComponent<import("@zendeskgarden/react-forms").IStaticFauxInputExport<HTMLDivElement, import("@zendeskgarden/react-forms").IFauxInputProps>, import("styled-components").DefaultTheme, {
+/// <reference types="react" />
+export declare const StyledFauxInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-forms").IFauxInputProps & import("react").RefAttributes<HTMLDivElement>> & {
+    EndIcon: {
+        (props: import("@zendeskgarden/react-forms").IFauxInputEndIconProps): JSX.Element;
+        displayName: string;
+    };
+    StartIcon: {
+        (props: import("@zendeskgarden/react-forms").IFauxInputStartIconProps): JSX.Element;
+        displayName: string;
+    };
+}, import("styled-components").DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
     mediaLayout: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-dropdowns",
-  "version": "8.47.2",
+  "version": "8.48.0",
   "description": "Components relating to dropdowns in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -23,7 +23,7 @@
   "dependencies": {
     "@zendeskgarden/container-selection": "^1.3.8",
     "@zendeskgarden/container-utilities": "^0.7.0",
-    "@zendeskgarden/react-forms": "^8.47.2",
+    "@zendeskgarden/react-forms": "^8.48.0",
     "downshift": "^6.0.0",
     "polished": "^4.0.0",
     "prop-types": "^15.5.7",
@@ -38,7 +38,7 @@
   },
   "devDependencies": {
     "@types/lodash.debounce": "4.0.6",
-    "@zendeskgarden/react-theming": "^8.47.2",
+    "@zendeskgarden/react-theming": "^8.48.0",
     "@zendeskgarden/svg-icons": "6.30.2",
     "lodash.debounce": "4.0.8"
   },
@@ -52,5 +52,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "41cb43f285760417ae2145e47eca0e4a600455ab"
+  "gitHead": "75f36aee62043004650c3eb2e1583b98a87d71f8"
 }