@zendeskgarden/react-dropdowns 9.0.0-next.9 → 9.1.0

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 (93) hide show
  1. package/dist/esm/elements/combobox/Combobox.js +47 -48
  2. package/dist/esm/elements/combobox/Field.js +0 -1
  3. package/dist/esm/elements/combobox/Hint.js +1 -2
  4. package/dist/esm/elements/combobox/Label.js +1 -2
  5. package/dist/esm/elements/combobox/Listbox.js +7 -8
  6. package/dist/esm/elements/combobox/Message.js +1 -2
  7. package/dist/esm/elements/combobox/OptGroup.js +5 -6
  8. package/dist/esm/elements/combobox/Option.js +9 -6
  9. package/dist/esm/elements/combobox/OptionMeta.js +1 -2
  10. package/dist/esm/elements/combobox/Tag.js +0 -1
  11. package/dist/esm/elements/combobox/utils.js +1 -1
  12. package/dist/esm/elements/menu/Item.js +11 -10
  13. package/dist/esm/elements/menu/ItemGroup.js +6 -6
  14. package/dist/esm/elements/menu/ItemMeta.js +1 -2
  15. package/dist/esm/elements/menu/Menu.js +9 -36
  16. package/dist/esm/elements/menu/MenuList.js +8 -9
  17. package/dist/esm/elements/menu/Separator.js +0 -1
  18. package/dist/esm/elements/menu/utils.js +1 -1
  19. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/check-lg-stroke.svg.js +1 -1
  20. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js +1 -1
  21. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg.js +1 -1
  22. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg.js +1 -1
  23. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/plus-stroke.svg.js +1 -1
  24. package/dist/esm/views/combobox/StyledCombobox.js +4 -7
  25. package/dist/esm/views/combobox/StyledContainer.js +2 -5
  26. package/dist/esm/views/combobox/StyledField.js +2 -5
  27. package/dist/esm/views/combobox/StyledFloatingListbox.js +5 -8
  28. package/dist/esm/views/combobox/StyledHint.js +2 -5
  29. package/dist/esm/views/combobox/StyledInput.js +13 -10
  30. package/dist/esm/views/combobox/StyledInputGroup.js +2 -5
  31. package/dist/esm/views/combobox/StyledInputIcon.js +26 -10
  32. package/dist/esm/views/combobox/StyledLabel.js +2 -5
  33. package/dist/esm/views/combobox/StyledListbox.js +3 -7
  34. package/dist/esm/views/combobox/StyledListboxSeparator.js +10 -7
  35. package/dist/esm/views/combobox/StyledMessage.js +2 -5
  36. package/dist/esm/views/combobox/StyledOptGroup.js +2 -5
  37. package/dist/esm/views/combobox/StyledOption.js +35 -17
  38. package/dist/esm/views/combobox/StyledOptionContent.js +2 -5
  39. package/dist/esm/views/combobox/StyledOptionIcon.js +25 -6
  40. package/dist/esm/views/combobox/StyledOptionMeta.js +12 -7
  41. package/dist/esm/views/combobox/StyledOptionTypeIcon.js +18 -11
  42. package/dist/esm/views/combobox/StyledTag.js +6 -6
  43. package/dist/esm/views/combobox/StyledTagsButton.js +10 -7
  44. package/dist/esm/views/combobox/StyledTrigger.js +71 -43
  45. package/dist/esm/views/combobox/StyledValue.js +13 -9
  46. package/dist/esm/views/menu/StyledFloatingMenu.js +2 -5
  47. package/dist/esm/views/menu/StyledItem.js +2 -5
  48. package/dist/esm/views/menu/StyledItemContent.js +2 -5
  49. package/dist/esm/views/menu/StyledItemGroup.js +2 -5
  50. package/dist/esm/views/menu/StyledItemIcon.js +2 -5
  51. package/dist/esm/views/menu/StyledItemMeta.js +2 -5
  52. package/dist/esm/views/menu/StyledItemTypeIcon.js +2 -5
  53. package/dist/esm/views/menu/StyledMenu.js +5 -8
  54. package/dist/esm/views/menu/StyledSeparator.js +2 -5
  55. package/dist/index.cjs.js +457 -412
  56. package/dist/typings/context/useComboboxContext.d.ts +12 -13
  57. package/dist/typings/context/useFieldContext.d.ts +6 -6
  58. package/dist/typings/context/useItemContext.d.ts +2 -3
  59. package/dist/typings/context/useItemGroupContext.d.ts +2 -3
  60. package/dist/typings/context/useMenuContext.d.ts +10 -11
  61. package/dist/typings/context/useOptionContext.d.ts +2 -3
  62. package/dist/typings/elements/combobox/Field.d.ts +3 -1
  63. package/dist/typings/elements/combobox/Option.d.ts +3 -1
  64. package/dist/typings/elements/combobox/Tag.d.ts +3 -1
  65. package/dist/typings/elements/combobox/TagAvatar.d.ts +1 -2
  66. package/dist/typings/elements/combobox/utils.d.ts +2 -2
  67. package/dist/typings/elements/menu/Item.d.ts +3 -1
  68. package/dist/typings/elements/menu/utils.d.ts +2 -2
  69. package/dist/typings/types/index.d.ts +2 -0
  70. package/dist/typings/views/combobox/StyledCombobox.d.ts +1 -1
  71. package/dist/typings/views/combobox/StyledFloatingListbox.d.ts +3 -3
  72. package/dist/typings/views/combobox/StyledHint.d.ts +0 -1
  73. package/dist/typings/views/combobox/StyledInput.d.ts +4 -4
  74. package/dist/typings/views/combobox/StyledInputIcon.d.ts +1 -2
  75. package/dist/typings/views/combobox/StyledLabel.d.ts +0 -1
  76. package/dist/typings/views/combobox/StyledListbox.d.ts +3 -3
  77. package/dist/typings/views/combobox/StyledMessage.d.ts +0 -1
  78. package/dist/typings/views/combobox/StyledOptGroup.d.ts +1 -1
  79. package/dist/typings/views/combobox/StyledOption.d.ts +2 -2
  80. package/dist/typings/views/combobox/StyledOptionIcon.d.ts +8 -4
  81. package/dist/typings/views/combobox/StyledOptionMeta.d.ts +1 -1
  82. package/dist/typings/views/combobox/StyledOptionTypeIcon.d.ts +1 -2
  83. package/dist/typings/views/combobox/StyledTag.d.ts +2 -6
  84. package/dist/typings/views/combobox/StyledTagsButton.d.ts +1 -1
  85. package/dist/typings/views/combobox/StyledTrigger.d.ts +9 -9
  86. package/dist/typings/views/combobox/StyledValue.d.ts +7 -7
  87. package/dist/typings/views/index.d.ts +0 -1
  88. package/dist/typings/views/menu/StyledItemIcon.d.ts +2 -3
  89. package/dist/typings/views/menu/StyledItemTypeIcon.d.ts +1 -2
  90. package/dist/typings/views/menu/StyledMenu.d.ts +1 -1
  91. package/package.json +12 -12
  92. package/dist/esm/views/menu/StyledButton.js +0 -23
  93. package/dist/typings/views/menu/StyledButton.d.ts +0 -20
