@zendeskgarden/react-dropdowns 9.6.0 → 9.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/dist/esm/elements/combobox/Combobox.js +1 -0
  2. package/dist/esm/elements/combobox/Field.js +1 -0
  3. package/dist/esm/elements/combobox/Hint.js +1 -0
  4. package/dist/esm/elements/combobox/Label.js +1 -0
  5. package/dist/esm/elements/combobox/Listbox.js +1 -0
  6. package/dist/esm/elements/combobox/Message.js +1 -0
  7. package/dist/esm/elements/combobox/OptGroup.js +1 -0
  8. package/dist/esm/elements/combobox/Option.js +1 -0
  9. package/dist/esm/elements/combobox/OptionMeta.js +1 -0
  10. package/dist/esm/elements/combobox/Tag.js +1 -0
  11. package/dist/esm/elements/menu/Item.js +45 -25
  12. package/dist/esm/elements/menu/ItemGroup.js +1 -0
  13. package/dist/esm/elements/menu/ItemMeta.js +1 -0
  14. package/dist/esm/elements/menu/Menu.js +3 -1
  15. package/dist/esm/elements/menu/MenuList.js +1 -0
  16. package/dist/esm/elements/menu/Separator.js +1 -0
  17. package/dist/esm/elements/menu/utils.js +6 -0
  18. package/dist/esm/views/combobox/StyledCombobox.js +1 -1
  19. package/dist/esm/views/combobox/StyledContainer.js +1 -1
  20. package/dist/esm/views/combobox/StyledField.js +1 -1
  21. package/dist/esm/views/combobox/StyledFloatingListbox.js +1 -1
  22. package/dist/esm/views/combobox/StyledHint.js +1 -1
  23. package/dist/esm/views/combobox/StyledInput.js +1 -1
  24. package/dist/esm/views/combobox/StyledInputGroup.js +1 -1
  25. package/dist/esm/views/combobox/StyledInputIcon.js +1 -1
  26. package/dist/esm/views/combobox/StyledLabel.js +1 -1
  27. package/dist/esm/views/combobox/StyledListbox.js +1 -1
  28. package/dist/esm/views/combobox/StyledListboxSeparator.js +1 -1
  29. package/dist/esm/views/combobox/StyledMessage.js +1 -1
  30. package/dist/esm/views/combobox/StyledOptGroup.js +1 -1
  31. package/dist/esm/views/combobox/StyledOption.js +1 -1
  32. package/dist/esm/views/combobox/StyledOptionContent.js +1 -1
  33. package/dist/esm/views/combobox/StyledOptionIcon.js +1 -1
  34. package/dist/esm/views/combobox/StyledOptionMeta.js +1 -1
  35. package/dist/esm/views/combobox/StyledOptionSelectionIcon.js +1 -1
  36. package/dist/esm/views/combobox/StyledOptionTypeIcon.js +1 -1
  37. package/dist/esm/views/combobox/StyledTag.js +1 -1
  38. package/dist/esm/views/combobox/StyledTagsButton.js +1 -1
  39. package/dist/esm/views/combobox/StyledTrigger.js +1 -1
  40. package/dist/esm/views/combobox/StyledValue.js +1 -1
  41. package/dist/esm/views/menu/StyledFloatingMenu.js +1 -1
  42. package/dist/esm/views/menu/StyledItem.js +1 -1
  43. package/dist/esm/views/menu/StyledItemAnchor.js +22 -0
  44. package/dist/esm/views/menu/StyledItemContent.js +1 -1
  45. package/dist/esm/views/menu/StyledItemGroup.js +1 -1
  46. package/dist/esm/views/menu/StyledItemIcon.js +1 -1
  47. package/dist/esm/views/menu/StyledItemMeta.js +1 -1
  48. package/dist/esm/views/menu/StyledItemTypeIcon.js +1 -1
  49. package/dist/esm/views/menu/StyledMenu.js +1 -1
  50. package/dist/esm/views/menu/StyledSeparator.js +1 -1
  51. package/dist/index.cjs.js +163 -126
  52. package/dist/typings/context/useMenuContext.d.ts +2 -0
  53. package/dist/typings/elements/menu/Item.d.ts +4 -0
  54. package/dist/typings/types/index.d.ts +5 -1
  55. package/dist/typings/views/index.d.ts +1 -0
  56. package/dist/typings/views/menu/StyledItemAnchor.d.ts +11 -0
  57. package/package.json +8 -8
