@zendeskgarden/react-dropdowns 9.12.3 → 9.12.5
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 +32 -33
- package/dist/esm/elements/combobox/Label.js +6 -7
- package/dist/esm/elements/combobox/Listbox.js +16 -18
- package/dist/esm/elements/combobox/OptGroup.js +9 -10
- package/dist/esm/elements/combobox/Option.js +13 -14
- package/dist/esm/elements/combobox/Tag.js +7 -8
- package/dist/esm/elements/combobox/TagGroup.js +20 -23
- package/dist/esm/elements/menu/Item.js +16 -17
- package/dist/esm/elements/menu/ItemGroup.js +9 -10
- package/dist/esm/elements/menu/Menu.js +18 -19
- package/dist/esm/elements/menu/MenuList.js +19 -21
- package/dist/esm/elements/menu/Separator.js +4 -5
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/check-lg-stroke.svg.js +2 -2
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js +4 -4
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg.js +4 -4
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg.js +4 -4
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/plus-stroke.svg.js +4 -4
- package/dist/esm/views/combobox/StyledCombobox.js +5 -5
- package/dist/esm/views/combobox/StyledContainer.js +3 -3
- package/dist/esm/views/combobox/StyledField.js +3 -3
- package/dist/esm/views/combobox/StyledFloatingListbox.js +3 -3
- package/dist/esm/views/combobox/StyledHint.js +3 -3
- package/dist/esm/views/combobox/StyledInput.js +10 -11
- package/dist/esm/views/combobox/StyledInputGroup.js +5 -5
- package/dist/esm/views/combobox/StyledInputIcon.js +9 -10
- package/dist/esm/views/combobox/StyledLabel.js +3 -3
- package/dist/esm/views/combobox/StyledListbox.js +5 -5
- package/dist/esm/views/combobox/StyledListboxSeparator.js +8 -9
- package/dist/esm/views/combobox/StyledMessage.js +3 -3
- package/dist/esm/views/combobox/StyledOptGroup.js +3 -3
- package/dist/esm/views/combobox/StyledOption.js +10 -11
- package/dist/esm/views/combobox/StyledOptionContent.js +3 -3
- package/dist/esm/views/combobox/StyledOptionIcon.js +10 -11
- package/dist/esm/views/combobox/StyledOptionMeta.js +9 -10
- package/dist/esm/views/combobox/StyledOptionSelectionIcon.js +11 -13
- package/dist/esm/views/combobox/StyledOptionTypeIcon.js +9 -10
- package/dist/esm/views/combobox/StyledTag.js +3 -3
- package/dist/esm/views/combobox/StyledTagsButton.js +6 -7
- package/dist/esm/views/combobox/StyledTrigger.js +12 -13
- package/dist/esm/views/combobox/StyledValue.js +8 -9
- package/dist/esm/views/menu/StyledFloatingMenu.js +3 -3
- package/dist/esm/views/menu/StyledItem.js +3 -3
- package/dist/esm/views/menu/StyledItemAnchor.js +3 -3
- package/dist/esm/views/menu/StyledItemContent.js +3 -3
- package/dist/esm/views/menu/StyledItemGroup.js +3 -3
- package/dist/esm/views/menu/StyledItemIcon.js +3 -3
- package/dist/esm/views/menu/StyledItemMeta.js +3 -3
- package/dist/esm/views/menu/StyledItemTypeIcon.js +3 -3
- package/dist/esm/views/menu/StyledMenu.js +3 -3
- package/dist/esm/views/menu/StyledSeparator.js +1 -1
- package/dist/index.cjs.js +250 -278
- package/package.json +8 -8
|
@@ -8,10 +8,10 @@ import styled from 'styled-components';
|
|
|
8
8
|
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { Field } from '@zendeskgarden/react-forms';
|
|
10
10
|
|
|
11
|
-
const COMPONENT_ID = 'dropdowns.combobox.hint';
|
|
11
|
+
const COMPONENT_ID$v = 'dropdowns.combobox.hint';
|
|
12
12
|
const StyledHint = styled(Field.Hint).attrs({
|
|
13
|
-
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.12.
|
|
13
|
+
'data-garden-id': COMPONENT_ID$v,
|
|
14
|
+
'data-garden-version': '9.12.5'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledHint",
|
|
17
17
|
componentId: "sc-106qvqx-0"
|
|
@@ -6,13 +6,12 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { hideVisually, math } from 'polished';
|
|
9
|
-
import { componentStyles,
|
|
9
|
+
import { componentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
|
-
const COMPONENT_ID = 'dropdowns.combobox.input';
|
|
12
|
-
const colorStyles =
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
} = _ref;
|
|
11
|
+
const COMPONENT_ID$p = 'dropdowns.combobox.input';
|
|
12
|
+
const colorStyles$a = ({
|
|
13
|
+
theme
|
|
14
|
+
}) => {
|
|
16
15
|
const placeholderColor = getColor({
|
|
17
16
|
theme,
|
|
18
17
|
variable: 'foreground.disabled'
|
|
@@ -25,7 +24,7 @@ const getHeight = props => {
|
|
|
25
24
|
}
|
|
26
25
|
return props.theme.space.base * (props.$isCompact ? 5 : 8);
|
|
27
26
|
};
|
|
28
|
-
const sizeStyles = props => {
|
|
27
|
+
const sizeStyles$a = props => {
|
|
29
28
|
const height = props.theme.space.base * 5;
|
|
30
29
|
const fontSize = props.theme.fontSizes.md;
|
|
31
30
|
const lineHeight = getLineHeight(height, fontSize);
|
|
@@ -34,11 +33,11 @@ const sizeStyles = props => {
|
|
|
34
33
|
return css(["min-width:", ";height:", "px;line-height:", ";font-size:", ";&&{margin-top:", ";margin-bottom:", ";}"], minWidth, height, lineHeight, fontSize, margin, margin);
|
|
35
34
|
};
|
|
36
35
|
const StyledInput = styled.input.attrs({
|
|
37
|
-
'data-garden-id': COMPONENT_ID,
|
|
38
|
-
'data-garden-version': '9.12.
|
|
36
|
+
'data-garden-id': COMPONENT_ID$p,
|
|
37
|
+
'data-garden-version': '9.12.5'
|
|
39
38
|
}).withConfig({
|
|
40
39
|
displayName: "StyledInput",
|
|
41
40
|
componentId: "sc-1lkqdg-0"
|
|
42
|
-
})(["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, colorStyles, props => props.$isEditable && hideVisually(), componentStyles);
|
|
41
|
+
})(["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 && hideVisually(), componentStyles);
|
|
43
42
|
|
|
44
|
-
export { StyledInput, getHeight, sizeStyles };
|
|
43
|
+
export { StyledInput, getHeight, sizeStyles$a as sizeStyles };
|
|
@@ -7,17 +7,17 @@
|
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
|
-
const COMPONENT_ID = 'dropdowns.combobox.input_group';
|
|
11
|
-
const sizeStyles = props => {
|
|
10
|
+
const COMPONENT_ID$o = 'dropdowns.combobox.input_group';
|
|
11
|
+
const sizeStyles$9 = props => {
|
|
12
12
|
const margin = props.theme.shadowWidths.sm;
|
|
13
13
|
return css(["margin:-", ";min-width:0;& > *{margin:", ";}"], margin, margin);
|
|
14
14
|
};
|
|
15
15
|
const StyledInputGroup = styled.div.attrs({
|
|
16
|
-
'data-garden-id': COMPONENT_ID,
|
|
17
|
-
'data-garden-version': '9.12.
|
|
16
|
+
'data-garden-id': COMPONENT_ID$o,
|
|
17
|
+
'data-garden-version': '9.12.5'
|
|
18
18
|
}).withConfig({
|
|
19
19
|
displayName: "StyledInputGroup",
|
|
20
20
|
componentId: "sc-yx3q7u-0"
|
|
21
|
-
})(["display:flex;flex-grow:1;flex-wrap:wrap;", ";", ";"], sizeStyles, componentStyles);
|
|
21
|
+
})(["display:flex;flex-grow:1;flex-wrap:wrap;", ";", ";"], sizeStyles$9, componentStyles);
|
|
22
22
|
|
|
23
23
|
export { StyledInputGroup };
|
|
@@ -10,12 +10,11 @@ import { StyledBaseIcon, componentStyles, getColor } from '@zendeskgarden/react-
|
|
|
10
10
|
import { getHeight } from './StyledInput.js';
|
|
11
11
|
import { StyledTrigger } from './StyledTrigger.js';
|
|
12
12
|
|
|
13
|
-
const COMPONENT_ID = 'dropdowns.combobox.input_icon';
|
|
14
|
-
const colorStyles =
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
} = _ref;
|
|
13
|
+
const COMPONENT_ID$m = 'dropdowns.combobox.input_icon';
|
|
14
|
+
const colorStyles$8 = ({
|
|
15
|
+
theme,
|
|
16
|
+
$isLabelHovered
|
|
17
|
+
}) => {
|
|
19
18
|
const options = {
|
|
20
19
|
theme,
|
|
21
20
|
variable: 'foreground.subtle'
|
|
@@ -36,7 +35,7 @@ const colorStyles = _ref => {
|
|
|
36
35
|
});
|
|
37
36
|
return css(["color:", ";", ":hover &&,", ":focus-within &&,", ":focus &&{color:", ";}", "[aria-disabled='true'] &&{color:", ";}"], $isLabelHovered ? focusColor : color, StyledTrigger, StyledTrigger, StyledTrigger, focusColor, StyledTrigger, disabledColor);
|
|
38
37
|
};
|
|
39
|
-
const sizeStyles = props => {
|
|
38
|
+
const sizeStyles$7 = props => {
|
|
40
39
|
const size = props.theme.iconSizes.md;
|
|
41
40
|
const position = math(`(${getHeight(props)} - ${size}) / 2`);
|
|
42
41
|
const margin = `${props.theme.space.base * 2}px`;
|
|
@@ -49,11 +48,11 @@ const sizeStyles = props => {
|
|
|
49
48
|
return css(["top:", ";margin-", ":", ";width:", ";height:", ";"], position, side, margin, size, size);
|
|
50
49
|
};
|
|
51
50
|
const StyledInputIcon = styled(StyledBaseIcon).attrs({
|
|
52
|
-
'data-garden-id': COMPONENT_ID,
|
|
53
|
-
'data-garden-version': '9.12.
|
|
51
|
+
'data-garden-id': COMPONENT_ID$m,
|
|
52
|
+
'data-garden-version': '9.12.5'
|
|
54
53
|
}).withConfig({
|
|
55
54
|
displayName: "StyledInputIcon",
|
|
56
55
|
componentId: "sc-gqbs1s-0"
|
|
57
|
-
})(["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, colorStyles, componentStyles);
|
|
56
|
+
})(["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, componentStyles);
|
|
58
57
|
|
|
59
58
|
export { StyledInputIcon };
|
|
@@ -8,10 +8,10 @@ import styled from 'styled-components';
|
|
|
8
8
|
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { Field } from '@zendeskgarden/react-forms';
|
|
10
10
|
|
|
11
|
-
const COMPONENT_ID = 'dropdowns.combobox.label';
|
|
11
|
+
const COMPONENT_ID$w = 'dropdowns.combobox.label';
|
|
12
12
|
const StyledLabel = styled(Field.Label).attrs({
|
|
13
|
-
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.12.
|
|
13
|
+
'data-garden-id': COMPONENT_ID$w,
|
|
14
|
+
'data-garden-version': '9.12.5'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledLabel",
|
|
17
17
|
componentId: "sc-az6now-0"
|
|
@@ -10,18 +10,18 @@ import { StyledOptionContent } from './StyledOptionContent.js';
|
|
|
10
10
|
import { StyledOptGroup } from './StyledOptGroup.js';
|
|
11
11
|
import { StyledListboxSeparator } from './StyledListboxSeparator.js';
|
|
12
12
|
|
|
13
|
-
const COMPONENT_ID = 'dropdowns.combobox.listbox';
|
|
14
|
-
const sizeStyles = props => {
|
|
13
|
+
const COMPONENT_ID$h = 'dropdowns.combobox.listbox';
|
|
14
|
+
const sizeStyles$4 = props => {
|
|
15
15
|
const padding = props.theme.space.base;
|
|
16
16
|
const $minHeight = props.$minHeight === undefined ? `${getMinHeight(props) + padding * 2}px` : props.$minHeight;
|
|
17
17
|
return css(["min-height:", ";max-height:", ";&&&{padding-top:", "px;padding-bottom:", "px;}"], $minHeight, props.$maxHeight, padding, padding);
|
|
18
18
|
};
|
|
19
19
|
const StyledListbox = styled.ul.attrs({
|
|
20
|
-
'data-garden-id': COMPONENT_ID,
|
|
21
|
-
'data-garden-version': '9.12.
|
|
20
|
+
'data-garden-id': COMPONENT_ID$h,
|
|
21
|
+
'data-garden-version': '9.12.5'
|
|
22
22
|
}).withConfig({
|
|
23
23
|
displayName: "StyledListbox",
|
|
24
24
|
componentId: "sc-1k13ba7-0"
|
|
25
|
-
})(["overflow-y:auto;list-style-type:none;", ";&&&{display:block;}", ":first-child ", " ", ":first-child ", "[role='none']:first-child{display:none;}"], sizeStyles, StyledOption, StyledOptionContent, StyledOptGroup, StyledListboxSeparator);
|
|
25
|
+
})(["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);
|
|
26
26
|
|
|
27
27
|
export { StyledListbox };
|
|
@@ -7,28 +7,27 @@
|
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { componentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
|
-
const COMPONENT_ID = 'dropdowns.combobox.separator';
|
|
11
|
-
const colorStyles =
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
} = _ref;
|
|
10
|
+
const COMPONENT_ID$i = 'dropdowns.combobox.separator';
|
|
11
|
+
const colorStyles$6 = ({
|
|
12
|
+
theme
|
|
13
|
+
}) => {
|
|
15
14
|
const backgroundColor = getColor({
|
|
16
15
|
theme,
|
|
17
16
|
variable: 'border.subtle'
|
|
18
17
|
});
|
|
19
18
|
return css(["background-color:", ";"], backgroundColor);
|
|
20
19
|
};
|
|
21
|
-
const sizeStyles = props => {
|
|
20
|
+
const sizeStyles$5 = props => {
|
|
22
21
|
const margin = `${props.theme.space.base}px`;
|
|
23
22
|
const height = props.theme.borderWidths.sm;
|
|
24
23
|
return css(["margin:", " 0;height:", ";"], margin, height);
|
|
25
24
|
};
|
|
26
25
|
const StyledListboxSeparator = styled.li.attrs({
|
|
27
|
-
'data-garden-id': COMPONENT_ID,
|
|
28
|
-
'data-garden-version': '9.12.
|
|
26
|
+
'data-garden-id': COMPONENT_ID$i,
|
|
27
|
+
'data-garden-version': '9.12.5'
|
|
29
28
|
}).withConfig({
|
|
30
29
|
displayName: "StyledListboxSeparator",
|
|
31
30
|
componentId: "sc-1p6toh2-0"
|
|
32
|
-
})(["cursor:default;", ";", ";", ";"], sizeStyles, colorStyles, componentStyles);
|
|
31
|
+
})(["cursor:default;", ";", ";", ";"], sizeStyles$5, colorStyles$6, componentStyles);
|
|
33
32
|
|
|
34
33
|
export { StyledListboxSeparator };
|
|
@@ -8,10 +8,10 @@ import styled from 'styled-components';
|
|
|
8
8
|
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { Field } from '@zendeskgarden/react-forms';
|
|
10
10
|
|
|
11
|
-
const COMPONENT_ID = 'dropdowns.combobox.message';
|
|
11
|
+
const COMPONENT_ID$u = 'dropdowns.combobox.message';
|
|
12
12
|
const StyledMessage = styled(Field.Message).attrs({
|
|
13
|
-
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.12.
|
|
13
|
+
'data-garden-id': COMPONENT_ID$u,
|
|
14
|
+
'data-garden-version': '9.12.5'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledMessage",
|
|
17
17
|
componentId: "sc-jux8m5-0"
|
|
@@ -7,10 +7,10 @@
|
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
|
-
const COMPONENT_ID = 'dropdowns.combobox.optgroup';
|
|
10
|
+
const COMPONENT_ID$j = 'dropdowns.combobox.optgroup';
|
|
11
11
|
const StyledOptGroup = styled.ul.attrs({
|
|
12
|
-
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.12.
|
|
12
|
+
'data-garden-id': COMPONENT_ID$j,
|
|
13
|
+
'data-garden-version': '9.12.5'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledOptGroup",
|
|
16
16
|
componentId: "sc-1kavqsx-0"
|
|
@@ -8,13 +8,12 @@ import styled, { css } from 'styled-components';
|
|
|
8
8
|
import { hideVisually, math } from 'polished';
|
|
9
9
|
import { componentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
|
-
const COMPONENT_ID = 'dropdowns.combobox.option';
|
|
12
|
-
const colorStyles =
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
} = _ref;
|
|
11
|
+
const COMPONENT_ID$l = 'dropdowns.combobox.option';
|
|
12
|
+
const colorStyles$7 = ({
|
|
13
|
+
theme,
|
|
14
|
+
$isActive,
|
|
15
|
+
$type
|
|
16
|
+
}) => {
|
|
18
17
|
let backgroundColor;
|
|
19
18
|
let boxShadow;
|
|
20
19
|
if ($isActive && $type !== 'group' && $type !== 'header') {
|
|
@@ -48,7 +47,7 @@ const colorStyles = _ref => {
|
|
|
48
47
|
return css(["box-shadow:", ";background-color:", ";color:", ";&[aria-disabled='true']{background-color:transparent;color:", ";}"], boxShadow, backgroundColor, foregroundColor, disabledForegroundColor);
|
|
49
48
|
};
|
|
50
49
|
const getMinHeight = props => props.theme.space.base * (props.$isCompact ? 7 : 9);
|
|
51
|
-
const sizeStyles = props => {
|
|
50
|
+
const sizeStyles$6 = props => {
|
|
52
51
|
const lineHeight = props.theme.lineHeights.md;
|
|
53
52
|
const minHeight = getMinHeight(props);
|
|
54
53
|
const paddingHorizontal = props.$type === 'group' ? 0 : `${props.theme.space.base * 9}px`;
|
|
@@ -56,11 +55,11 @@ const sizeStyles = props => {
|
|
|
56
55
|
return css(["box-sizing:border-box;padding:", " ", ";min-height:", "px;line-height:", ";"], paddingVertical, paddingHorizontal, minHeight, lineHeight);
|
|
57
56
|
};
|
|
58
57
|
const StyledOption = styled.li.attrs({
|
|
59
|
-
'data-garden-id': COMPONENT_ID,
|
|
60
|
-
'data-garden-version': '9.12.
|
|
58
|
+
'data-garden-id': COMPONENT_ID$l,
|
|
59
|
+
'data-garden-version': '9.12.5'
|
|
61
60
|
}).withConfig({
|
|
62
61
|
displayName: "StyledOption",
|
|
63
62
|
componentId: "sc-jl4wn6-0"
|
|
64
|
-
})(["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, colorStyles, hideVisually(), componentStyles);
|
|
63
|
+
})(["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, hideVisually(), componentStyles);
|
|
65
64
|
|
|
66
65
|
export { StyledOption, getMinHeight };
|
|
@@ -7,10 +7,10 @@
|
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
|
-
const COMPONENT_ID = 'dropdowns.combobox.option.content';
|
|
10
|
+
const COMPONENT_ID$k = 'dropdowns.combobox.option.content';
|
|
11
11
|
const StyledOptionContent = styled.div.attrs({
|
|
12
|
-
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.12.
|
|
12
|
+
'data-garden-id': COMPONENT_ID$k,
|
|
13
|
+
'data-garden-version': '9.12.5'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledOptionContent",
|
|
16
16
|
componentId: "sc-121ujpu-0"
|
|
@@ -8,13 +8,12 @@ import styled, { css } from 'styled-components';
|
|
|
8
8
|
import { math } from 'polished';
|
|
9
9
|
import { StyledBaseIcon, componentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
|
-
const COMPONENT_ID = 'dropdowns.combobox.option.icon';
|
|
12
|
-
const colorStyles =
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
} = _ref;
|
|
11
|
+
const COMPONENT_ID$g = 'dropdowns.combobox.option.icon';
|
|
12
|
+
const colorStyles$5 = ({
|
|
13
|
+
theme,
|
|
14
|
+
$isDisabled,
|
|
15
|
+
$type
|
|
16
|
+
}) => {
|
|
18
17
|
let variable;
|
|
19
18
|
if ($isDisabled) {
|
|
20
19
|
variable = 'foreground.disabled';
|
|
@@ -31,18 +30,18 @@ const colorStyles = _ref => {
|
|
|
31
30
|
});
|
|
32
31
|
return css(["color:", ";"], color);
|
|
33
32
|
};
|
|
34
|
-
const sizeStyles = props => {
|
|
33
|
+
const sizeStyles$3 = props => {
|
|
35
34
|
const size = props.theme.iconSizes.md;
|
|
36
35
|
const marginTop = math(`(${props.theme.lineHeights.md} - ${size}) / 2`);
|
|
37
36
|
const marginHorizontal = `${props.theme.space.base * 2}px`;
|
|
38
37
|
return css(["margin-top:", ";margin-", ":", ";width:", ";height:", ";"], marginTop, props.theme.rtl ? 'left' : 'right', marginHorizontal, size, size);
|
|
39
38
|
};
|
|
40
39
|
const StyledOptionIcon = styled(StyledBaseIcon).attrs({
|
|
41
|
-
'data-garden-id': COMPONENT_ID,
|
|
42
|
-
'data-garden-version': '9.12.
|
|
40
|
+
'data-garden-id': COMPONENT_ID$g,
|
|
41
|
+
'data-garden-version': '9.12.5'
|
|
43
42
|
}).withConfig({
|
|
44
43
|
displayName: "StyledOptionIcon",
|
|
45
44
|
componentId: "sc-qsab3y-0"
|
|
46
|
-
})(["flex-shrink:0;", ";", ";", ";"], sizeStyles, colorStyles, componentStyles);
|
|
45
|
+
})(["flex-shrink:0;", ";", ";", ";"], sizeStyles$3, colorStyles$5, componentStyles);
|
|
47
46
|
|
|
48
47
|
export { StyledOptionIcon };
|
|
@@ -7,12 +7,11 @@
|
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { componentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
|
-
const COMPONENT_ID = 'dropdowns.combobox.option.meta';
|
|
11
|
-
const colorStyles =
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
} = _ref;
|
|
10
|
+
const COMPONENT_ID$f = 'dropdowns.combobox.option.meta';
|
|
11
|
+
const colorStyles$4 = ({
|
|
12
|
+
theme,
|
|
13
|
+
$isDisabled
|
|
14
|
+
}) => {
|
|
16
15
|
const variable = $isDisabled ? 'foreground.disabled' : 'foreground.subtle';
|
|
17
16
|
const color = getColor({
|
|
18
17
|
theme,
|
|
@@ -20,17 +19,17 @@ const colorStyles = _ref => {
|
|
|
20
19
|
});
|
|
21
20
|
return css(["color:", ";"], color);
|
|
22
21
|
};
|
|
23
|
-
const sizeStyles = props => {
|
|
22
|
+
const sizeStyles$2 = props => {
|
|
24
23
|
const lineHeight = props.theme.lineHeights.sm;
|
|
25
24
|
const fontSize = props.theme.fontSizes.sm;
|
|
26
25
|
return css(["line-height:", ";font-size:", ";"], lineHeight, fontSize);
|
|
27
26
|
};
|
|
28
27
|
const StyledOptionMeta = styled.div.attrs({
|
|
29
|
-
'data-garden-id': COMPONENT_ID,
|
|
30
|
-
'data-garden-version': '9.12.
|
|
28
|
+
'data-garden-id': COMPONENT_ID$f,
|
|
29
|
+
'data-garden-version': '9.12.5'
|
|
31
30
|
}).withConfig({
|
|
32
31
|
displayName: "StyledOptionMeta",
|
|
33
32
|
componentId: "sc-j6pu10-0"
|
|
34
|
-
})(["transition:color 0.25s ease-in-out;font-weight:", ";", ";", ";", ";"], props => props.theme.fontWeights.regular, sizeStyles, colorStyles, componentStyles);
|
|
33
|
+
})(["transition:color 0.25s ease-in-out;font-weight:", ";", ";", ";", ";"], props => props.theme.fontWeights.regular, sizeStyles$2, colorStyles$4, componentStyles);
|
|
35
34
|
|
|
36
35
|
export { StyledOptionMeta };
|
|
@@ -9,22 +9,20 @@ import { math } from 'polished';
|
|
|
9
9
|
import { StyledBaseIcon, componentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { getMinHeight } from './StyledOption.js';
|
|
11
11
|
|
|
12
|
-
const COMPONENT_ID = 'dropdowns.combobox.option.selection_icon';
|
|
13
|
-
const colorStyles =
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
} = _ref;
|
|
12
|
+
const COMPONENT_ID$e = 'dropdowns.combobox.option.selection_icon';
|
|
13
|
+
const colorStyles$3 = ({
|
|
14
|
+
theme
|
|
15
|
+
}) => {
|
|
17
16
|
const color = getColor({
|
|
18
17
|
theme,
|
|
19
18
|
variable: 'foreground.primary'
|
|
20
19
|
});
|
|
21
20
|
return css(["color:", ";"], color);
|
|
22
21
|
};
|
|
23
|
-
const sizeStyles =
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
} = _ref2;
|
|
22
|
+
const sizeStyles$1 = ({
|
|
23
|
+
theme,
|
|
24
|
+
$isCompact
|
|
25
|
+
}) => {
|
|
28
26
|
const size = theme.iconSizes.sm;
|
|
29
27
|
const position = `${theme.space.base * 3.5}px`;
|
|
30
28
|
const top = math(`(${getMinHeight({
|
|
@@ -35,11 +33,11 @@ const sizeStyles = _ref2 => {
|
|
|
35
33
|
return css(["top:", ";", ":", ";width:", ";height:", ";"], top, side, position, size, size);
|
|
36
34
|
};
|
|
37
35
|
const StyledOptionSelectionIcon = styled(StyledBaseIcon).attrs({
|
|
38
|
-
'data-garden-id': COMPONENT_ID,
|
|
39
|
-
'data-garden-version': '9.12.
|
|
36
|
+
'data-garden-id': COMPONENT_ID$e,
|
|
37
|
+
'data-garden-version': '9.12.5'
|
|
40
38
|
}).withConfig({
|
|
41
39
|
displayName: "StyledOptionSelectionIcon",
|
|
42
40
|
componentId: "sc-12wj24m-0"
|
|
43
|
-
})(["position:absolute;", ";", ";", ";"], sizeStyles, colorStyles, componentStyles);
|
|
41
|
+
})(["position:absolute;", ";", ";", ";"], sizeStyles$1, colorStyles$3, componentStyles);
|
|
44
42
|
|
|
45
43
|
export { StyledOptionSelectionIcon };
|
|
@@ -7,14 +7,13 @@
|
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
9
|
import { StyledBaseIcon, componentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
10
|
-
import {
|
|
10
|
+
import { getMinHeight, StyledOption } from './StyledOption.js';
|
|
11
11
|
|
|
12
|
-
const COMPONENT_ID = 'dropdowns.combobox.option.type_icon';
|
|
13
|
-
const colorStyles =
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
} = _ref;
|
|
12
|
+
const COMPONENT_ID$d = 'dropdowns.combobox.option.type_icon';
|
|
13
|
+
const colorStyles$2 = ({
|
|
14
|
+
theme,
|
|
15
|
+
$type
|
|
16
|
+
}) => {
|
|
18
17
|
const opacity = $type && $type !== 'danger' ? 1 : 0;
|
|
19
18
|
let color;
|
|
20
19
|
if ($type === 'add') {
|
|
@@ -45,11 +44,11 @@ const sizeStyles = props => {
|
|
|
45
44
|
return css(["top:", ";", ":", ";width:", ";height:", ";"], top, side, position, size, size);
|
|
46
45
|
};
|
|
47
46
|
const StyledOptionTypeIcon = styled(StyledBaseIcon).attrs({
|
|
48
|
-
'data-garden-id': COMPONENT_ID,
|
|
49
|
-
'data-garden-version': '9.12.
|
|
47
|
+
'data-garden-id': COMPONENT_ID$d,
|
|
48
|
+
'data-garden-version': '9.12.5'
|
|
50
49
|
}).withConfig({
|
|
51
50
|
displayName: "StyledOptionTypeIcon",
|
|
52
51
|
componentId: "sc-xpink2-0"
|
|
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, componentStyles);
|
|
52
|
+
})(["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, componentStyles);
|
|
54
53
|
|
|
55
54
|
export { StyledOptionTypeIcon };
|
|
@@ -9,10 +9,10 @@ import { hideVisually } from 'polished';
|
|
|
9
9
|
import { getColor, componentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { Tag } from '@zendeskgarden/react-tags';
|
|
11
11
|
|
|
12
|
-
const COMPONENT_ID = 'dropdowns.combobox.tag';
|
|
12
|
+
const COMPONENT_ID$c = 'dropdowns.combobox.tag';
|
|
13
13
|
const StyledTag = styled(Tag).attrs({
|
|
14
|
-
'data-garden-id': COMPONENT_ID,
|
|
15
|
-
'data-garden-version': '9.12.
|
|
14
|
+
'data-garden-id': COMPONENT_ID$c,
|
|
15
|
+
'data-garden-version': '9.12.5'
|
|
16
16
|
}).withConfig({
|
|
17
17
|
displayName: "StyledTag",
|
|
18
18
|
componentId: "sc-1alam0r-0"
|
|
@@ -8,11 +8,10 @@ import styled, { css } from 'styled-components';
|
|
|
8
8
|
import { componentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledValue } from './StyledValue.js';
|
|
10
10
|
|
|
11
|
-
const COMPONENT_ID = 'dropdowns.combobox.tags_button';
|
|
12
|
-
const colorStyles =
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
} = _ref;
|
|
11
|
+
const COMPONENT_ID$a = 'dropdowns.combobox.tags_button';
|
|
12
|
+
const colorStyles = ({
|
|
13
|
+
theme
|
|
14
|
+
}) => {
|
|
16
15
|
const color = getColor({
|
|
17
16
|
theme,
|
|
18
17
|
variable: 'foreground.primary'
|
|
@@ -21,8 +20,8 @@ const colorStyles = _ref => {
|
|
|
21
20
|
};
|
|
22
21
|
const StyledTagsButton = styled(StyledValue).attrs({
|
|
23
22
|
as: 'button',
|
|
24
|
-
'data-garden-id': COMPONENT_ID,
|
|
25
|
-
'data-garden-version': '9.12.
|
|
23
|
+
'data-garden-id': COMPONENT_ID$a,
|
|
24
|
+
'data-garden-version': '9.12.5'
|
|
26
25
|
}).withConfig({
|
|
27
26
|
displayName: "StyledTagsButton",
|
|
28
27
|
componentId: "sc-6q5w33-0"
|
|
@@ -9,15 +9,14 @@ import { math } from 'polished';
|
|
|
9
9
|
import { componentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { getHeight } from './StyledInput.js';
|
|
11
11
|
|
|
12
|
-
const COMPONENT_ID = 'dropdowns.combobox.trigger';
|
|
13
|
-
const colorStyles =
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
} = _ref;
|
|
12
|
+
const COMPONENT_ID$n = 'dropdowns.combobox.trigger';
|
|
13
|
+
const colorStyles$9 = ({
|
|
14
|
+
theme,
|
|
15
|
+
$validation,
|
|
16
|
+
$isBare,
|
|
17
|
+
$isLabelHovered,
|
|
18
|
+
$focusInset
|
|
19
|
+
}) => {
|
|
21
20
|
const foregroundColor = getColor({
|
|
22
21
|
theme,
|
|
23
22
|
variable: 'foreground.default'
|
|
@@ -91,7 +90,7 @@ const colorStyles = _ref => {
|
|
|
91
90
|
condition: !$isBare
|
|
92
91
|
}), disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
|
|
93
92
|
};
|
|
94
|
-
const sizeStyles = props => {
|
|
93
|
+
const sizeStyles$8 = props => {
|
|
95
94
|
const inputHeight = getHeight(props);
|
|
96
95
|
let minHeight;
|
|
97
96
|
let horizontalPadding;
|
|
@@ -112,11 +111,11 @@ const sizeStyles = props => {
|
|
|
112
111
|
return css(["padding:", " ", ";min-height:", ";max-height:", ";font-size:", ";"], verticalPadding, horizontalPadding, minHeight, $maxHeight, props.theme.fontSizes.md);
|
|
113
112
|
};
|
|
114
113
|
const StyledTrigger = styled.div.attrs({
|
|
115
|
-
'data-garden-id': COMPONENT_ID,
|
|
116
|
-
'data-garden-version': '9.12.
|
|
114
|
+
'data-garden-id': COMPONENT_ID$n,
|
|
115
|
+
'data-garden-version': '9.12.5'
|
|
117
116
|
}).withConfig({
|
|
118
117
|
displayName: "StyledTrigger",
|
|
119
118
|
componentId: "sc-116nftk-0"
|
|
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, componentStyles);
|
|
119
|
+
})(["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, componentStyles);
|
|
121
120
|
|
|
122
121
|
export { StyledTrigger };
|
|
@@ -8,12 +8,11 @@ import styled, { css } from 'styled-components';
|
|
|
8
8
|
import { componentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { sizeStyles } from './StyledInput.js';
|
|
10
10
|
|
|
11
|
-
const COMPONENT_ID = 'dropdowns.combobox.value';
|
|
12
|
-
const colorStyles =
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
} = _ref;
|
|
11
|
+
const COMPONENT_ID$b = 'dropdowns.combobox.value';
|
|
12
|
+
const colorStyles$1 = ({
|
|
13
|
+
theme,
|
|
14
|
+
$isPlaceholder
|
|
15
|
+
}) => {
|
|
17
16
|
const foregroundColor = $isPlaceholder && getColor({
|
|
18
17
|
theme,
|
|
19
18
|
variable: 'foreground.disabled'
|
|
@@ -21,8 +20,8 @@ const colorStyles = _ref => {
|
|
|
21
20
|
return css(["color:", ";"], foregroundColor);
|
|
22
21
|
};
|
|
23
22
|
const StyledValue = styled.div.attrs({
|
|
24
|
-
'data-garden-id': COMPONENT_ID,
|
|
25
|
-
'data-garden-version': '9.12.
|
|
23
|
+
'data-garden-id': COMPONENT_ID$b,
|
|
24
|
+
'data-garden-version': '9.12.5'
|
|
26
25
|
}).withConfig({
|
|
27
26
|
displayName: "StyledValue",
|
|
28
27
|
componentId: "sc-t719sx-0"
|
|
@@ -31,6 +30,6 @@ const StyledValue = styled.div.attrs({
|
|
|
31
30
|
return 'default';
|
|
32
31
|
}
|
|
33
32
|
return props.$isEditable && !props.$isAutocomplete ? 'text' : 'pointer';
|
|
34
|
-
}, sizeStyles, colorStyles, componentStyles);
|
|
33
|
+
}, sizeStyles, colorStyles$1, componentStyles);
|
|
35
34
|
|
|
36
35
|
export { StyledValue };
|
|
@@ -8,10 +8,10 @@ import styled from 'styled-components';
|
|
|
8
8
|
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledFloatingListbox } from '../combobox/StyledFloatingListbox.js';
|
|
10
10
|
|
|
11
|
-
const COMPONENT_ID = 'dropdowns.menu.floating';
|
|
11
|
+
const COMPONENT_ID$8 = 'dropdowns.menu.floating';
|
|
12
12
|
const StyledFloatingMenu = styled(StyledFloatingListbox).attrs({
|
|
13
|
-
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.12.
|
|
13
|
+
'data-garden-id': COMPONENT_ID$8,
|
|
14
|
+
'data-garden-version': '9.12.5'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledFloatingMenu",
|
|
17
17
|
componentId: "sc-1rc7ahb-0"
|
|
@@ -8,10 +8,10 @@ import styled from 'styled-components';
|
|
|
8
8
|
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledOption } from '../combobox/StyledOption.js';
|
|
10
10
|
|
|
11
|
-
const COMPONENT_ID = 'dropdowns.menu.item';
|
|
11
|
+
const COMPONENT_ID$7 = 'dropdowns.menu.item';
|
|
12
12
|
const StyledItem = styled(StyledOption).attrs({
|
|
13
|
-
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.12.
|
|
13
|
+
'data-garden-id': COMPONENT_ID$7,
|
|
14
|
+
'data-garden-version': '9.12.5'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledItem",
|
|
17
17
|
componentId: "sc-1jp99dq-0"
|
|
@@ -9,10 +9,10 @@ import { componentStyles } from '@zendeskgarden/react-theming';
|
|
|
9
9
|
import { StyledItemTypeIcon } from './StyledItemTypeIcon.js';
|
|
10
10
|
import { StyledOption } from '../combobox/StyledOption.js';
|
|
11
11
|
|
|
12
|
-
const COMPONENT_ID = 'dropdowns.menu.item_anchor';
|
|
12
|
+
const COMPONENT_ID$5 = 'dropdowns.menu.item_anchor';
|
|
13
13
|
const StyledItemAnchor = styled(StyledOption).attrs({
|
|
14
|
-
'data-garden-id': COMPONENT_ID,
|
|
15
|
-
'data-garden-version': '9.12.
|
|
14
|
+
'data-garden-id': COMPONENT_ID$5,
|
|
15
|
+
'data-garden-version': '9.12.5',
|
|
16
16
|
as: 'a'
|
|
17
17
|
}).withConfig({
|
|
18
18
|
displayName: "StyledItemAnchor",
|