@@ -6,19 +6,29 @@
6
6
  */
7
7
  import styled, { css } from 'styled-components';
8
8
  import { math } from 'polished';
9
- import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
9
+ import { StyledBaseIcon, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
10
10
  import { StyledOption, getMinHeight } from './StyledOption.js';
11
11
 
12
12
  const COMPONENT_ID = 'dropdowns.combobox.option.type_icon';
13
- const colorStyles = props => {
14
- const opacity = props.$type && props.$type !== 'danger' ? 1 : 0;
13
+ const colorStyles = _ref => {
14
+ let {
15
+ theme,
16
+ $type
17
+ } = _ref;
18
+ const opacity = $type && $type !== 'danger' ? 1 : 0;
15
19
  let color;
16
- if (props.$type === 'add' || props.$type === 'danger') {
20
+ if ($type === 'add') {
17
21
  color = 'inherit';
18
- } else if (props.$type === 'header' || props.$type === 'next' || props.$type === 'previous') {
19
- color = getColorV8('neutralHue', 600, props.theme);
22
+ } else if ($type === 'header' || $type === 'next' || $type === 'previous') {
23
+ color = getColor({
24
+ theme,
25
+ variable: 'foreground.subtle'
26
+ });
20
27
  } else {
21
- color = getColorV8('primaryHue', 600, props.theme);
28
+ color = getColor({
29
+ theme,
30
+ variable: 'foreground.primary'
31
+ });
22
32
  }
23
33
  return css(["opacity:", ";color:", ";", "[aria-selected='true'] > &{opacity:1;}", "[aria-disabled='true'] > &{color:inherit;}"], opacity, color, StyledOption, StyledOption);
24
34
  };
@@ -36,13 +46,10 @@ const sizeStyles = props => {
36
46
  };
37
47
  const StyledOptionTypeIcon = styled(StyledBaseIcon).attrs({
38
48
  'data-garden-id': COMPONENT_ID,
39
- 'data-garden-version': '9.0.0-next.9'
49
+ 'data-garden-version': '9.1.0'
40
50
  }).withConfig({
41
51
  displayName: "StyledOptionTypeIcon",
42
52
  componentId: "sc-xpink2-0"
43
53
  })(["position:absolute;transform:", ";transition:opacity 0.1s ease-in-out;", ";", ";", ";"], props => props.theme.rtl && (props.$type === 'next' || props.$type === 'previous') && 'rotate(180deg)', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
44
- StyledOptionTypeIcon.defaultProps = {
45
- theme: DEFAULT_THEME
46
- };
47
54
 
48
55
  export { StyledOptionTypeIcon };
@@ -6,19 +6,19 @@
6
6
  */
7
7
  import styled from 'styled-components';
8
8
  import { hideVisually } from 'polished';
9
- import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
9
+ import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
10
10
  import { Tag } from '@zendeskgarden/react-tags';
11
11
 
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.0.0-next.9'
15
+ 'data-garden-version': '9.1.0'
16
16
  }).withConfig({
17
17
  displayName: "StyledTag",
18
18
  componentId: "sc-1alam0r-0"
19
- })(["&[aria-disabled='true']{color:", ";}&[hidden]{display:revert;", "}", ";"], props => props.hue ? undefined : getColorV8('neutralHue', 400, props.theme), hideVisually(), props => retrieveComponentStyles(COMPONENT_ID, props));
20
- StyledTag.defaultProps = {
21
- theme: DEFAULT_THEME
22
- };
19
+ })(["&[aria-disabled='true']{color:", ";}&[hidden]{display:revert;", "}", ";"], props => props.hue ? undefined : getColor({
20
+ theme: props.theme,
21
+ variable: 'foreground.disabled'
22
+ }), hideVisually(), props => retrieveComponentStyles(COMPONENT_ID, props));
23
23
 
