@zendeskgarden/react-dropdowns 9.6.0 → 9.7.1

package/dist/index.cjs.js

@@ -80,69 +80,69 @@ const useFieldContext = () => {
   return context;
 };
 
-const COMPONENT_ID$v = 'dropdowns.combobox.label';
+const COMPONENT_ID$w = 'dropdowns.combobox.label';
 const StyledLabel = styled__default.default(reactForms.Field.Label).attrs({
-  'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$w,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-az6now-0"
 })(["vertical-align:revert;", ";"], reactTheming.componentStyles);
 
-const COMPONENT_ID$u = 'dropdowns.combobox.hint';
+const COMPONENT_ID$v = 'dropdowns.combobox.hint';
 const StyledHint = styled__default.default(reactForms.Field.Hint).attrs({
-  'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$v,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledHint",
   componentId: "sc-106qvqx-0"
 })(["", ";"], reactTheming.componentStyles);
 
-const COMPONENT_ID$t = 'dropdowns.combobox.message';
+const COMPONENT_ID$u = 'dropdowns.combobox.message';
 const StyledMessage = styled__default.default(reactForms.Field.Message).attrs({
-  'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$u,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-jux8m5-0"
 })(["", ";"], reactTheming.componentStyles);
 
-const COMPONENT_ID$s = 'dropdowns.combobox';
+const COMPONENT_ID$t = 'dropdowns.combobox';
 const sizeStyles$b = props => {
   const minWidth = `${props.$isCompact ? 100 : 144}px`;
   const marginTop = `${props.theme.space.base * (props.$isCompact ? 1 : 2)}px`;
   return styled.css(["min-width:", ";", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", ";}"], minWidth, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, marginTop);
 };
 const StyledCombobox = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$t,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledCombobox",
   componentId: "sc-13eybg8-0"
 })(["", ";", ";"], sizeStyles$b, reactTheming.componentStyles);
 
-const COMPONENT_ID$r = 'dropdowns.combobox.container';
+const COMPONENT_ID$s = 'dropdowns.combobox.container';
 const StyledContainer = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$s,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledContainer",
   componentId: "sc-14i9jid-0"
 })(["display:flex;", ";"], reactTheming.componentStyles);
 