@@ -39,6 +39,7 @@ import { StyledValue } from '../../views/combobox/StyledValue.js';
39
39
  import '../../views/menu/StyledMenu.js';
40
40
  import '../../views/menu/StyledFloatingMenu.js';
41
41
  import '../../views/menu/StyledItem.js';
42
+ import '../../views/menu/StyledItemAnchor.js';
42
43
  import '../../views/menu/StyledItemContent.js';
43
44
  import '../../views/menu/StyledItemGroup.js';
44
45
  import '../../views/menu/StyledItemIcon.js';
@@ -32,6 +32,7 @@ import '../../views/combobox/StyledValue.js';
32
32
  import '../../views/menu/StyledMenu.js';
33
33
  import '../../views/menu/StyledFloatingMenu.js';
34
34
  import '../../views/menu/StyledItem.js';
35
+ import '../../views/menu/StyledItemAnchor.js';
35
36
  import '../../views/menu/StyledItemContent.js';
36
37
  import '../../views/menu/StyledItemGroup.js';
37
38
  import '../../views/menu/StyledItemIcon.js';
@@ -32,6 +32,7 @@ import '../../views/combobox/StyledValue.js';
32
32
  import '../../views/menu/StyledMenu.js';
33
33
  import '../../views/menu/StyledFloatingMenu.js';
34
34
  import '../../views/menu/StyledItem.js';
35
+ import '../../views/menu/StyledItemAnchor.js';
35
36
  import '../../views/menu/StyledItemContent.js';
36
37
  import '../../views/menu/StyledItemGroup.js';
37
38
  import '../../views/menu/StyledItemIcon.js';
@@ -34,6 +34,7 @@ import '../../views/combobox/StyledValue.js';
34
34
  import '../../views/menu/StyledMenu.js';
35
35
  import '../../views/menu/StyledFloatingMenu.js';
36
36
  import '../../views/menu/StyledItem.js';
37
+ import '../../views/menu/StyledItemAnchor.js';
37
38
  import '../../views/menu/StyledItemContent.js';
38
39
  import '../../views/menu/StyledItemGroup.js';
39
40
  import '../../views/menu/StyledItemIcon.js';
@@ -34,6 +34,7 @@ import '../../views/combobox/StyledValue.js';
34
34
  import '../../views/menu/StyledMenu.js';
35
35
  import '../../views/menu/StyledFloatingMenu.js';
36
36
  import '../../views/menu/StyledItem.js';
37
+ import '../../views/menu/StyledItemAnchor.js';
37
38
  import '../../views/menu/StyledItemContent.js';
38
39
  import '../../views/menu/StyledItemGroup.js';
39
40
  import '../../views/menu/StyledItemIcon.js';
@@ -34,6 +34,7 @@ import '../../views/combobox/StyledValue.js';
34
34
  import '../../views/menu/StyledMenu.js';
35
35
  import '../../views/menu/StyledFloatingMenu.js';
36
36
  import '../../views/menu/StyledItem.js';
37
+ import '../../views/menu/StyledItemAnchor.js';
37
38
  import '../../views/menu/StyledItemContent.js';
38
39
  import '../../views/menu/StyledItemGroup.js';
39
40
  import '../../views/menu/StyledItemIcon.js';
@@ -35,6 +35,7 @@ import '../../views/combobox/StyledValue.js';
35
35
  import '../../views/menu/StyledMenu.js';
36
36
  import '../../views/menu/StyledFloatingMenu.js';
37
37
  import '../../views/menu/StyledItem.js';
38
+ import '../../views/menu/StyledItemAnchor.js';
38
39
  import '../../views/menu/StyledItemContent.js';
39
40
  import '../../views/menu/StyledItemGroup.js';
40
41
  import '../../views/menu/StyledItemIcon.js';
@@ -41,6 +41,7 @@ import '../../views/combobox/StyledValue.js';
41
41
  import '../../views/menu/StyledMenu.js';
42
42
  import '../../views/menu/StyledFloatingMenu.js';
43
43
  import '../../views/menu/StyledItem.js';
44
+ import '../../views/menu/StyledItemAnchor.js';
44
45
  import '../../views/menu/StyledItemContent.js';
45
46
  import '../../views/menu/StyledItemGroup.js';
46
47
  import '../../views/menu/StyledItemIcon.js';
