@zendeskgarden/react-dropdowns 8.62.1 → 8.63.0

package/dist/index.esm.js

@@ -65,10 +65,12 @@ const Dropdown = props => {
   const containsMultiselectRef = useRef(false);
   const itemSearchRegistry = useRef([]);
   const [dropdownType, setDropdownType] = useState('');
-  const themeContext = useContext(ThemeContext);
+  const {
+    rtl
+  } = useContext(ThemeContext);
   const hasMenuRef = useRef(false);
   const popperReferenceElementRef = useRef(null);
-  const customGetInputProps = (_ref, downshift, rtl) => {
+  const customGetInputProps = (_ref, downshift) => {
     let {
       onKeyDown,
       ...other
@@ -107,7 +109,7 @@ const Dropdown = props => {
       ...downshift
     } = _ref2;
     return {
-      getInputProps: p => getInputProps(customGetInputProps(p, downshift, themeContext.rtl)),
+      getInputProps: p => getInputProps(customGetInputProps(p, downshift)),
       getToggleButtonProps: p => getToggleButtonProps({
         'aria-label': undefined,
         ...p
@@ -278,7 +280,7 @@ function getMenuPosition(popperPlacement) {
 const COMPONENT_ID$m = 'dropdowns.menu';
 const StyledMenu = styled.ul.attrs(props => ({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   className: props.isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledMenu",
@@ -295,7 +297,7 @@ StyledMenu.defaultProps = {
 const COMPONENT_ID$l = 'dropdowns.menu_wrapper';
 const StyledMenuWrapper = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   className: props.isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledMenuWrapper",
@@ -314,7 +316,7 @@ StyledMenuWrapper.defaultProps = {
 const COMPONENT_ID$k = 'dropdowns.separator';
 const StyledSeparator = styled.li.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   role: 'separator'
 }).withConfig({
   displayName: "StyledSeparator",
@@ -347,7 +349,7 @@ const getColorStyles = props => {
 };
 const StyledItem = styled.li.attrs(props => ({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   'aria-disabled': props.disabled
 })).withConfig({
   displayName: "StyledItem",
@@ -360,7 +362,7 @@ StyledItem.defaultProps = {
 const COMPONENT_ID$i = 'dropdowns.add_item';
 const StyledAddItem = styled(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledAddItem",
   componentId: "sc-ekqk50-0"
@@ -372,7 +374,7 @@ StyledAddItem.defaultProps = {
 const COMPONENT_ID$h = 'dropdowns.item_meta';
 const StyledItemMeta = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-k6xy28-0"
@@ -387,7 +389,7 @@ const getSizeStyles = props => {
 };
 const StyledItemIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-1v0ty11-0"
@@ -399,7 +401,7 @@ StyledItemIcon.defaultProps = {
 const COMPONENT_ID$f = 'dropdowns.next_item';
 const StyledNextItem = styled(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledNextItem",
   componentId: "sc-1bcygn5-0"
@@ -409,9 +411,7 @@ StyledNextItem.defaultProps = {
 };
 
 var _path$4;
-
 function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : 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 SvgChevronRightStroke = function SvgChevronRightStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
@@ -419,8 +419,7 @@ var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "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"
@@ -434,7 +433,7 @@ const NextIconComponent = _ref => {
   } = _ref;
   return React__default.createElement(SvgChevronRightStroke, {
     "data-garden-id": COMPONENT_ID$e,
-    "data-garden-version": '8.62.1',
+    "data-garden-version": '8.63.0',
     className: className
   });
 };
@@ -449,7 +448,7 @@ StyledNextIcon.defaultProps = {
 const COMPONENT_ID$d = 'dropdowns.previous_item';
 const StyledPreviousItem = styled(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledPreviousItem",
   componentId: "sc-1nmdds9-0"
@@ -459,9 +458,7 @@ StyledPreviousItem.defaultProps = {
 };
 
 var _path$3;
-
 function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : 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 SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
@@ -469,8 +466,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "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"
@@ -484,7 +480,7 @@ const PreviousIconComponent = _ref => {
   } = _ref;
   return React__default.createElement(SvgChevronLeftStroke, {
     "data-garden-id": COMPONENT_ID$c,
-    "data-garden-version": '8.62.1',
+    "data-garden-version": '8.63.0',
     className: className
   });
 };
@@ -499,7 +495,7 @@ StyledPreviousIcon.defaultProps = {
 const COMPONENT_ID$b = 'dropdowns.header_icon';
 const StyledHeaderIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledHeaderIcon",
   componentId: "sc-1fl6nsz-0"
@@ -517,7 +513,7 @@ const getHorizontalPadding = props => {
 };
 const StyledHeaderItem = styled(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledHeaderItem",
   componentId: "sc-137filx-0"
@@ -529,7 +525,7 @@ StyledHeaderItem.defaultProps = {
 const COMPONENT_ID$9 = 'dropdowns.media_body';
 const StyledMediaBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledMediaBody",
   componentId: "sc-36j7ef-0"
@@ -552,7 +548,7 @@ _ref => {
   );
 }).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledMediaFigure",
   componentId: "sc-2f2x8x-0"
@@ -564,7 +560,7 @@ StyledMediaFigure.defaultProps = {
 const COMPONENT_ID$7 = 'dropdowns.media_item';
 const StyledMediaItem = styled(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledMediaItem",
   componentId: "sc-ikwshz-0"
@@ -576,7 +572,7 @@ StyledMediaItem.defaultProps = {
 const COMPONENT_ID$6 = 'dropdowns.faux_input';
 const StyledFauxInput = styled(FauxInput).attrs(props => ({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   mediaLayout: true,
   theme: props.theme
 })).withConfig({
@@ -591,7 +587,7 @@ const COMPONENT_ID$5 = 'dropdowns.input';
 const hiddenStyling = css(["position:fixed;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
 const StyledInput = styled(Input).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   isBare: true
 }).withConfig({
   displayName: "StyledInput",
@@ -604,7 +600,7 @@ StyledInput.defaultProps = {
 const COMPONENT_ID$4 = 'dropdowns.select';
 const StyledSelect = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSelect",
   componentId: "sc-xifmwj-0"
@@ -625,7 +621,7 @@ const visibleStyling = props => {
 };
 const StyledMultiselectInput = styled(StyledInput).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledMultiselectInput",
   componentId: "sc-1avnf6f-0"
@@ -649,7 +645,7 @@ const sizeStyles = props => {
 };
 const StyledMultiselectItemsContainer = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledMultiselectItemsContainer",
   componentId: "sc-1jzhet8-0"
@@ -661,7 +657,7 @@ StyledMultiselectItemsContainer.defaultProps = {
 const COMPONENT_ID$1 = 'dropdowns.multiselect_item_wrapper';
 const StyledMultiselectItemWrapper = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledMultiselectItemWrapper",
   componentId: "sc-1rb2bye-0"
@@ -673,7 +669,7 @@ StyledMultiselectItemWrapper.defaultProps = {
 const COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
 const StyledMultiselectMoreAnchor = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledMultiselectMoreAnchor",
   componentId: "sc-1m9v46e-0"
@@ -832,9 +828,7 @@ Trigger.defaultProps = {
 };
 
 var _path$2;
-
 function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : 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 SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
@@ -842,8 +836,7 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "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"
@@ -1687,9 +1680,7 @@ const Separator = React__default.forwardRef((props, ref) => React__default.creat
 Separator.displayName = 'Separator';
 
 var _path$1;
-
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : 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 SvgPlusStroke = function SvgPlusStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1697,8 +1688,7 @@ var SvgPlusStroke = function SvgPlusStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -1707,9 +1697,7 @@ var SvgPlusStroke = function SvgPlusStroke(props) {
 };
 
 var _path;
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 SvgCheckLgStroke = function SvgCheckLgStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1717,8 +1705,7 @@ var SvgCheckLgStroke = function SvgCheckLgStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -1828,7 +1815,7 @@ const Item = React__default.forwardRef((_ref, forwardRef) => {
       'aria-selected': null
     }),
     ...props
-  }), isSelected && React__default.createElement(StyledItemIcon, {
+  }), isSelected && !hasIcon && React__default.createElement(StyledItemIcon, {
     isCompact: isCompact,
     isVisible: isSelected
   }, React__default.createElement(SvgCheckLgStroke, null)), children));

package/dist/typings/styled/items/media/StyledMediaFigure.d.ts

@@ -26,6 +26,7 @@ export declare const StyledMediaFigure: import("styled-components").StyledCompon
     hidden?: boolean | undefined;
     id?: string | undefined;
     lang?: string | undefined;
+    nonce?: string | undefined;
     placeholder?: string | undefined;
     slot?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
@@ -66,7 +67,7 @@ export declare const StyledMediaFigure: import("styled-components").StyledCompon
     'aria-colindex'?: number | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "true" | "false" | "step" | "date" | "page" | "location" | undefined;
+    'aria-current'?: boolean | "time" | "true" | "false" | "step" | "page" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;

package/dist/typings/types/index.d.ts

@@ -10,8 +10,8 @@ import { Modifiers } from 'popper.js';
 import { IFauxInputProps } from '@zendeskgarden/react-forms';
 export declare const PLACEMENT: readonly ["auto", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "end", "end-top", "end-bottom", "start", "start-top", "start-bottom"];
 export declare const POPPER_PLACEMENT: readonly ["auto", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"];
-export declare type GardenPlacement = typeof PLACEMENT[number];
-export declare type PopperPlacement = typeof POPPER_PLACEMENT[number];
+export type GardenPlacement = (typeof PLACEMENT)[number];
+export type PopperPlacement = (typeof POPPER_PLACEMENT)[number];
 export interface IDropdownProps {
     /** Opens the dropdown */
     isOpen?: boolean;

package/dist/typings/utils/useDropdownContext.d.ts

@@ -6,7 +6,7 @@
  */
 import React from 'react';
 import { ControllerStateAndHelpers } from 'downshift';
-export declare type DROPDOWN_TYPE = '' | 'autocomplete' | 'combobox' | 'multiselect';
+export type DROPDOWN_TYPE = '' | 'autocomplete' | 'combobox' | 'multiselect';
 export interface IDropdownContext {
     itemIndexRef: React.MutableRefObject<number>;
     previousItemRef: React.MutableRefObject<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-dropdowns",
-  "version": "8.62.1",
+  "version": "8.63.0",
   "description": "Components relating to dropdowns in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -23,8 +23,8 @@
   "dependencies": {
     "@zendeskgarden/container-selection": "^2.0.0",
     "@zendeskgarden/container-utilities": "^1.0.0",
-    "@zendeskgarden/react-forms": "^8.62.1",
-    "downshift": "^6.0.0",
+    "@zendeskgarden/react-forms": "^8.63.0",
+    "downshift": "^7.0.0",
     "polished": "^4.0.0",
     "prop-types": "^15.5.7",
     "react-merge-refs": "^1.1.0",
@@ -38,7 +38,7 @@
   },
   "devDependencies": {
     "@types/lodash.debounce": "4.0.7",
-    "@zendeskgarden/react-theming": "^8.62.1",
+    "@zendeskgarden/react-theming": "^8.63.0",
     "@zendeskgarden/svg-icons": "6.33.0",
     "lodash.debounce": "4.0.8"
   },
@@ -52,5 +52,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "e84b3603c69975dc0ef30029364da15fc1e4fc03"
+  "gitHead": "4b8715305a769881b143c7195c5b31e687422926"
 }