-const COMPONENT_ID$q = 'dropdowns.combobox.field';
+const COMPONENT_ID$r = 'dropdowns.combobox.field';
 const StyledField = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$r,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-zc57xl-0"
 })(["direction:", ";text-align:start;", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', reactTheming.componentStyles);
 
-const COMPONENT_ID$p = 'dropdowns.combobox.floating';
+const COMPONENT_ID$q = 'dropdowns.combobox.floating';
 const StyledFloatingListbox = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$q,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledFloatingListbox",
   componentId: "sc-1cp6spf-0"
@@ -153,7 +153,7 @@ const StyledFloatingListbox = styled__default.default.div.attrs({
   zIndex: props.$zIndex
 }), reactTheming.componentStyles);
 
-const COMPONENT_ID$o = 'dropdowns.combobox.input';
+const COMPONENT_ID$p = 'dropdowns.combobox.input';
 const colorStyles$a = _ref => {
   let {
     theme
@@ -179,27 +179,27 @@ const sizeStyles$a = props => {
   return styled.css(["min-width:", ";height:", "px;line-height:", ";font-size:", ";&&{margin-top:", ";margin-bottom:", ";}"], minWidth, height, lineHeight, fontSize, margin, margin);
 };
 const StyledInput = styled__default.default.input.attrs({
-  'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$p,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledInput",
   componentId: "sc-1lkqdg-0"
 })(["flex-basis:0;flex-grow:1;border:none;padding:0;font-family:inherit;&:focus{outline:none;}", ";", ";&[hidden]{display:revert;", "}&[aria-hidden='true']{display:none;}", ";"], sizeStyles$a, colorStyles$a, props => props.$isEditable && polished.hideVisually(), reactTheming.componentStyles);
 
-const COMPONENT_ID$n = 'dropdowns.combobox.input_group';
+const COMPONENT_ID$o = 'dropdowns.combobox.input_group';
 const sizeStyles$9 = props => {
   const margin = props.theme.shadowWidths.sm;
   return styled.css(["margin:-", ";min-width:0;& > *{margin:", ";}"], margin, margin);
 };
 const StyledInputGroup = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$o,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-yx3q7u-0"
 })(["display:flex;flex-grow:1;flex-wrap:wrap;", ";", ";"], sizeStyles$9, reactTheming.componentStyles);
 
-const COMPONENT_ID$m = 'dropdowns.combobox.trigger';
+const COMPONENT_ID$n = 'dropdowns.combobox.trigger';
 const colorStyles$9 = _ref => {
   let {
     theme,
@@ -302,14 +302,14 @@ const sizeStyles$8 = props => {
   return styled.css(["padding:", " ", ";min-height:", ";max-height:", ";font-size:", ";"], verticalPadding, horizontalPadding, minHeight, $maxHeight, props.theme.fontSizes.md);
 };
 const StyledTrigger = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$n,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledTrigger",
   componentId: "sc-116nftk-0"
 })(["overflow-y:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:", ";border-radius:", ";cursor:", ";box-sizing:border-box;", ";&:focus{outline:none;}", ";&[aria-disabled='true']{cursor:default;}", ";"], props => props.$isBare && !props.$isMultiselectable ? 'visible' : 'auto', props => props.$isBare ? 'none' : props.theme.borders.sm, props => props.$isBare ? '0' : props.theme.borderRadii.md, props => !props.$isAutocomplete && props.$isEditable ? 'text' : 'pointer', sizeStyles$8, colorStyles$9, reactTheming.componentStyles);
 
-const COMPONENT_ID$l = 'dropdowns.combobox.input_icon';
+const COMPONENT_ID$m = 'dropdowns.combobox.input_icon';
 const colorStyles$8 = _ref => {
   let {
     theme,
@@ -348,14 +348,14 @@ const sizeStyles$7 = props => {
   return styled.css(["top:", ";margin-", ":", ";width:", ";height:", ";"], position, side, margin, size, size);
 };
 const StyledInputIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
-  'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$m,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledInputIcon",
   componentId: "sc-gqbs1s-0"
 })(["position:sticky;flex-shrink:0;transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", ";", ";"], props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, sizeStyles$7, colorStyles$8, reactTheming.componentStyles);
 
-const COMPONENT_ID$k = 'dropdowns.combobox.option';
+const COMPONENT_ID$l = 'dropdowns.combobox.option';
 const colorStyles$7 = _ref => {
   let {
     theme,
@@ -403,32 +403,32 @@ const sizeStyles$6 = props => {
   return styled.css(["box-sizing:border-box;padding:", " ", ";min-height:", "px;line-height:", ";"], paddingVertical, paddingHorizontal, minHeight, lineHeight);
 };
 const StyledOption = styled__default.default.li.attrs({
-  'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$l,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledOption",
   componentId: "sc-jl4wn6-0"
 })(["display:flex;position:relative;transition:color 0.25s ease-in-out;cursor:", ";overflow-wrap:anywhere;font-weight:", ";user-select:none;&:focus{outline:none;}", ";", ";&[aria-disabled='true']{cursor:default;}&[aria-hidden='true']{", ";}", ";"], props => props.$type === 'group' || props.$type === 'header' ? 'default' : 'pointer', props => props.$type === 'header' || props.$type === 'previous' ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular, sizeStyles$6, colorStyles$7, polished.hideVisually(), reactTheming.componentStyles);
 
-const COMPONENT_ID$j = 'dropdowns.combobox.option.content';
+const COMPONENT_ID$k = 'dropdowns.combobox.option.content';
 const StyledOptionContent = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$k,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledOptionContent",
   componentId: "sc-121ujpu-0"
 })(["display:flex;flex-direction:column;flex-grow:1;", ";"], reactTheming.componentStyles);
 
-const COMPONENT_ID$i = 'dropdowns.combobox.optgroup';
+const COMPONENT_ID$j = 'dropdowns.combobox.optgroup';
 const StyledOptGroup = styled__default.default.ul.attrs({
-  'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$j,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledOptGroup",
   componentId: "sc-1kavqsx-0"
 })(["margin:0;padding:0;list-style-type:none;", ";"], reactTheming.componentStyles);
 
-const COMPONENT_ID$h = 'dropdowns.combobox.separator';
+const COMPONENT_ID$i = 'dropdowns.combobox.separator';
 const colorStyles$6 = _ref => {
   let {
     theme
@@ -445,28 +445,28 @@ const sizeStyles$5 = props => {
   return styled.css(["margin:", " 0;height:", ";"], margin, height);
 };
 const StyledListboxSeparator = styled__default.default.li.attrs({
-  'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$i,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledListboxSeparator",
   componentId: "sc-1p6toh2-0"
 })(["cursor:default;", ";", ";", ";"], sizeStyles$5, colorStyles$6, reactTheming.componentStyles);
 
-const COMPONENT_ID$g = 'dropdowns.combobox.listbox';
+const COMPONENT_ID$h = 'dropdowns.combobox.listbox';
 const sizeStyles$4 = props => {
   const padding = props.theme.space.base;
   const $minHeight = props.$minHeight === undefined ? `${getMinHeight(props) + padding * 2}px` : props.$minHeight;
   return styled.css(["min-height:", ";max-height:", ";&&&{padding-top:", "px;padding-bottom:", "px;}"], $minHeight, props.$maxHeight, padding, padding);
 };
 const StyledListbox = styled__default.default.ul.attrs({
-  'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$h,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledListbox",
   componentId: "sc-1k13ba7-0"
 })(["overflow-y:auto;list-style-type:none;", ";&&&{display:block;}", ":first-child ", " ", ":first-child ", "[role='none']:first-child{display:none;}"], sizeStyles$4, StyledOption, StyledOptionContent, StyledOptGroup, StyledListboxSeparator);
 
-const COMPONENT_ID$f = 'dropdowns.combobox.option.icon';
+const COMPONENT_ID$g = 'dropdowns.combobox.option.icon';
 const colorStyles$5 = _ref => {
   let {
     theme,
@@ -496,14 +496,14 @@ const sizeStyles$3 = props => {
   return styled.css(["margin-top:", ";margin-", ":", ";width:", ";height:", ";"], marginTop, props.theme.rtl ? 'left' : 'right', marginHorizontal, size, size);
 };
 const StyledOptionIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
-  'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$g,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledOptionIcon",
   componentId: "sc-qsab3y-0"
 })(["flex-shrink:0;", ";", ";", ";"], sizeStyles$3, colorStyles$5, reactTheming.componentStyles);
 
-const COMPONENT_ID$e = 'dropdowns.combobox.option.meta';
+const COMPONENT_ID$f = 'dropdowns.combobox.option.meta';
 const colorStyles$4 = _ref => {
   let {
     theme,
@@ -522,14 +522,14 @@ const sizeStyles$2 = props => {
   return styled.css(["line-height:", ";font-size:", ";"], lineHeight, fontSize);
 };
 const StyledOptionMeta = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$f,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledOptionMeta",
   componentId: "sc-j6pu10-0"
 })(["transition:color 0.25s ease-in-out;font-weight:", ";", ";", ";", ";"], props => props.theme.fontWeights.regular, sizeStyles$2, colorStyles$4, reactTheming.componentStyles);
 
-const COMPONENT_ID$d = 'dropdowns.combobox.option.selection_icon';
+const COMPONENT_ID$e = 'dropdowns.combobox.option.selection_icon';
 const colorStyles$3 = _ref => {
   let {
     theme
@@ -555,14 +555,14 @@ const sizeStyles$1 = _ref2 => {
   return styled.css(["top:", ";", ":", ";width:", ";height:", ";"], top, side, position, size, size);
 };
 const StyledOptionSelectionIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
-  'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$e,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledOptionSelectionIcon",
   componentId: "sc-12wj24m-0"
 })(["position:absolute;", ";", ";", ";"], sizeStyles$1, colorStyles$3, reactTheming.componentStyles);
 
-const COMPONENT_ID$c = 'dropdowns.combobox.option.type_icon';
+const COMPONENT_ID$d = 'dropdowns.combobox.option.type_icon';
 const colorStyles$2 = _ref => {
   let {
     theme,
@@ -598,17 +598,17 @@ const sizeStyles = props => {
   return styled.css(["top:", ";", ":", ";width:", ";height:", ";"], top, side, position, size, size);
 };
 const StyledOptionTypeIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
-  'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$d,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledOptionTypeIcon",
   componentId: "sc-xpink2-0"
 })(["position:absolute;transform:", ";transition:opacity 0.1s ease-in-out;", ";", ";", ";"], props => props.theme.rtl && (props.$type === 'next' || props.$type === 'previous') && 'rotate(180deg)', sizeStyles, colorStyles$2, reactTheming.componentStyles);
 
-const COMPONENT_ID$b = 'dropdowns.combobox.tag';
+const COMPONENT_ID$c = 'dropdowns.combobox.tag';
 const StyledTag = styled__default.default(reactTags.Tag).attrs({
-  'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$c,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledTag",
   componentId: "sc-1alam0r-0"
@@ -617,7 +617,7 @@ const StyledTag = styled__default.default(reactTags.Tag).attrs({
   variable: 'foreground.disabled'
 }), polished.hideVisually(), reactTheming.componentStyles);
 
-const COMPONENT_ID$a = 'dropdowns.combobox.value';
+const COMPONENT_ID$b = 'dropdowns.combobox.value';
 const colorStyles$1 = _ref => {
   let {
     theme,
@@ -630,8 +630,8 @@ const colorStyles$1 = _ref => {
   return styled.css(["color:", ";"], foregroundColor);
 };
 const StyledValue = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$b,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledValue",
   componentId: "sc-t719sx-0"
@@ -642,7 +642,7 @@ const StyledValue = styled__default.default.div.attrs({
   return props.$isEditable && !props.$isAutocomplete ? 'text' : 'pointer';
 }, sizeStyles$a, colorStyles$1, reactTheming.componentStyles);
 
-const COMPONENT_ID$9 = 'dropdowns.combobox.tags_button';
+const COMPONENT_ID$a = 'dropdowns.combobox.tags_button';
 const colorStyles = _ref => {
   let {
     theme
@@ -655,17 +655,17 @@ const colorStyles = _ref => {
 };
 const StyledTagsButton = styled__default.default(StyledValue).attrs({
   as: 'button',
-  'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$a,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledTagsButton",
   componentId: "sc-6q5w33-0"
 })(["display:inline-flex;flex:0 1 auto;align-items:center;border:none;background-color:transparent;cursor:pointer;min-width:auto;font-family:inherit;&:hover{text-decoration:underline;}", ";&:disabled{cursor:default;text-decoration:none;}", ";"], colorStyles, reactTheming.componentStyles);
 
-const COMPONENT_ID$8 = 'dropdowns.menu';
+const COMPONENT_ID$9 = 'dropdowns.menu';
 const StyledMenu = styled__default.default(StyledListbox).attrs({
-  'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$9,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-f77ntu-0"
@@ -675,73 +675,83 @@ const StyledMenu = styled__default.default(StyledListbox).attrs({
   animationModifier: '[data-garden-animate-arrow="true"]'
 }), reactTheming.componentStyles);
 
-const COMPONENT_ID$7 = 'dropdowns.menu.floating';
+const COMPONENT_ID$8 = 'dropdowns.menu.floating';
 const StyledFloatingMenu = styled__default.default(StyledFloatingListbox).attrs({
-  'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledFloatingMenu",
   componentId: "sc-1rc7ahb-0"
 })(["", ";"], reactTheming.componentStyles);
 
-const COMPONENT_ID$6 = 'dropdowns.menu.item';
+const COMPONENT_ID$7 = 'dropdowns.menu.item';
 const StyledItem = styled__default.default(StyledOption).attrs({
-  'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$7,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledItem",
   componentId: "sc-1jp99dq-0"
 })(["", ";"], reactTheming.componentStyles);
 
-const COMPONENT_ID$5 = 'dropdowns.menu.item.content';
-const StyledItemContent = styled__default.default(StyledOptionContent).attrs({
+const COMPONENT_ID$6 = 'dropdowns.menu.item.type_icon';
+const StyledItemTypeIcon = styled__default.default(StyledOptionTypeIcon).attrs({
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '9.7.1'
+}).withConfig({
+  displayName: "StyledItemTypeIcon",
+  componentId: "sc-1pll3nu-0"
+})(["", "[aria-checked='true'] > &{opacity:1;}", ";"], StyledItem, reactTheming.componentStyles);
+
+const COMPONENT_ID$5 = 'dropdowns.menu.item_anchor';
+const StyledItemAnchor = styled__default.default(StyledOption).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.6.0'
+  'data-garden-version': '9.7.1',
+  as: 'a'
+}).withConfig({
+  displayName: "StyledItemAnchor",
+  componentId: "sc-b75oa4-0"
+})(["text-decoration:none;color:unset;&[aria-current='page'] > ", "{opacity:1;}", ";"], StyledItemTypeIcon, reactTheming.componentStyles);
+
+const COMPONENT_ID$4 = 'dropdowns.menu.item.content';
+const StyledItemContent = styled__default.default(StyledOptionContent).attrs({
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledItemContent",
   componentId: "sc-1opglsb-0"
 })(["", ";"], reactTheming.componentStyles);
 
-const COMPONENT_ID$4 = 'dropdowns.menu.item_group';
+const COMPONENT_ID$3 = 'dropdowns.menu.item_group';
 const StyledItemGroup = styled__default.default(StyledOptGroup).attrs({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledItemGroup",
   componentId: "sc-1umk3cg-0"
 })(["", ";"], reactTheming.componentStyles);
 
-const COMPONENT_ID$3 = 'dropdowns.menu.item.icon';
+const COMPONENT_ID$2 = 'dropdowns.menu.item.icon';
 const StyledItemIcon = styled__default.default(StyledOptionIcon).attrs({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-w9orqb-0"
 })(["", ";"], reactTheming.componentStyles);
 
-const COMPONENT_ID$2 = 'dropdowns.menu.item.meta';
+const COMPONENT_ID$1 = 'dropdowns.menu.item.meta';
 const StyledItemMeta = styled__default.default(StyledOptionMeta).attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.6.0'
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-1unw3x1-0"
 })(["", ";"], reactTheming.componentStyles);
 
-const COMPONENT_ID$1 = 'dropdowns.menu.item.type_icon';
-const StyledItemTypeIcon = styled__default.default(StyledOptionTypeIcon).attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.6.0'
-}).withConfig({
-  displayName: "StyledItemTypeIcon",
-  componentId: "sc-1pll3nu-0"
-})(["", "[aria-checked='true'] > &{opacity:1;}", ";"], StyledItem, reactTheming.componentStyles);
-
 const COMPONENT_ID = 'dropdowns.menu.separator';
 const StyledSeparator = styled__default.default(StyledListboxSeparator).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.6.0'
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-8kqwen-0"
@@ -1594,9 +1604,15 @@ const toItem = props => ({
   ...(props.name && {
     name: props.name
   }),
+  ...(props.href && {
+    href: props.href
+  }),
   ...(props.isDisabled && {
     disabled: props.isDisabled
   }),
+  ...(props.isExternal && {
+    external: props.isExternal
+  }),
   ...(props.isSelected && {
     selected: props.isSelected
   }),
@@ -1783,6 +1799,7 @@ const Menu = React.forwardRef((_ref2, ref) => {
     focusedValue,
     getTriggerProps,
     getMenuProps,
+    getAnchorProps,
     getItemProps,
     getItemGroupProps,
     getSeparatorProps
@@ -1826,10 +1843,11 @@ const Menu = React.forwardRef((_ref2, ref) => {
   const contextValue = React.useMemo(() => ({
     isCompact,
     focusedValue,
+    getAnchorProps,
     getItemProps,
     getItemGroupProps,
     getSeparatorProps
-  }), [isCompact, focusedValue, getItemProps, getItemGroupProps, getSeparatorProps]);
+  }), [focusedValue, getAnchorProps, getItemGroupProps, getItemProps, getSeparatorProps, isCompact]);
   return React__namespace.default.createElement(MenuContext.Provider, {
     value: contextValue
   }, trigger, React__namespace.default.createElement(MenuList, Object.assign({}, props, getMenuProps({
@@ -1946,26 +1964,41 @@ const ItemMetaComponent = React.forwardRef((props, ref) => {
 ItemMetaComponent.displayName = 'Item.Meta';
 const ItemMeta = ItemMetaComponent;
 
+const renderActionIcon = itemType => {
+  switch (itemType) {
+    case 'add':
+      return React__namespace.default.createElement(SvgPlusStroke, null);
+    case 'next':
+      return React__namespace.default.createElement(SvgChevronRightStroke, null);
+    case 'previous':
+      return React__namespace.default.createElement(SvgChevronLeftStroke, null);
+    default:
+      return React__namespace.default.createElement(SvgCheckLgStroke, null);
+  }
+};
 const ItemComponent = React.forwardRef((_ref, ref) => {
   let {
     children,
     value,
     label = value,
+    href,
     isSelected,
     icon,
     isDisabled,
+    isExternal,
     type,
     name,
     onClick,
     onKeyDown,
     onMouseEnter,
-    ...props
+    ...other
   } = _ref;
   const {
     type: selectionType
   } = useItemGroupContext();
   const {
     focusedValue,
+    getAnchorProps,
     getItemProps,
     isCompact
   } = useMenuContext();
@@ -1976,10 +2009,18 @@ const ItemComponent = React.forwardRef((_ref, ref) => {
       name,
       type,
       isSelected,
-      isDisabled
+      isDisabled,
+      href,
+      isExternal
     }),
     type: selectionType
   };
+  const anchorProps = getAnchorProps({
+    item
+  });
+  if (anchorProps && (type === 'add' || type === 'danger')) {
+    throw new Error(`Menu link item '${value}' can't use type '${type}'`);
+  }
   const {
     ref: _itemRef,
     ...itemProps
@@ -1989,44 +2030,40 @@ const ItemComponent = React.forwardRef((_ref, ref) => {
     onKeyDown,
     onMouseEnter
   });
-  const isActive = value === focusedValue;
-  const renderActionIcon = iconType => {
-    switch (iconType) {
-      case 'add':
-        return React__namespace.default.createElement(SvgPlusStroke, null);
-      case 'next':
-        return React__namespace.default.createElement(SvgChevronRightStroke, null);
-      case 'previous':
-        return React__namespace.default.createElement(SvgChevronLeftStroke, null);
-      default:
-        return React__namespace.default.createElement(SvgCheckLgStroke, null);
-    }
-  };
   const contextValue = React.useMemo(() => ({
     isDisabled,
     type
   }), [isDisabled, type]);
-  return React__namespace.default.createElement(ItemContext.Provider, {
-    value: contextValue
-  }, React__namespace.default.createElement(StyledItem, Object.assign({
-    $type: type,
-    $isCompact: isCompact,
-    $isActive: isActive
-  }, props, itemProps, {
-    ref: reactMergeRefs.mergeRefs([_itemRef, ref])
-  }), React__namespace.default.createElement(StyledItemTypeIcon, {
+  const itemChildren = React__namespace.default.createElement(React__namespace.default.Fragment, null, React__namespace.default.createElement(StyledItemTypeIcon, {
     $isCompact: isCompact,
     $type: type
   }, renderActionIcon(type)), !!icon && React__namespace.default.createElement(StyledItemIcon, {
     $isDisabled: isDisabled,
     $type: type
-  }, icon), React__namespace.default.createElement(StyledItemContent, null, children || label)));
+  }, icon), React__namespace.default.createElement(StyledItemContent, null, children || label));
+  const menuItemProps = {
+    ...other,
+    ...itemProps,
+    ref: reactMergeRefs.mergeRefs([_itemRef, ref])
+  };
+  return React__namespace.default.createElement(ItemContext.Provider, {
+    value: contextValue
+  }, anchorProps ? React__namespace.default.createElement("li", menuItemProps, React__namespace.default.createElement(StyledItemAnchor, Object.assign({
+    $isCompact: isCompact,
+    $isActive: value === focusedValue
+  }, anchorProps), itemChildren)) : React__namespace.default.createElement(StyledItem, Object.assign({
+    $isCompact: isCompact,
+    $isActive: value === focusedValue,
+    $type: type
+  }, menuItemProps), itemChildren));
 });
 ItemComponent.displayName = 'Item';
 ItemComponent.propTypes = {
+  href: PropTypes__default.default.string,
   icon: PropTypes__default.default.any,
   isDisabled: PropTypes__default.default.bool,
   isSelected: PropTypes__default.default.bool,
+  isExternal: PropTypes__default.default.bool,
   label: PropTypes__default.default.string,
   name: PropTypes__default.default.string,
   type: PropTypes__default.default.oneOf(OPTION_TYPE),

package/dist/typings/context/useMenuContext.d.ts

@@ -8,6 +8,7 @@ import { IUseMenuReturnValue } from '@zendeskgarden/container-menu';
 export declare const MenuContext: import("react").Context<{
     isCompact?: boolean;
     focusedValue?: string | null;
+    getAnchorProps: IUseMenuReturnValue["getAnchorProps"];
     getItemGroupProps: IUseMenuReturnValue["getItemGroupProps"];
     getItemProps: IUseMenuReturnValue["getItemProps"];
     getSeparatorProps: IUseMenuReturnValue["getSeparatorProps"];
@@ -15,6 +16,7 @@ export declare const MenuContext: import("react").Context<{
 declare const useMenuContext: () => {
     isCompact?: boolean;
     focusedValue?: string | null;
+    getAnchorProps: IUseMenuReturnValue["getAnchorProps"];
     getItemGroupProps: IUseMenuReturnValue["getItemGroupProps"];
     getItemProps: IUseMenuReturnValue["getItemProps"];
     getSeparatorProps: IUseMenuReturnValue["getSeparatorProps"];