@@ -32,6 +32,7 @@ import '../../views/combobox/StyledValue.js';
32
32
  import '../../views/menu/StyledMenu.js';
33
33
  import '../../views/menu/StyledFloatingMenu.js';
34
34
  import '../../views/menu/StyledItem.js';
35
+ import '../../views/menu/StyledItemAnchor.js';
35
36
  import '../../views/menu/StyledItemContent.js';
36
37
  import '../../views/menu/StyledItemGroup.js';
37
38
  import '../../views/menu/StyledItemIcon.js';
@@ -36,6 +36,7 @@ import '../../views/combobox/StyledValue.js';
36
36
  import '../../views/menu/StyledMenu.js';
37
37
  import '../../views/menu/StyledFloatingMenu.js';
38
38
  import '../../views/menu/StyledItem.js';
39
+ import '../../views/menu/StyledItemAnchor.js';
39
40
  import '../../views/menu/StyledItemContent.js';
40
41
  import '../../views/menu/StyledItemGroup.js';
41
42
  import '../../views/menu/StyledItemIcon.js';
@@ -38,6 +38,7 @@ import '../../views/combobox/StyledValue.js';
38
38
  import '../../views/menu/StyledMenu.js';
39
39
  import '../../views/menu/StyledFloatingMenu.js';
40
40
  import { StyledItem } from '../../views/menu/StyledItem.js';
41
+ import { StyledItemAnchor } from '../../views/menu/StyledItemAnchor.js';
41
42
  import { StyledItemContent } from '../../views/menu/StyledItemContent.js';
42
43
  import '../../views/menu/StyledItemGroup.js';
43
44
  import { StyledItemIcon } from '../../views/menu/StyledItemIcon.js';
@@ -50,26 +51,41 @@ import useItemGroupContext from '../../context/useItemGroupContext.js';
50
51
  import { ItemContext } from '../../context/useItemContext.js';
51
52
  import { toItem } from './utils.js';
52
53
 
54
+ const renderActionIcon = itemType => {
55
+ switch (itemType) {
56
+ case 'add':
57
+ return React__default.createElement(SvgPlusStroke, null);
58
+ case 'next':
59
+ return React__default.createElement(SvgChevronRightStroke, null);
60
+ case 'previous':
61
+ return React__default.createElement(SvgChevronLeftStroke, null);
62
+ default:
63
+ return React__default.createElement(SvgCheckLgStroke, null);
64
+ }
65
+ };
53
66
  const ItemComponent = forwardRef((_ref, ref) => {
54
67
  let {
55
68
  children,
56
69
  value,
57
70
  label = value,
71
+ href,
58
72
  isSelected,
59
73
  icon,
60
74
  isDisabled,
75
+ isExternal,
61
76
  type,
62
77
  name,
63
78
  onClick,
64
79
  onKeyDown,
65
80
  onMouseEnter,
66
- ...props
81
+ ...other
67
82
  } = _ref;
68
83
  const {
69
84
  type: selectionType
70
85
  } = useItemGroupContext();
71
86
  const {
72
87
  focusedValue,
88
+ getAnchorProps,
73
89
  getItemProps,
74
90
  isCompact
75
91
  } = useMenuContext();
@@ -80,10 +96,18 @@ const ItemComponent = forwardRef((_ref, ref) => {
80
96
  name,
81
97
  type,
82
98
  isSelected,
83
- isDisabled
99
+ isDisabled,
100
+ href,
101
+ isExternal
84
102
  }),
85
103
  type: selectionType
86
104
  };
105
+ const anchorProps = getAnchorProps({
106
+ item
107
+ });
108
+ if (anchorProps && (type === 'add' || type === 'danger')) {
109
+ throw new Error(`Menu link item '${value}' can't use type '${type}'`);
110
+ }
87
111
  const {
88
112
  ref: _itemRef,
89
113
  ...itemProps
@@ -93,44 +117,40 @@ const ItemComponent = forwardRef((_ref, ref) => {
93
117
  onKeyDown,
94
118
  onMouseEnter
95
119
  });
96
- const isActive = value === focusedValue;
97
- const renderActionIcon = iconType => {
98
- switch (iconType) {
99
- case 'add':
100
- return React__default.createElement(SvgPlusStroke, null);
101
- case 'next':
102
- return React__default.createElement(SvgChevronRightStroke, null);
103
- case 'previous':
104
- return React__default.createElement(SvgChevronLeftStroke, null);
105
- default:
106
- return React__default.createElement(SvgCheckLgStroke, null);
107
- }
108
- };
109
120
  const contextValue = useMemo(() => ({
110
121
  isDisabled,
111
122
  type
112
123
  }), [isDisabled, type]);
113
- return React__default.createElement(ItemContext.Provider, {
114
- value: contextValue
115
- }, React__default.createElement(StyledItem, Object.assign({
116
- $type: type,
117
- $isCompact: isCompact,
118
- $isActive: isActive
119
- }, props, itemProps, {
120
- ref: mergeRefs([_itemRef, ref])
121
- }), React__default.createElement(StyledItemTypeIcon, {
124
+ const itemChildren = React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledItemTypeIcon, {
122
125
  $isCompact: isCompact,
123
126
  $type: type
124
127
  }, renderActionIcon(type)), !!icon && React__default.createElement(StyledItemIcon, {
125
128
  $isDisabled: isDisabled,
126
129
  $type: type
127
- }, icon), React__default.createElement(StyledItemContent, null, children || label)));
130
+ }, icon), React__default.createElement(StyledItemContent, null, children || label));
131
+ const menuItemProps = {
132
+ ...other,
133
+ ...itemProps,
134
+ ref: mergeRefs([_itemRef, ref])
135
+ };
136
+ return React__default.createElement(ItemContext.Provider, {
137
+ value: contextValue
138
+ }, anchorProps ? React__default.createElement("li", menuItemProps, React__default.createElement(StyledItemAnchor, Object.assign({
139
+ $isCompact: isCompact,
140
+ $isActive: value === focusedValue
141
+ }, anchorProps), itemChildren)) : React__default.createElement(StyledItem, Object.assign({
142
+ $isCompact: isCompact,
143
+ $isActive: value === focusedValue,
144
+ $type: type
145
+ }, menuItemProps), itemChildren));
128
146
  });