24
24
  export { StyledTag };
@@ -5,24 +5,27 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import styled, { css } from 'styled-components';
8
- import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
8
+ import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
9
9
  import { StyledValue } from './StyledValue.js';
10
10
 
11
11
  const COMPONENT_ID = 'dropdowns.combobox.tags_button';
12
- const colorStyles = props => {
13
- const color = getColorV8('primaryHue', 600, props.theme);
12
+ const colorStyles = _ref => {
13
+ let {
14
+ theme
15
+ } = _ref;
16
+ const color = getColor({
17
+ theme,
18
+ variable: 'foreground.primary'
19
+ });
14
20
  return css(["color:", ";&:disabled{color:inherit;}"], color);
15
21
  };
16
22
  const StyledTagsButton = styled(StyledValue).attrs({
17
23
  as: 'button',
18
24
  'data-garden-id': COMPONENT_ID,
19
- 'data-garden-version': '9.0.0-next.9'
25
+ 'data-garden-version': '9.1.0'
20
26
  }).withConfig({
21
27
  displayName: "StyledTagsButton",
22
28
  componentId: "sc-6q5w33-0"
23
29
  })(["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, props => retrieveComponentStyles(COMPONENT_ID, props));
24
- StyledTagsButton.defaultProps = {
25
- theme: DEFAULT_THEME
26
- };
27
30
 
28
31
  export { StyledTagsButton };
@@ -6,66 +6,97 @@
6
6
  */
7
7
  import styled, { css } from 'styled-components';
8
8
  import { math } from 'polished';
9
- import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles } from '@zendeskgarden/react-theming';
9
+ import { retrieveComponentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
10
10
  import { getHeight } from './StyledInput.js';
11
11
 
12
12
  const COMPONENT_ID = 'dropdowns.combobox.trigger';
13
- const colorStyles = props => {
14
- const SHADE = 600;
15
- let hue = 'neutralHue';
16
- if (props.validation === 'success') {
17
- hue = 'successHue';
18
- } else if (props.validation === 'warning') {
19
- hue = 'warningHue';
20
- } else if (props.validation === 'error') {
21
- hue = 'dangerHue';
22
- }
23
- const backgroundColor = props.isBare ? 'transparent' : getColorV8('background', 600 , props.theme);
13
+ const colorStyles = _ref => {
14
+ let {
15
+ theme,
16
+ $validation,
17
+ $isBare,
18
+ $isLabelHovered,
19
+ $focusInset
20
+ } = _ref;
21
+ const foregroundColor = getColor({
22
+ theme,
23
+ variable: 'foreground.default'
24
+ });
25
+ const backgroundColor = $isBare ? 'transparent' : getColor({
26
+ theme,
27
+ variable: 'background.default'
28
+ });
24
29
  let borderColor;
30
+ let borderVariable;
25
31
  let hoverBorderColor;
26
32
  let focusBorderColor;
27
- let focusShade;
28
- if (props.validation) {
29
- borderColor = getColorV8(hue, SHADE, props.theme);
30
- hoverBorderColor = borderColor;
31
- if (props.validation === 'warning') {
32
- focusBorderColor = getColorV8(hue, SHADE + 100, props.theme);
33
- focusShade = SHADE + 100;
34
- } else {
35
- focusBorderColor = borderColor;
33
+ if ($validation) {
34
+ if ($validation === 'success') {
35
+ borderVariable = 'border.successEmphasis';
36
+ } else if ($validation === 'warning') {
37
+ borderVariable = 'border.warningEmphasis';
38
+ } else if ($validation === 'error') {
39
+ borderVariable = 'border.dangerEmphasis';
36
40
  }
41
+ borderColor = getColor({
42
+ theme,
43
+ variable: borderVariable
44
+ });
45
+ hoverBorderColor = borderColor;
46
+ focusBorderColor = borderColor;
37
47
  } else {
38
- borderColor = getColorV8('neutralHue', SHADE - 300, props.theme);
39
- hoverBorderColor = getColorV8('primaryHue', SHADE, props.theme);
48
+ borderColor = getColor({
49
+ theme,
50
+ variable: 'border.default',
51
+ dark: {
52
+ offset: -100
53
+ },
54
+ light: {
55
+ offset: 100
56
+ }
57
+ });
58
+ borderVariable = 'border.primaryEmphasis';
59
+ hoverBorderColor = getColor({
60
+ theme,
61
+ variable: borderVariable
62
+ });
40
63
  focusBorderColor = hoverBorderColor;
41
64
  }
42
- const disabledBackgroundColor = props.isBare ? undefined : getColorV8('neutralHue', SHADE - 500, props.theme);
43
- const disabledBorderColor = getColorV8('neutralHue', SHADE - 400, props.theme);
44
- const disabledForegroundColor = getColorV8('neutralHue', SHADE - 200, props.theme);
65
+ const disabledBackgroundColor = $isBare ? undefined : getColor({
66
+ theme,
67
+ variable: 'background.disabled'
68
+ });
69
+ const disabledBorderColor = getColor({
70
+ theme,
71
+ variable: 'border.disabled'
72
+ });
73
+ const disabledForegroundColor = getColor({
74
+ theme,
75
+ variable: 'foreground.disabled'
76
+ });
45
77
  const focusSelector = `
46
78
  &:focus-within:not([aria-disabled='true']),
47
79
  &:focus-visible
48
80
  `;
49
- return css(["border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";}", " &[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], props.isLabelHovered ? hoverBorderColor : borderColor, backgroundColor, getColorV8('foreground', 600 , props.theme), hoverBorderColor, focusStyles({
50
- theme: props.theme,
51
- inset: props.focusInset,
81
+ return css(["color-scheme:only ", ";border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";}", " &[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], theme.colors.base, $isLabelHovered ? hoverBorderColor : borderColor, backgroundColor, foregroundColor, hoverBorderColor, focusStyles({
82
+ theme,
83
+ inset: $focusInset,
52
84
  color: {
53
- hue: focusBorderColor,
54
- shade: focusShade
85
+ variable: borderVariable
55
86
  },
56
87
  selector: focusSelector,
57
88
  styles: {
58
89
  borderColor: focusBorderColor
59
90
  },
60
- condition: !props.isBare
91
+ condition: !$isBare
61
92
  }), disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
62
93
  };
63
94
  const sizeStyles = props => {
64
95
  const inputHeight = getHeight(props);
65
96
  let minHeight;
66
97
  let horizontalPadding;
67
- if (props.isBare) {
68
- if (props.isMultiselectable) {
98
+ if (props.$isBare) {
99
+ if (props.$isMultiselectable) {
69
100
  minHeight = math(`${props.theme.shadowWidths.sm} * 2 + ${inputHeight}`);
70
101
  horizontalPadding = props.theme.shadowWidths.sm;
71
102
  } else {
@@ -73,22 +104,19 @@ const sizeStyles = props => {
73
104
  horizontalPadding = '0';
74
105
  }
75
106
  } else {
76
- minHeight = `${props.theme.space.base * (props.isCompact ? 3 : 2) + inputHeight}px`;
107
+ minHeight = `${props.theme.space.base * (props.$isCompact ? 3 : 2) + inputHeight}px`;
77
108
  horizontalPadding = `${props.theme.space.base * 3}px`;
78
109
  }
79
- const maxHeight = props.maxHeight || minHeight;
80
- const verticalPadding = math(`(${minHeight} - ${inputHeight} - (${props.isBare ? 0 : props.theme.borderWidths.sm} * 2)) / 2`);
81
- return css(["padding:", " ", ";min-height:", ";max-height:", ";font-size:", ";"], verticalPadding, horizontalPadding, minHeight, maxHeight, props.theme.fontSizes.md);
110
+ const $maxHeight = props.$maxHeight || minHeight;
111
+ const verticalPadding = math(`(${minHeight} - ${inputHeight} - (${props.$isBare ? 0 : props.theme.borderWidths.sm} * 2)) / 2`);
112
+ return css(["padding:", " ", ";min-height:", ";max-height:", ";font-size:", ";"], verticalPadding, horizontalPadding, minHeight, $maxHeight, props.theme.fontSizes.md);
82
113
  };
83
114
  const StyledTrigger = styled.div.attrs({
84
115
  'data-garden-id': COMPONENT_ID,
85
- 'data-garden-version': '9.0.0-next.9'
116
+ 'data-garden-version': '9.1.0'
86
117
  }).withConfig({
87
118
  displayName: "StyledTrigger",
88
119
  componentId: "sc-116nftk-0"
89
- })(["overflow-y:auto;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 ? 'none' : props.theme.borders.sm, props => props.isBare ? '0' : props.theme.borderRadii.md, props => !props.isAutocomplete && props.isEditable ? 'text' : 'pointer', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
90
- StyledTrigger.defaultProps = {
91
- theme: DEFAULT_THEME
92
- };
120
+ })(["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, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
93
121
 
94
122
  export { StyledTrigger };
@@ -5,28 +5,32 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import styled, { css } from 'styled-components';
8
- import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
8
+ import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
9
9
  import { sizeStyles } from './StyledInput.js';
10
10
 
11
11
  const COMPONENT_ID = 'dropdowns.combobox.value';
12
- const colorStyles = props => {
13
- const foregroundColor = props.isPlaceholder && getColorV8('neutralHue', 400, props.theme);
12
+ const colorStyles = _ref => {
13
+ let {
14
+ theme,
15
+ $isPlaceholder
16
+ } = _ref;
17
+ const foregroundColor = $isPlaceholder && getColor({
18
+ theme,
19
+ variable: 'foreground.disabled'
20
+ });
14
21
  return css(["color:", ";"], foregroundColor);
15
22
  };
16
23
  const StyledValue = styled.div.attrs({
17
24
  'data-garden-id': COMPONENT_ID,
18
- 'data-garden-version': '9.0.0-next.9'
25
+ 'data-garden-version': '9.1.0'
19
26
  }).withConfig({
20
27
  displayName: "StyledValue",
21
28
  componentId: "sc-t719sx-0"
22
29
  })(["flex-basis:0;flex-grow:1;cursor:", ";overflow:hidden;text-overflow:ellipsis;white-space:pre;user-select:none;", ";", ";&[hidden]{display:none;}", ";"], props => {
23
- if (props.isDisabled) {
30
+ if (props.$isDisabled) {
24
31
  return 'default';
25
32
  }
26
- return props.isEditable && !props.isAutocomplete ? 'text' : 'pointer';
33
+ return props.$isEditable && !props.$isAutocomplete ? 'text' : 'pointer';
27
34
  }, sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
28
- StyledValue.defaultProps = {
29
- theme: DEFAULT_THEME
30
- };
31
35
 
32
36
  export { StyledValue };
@@ -5,19 +5,16 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import styled from 'styled-components';
8
- import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
8
+ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
9
9
  import { StyledFloatingListbox } from '../combobox/StyledFloatingListbox.js';
10
10
 
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.0.0-next.9'
14
+ 'data-garden-version': '9.1.0'
15
15
  }).withConfig({
16
16
  displayName: "StyledFloatingMenu",
17
17
  componentId: "sc-1rc7ahb-0"
18
18
  })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
19
- StyledFloatingMenu.defaultProps = {
20
- theme: DEFAULT_THEME
21
- };
22
19
 
23
20
  export { StyledFloatingMenu };
@@ -5,19 +5,16 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import styled from 'styled-components';
8
- import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
8
+ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
9
9
  import { StyledOption } from '../combobox/StyledOption.js';
10
10
 
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.0.0-next.9'
14
+ 'data-garden-version': '9.1.0'
15
15
  }).withConfig({
16
16
  displayName: "StyledItem",
17
17
  componentId: "sc-1jp99dq-0"
18
18
  })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
19
- StyledItem.defaultProps = {
20
- theme: DEFAULT_THEME
21
- };
22
19
 
23
20
  export { StyledItem };
@@ -5,19 +5,16 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import styled from 'styled-components';
8
- import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
8
+ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
9
9
  import { StyledOptionContent } from '../combobox/StyledOptionContent.js';
10
10
 
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.0.0-next.9'
14
+ 'data-garden-version': '9.1.0'
15
15
  }).withConfig({
16
16
  displayName: "StyledItemContent",
17
17
  componentId: "sc-1opglsb-0"
18
18
  })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
19
- StyledItemContent.defaultProps = {
20
- theme: DEFAULT_THEME
21
- };
22
19
 
23
20
  export { StyledItemContent };
@@ -5,19 +5,16 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import styled from 'styled-components';
8
- import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
8
+ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
9
9
  import { StyledOptGroup } from '../combobox/StyledOptGroup.js';
10
10
 
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.0.0-next.9'
14
+ 'data-garden-version': '9.1.0'
15
15
  }).withConfig({
16
16
  displayName: "StyledItemGroup",
17
17
  componentId: "sc-1umk3cg-0"
18
18
  })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
19
- StyledItemGroup.defaultProps = {
20
- theme: DEFAULT_THEME
21
- };
22
19
 
23
20
  export { StyledItemGroup };
@@ -5,19 +5,16 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import styled from 'styled-components';
8
- import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
8
+ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
9
9
  import { StyledOptionIcon } from '../combobox/StyledOptionIcon.js';
10
10
 
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.0.0-next.9'
14
+ 'data-garden-version': '9.1.0'
15
15
  }).withConfig({
16
16
  displayName: "StyledItemIcon",
17
17
  componentId: "sc-w9orqb-0"
18
18
  })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
19
- StyledItemIcon.defaultProps = {
20
- theme: DEFAULT_THEME
21
- };
22
19
 
23
20
  export { StyledItemIcon };
@@ -5,19 +5,16 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import styled from 'styled-components';
8
- import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
8
+ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
9
9
  import { StyledOptionMeta } from '../combobox/StyledOptionMeta.js';
10
10
 
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.0.0-next.9'
14
+ 'data-garden-version': '9.1.0'
15
15
  }).withConfig({
16
16
  displayName: "StyledItemMeta",
17
17
  componentId: "sc-1unw3x1-0"
18
18
  })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
19
- StyledItemMeta.defaultProps = {
20
- theme: DEFAULT_THEME
21
- };
22
19
 
23
20
  export { StyledItemMeta };
@@ -5,20 +5,17 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import styled from 'styled-components';
8
- import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
8
+ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
9
9
  import { StyledOptionTypeIcon } from '../combobox/StyledOptionTypeIcon.js';
10
10
  import { StyledItem } from './StyledItem.js';
11
11
 
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.0.0-next.9'
15
+ 'data-garden-version': '9.1.0'
16
16
  }).withConfig({
17
17
  displayName: "StyledItemTypeIcon",
18
18
  componentId: "sc-1pll3nu-0"
19
19
  })(["", "[aria-checked='true'] > &{opacity:1;}", ";"], StyledItem, props => retrieveComponentStyles(COMPONENT_ID, props));
20
- StyledItemTypeIcon.defaultProps = {
21
- theme: DEFAULT_THEME
22
- };
23
20
 
24
21
  export { StyledItemTypeIcon };
@@ -5,23 +5,20 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import styled from 'styled-components';
8
- import { arrowStyles, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
8
+ import { arrowStyles, retrieveComponentStyles } from '@zendeskgarden/react-theming';
9
9
  import { StyledListbox } from '../combobox/StyledListbox.js';
10
10
 
11
11
  const COMPONENT_ID = 'dropdowns.menu';
12
12
  const StyledMenu = styled(StyledListbox).attrs({
13
13
  'data-garden-id': COMPONENT_ID,
14
- 'data-garden-version': '9.0.0-next.9'
14
+ 'data-garden-version': '9.1.0'
15
15
  }).withConfig({
16
16
  displayName: "StyledMenu",
17
17
  componentId: "sc-f77ntu-0"
18
- })(["position:static !important;", ";", ";"], props => props.arrowPosition && arrowStyles(props.arrowPosition, {
19
- size: `${props.theme.space.base * 2}px`,
20
- inset: '2px',
18
+ })(["position:static !important;", ";", ";"], props => props.$arrowPosition && arrowStyles(props.$arrowPosition, {
19
+ size: `${props.theme.space.base * 1.5}px`,
20
+ inset: '1px',
21
21
  animationModifier: '[data-garden-animate-arrow="true"]'
22
22
  }), props => retrieveComponentStyles(COMPONENT_ID, props));
23
- StyledMenu.defaultProps = {
24
- theme: DEFAULT_THEME
25
- };
26
23
 
27
24
  export { StyledMenu };
@@ -5,19 +5,16 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import styled from 'styled-components';
8
- import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
8
+ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
9
9
  import { StyledListboxSeparator } from '../combobox/StyledListboxSeparator.js';
10
10
 
11
11
  const COMPONENT_ID = 'dropdowns.menu.separator';
12
12
  const StyledSeparator = styled(StyledListboxSeparator).attrs({
13
13
  'data-garden-id': COMPONENT_ID,
14
- 'data-garden-version': '9.0.0-next.9'
14
+ 'data-garden-version': '9.1.0'
15
15
  }).withConfig({
16
16
  displayName: "StyledSeparator",
17
17
  componentId: "sc-8kqwen-0"
18
18
  })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
19
- StyledSeparator.defaultProps = {
20
- theme: DEFAULT_THEME
21
- };
22
19
 
23
20
  export { StyledSeparator };