@zendeskgarden/react-dropdowns 9.0.0-next.24 → 9.0.0-next.26
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/menu/Menu.js +4 -3
- package/dist/esm/elements/menu/MenuList.js +1 -1
- package/dist/esm/views/combobox/StyledCombobox.js +2 -5
- 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 +2 -5
- package/dist/esm/views/combobox/StyledHint.js +2 -5
- package/dist/esm/views/combobox/StyledInput.js +2 -5
- package/dist/esm/views/combobox/StyledInputGroup.js +2 -5
- package/dist/esm/views/combobox/StyledInputIcon.js +2 -5
- package/dist/esm/views/combobox/StyledLabel.js +2 -5
- package/dist/esm/views/combobox/StyledListbox.js +1 -5
- package/dist/esm/views/combobox/StyledListboxSeparator.js +2 -5
- 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 +2 -5
- package/dist/esm/views/combobox/StyledOptionContent.js +2 -5
- package/dist/esm/views/combobox/StyledOptionIcon.js +2 -5
- package/dist/esm/views/combobox/StyledOptionMeta.js +2 -5
- package/dist/esm/views/combobox/StyledOptionTypeIcon.js +2 -5
- package/dist/esm/views/combobox/StyledTag.js +2 -5
- package/dist/esm/views/combobox/StyledTagsButton.js +2 -5
- package/dist/esm/views/combobox/StyledTrigger.js +2 -5
- package/dist/esm/views/combobox/StyledValue.js +2 -5
- 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 +2 -5
- package/dist/esm/views/menu/StyledSeparator.js +2 -5
- package/dist/index.cjs.js +36 -128
- package/package.json +7 -7
|
@@ -17,7 +17,7 @@ import { toItems } from './utils.js';
|
|
|
17
17
|
import { MenuList } from './MenuList.js';
|
|
18
18
|
import SvgChevronDownStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js';
|
|
19
19
|
|
|
20
|
-
const Menu = forwardRef((
|
|
20
|
+
const Menu = forwardRef((_ref2, ref) => {
|
|
21
21
|
let {
|
|
22
22
|
button,
|
|
23
23
|
buttonProps: _buttonProps = {},
|
|
@@ -31,7 +31,7 @@ const Menu = forwardRef((_ref, ref) => {
|
|
|
31
31
|
onChange,
|
|
32
32
|
onMouseLeave,
|
|
33
33
|
...props
|
|
34
|
-
} =
|
|
34
|
+
} = _ref2;
|
|
35
35
|
const triggerRef = useRef(null);
|
|
36
36
|
const menuRef = useRef(null);
|
|
37
37
|
const items = toItems(children);
|
|
@@ -62,6 +62,7 @@ const Menu = forwardRef((_ref, ref) => {
|
|
|
62
62
|
onClick,
|
|
63
63
|
onKeyDown,
|
|
64
64
|
disabled,
|
|
65
|
+
ref: _ref,
|
|
65
66
|
...buttonProps
|
|
66
67
|
} = _buttonProps;
|
|
67
68
|
const triggerProps = {
|
|
@@ -75,7 +76,7 @@ const Menu = forwardRef((_ref, ref) => {
|
|
|
75
76
|
onKeyDown,
|
|
76
77
|
disabled
|
|
77
78
|
}),
|
|
78
|
-
ref: mergeRefs([triggerRef,
|
|
79
|
+
ref: mergeRefs([triggerRef, _ref])
|
|
79
80
|
};
|
|
80
81
|
const trigger = typeof button === 'function' ? button(triggerProps) : React__default.createElement(Button, triggerProps, button, React__default.createElement(Button.EndIcon, {
|
|
81
82
|
isRotated: isExpanded
|
|
@@ -127,7 +127,7 @@ const MenuList = forwardRef((_ref, ref) => {
|
|
|
127
127
|
children, update]);
|
|
128
128
|
const Node = React__default.createElement(StyledFloatingMenu, {
|
|
129
129
|
"data-garden-animate": isVisible,
|
|
130
|
-
isHidden: !isExpanded,
|
|
130
|
+
isHidden: !isExpanded || !isVisible ,
|
|
131
131
|
position: getMenuPosition(placement),
|
|
132
132
|
zIndex: zIndex,
|
|
133
133
|
style: {
|
|
@@ -5,7 +5,7 @@
|
|
|
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 } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledLabel } from './StyledLabel.js';
|
|
10
10
|
import { StyledHint } from './StyledHint.js';
|
|
11
11
|
import { StyledMessage } from './StyledMessage.js';
|
|
@@ -18,13 +18,10 @@ const sizeStyles = props => {
|
|
|
18
18
|
};
|
|
19
19
|
const StyledCombobox = styled.div.attrs({
|
|
20
20
|
'data-garden-id': COMPONENT_ID,
|
|
21
|
-
'data-garden-version': '9.0.0-next.
|
|
21
|
+
'data-garden-version': '9.0.0-next.26'
|
|
22
22
|
}).withConfig({
|
|
23
23
|
displayName: "StyledCombobox",
|
|
24
24
|
componentId: "sc-13eybg8-0"
|
|
25
25
|
})(["", ";", ";"], sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
26
|
-
StyledCombobox.defaultProps = {
|
|
27
|
-
theme: DEFAULT_THEME
|
|
28
|
-
};
|
|
29
26
|
|
|
30
27
|
export { StyledCombobox };
|
|
@@ -5,18 +5,15 @@
|
|
|
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
|
|
|
10
10
|
const COMPONENT_ID = 'dropdowns.combobox.container';
|
|
11
11
|
const StyledContainer = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.26'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledContainer",
|
|
16
16
|
componentId: "sc-14i9jid-0"
|
|
17
17
|
})(["display:flex;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledContainer.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledContainer };
|
|
@@ -5,18 +5,15 @@
|
|
|
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
|
|
|
10
10
|
const COMPONENT_ID = 'dropdowns.combobox.field';
|
|
11
11
|
const StyledField = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.26'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledField",
|
|
16
16
|
componentId: "sc-zc57xl-0"
|
|
17
17
|
})(["direction:", ";", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledField.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledField };
|
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { menuStyles, retrieveComponentStyles
|
|
8
|
+
import { menuStyles, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'dropdowns.combobox.floating';
|
|
11
11
|
const StyledFloatingListbox = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.26'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledFloatingListbox",
|
|
16
16
|
componentId: "sc-1cp6spf-0"
|
|
@@ -20,8 +20,5 @@ const StyledFloatingListbox = styled.div.attrs({
|
|
|
20
20
|
animationModifier: '[data-garden-animate="true"]',
|
|
21
21
|
zIndex: props.zIndex
|
|
22
22
|
}), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
23
|
-
StyledFloatingListbox.defaultProps = {
|
|
24
|
-
theme: DEFAULT_THEME
|
|
25
|
-
};
|
|
26
23
|
|
|
27
24
|
export { StyledFloatingListbox };
|
|
@@ -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 { Field } from '@zendeskgarden/react-forms';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.combobox.hint';
|
|
12
12
|
const StyledHint = styled(Field.Hint).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.26'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledHint",
|
|
17
17
|
componentId: "sc-106qvqx-0"
|
|
18
18
|
})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
19
|
-
StyledHint.defaultProps = {
|
|
20
|
-
theme: DEFAULT_THEME
|
|
21
|
-
};
|
|
22
19
|
|
|
23
20
|
export { StyledHint };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { hideVisually, math } from 'polished';
|
|
9
|
-
import { retrieveComponentStyles,
|
|
9
|
+
import { retrieveComponentStyles, getColor, getLineHeight } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.combobox.input';
|
|
12
12
|
const colorStyles = _ref => {
|
|
@@ -35,13 +35,10 @@ const sizeStyles = props => {
|
|
|
35
35
|
};
|
|
36
36
|
const StyledInput = styled.input.attrs({
|
|
37
37
|
'data-garden-id': COMPONENT_ID,
|
|
38
|
-
'data-garden-version': '9.0.0-next.
|
|
38
|
+
'data-garden-version': '9.0.0-next.26'
|
|
39
39
|
}).withConfig({
|
|
40
40
|
displayName: "StyledInput",
|
|
41
41
|
componentId: "sc-1lkqdg-0"
|
|
42
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(), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
43
|
-
StyledInput.defaultProps = {
|
|
44
|
-
theme: DEFAULT_THEME
|
|
45
|
-
};
|
|
46
43
|
|
|
47
44
|
export { StyledInput, getHeight, sizeStyles };
|
|
@@ -5,7 +5,7 @@
|
|
|
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 } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'dropdowns.combobox.input_group';
|
|
11
11
|
const sizeStyles = props => {
|
|
@@ -14,13 +14,10 @@ const sizeStyles = props => {
|
|
|
14
14
|
};
|
|
15
15
|
const StyledInputGroup = styled.div.attrs({
|
|
16
16
|
'data-garden-id': COMPONENT_ID,
|
|
17
|
-
'data-garden-version': '9.0.0-next.
|
|
17
|
+
'data-garden-version': '9.0.0-next.26'
|
|
18
18
|
}).withConfig({
|
|
19
19
|
displayName: "StyledInputGroup",
|
|
20
20
|
componentId: "sc-yx3q7u-0"
|
|
21
21
|
})(["display:flex;flex-grow:1;flex-wrap:wrap;", ";", ";"], sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
22
|
-
StyledInputGroup.defaultProps = {
|
|
23
|
-
theme: DEFAULT_THEME
|
|
24
|
-
};
|
|
25
22
|
|
|
26
23
|
export { StyledInputGroup };
|
|
@@ -6,7 +6,7 @@
|
|
|
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 { getHeight } from './StyledInput.js';
|
|
11
11
|
import { StyledTrigger } from './StyledTrigger.js';
|
|
12
12
|
|
|
@@ -50,13 +50,10 @@ const sizeStyles = props => {
|
|
|
50
50
|
};
|
|
51
51
|
const StyledInputIcon = styled(StyledBaseIcon).attrs({
|
|
52
52
|
'data-garden-id': COMPONENT_ID,
|
|
53
|
-
'data-garden-version': '9.0.0-next.
|
|
53
|
+
'data-garden-version': '9.0.0-next.26'
|
|
54
54
|
}).withConfig({
|
|
55
55
|
displayName: "StyledInputIcon",
|
|
56
56
|
componentId: "sc-gqbs1s-0"
|
|
57
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, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
58
|
-
StyledInputIcon.defaultProps = {
|
|
59
|
-
theme: DEFAULT_THEME
|
|
60
|
-
};
|
|
61
58
|
|
|
62
59
|
export { StyledInputIcon };
|
|
@@ -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 { Field } from '@zendeskgarden/react-forms';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.combobox.label';
|
|
12
12
|
const StyledLabel = styled(Field.Label).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.26'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledLabel",
|
|
17
17
|
componentId: "sc-az6now-0"
|
|
18
18
|
})(["vertical-align:revert;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
19
|
-
StyledLabel.defaultProps = {
|
|
20
|
-
theme: DEFAULT_THEME
|
|
21
|
-
};
|
|
22
19
|
|
|
23
20
|
export { StyledLabel };
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
8
|
import { StyledOption, getMinHeight } from './StyledOption.js';
|
|
10
9
|
import { StyledOptionContent } from './StyledOptionContent.js';
|
|
11
10
|
import { StyledOptGroup } from './StyledOptGroup.js';
|
|
@@ -19,13 +18,10 @@ const sizeStyles = props => {
|
|
|
19
18
|
};
|
|
20
19
|
const StyledListbox = styled.ul.attrs({
|
|
21
20
|
'data-garden-id': COMPONENT_ID,
|
|
22
|
-
'data-garden-version': '9.0.0-next.
|
|
21
|
+
'data-garden-version': '9.0.0-next.26'
|
|
23
22
|
}).withConfig({
|
|
24
23
|
displayName: "StyledListbox",
|
|
25
24
|
componentId: "sc-1k13ba7-0"
|
|
26
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);
|
|
27
|
-
StyledListbox.defaultProps = {
|
|
28
|
-
theme: DEFAULT_THEME
|
|
29
|
-
};
|
|
30
26
|
|
|
31
27
|
export { StyledListbox };
|
|
@@ -5,7 +5,7 @@
|
|
|
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
|
|
|
10
10
|
const COMPONENT_ID = 'dropdowns.combobox.separator';
|
|
11
11
|
const colorStyles = _ref => {
|
|
@@ -25,13 +25,10 @@ const sizeStyles = props => {
|
|
|
25
25
|
};
|
|
26
26
|
const StyledListboxSeparator = styled.li.attrs({
|
|
27
27
|
'data-garden-id': COMPONENT_ID,
|
|
28
|
-
'data-garden-version': '9.0.0-next.
|
|
28
|
+
'data-garden-version': '9.0.0-next.26'
|
|
29
29
|
}).withConfig({
|
|
30
30
|
displayName: "StyledListboxSeparator",
|
|
31
31
|
componentId: "sc-1p6toh2-0"
|
|
32
32
|
})(["cursor:default;", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
33
|
-
StyledListboxSeparator.defaultProps = {
|
|
34
|
-
theme: DEFAULT_THEME
|
|
35
|
-
};
|
|
36
33
|
|
|
37
34
|
export { StyledListboxSeparator };
|
|
@@ -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 { Field } from '@zendeskgarden/react-forms';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.combobox.message';
|
|
12
12
|
const StyledMessage = styled(Field.Message).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.26'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledMessage",
|
|
17
17
|
componentId: "sc-jux8m5-0"
|
|
18
18
|
})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
19
|
-
StyledMessage.defaultProps = {
|
|
20
|
-
theme: DEFAULT_THEME
|
|
21
|
-
};
|
|
22
19
|
|
|
23
20
|
export { StyledMessage };
|
|
@@ -5,18 +5,15 @@
|
|
|
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
|
|
|
10
10
|
const COMPONENT_ID = 'dropdowns.combobox.optgroup';
|
|
11
11
|
const StyledOptGroup = styled.ul.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.26'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledOptGroup",
|
|
16
16
|
componentId: "sc-1kavqsx-0"
|
|
17
17
|
})(["margin:0;padding:0;list-style-type:none;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledOptGroup.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledOptGroup };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { hideVisually, math } from 'polished';
|
|
9
|
-
import { retrieveComponentStyles,
|
|
9
|
+
import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.combobox.option';
|
|
12
12
|
const colorStyles = _ref => {
|
|
@@ -57,13 +57,10 @@ const sizeStyles = props => {
|
|
|
57
57
|
};
|
|
58
58
|
const StyledOption = styled.li.attrs({
|
|
59
59
|
'data-garden-id': COMPONENT_ID,
|
|
60
|
-
'data-garden-version': '9.0.0-next.
|
|
60
|
+
'data-garden-version': '9.0.0-next.26'
|
|
61
61
|
}).withConfig({
|
|
62
62
|
displayName: "StyledOption",
|
|
63
63
|
componentId: "sc-jl4wn6-0"
|
|
64
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(), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
65
|
-
StyledOption.defaultProps = {
|
|
66
|
-
theme: DEFAULT_THEME
|
|
67
|
-
};
|
|
68
65
|
|
|
69
66
|
export { StyledOption, getMinHeight };
|
|
@@ -5,18 +5,15 @@
|
|
|
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
|
|
|
10
10
|
const COMPONENT_ID = 'dropdowns.combobox.option.content';
|
|
11
11
|
const StyledOptionContent = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.26'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledOptionContent",
|
|
16
16
|
componentId: "sc-121ujpu-0"
|
|
17
17
|
})(["display:flex;flex-direction:column;flex-grow:1;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledOptionContent.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledOptionContent };
|
|
@@ -6,7 +6,7 @@
|
|
|
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
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.combobox.option.icon';
|
|
12
12
|
const colorStyles = _ref => {
|
|
@@ -39,13 +39,10 @@ const sizeStyles = props => {
|
|
|
39
39
|
};
|
|
40
40
|
const StyledOptionIcon = styled(StyledBaseIcon).attrs({
|
|
41
41
|
'data-garden-id': COMPONENT_ID,
|
|
42
|
-
'data-garden-version': '9.0.0-next.
|
|
42
|
+
'data-garden-version': '9.0.0-next.26'
|
|
43
43
|
}).withConfig({
|
|
44
44
|
displayName: "StyledOptionIcon",
|
|
45
45
|
componentId: "sc-qsab3y-0"
|
|
46
46
|
})(["flex-shrink:0;", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
47
|
-
StyledOptionIcon.defaultProps = {
|
|
48
|
-
theme: DEFAULT_THEME
|
|
49
|
-
};
|
|
50
47
|
|
|
51
48
|
export { StyledOptionIcon };
|
|
@@ -5,7 +5,7 @@
|
|
|
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
|
|
|
10
10
|
const COMPONENT_ID = 'dropdowns.combobox.option.meta';
|
|
11
11
|
const colorStyles = _ref => {
|
|
@@ -27,13 +27,10 @@ const sizeStyles = props => {
|
|
|
27
27
|
};
|
|
28
28
|
const StyledOptionMeta = styled.div.attrs({
|
|
29
29
|
'data-garden-id': COMPONENT_ID,
|
|
30
|
-
'data-garden-version': '9.0.0-next.
|
|
30
|
+
'data-garden-version': '9.0.0-next.26'
|
|
31
31
|
}).withConfig({
|
|
32
32
|
displayName: "StyledOptionMeta",
|
|
33
33
|
componentId: "sc-j6pu10-0"
|
|
34
34
|
})(["transition:color 0.25s ease-in-out;font-weight:", ";", ";", ";", ";"], props => props.theme.fontWeights.regular, sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
35
|
-
StyledOptionMeta.defaultProps = {
|
|
36
|
-
theme: DEFAULT_THEME
|
|
37
|
-
};
|
|
38
35
|
|
|
39
36
|
export { StyledOptionMeta };
|
|
@@ -6,7 +6,7 @@
|
|
|
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';
|
|
@@ -46,13 +46,10 @@ const sizeStyles = props => {
|
|
|
46
46
|
};
|
|
47
47
|
const StyledOptionTypeIcon = styled(StyledBaseIcon).attrs({
|
|
48
48
|
'data-garden-id': COMPONENT_ID,
|
|
49
|
-
'data-garden-version': '9.0.0-next.
|
|
49
|
+
'data-garden-version': '9.0.0-next.26'
|
|
50
50
|
}).withConfig({
|
|
51
51
|
displayName: "StyledOptionTypeIcon",
|
|
52
52
|
componentId: "sc-xpink2-0"
|
|
53
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));
|
|
54
|
-
StyledOptionTypeIcon.defaultProps = {
|
|
55
|
-
theme: DEFAULT_THEME
|
|
56
|
-
};
|
|
57
54
|
|
|
58
55
|
export { StyledOptionTypeIcon };
|
|
@@ -6,13 +6,13 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { hideVisually } from 'polished';
|
|
9
|
-
import { getColor, retrieveComponentStyles
|
|
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.
|
|
15
|
+
'data-garden-version': '9.0.0-next.26'
|
|
16
16
|
}).withConfig({
|
|
17
17
|
displayName: "StyledTag",
|
|
18
18
|
componentId: "sc-1alam0r-0"
|
|
@@ -20,8 +20,5 @@ const StyledTag = styled(Tag).attrs({
|
|
|
20
20
|
theme: props.theme,
|
|
21
21
|
variable: 'foreground.disabled'
|
|
22
22
|
}), hideVisually(), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
23
|
-
StyledTag.defaultProps = {
|
|
24
|
-
theme: DEFAULT_THEME
|
|
25
|
-
};
|
|
26
23
|
|
|
27
24
|
export { StyledTag };
|
|
@@ -5,7 +5,7 @@
|
|
|
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';
|
|
@@ -22,13 +22,10 @@ const colorStyles = _ref => {
|
|
|
22
22
|
const StyledTagsButton = styled(StyledValue).attrs({
|
|
23
23
|
as: 'button',
|
|
24
24
|
'data-garden-id': COMPONENT_ID,
|
|
25
|
-
'data-garden-version': '9.0.0-next.
|
|
25
|
+
'data-garden-version': '9.0.0-next.26'
|
|
26
26
|
}).withConfig({
|
|
27
27
|
displayName: "StyledTagsButton",
|
|
28
28
|
componentId: "sc-6q5w33-0"
|
|
29
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));
|
|
30
|
-
StyledTagsButton.defaultProps = {
|
|
31
|
-
theme: DEFAULT_THEME
|
|
32
|
-
};
|
|
33
30
|
|
|
34
31
|
export { StyledTagsButton };
|
|
@@ -6,7 +6,7 @@
|
|
|
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';
|
|
@@ -113,13 +113,10 @@ const sizeStyles = props => {
|
|
|
113
113
|
};
|
|
114
114
|
const StyledTrigger = styled.div.attrs({
|
|
115
115
|
'data-garden-id': COMPONENT_ID,
|
|
116
|
-
'data-garden-version': '9.0.0-next.
|
|
116
|
+
'data-garden-version': '9.0.0-next.26'
|
|
117
117
|
}).withConfig({
|
|
118
118
|
displayName: "StyledTrigger",
|
|
119
119
|
componentId: "sc-116nftk-0"
|
|
120
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));
|
|
121
|
-
StyledTrigger.defaultProps = {
|
|
122
|
-
theme: DEFAULT_THEME
|
|
123
|
-
};
|
|
124
121
|
|
|
125
122
|
export { StyledTrigger };
|
|
@@ -5,7 +5,7 @@
|
|
|
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';
|
|
@@ -22,7 +22,7 @@ const colorStyles = _ref => {
|
|
|
22
22
|
};
|
|
23
23
|
const StyledValue = styled.div.attrs({
|
|
24
24
|
'data-garden-id': COMPONENT_ID,
|
|
25
|
-
'data-garden-version': '9.0.0-next.
|
|
25
|
+
'data-garden-version': '9.0.0-next.26'
|
|
26
26
|
}).withConfig({
|
|
27
27
|
displayName: "StyledValue",
|
|
28
28
|
componentId: "sc-t719sx-0"
|
|
@@ -32,8 +32,5 @@ const StyledValue = styled.div.attrs({
|
|
|
32
32
|
}
|
|
33
33
|
return props.isEditable && !props.isAutocomplete ? 'text' : 'pointer';
|
|
34
34
|
}, sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
35
|
-
StyledValue.defaultProps = {
|
|
36
|
-
theme: DEFAULT_THEME
|
|
37
|
-
};
|
|
38
35
|
|
|
39
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.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.26'
|
|
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.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.26'
|
|
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.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.26'
|
|
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 };
|