129
147
  ItemComponent.displayName = 'Item';
130
148
  ItemComponent.propTypes = {
149
+ href: PropTypes.string,
131
150
  icon: PropTypes.any,
132
151
  isDisabled: PropTypes.bool,
133
152
  isSelected: PropTypes.bool,
153
+ isExternal: PropTypes.bool,
134
154
  label: PropTypes.string,
135
155
  name: PropTypes.string,
136
156
  type: PropTypes.oneOf(OPTION_TYPE),
@@ -34,6 +34,7 @@ import '../../views/combobox/StyledValue.js';
34
34
  import '../../views/menu/StyledMenu.js';
35
35
  import '../../views/menu/StyledFloatingMenu.js';
36
36
  import { StyledItem } from '../../views/menu/StyledItem.js';
37
+ import '../../views/menu/StyledItemAnchor.js';
37
38
  import { StyledItemContent } from '../../views/menu/StyledItemContent.js';
38
39
  import { StyledItemGroup } from '../../views/menu/StyledItemGroup.js';
39
40
  import '../../views/menu/StyledItemIcon.js';
@@ -32,6 +32,7 @@ import '../../views/combobox/StyledValue.js';
32
32
  import '../../views/menu/StyledMenu.js';
33
33
  import '../../views/menu/StyledFloatingMenu.js';
34
34
  import '../../views/menu/StyledItem.js';
35
+ import '../../views/menu/StyledItemAnchor.js';
35
36
  import '../../views/menu/StyledItemContent.js';
36
37
  import '../../views/menu/StyledItemGroup.js';
37
38
  import '../../views/menu/StyledItemIcon.js';
@@ -43,6 +43,7 @@ const Menu = forwardRef((_ref2, ref) => {
43
43
  focusedValue,
44
44
  getTriggerProps,
45
45
  getMenuProps,
46
+ getAnchorProps,
46
47
  getItemProps,
47
48
  getItemGroupProps,
48
49
  getSeparatorProps
@@ -86,10 +87,11 @@ const Menu = forwardRef((_ref2, ref) => {
86
87
  const contextValue = useMemo(() => ({
87
88
  isCompact,
88
89
  focusedValue,
90
+ getAnchorProps,
89
91
  getItemProps,
90
92
  getItemGroupProps,
91
93
  getSeparatorProps
92
- }), [isCompact, focusedValue, getItemProps, getItemGroupProps, getSeparatorProps]);
94
+ }), [focusedValue, getAnchorProps, getItemGroupProps, getItemProps, getSeparatorProps, isCompact]);
93
95
  return React__default.createElement(MenuContext.Provider, {
94
96
  value: contextValue
95
97
  }, trigger, React__default.createElement(MenuList, Object.assign({}, props, getMenuProps({
@@ -36,6 +36,7 @@ import '../../views/combobox/StyledValue.js';
36
36
  import { StyledMenu } from '../../views/menu/StyledMenu.js';
37
37
  import { StyledFloatingMenu } from '../../views/menu/StyledFloatingMenu.js';
38
38
  import '../../views/menu/StyledItem.js';
39
+ import '../../views/menu/StyledItemAnchor.js';
39
40
  import '../../views/menu/StyledItemContent.js';
40
41
  import '../../views/menu/StyledItemGroup.js';
41
42
  import '../../views/menu/StyledItemIcon.js';
@@ -31,6 +31,7 @@ import '../../views/combobox/StyledValue.js';
31
31
  import '../../views/menu/StyledMenu.js';
32
32
  import '../../views/menu/StyledFloatingMenu.js';
33
33
  import '../../views/menu/StyledItem.js';
34
+ import '../../views/menu/StyledItemAnchor.js';
34
35
  import '../../views/menu/StyledItemContent.js';
35
36
  import '../../views/menu/StyledItemGroup.js';
36
37
  import '../../views/menu/StyledItemIcon.js';
@@ -12,9 +12,15 @@ const toItem = props => ({
12
12
  ...(props.name && {
13
13
  name: props.name
14
14
  }),
15
+ ...(props.href && {
16
+ href: props.href
17
+ }),
15
18
  ...(props.isDisabled && {
16
19
  disabled: props.isDisabled
17
20
  }),
21
+ ...(props.isExternal && {
22
+ external: props.isExternal
23
+ }),
18
24
  ...(props.isSelected && {
19
25
  selected: props.isSelected
20
26
  }),
@@ -18,7 +18,7 @@ const sizeStyles = props => {
18
18
  };
19
19
  const StyledCombobox = styled.div.attrs({
20
20
  'data-garden-id': COMPONENT_ID,
21
- 'data-garden-version': '9.6.0'
21
+ 'data-garden-version': '9.7.1'
22
22
  }).withConfig({
23
23
  displayName: "StyledCombobox",
24
24
  componentId: "sc-13eybg8-0"
@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
10
10
  const COMPONENT_ID = 'dropdowns.combobox.container';
11
11
  const StyledContainer = styled.div.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.6.0'
13
+ 'data-garden-version': '9.7.1'
14
14
  }).withConfig({
15
15
  displayName: "StyledContainer",
16
16
  componentId: "sc-14i9jid-0"
@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
10
10
  const COMPONENT_ID = 'dropdowns.combobox.field';
11
11
  const StyledField = styled.div.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.6.0'
13
+ 'data-garden-version': '9.7.1'
14
14
  }).withConfig({
15
15
  displayName: "StyledField",
16
16
  componentId: "sc-zc57xl-0"
@@ -10,7 +10,7 @@ import { menuStyles, componentStyles } from '@zendeskgarden/react-theming';
10
10
  const COMPONENT_ID = 'dropdowns.combobox.floating';
11
11
  const StyledFloatingListbox = styled.div.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.6.0'
13
+ 'data-garden-version': '9.7.1'
14
14
  }).withConfig({
15
15
  displayName: "StyledFloatingListbox",
16
16
  componentId: "sc-1cp6spf-0"
@@ -11,7 +11,7 @@ import { Field } from '@zendeskgarden/react-forms';
11
11
  const COMPONENT_ID = 'dropdowns.combobox.hint';
12
12
  const StyledHint = styled(Field.Hint).attrs({
13
13
  'data-garden-id': COMPONENT_ID,
14
- 'data-garden-version': '9.6.0'
14
+ 'data-garden-version': '9.7.1'
15
15
  }).withConfig({
16
16
  displayName: "StyledHint",
17
17
  componentId: "sc-106qvqx-0"
@@ -35,7 +35,7 @@ const sizeStyles = props => {
35
35
  };
36
36
  const StyledInput = styled.input.attrs({
37
37
  'data-garden-id': COMPONENT_ID,
38
- 'data-garden-version': '9.6.0'
38
+ 'data-garden-version': '9.7.1'
39
39
  }).withConfig({
40
40
  displayName: "StyledInput",
41
41
  componentId: "sc-1lkqdg-0"
@@ -14,7 +14,7 @@ const sizeStyles = props => {
14
14
  };
15
15
  const StyledInputGroup = styled.div.attrs({
16
16
  'data-garden-id': COMPONENT_ID,
17
- 'data-garden-version': '9.6.0'
17
+ 'data-garden-version': '9.7.1'
18
18
  }).withConfig({
19
19
  displayName: "StyledInputGroup",
20
20
  componentId: "sc-yx3q7u-0"
@@ -50,7 +50,7 @@ const sizeStyles = props => {
50
50
  };
51
51
  const StyledInputIcon = styled(StyledBaseIcon).attrs({
52
52
  'data-garden-id': COMPONENT_ID,
53
- 'data-garden-version': '9.6.0'
53
+ 'data-garden-version': '9.7.1'
54
54
  }).withConfig({
55
55
  displayName: "StyledInputIcon",
56
56
  componentId: "sc-gqbs1s-0"
@@ -11,7 +11,7 @@ import { Field } from '@zendeskgarden/react-forms';
11
11
  const COMPONENT_ID = 'dropdowns.combobox.label';
12
12
  const StyledLabel = styled(Field.Label).attrs({
13
13
  'data-garden-id': COMPONENT_ID,
14
- 'data-garden-version': '9.6.0'
14
+ 'data-garden-version': '9.7.1'
15
15
  }).withConfig({
16
16
  displayName: "StyledLabel",
17
17
  componentId: "sc-az6now-0"
@@ -18,7 +18,7 @@ const sizeStyles = props => {
18
18
  };
19
19
  const StyledListbox = styled.ul.attrs({
20
20
  'data-garden-id': COMPONENT_ID,
21
- 'data-garden-version': '9.6.0'
21
+ 'data-garden-version': '9.7.1'
22
22
  }).withConfig({
23
23
  displayName: "StyledListbox",
24
24
  componentId: "sc-1k13ba7-0"
@@ -25,7 +25,7 @@ const sizeStyles = props => {
25
25
  };
26
26
  const StyledListboxSeparator = styled.li.attrs({
27
27
  'data-garden-id': COMPONENT_ID,
28
- 'data-garden-version': '9.6.0'
28
+ 'data-garden-version': '9.7.1'
29
29
  }).withConfig({
30
30
  displayName: "StyledListboxSeparator",
31
31
  componentId: "sc-1p6toh2-0"
@@ -11,7 +11,7 @@ import { Field } from '@zendeskgarden/react-forms';
11
11
  const COMPONENT_ID = 'dropdowns.combobox.message';
12
12
  const StyledMessage = styled(Field.Message).attrs({
13
13
  'data-garden-id': COMPONENT_ID,
14
- 'data-garden-version': '9.6.0'
14
+ 'data-garden-version': '9.7.1'
15
15
  }).withConfig({
16
16
  displayName: "StyledMessage",
17
17
  componentId: "sc-jux8m5-0"
@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
10
10
  const COMPONENT_ID = 'dropdowns.combobox.optgroup';
11
11
  const StyledOptGroup = styled.ul.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.6.0'
13
+ 'data-garden-version': '9.7.1'
14
14
  }).withConfig({
15
15
  displayName: "StyledOptGroup",
16
16
  componentId: "sc-1kavqsx-0"
@@ -57,7 +57,7 @@ const sizeStyles = props => {
57
57
  };
58
58
  const StyledOption = styled.li.attrs({
59
59
  'data-garden-id': COMPONENT_ID,
60
- 'data-garden-version': '9.6.0'
60
+ 'data-garden-version': '9.7.1'
61
61
  }).withConfig({
62
62
  displayName: "StyledOption",
63
63
  componentId: "sc-jl4wn6-0"
@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
10
10
  const COMPONENT_ID = 'dropdowns.combobox.option.content';
11
11
  const StyledOptionContent = styled.div.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.6.0'
13
+ 'data-garden-version': '9.7.1'
14
14
  }).withConfig({
15
15
  displayName: "StyledOptionContent",
16
16
  componentId: "sc-121ujpu-0"
@@ -39,7 +39,7 @@ const sizeStyles = props => {
39
39
  };
40
40
  const StyledOptionIcon = styled(StyledBaseIcon).attrs({
41
41
  'data-garden-id': COMPONENT_ID,
42
- 'data-garden-version': '9.6.0'
42
+ 'data-garden-version': '9.7.1'
43
43
  }).withConfig({
44
44
  displayName: "StyledOptionIcon",
45
45
  componentId: "sc-qsab3y-0"
@@ -27,7 +27,7 @@ const sizeStyles = props => {
27
27
  };
28
28
  const StyledOptionMeta = styled.div.attrs({
29
29
  'data-garden-id': COMPONENT_ID,
30
- 'data-garden-version': '9.6.0'
30
+ 'data-garden-version': '9.7.1'
31
31
  }).withConfig({
32
32
  displayName: "StyledOptionMeta",
33
33
  componentId: "sc-j6pu10-0"
@@ -36,7 +36,7 @@ const sizeStyles = _ref2 => {
36
36
  };
37
37
  const StyledOptionSelectionIcon = styled(StyledBaseIcon).attrs({
38
38
  'data-garden-id': COMPONENT_ID,
39
- 'data-garden-version': '9.6.0'
39
+ 'data-garden-version': '9.7.1'
40
40
  }).withConfig({
41
41
  displayName: "StyledOptionSelectionIcon",
42
42
  componentId: "sc-12wj24m-0"
@@ -46,7 +46,7 @@ const sizeStyles = props => {
46
46
  };
47
47
  const StyledOptionTypeIcon = styled(StyledBaseIcon).attrs({
48
48
  'data-garden-id': COMPONENT_ID,
49
- 'data-garden-version': '9.6.0'
49
+ 'data-garden-version': '9.7.1'
50
50
  }).withConfig({
51
51
  displayName: "StyledOptionTypeIcon",
52
52
  componentId: "sc-xpink2-0"
@@ -12,7 +12,7 @@ import { Tag } from '@zendeskgarden/react-tags';
12
12
  const COMPONENT_ID = 'dropdowns.combobox.tag';
13
13
  const StyledTag = styled(Tag).attrs({
14
14
  'data-garden-id': COMPONENT_ID,
15
- 'data-garden-version': '9.6.0'
15
+ 'data-garden-version': '9.7.1'
16
16
  }).withConfig({
17
17
  displayName: "StyledTag",
18
18
  componentId: "sc-1alam0r-0"
@@ -22,7 +22,7 @@ const colorStyles = _ref => {
22
22
  const StyledTagsButton = styled(StyledValue).attrs({
23
23
  as: 'button',
24
24
  'data-garden-id': COMPONENT_ID,
25
- 'data-garden-version': '9.6.0'
25
+ 'data-garden-version': '9.7.1'
26
26
  }).withConfig({
27
27
  displayName: "StyledTagsButton",
28
28
  componentId: "sc-6q5w33-0"
@@ -113,7 +113,7 @@ const sizeStyles = props => {
113
113
  };
114
114
  const StyledTrigger = styled.div.attrs({
115
115
  'data-garden-id': COMPONENT_ID,
116
- 'data-garden-version': '9.6.0'
116
+ 'data-garden-version': '9.7.1'
117
117
  }).withConfig({
118
118
  displayName: "StyledTrigger",
119
119
  componentId: "sc-116nftk-0"
@@ -22,7 +22,7 @@ const colorStyles = _ref => {
22
22
  };
23
23
  const StyledValue = styled.div.attrs({
24
24
  'data-garden-id': COMPONENT_ID,
25
- 'data-garden-version': '9.6.0'
25
+ 'data-garden-version': '9.7.1'
26
26
  }).withConfig({
27
27
  displayName: "StyledValue",
28
28
  componentId: "sc-t719sx-0"
@@ -11,7 +11,7 @@ import { StyledFloatingListbox } from '../combobox/StyledFloatingListbox.js';
11
11
  const COMPONENT_ID = 'dropdowns.menu.floating';
12
12
  const StyledFloatingMenu = styled(StyledFloatingListbox).attrs({
13
13
  'data-garden-id': COMPONENT_ID,
14
- 'data-garden-version': '9.6.0'
14
+ 'data-garden-version': '9.7.1'
15
15
  }).withConfig({
16
16
  displayName: "StyledFloatingMenu",
17
17
  componentId: "sc-1rc7ahb-0"
@@ -11,7 +11,7 @@ import { StyledOption } from '../combobox/StyledOption.js';
11
11
  const COMPONENT_ID = 'dropdowns.menu.item';
12
12
  const StyledItem = styled(StyledOption).attrs({
13
13
  'data-garden-id': COMPONENT_ID,
14
- 'data-garden-version': '9.6.0'
14
+ 'data-garden-version': '9.7.1'
15
15
  }).withConfig({
16
16
  displayName: "StyledItem",
17
17
  componentId: "sc-1jp99dq-0"
@@ -0,0 +1,22 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import styled from 'styled-components';
8
+ import { componentStyles } from '@zendeskgarden/react-theming';
9
+ import { StyledItemTypeIcon } from './StyledItemTypeIcon.js';
10
+ import { StyledOption } from '../combobox/StyledOption.js';
11
+
12
+ const COMPONENT_ID = 'dropdowns.menu.item_anchor';
13
+ const StyledItemAnchor = styled(StyledOption).attrs({
14
+ 'data-garden-id': COMPONENT_ID,
15
+ 'data-garden-version': '9.7.1',
16
+ as: 'a'
17
+ }).withConfig({
18
+ displayName: "StyledItemAnchor",
19
+ componentId: "sc-b75oa4-0"
20
+ })(["text-decoration:none;color:unset;&[aria-current='page'] > ", "{opacity:1;}", ";"], StyledItemTypeIcon, componentStyles);
21
+
22
+ export { StyledItemAnchor };
@@ -11,7 +11,7 @@ import { StyledOptionContent } from '../combobox/StyledOptionContent.js';
11
11
  const COMPONENT_ID = 'dropdowns.menu.item.content';
12
12
  const StyledItemContent = styled(StyledOptionContent).attrs({
13
13
  'data-garden-id': COMPONENT_ID,
14
- 'data-garden-version': '9.6.0'
14
+ 'data-garden-version': '9.7.1'
15
15
  }).withConfig({
16
16
  displayName: "StyledItemContent",
17
17
  componentId: "sc-1opglsb-0"
@@ -11,7 +11,7 @@ import { StyledOptGroup } from '../combobox/StyledOptGroup.js';
11
11
  const COMPONENT_ID = 'dropdowns.menu.item_group';
12
12
  const StyledItemGroup = styled(StyledOptGroup).attrs({
13
13
  'data-garden-id': COMPONENT_ID,
14
- 'data-garden-version': '9.6.0'
14
+ 'data-garden-version': '9.7.1'
15
15
  }).withConfig({
16
16
  displayName: "StyledItemGroup",
17
17
  componentId: "sc-1umk3cg-0"
@@ -11,7 +11,7 @@ import { StyledOptionIcon } from '../combobox/StyledOptionIcon.js';
11
11
  const COMPONENT_ID = 'dropdowns.menu.item.icon';
12
12
  const StyledItemIcon = styled(StyledOptionIcon).attrs({
13
13
  'data-garden-id': COMPONENT_ID,
14
- 'data-garden-version': '9.6.0'
14
+ 'data-garden-version': '9.7.1'
15
15
  }).withConfig({
16
16
  displayName: "StyledItemIcon",
17
17
  componentId: "sc-w9orqb-0"
@@ -11,7 +11,7 @@ import { StyledOptionMeta } from '../combobox/StyledOptionMeta.js';
11
11
  const COMPONENT_ID = 'dropdowns.menu.item.meta';
12
12
  const StyledItemMeta = styled(StyledOptionMeta).attrs({
13
13
  'data-garden-id': COMPONENT_ID,
14
- 'data-garden-version': '9.6.0'
14
+ 'data-garden-version': '9.7.1'
15
15
  }).withConfig({
16
16
  displayName: "StyledItemMeta",
17
17
  componentId: "sc-1unw3x1-0"
@@ -12,7 +12,7 @@ import { StyledItem } from './StyledItem.js';
12
12
  const COMPONENT_ID = 'dropdowns.menu.item.type_icon';
13
13
  const StyledItemTypeIcon = styled(StyledOptionTypeIcon).attrs({
14
14
  'data-garden-id': COMPONENT_ID,
15
- 'data-garden-version': '9.6.0'
15
+ 'data-garden-version': '9.7.1'
16
16
  }).withConfig({
17
17
  displayName: "StyledItemTypeIcon",
18
18
  componentId: "sc-1pll3nu-0"