@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.
- package/dist/esm/elements/combobox/Combobox.js +47 -48
- package/dist/esm/elements/combobox/Field.js +0 -1
- package/dist/esm/elements/combobox/Hint.js +1 -2
- package/dist/esm/elements/combobox/Label.js +1 -2
- package/dist/esm/elements/combobox/Listbox.js +7 -8
- package/dist/esm/elements/combobox/Message.js +1 -2
- package/dist/esm/elements/combobox/OptGroup.js +5 -6
- package/dist/esm/elements/combobox/Option.js +9 -6
- package/dist/esm/elements/combobox/OptionMeta.js +1 -2
- package/dist/esm/elements/combobox/Tag.js +0 -1
- package/dist/esm/elements/combobox/utils.js +1 -1
- package/dist/esm/elements/menu/Item.js +11 -10
- package/dist/esm/elements/menu/ItemGroup.js +6 -6
- package/dist/esm/elements/menu/ItemMeta.js +1 -2
- package/dist/esm/elements/menu/Menu.js +9 -36
- package/dist/esm/elements/menu/MenuList.js +8 -9
- package/dist/esm/elements/menu/Separator.js +0 -1
- package/dist/esm/elements/menu/utils.js +1 -1
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/check-lg-stroke.svg.js +1 -1
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js +1 -1
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg.js +1 -1
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg.js +1 -1
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/plus-stroke.svg.js +1 -1
- package/dist/esm/views/combobox/StyledCombobox.js +4 -7
- package/dist/esm/views/combobox/StyledContainer.js +2 -5
- package/dist/esm/views/combobox/StyledField.js +2 -5
- package/dist/esm/views/combobox/StyledFloatingListbox.js +5 -8
- package/dist/esm/views/combobox/StyledHint.js +2 -5
- package/dist/esm/views/combobox/StyledInput.js +13 -10
- package/dist/esm/views/combobox/StyledInputGroup.js +2 -5
- package/dist/esm/views/combobox/StyledInputIcon.js +26 -10
- package/dist/esm/views/combobox/StyledLabel.js +2 -5
- package/dist/esm/views/combobox/StyledListbox.js +3 -7
- package/dist/esm/views/combobox/StyledListboxSeparator.js +10 -7
- package/dist/esm/views/combobox/StyledMessage.js +2 -5
- package/dist/esm/views/combobox/StyledOptGroup.js +2 -5
- package/dist/esm/views/combobox/StyledOption.js +35 -17
- package/dist/esm/views/combobox/StyledOptionContent.js +2 -5
- package/dist/esm/views/combobox/StyledOptionIcon.js +25 -6
- package/dist/esm/views/combobox/StyledOptionMeta.js +12 -7
- package/dist/esm/views/combobox/StyledOptionTypeIcon.js +18 -11
- package/dist/esm/views/combobox/StyledTag.js +6 -6
- package/dist/esm/views/combobox/StyledTagsButton.js +10 -7
- package/dist/esm/views/combobox/StyledTrigger.js +71 -43
- package/dist/esm/views/combobox/StyledValue.js +13 -9
- package/dist/esm/views/menu/StyledFloatingMenu.js +2 -5
- package/dist/esm/views/menu/StyledItem.js +2 -5
- package/dist/esm/views/menu/StyledItemContent.js +2 -5
- package/dist/esm/views/menu/StyledItemGroup.js +2 -5
- package/dist/esm/views/menu/StyledItemIcon.js +2 -5
- package/dist/esm/views/menu/StyledItemMeta.js +2 -5
- package/dist/esm/views/menu/StyledItemTypeIcon.js +2 -5
- package/dist/esm/views/menu/StyledMenu.js +5 -8
- package/dist/esm/views/menu/StyledSeparator.js +2 -5
- package/dist/index.cjs.js +457 -412
- package/dist/typings/context/useComboboxContext.d.ts +12 -13
- package/dist/typings/context/useFieldContext.d.ts +6 -6
- package/dist/typings/context/useItemContext.d.ts +2 -3
- package/dist/typings/context/useItemGroupContext.d.ts +2 -3
- package/dist/typings/context/useMenuContext.d.ts +10 -11
- package/dist/typings/context/useOptionContext.d.ts +2 -3
- package/dist/typings/elements/combobox/Field.d.ts +3 -1
- package/dist/typings/elements/combobox/Option.d.ts +3 -1
- package/dist/typings/elements/combobox/Tag.d.ts +3 -1
- package/dist/typings/elements/combobox/TagAvatar.d.ts +1 -2
- package/dist/typings/elements/combobox/utils.d.ts +2 -2
- package/dist/typings/elements/menu/Item.d.ts +3 -1
- package/dist/typings/elements/menu/utils.d.ts +2 -2
- package/dist/typings/types/index.d.ts +2 -0
- package/dist/typings/views/combobox/StyledCombobox.d.ts +1 -1
- package/dist/typings/views/combobox/StyledFloatingListbox.d.ts +3 -3
- package/dist/typings/views/combobox/StyledHint.d.ts +0 -1
- package/dist/typings/views/combobox/StyledInput.d.ts +4 -4
- package/dist/typings/views/combobox/StyledInputIcon.d.ts +1 -2
- package/dist/typings/views/combobox/StyledLabel.d.ts +0 -1
- package/dist/typings/views/combobox/StyledListbox.d.ts +3 -3
- package/dist/typings/views/combobox/StyledMessage.d.ts +0 -1
- package/dist/typings/views/combobox/StyledOptGroup.d.ts +1 -1
- package/dist/typings/views/combobox/StyledOption.d.ts +2 -2
- package/dist/typings/views/combobox/StyledOptionIcon.d.ts +8 -4
- package/dist/typings/views/combobox/StyledOptionMeta.d.ts +1 -1
- package/dist/typings/views/combobox/StyledOptionTypeIcon.d.ts +1 -2
- package/dist/typings/views/combobox/StyledTag.d.ts +2 -6
- package/dist/typings/views/combobox/StyledTagsButton.d.ts +1 -1
- package/dist/typings/views/combobox/StyledTrigger.d.ts +9 -9
- package/dist/typings/views/combobox/StyledValue.d.ts +7 -7
- package/dist/typings/views/index.d.ts +0 -1
- package/dist/typings/views/menu/StyledItemIcon.d.ts +2 -3
- package/dist/typings/views/menu/StyledItemTypeIcon.d.ts +1 -2
- package/dist/typings/views/menu/StyledMenu.d.ts +1 -1
- package/package.json +12 -12
- package/dist/esm/views/menu/StyledButton.js +0 -23
- 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,
|
|
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 =
|
|
14
|
-
|
|
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 (
|
|
20
|
+
if ($type === 'add') {
|
|
17
21
|
color = 'inherit';
|
|
18
|
-
} else if (
|
|
19
|
-
color =
|
|
22
|
+
} else if ($type === 'header' || $type === 'next' || $type === 'previous') {
|
|
23
|
+
color = getColor({
|
|
24
|
+
theme,
|
|
25
|
+
variable: 'foreground.subtle'
|
|
26
|
+
});
|
|
20
27
|
} else {
|
|
21
|
-
color =
|
|
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.
|
|
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 {
|
|
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.
|
|
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 :
|
|
20
|
-
|
|
21
|
-
|
|
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,
|
|
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 =
|
|
13
|
-
|
|
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.
|
|
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,
|
|
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 =
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
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
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
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 =
|
|
39
|
-
|
|
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 =
|
|
43
|
-
|
|
44
|
-
|
|
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:", ";}"],
|
|
50
|
-
theme
|
|
51
|
-
inset:
|
|
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
|
-
|
|
54
|
-
shade: focusShade
|
|
85
|
+
variable: borderVariable
|
|
55
86
|
},
|
|
56
87
|
selector: focusSelector,
|
|
57
88
|
styles: {
|
|
58
89
|
borderColor: focusBorderColor
|
|
59
90
|
},
|
|
60
|
-
condition:
|
|
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
|
|
68
|
-
if (props
|
|
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
|
|
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
|
|
80
|
-
const verticalPadding = math(`(${minHeight} - ${inputHeight} - (${props
|
|
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.
|
|
116
|
+
'data-garden-version': '9.1.0'
|
|
86
117
|
}).withConfig({
|
|
87
118
|
displayName: "StyledTrigger",
|
|
88
119
|
componentId: "sc-116nftk-0"
|
|
89
|
-
})(["overflow-y:
|
|
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,
|
|
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 =
|
|
13
|
-
|
|
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.
|
|
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
|
|
30
|
+
if (props.$isDisabled) {
|
|
24
31
|
return 'default';
|
|
25
32
|
}
|
|
26
|
-
return props
|
|
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
|
|
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.
|
|
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
|
|
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.
|
|
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
|
|
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.
|
|
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
|
|
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.
|
|
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
|
|
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.
|
|
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
|
|
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.
|
|
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
|
|
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.
|
|
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
|
|
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.
|
|
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
|
|
19
|
-
size: `${props.theme.space.base *
|
|
20
|
-
inset: '
|
|
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
|
|
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.
|
|
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 };
|