@zendeskgarden/react-dropdowns 9.0.0-next.23 → 9.0.0-next.25
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/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 +31 -124
- package/package.json +7 -7
|
@@ -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.25'
|
|
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.25'
|
|
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.25'
|
|
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.25'
|
|
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.25'
|
|
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.25'
|
|
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.25'
|
|
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.25'
|
|
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.25'
|
|
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.25'
|
|
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.25'
|
|
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.25'
|
|
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.25'
|
|
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.25'
|
|
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.25'
|
|
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.25'
|
|
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.25'
|
|
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.25'
|
|
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.25'
|
|
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.25'
|
|
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.25'
|
|
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.25'
|
|
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.25'
|
|
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.25'
|
|
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.25'
|
|
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.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.25'
|
|
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.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.25'
|
|
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.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.25'
|
|
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.0.0-next.
|
|
15
|
+
'data-garden-version': '9.0.0-next.25'
|
|
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,13 +5,13 @@
|
|
|
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.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.25'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledMenu",
|
|
17
17
|
componentId: "sc-f77ntu-0"
|
|
@@ -20,8 +20,5 @@ const StyledMenu = styled(StyledListbox).attrs({
|
|
|
20
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.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.25'
|
|
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 };
|
package/dist/index.cjs.js
CHANGED
|
@@ -83,38 +83,29 @@ const useFieldContext = () => {
|
|
|
83
83
|
const COMPONENT_ID$u = 'dropdowns.combobox.label';
|
|
84
84
|
const StyledLabel = styled__default.default(reactForms.Field.Label).attrs({
|
|
85
85
|
'data-garden-id': COMPONENT_ID$u,
|
|
86
|
-
'data-garden-version': '9.0.0-next.
|
|
86
|
+
'data-garden-version': '9.0.0-next.25'
|
|
87
87
|
}).withConfig({
|
|
88
88
|
displayName: "StyledLabel",
|
|
89
89
|
componentId: "sc-az6now-0"
|
|
90
90
|
})(["vertical-align:revert;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$u, props));
|
|
91
|
-
StyledLabel.defaultProps = {
|
|
92
|
-
theme: reactTheming.DEFAULT_THEME
|
|
93
|
-
};
|
|
94
91
|
|
|
95
92
|
const COMPONENT_ID$t = 'dropdowns.combobox.hint';
|
|
96
93
|
const StyledHint = styled__default.default(reactForms.Field.Hint).attrs({
|
|
97
94
|
'data-garden-id': COMPONENT_ID$t,
|
|
98
|
-
'data-garden-version': '9.0.0-next.
|
|
95
|
+
'data-garden-version': '9.0.0-next.25'
|
|
99
96
|
}).withConfig({
|
|
100
97
|
displayName: "StyledHint",
|
|
101
98
|
componentId: "sc-106qvqx-0"
|
|
102
99
|
})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$t, props));
|
|
103
|
-
StyledHint.defaultProps = {
|
|
104
|
-
theme: reactTheming.DEFAULT_THEME
|
|
105
|
-
};
|
|
106
100
|
|
|
107
101
|
const COMPONENT_ID$s = 'dropdowns.combobox.message';
|
|
108
102
|
const StyledMessage = styled__default.default(reactForms.Field.Message).attrs({
|
|
109
103
|
'data-garden-id': COMPONENT_ID$s,
|
|
110
|
-
'data-garden-version': '9.0.0-next.
|
|
104
|
+
'data-garden-version': '9.0.0-next.25'
|
|
111
105
|
}).withConfig({
|
|
112
106
|
displayName: "StyledMessage",
|
|
113
107
|
componentId: "sc-jux8m5-0"
|
|
114
108
|
})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$s, props));
|
|
115
|
-
StyledMessage.defaultProps = {
|
|
116
|
-
theme: reactTheming.DEFAULT_THEME
|
|
117
|
-
};
|
|
118
109
|
|
|
119
110
|
const COMPONENT_ID$r = 'dropdowns.combobox';
|
|
120
111
|
const sizeStyles$a = props => {
|
|
@@ -124,43 +115,34 @@ const sizeStyles$a = props => {
|
|
|
124
115
|
};
|
|
125
116
|
const StyledCombobox = styled__default.default.div.attrs({
|
|
126
117
|
'data-garden-id': COMPONENT_ID$r,
|
|
127
|
-
'data-garden-version': '9.0.0-next.
|
|
118
|
+
'data-garden-version': '9.0.0-next.25'
|
|
128
119
|
}).withConfig({
|
|
129
120
|
displayName: "StyledCombobox",
|
|
130
121
|
componentId: "sc-13eybg8-0"
|
|
131
122
|
})(["", ";", ";"], sizeStyles$a, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$r, props));
|
|
132
|
-
StyledCombobox.defaultProps = {
|
|
133
|
-
theme: reactTheming.DEFAULT_THEME
|
|
134
|
-
};
|
|
135
123
|
|
|
136
124
|
const COMPONENT_ID$q = 'dropdowns.combobox.container';
|
|
137
125
|
const StyledContainer = styled__default.default.div.attrs({
|
|
138
126
|
'data-garden-id': COMPONENT_ID$q,
|
|
139
|
-
'data-garden-version': '9.0.0-next.
|
|
127
|
+
'data-garden-version': '9.0.0-next.25'
|
|
140
128
|
}).withConfig({
|
|
141
129
|
displayName: "StyledContainer",
|
|
142
130
|
componentId: "sc-14i9jid-0"
|
|
143
131
|
})(["display:flex;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$q, props));
|
|
144
|
-
StyledContainer.defaultProps = {
|
|
145
|
-
theme: reactTheming.DEFAULT_THEME
|
|
146
|
-
};
|
|
147
132
|
|
|
148
133
|
const COMPONENT_ID$p = 'dropdowns.combobox.field';
|
|
149
134
|
const StyledField = styled__default.default.div.attrs({
|
|
150
135
|
'data-garden-id': COMPONENT_ID$p,
|
|
151
|
-
'data-garden-version': '9.0.0-next.
|
|
136
|
+
'data-garden-version': '9.0.0-next.25'
|
|
152
137
|
}).withConfig({
|
|
153
138
|
displayName: "StyledField",
|
|
154
139
|
componentId: "sc-zc57xl-0"
|
|
155
140
|
})(["direction:", ";", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$p, props));
|
|
156
|
-
StyledField.defaultProps = {
|
|
157
|
-
theme: reactTheming.DEFAULT_THEME
|
|
158
|
-
};
|
|
159
141
|
|
|
160
142
|
const COMPONENT_ID$o = 'dropdowns.combobox.floating';
|
|
161
143
|
const StyledFloatingListbox = styled__default.default.div.attrs({
|
|
162
144
|
'data-garden-id': COMPONENT_ID$o,
|
|
163
|
-
'data-garden-version': '9.0.0-next.
|
|
145
|
+
'data-garden-version': '9.0.0-next.25'
|
|
164
146
|
}).withConfig({
|
|
165
147
|
displayName: "StyledFloatingListbox",
|
|
166
148
|
componentId: "sc-1cp6spf-0"
|
|
@@ -170,9 +152,6 @@ const StyledFloatingListbox = styled__default.default.div.attrs({
|
|
|
170
152
|
animationModifier: '[data-garden-animate="true"]',
|
|
171
153
|
zIndex: props.zIndex
|
|
172
154
|
}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$o, props));
|
|
173
|
-
StyledFloatingListbox.defaultProps = {
|
|
174
|
-
theme: reactTheming.DEFAULT_THEME
|
|
175
|
-
};
|
|
176
155
|
|
|
177
156
|
const COMPONENT_ID$n = 'dropdowns.combobox.input';
|
|
178
157
|
const colorStyles$9 = _ref => {
|
|
@@ -201,14 +180,11 @@ const sizeStyles$9 = props => {
|
|
|
201
180
|
};
|
|
202
181
|
const StyledInput = styled__default.default.input.attrs({
|
|
203
182
|
'data-garden-id': COMPONENT_ID$n,
|
|
204
|
-
'data-garden-version': '9.0.0-next.
|
|
183
|
+
'data-garden-version': '9.0.0-next.25'
|
|
205
184
|
}).withConfig({
|
|
206
185
|
displayName: "StyledInput",
|
|
207
186
|
componentId: "sc-1lkqdg-0"
|
|
208
187
|
})(["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$9, colorStyles$9, props => props.isEditable && polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$n, props));
|
|
209
|
-
StyledInput.defaultProps = {
|
|
210
|
-
theme: reactTheming.DEFAULT_THEME
|
|
211
|
-
};
|
|
212
188
|
|
|
213
189
|
const COMPONENT_ID$m = 'dropdowns.combobox.input_group';
|
|
214
190
|
const sizeStyles$8 = props => {
|
|
@@ -217,14 +193,11 @@ const sizeStyles$8 = props => {
|
|
|
217
193
|
};
|
|
218
194
|
const StyledInputGroup = styled__default.default.div.attrs({
|
|
219
195
|
'data-garden-id': COMPONENT_ID$m,
|
|
220
|
-
'data-garden-version': '9.0.0-next.
|
|
196
|
+
'data-garden-version': '9.0.0-next.25'
|
|
221
197
|
}).withConfig({
|
|
222
198
|
displayName: "StyledInputGroup",
|
|
223
199
|
componentId: "sc-yx3q7u-0"
|
|
224
200
|
})(["display:flex;flex-grow:1;flex-wrap:wrap;", ";", ";"], sizeStyles$8, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props));
|
|
225
|
-
StyledInputGroup.defaultProps = {
|
|
226
|
-
theme: reactTheming.DEFAULT_THEME
|
|
227
|
-
};
|
|
228
201
|
|
|
229
202
|
const COMPONENT_ID$l = 'dropdowns.combobox.trigger';
|
|
230
203
|
const colorStyles$8 = _ref => {
|
|
@@ -330,14 +303,11 @@ const sizeStyles$7 = props => {
|
|
|
330
303
|
};
|
|
331
304
|
const StyledTrigger = styled__default.default.div.attrs({
|
|
332
305
|
'data-garden-id': COMPONENT_ID$l,
|
|
333
|
-
'data-garden-version': '9.0.0-next.
|
|
306
|
+
'data-garden-version': '9.0.0-next.25'
|
|
334
307
|
}).withConfig({
|
|
335
308
|
displayName: "StyledTrigger",
|
|
336
309
|
componentId: "sc-116nftk-0"
|
|
337
310
|
})(["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$7, colorStyles$8, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
|
|
338
|
-
StyledTrigger.defaultProps = {
|
|
339
|
-
theme: reactTheming.DEFAULT_THEME
|
|
340
|
-
};
|
|
341
311
|
|
|
342
312
|
const COMPONENT_ID$k = 'dropdowns.combobox.input_icon';
|
|
343
313
|
const colorStyles$7 = _ref => {
|
|
@@ -379,14 +349,11 @@ const sizeStyles$6 = props => {
|
|
|
379
349
|
};
|
|
380
350
|
const StyledInputIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
|
|
381
351
|
'data-garden-id': COMPONENT_ID$k,
|
|
382
|
-
'data-garden-version': '9.0.0-next.
|
|
352
|
+
'data-garden-version': '9.0.0-next.25'
|
|
383
353
|
}).withConfig({
|
|
384
354
|
displayName: "StyledInputIcon",
|
|
385
355
|
componentId: "sc-gqbs1s-0"
|
|
386
356
|
})(["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$6, colorStyles$7, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props));
|
|
387
|
-
StyledInputIcon.defaultProps = {
|
|
388
|
-
theme: reactTheming.DEFAULT_THEME
|
|
389
|
-
};
|
|
390
357
|
|
|
391
358
|
const COMPONENT_ID$j = 'dropdowns.combobox.option';
|
|
392
359
|
const colorStyles$6 = _ref => {
|
|
@@ -437,38 +404,29 @@ const sizeStyles$5 = props => {
|
|
|
437
404
|
};
|
|
438
405
|
const StyledOption = styled__default.default.li.attrs({
|
|
439
406
|
'data-garden-id': COMPONENT_ID$j,
|
|
440
|
-
'data-garden-version': '9.0.0-next.
|
|
407
|
+
'data-garden-version': '9.0.0-next.25'
|
|
441
408
|
}).withConfig({
|
|
442
409
|
displayName: "StyledOption",
|
|
443
410
|
componentId: "sc-jl4wn6-0"
|
|
444
411
|
})(["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$5, colorStyles$6, polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props));
|
|
445
|
-
StyledOption.defaultProps = {
|
|
446
|
-
theme: reactTheming.DEFAULT_THEME
|
|
447
|
-
};
|
|
448
412
|
|
|
449
413
|
const COMPONENT_ID$i = 'dropdowns.combobox.option.content';
|
|
450
414
|
const StyledOptionContent = styled__default.default.div.attrs({
|
|
451
415
|
'data-garden-id': COMPONENT_ID$i,
|
|
452
|
-
'data-garden-version': '9.0.0-next.
|
|
416
|
+
'data-garden-version': '9.0.0-next.25'
|
|
453
417
|
}).withConfig({
|
|
454
418
|
displayName: "StyledOptionContent",
|
|
455
419
|
componentId: "sc-121ujpu-0"
|
|
456
420
|
})(["display:flex;flex-direction:column;flex-grow:1;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
|
|
457
|
-
StyledOptionContent.defaultProps = {
|
|
458
|
-
theme: reactTheming.DEFAULT_THEME
|
|
459
|
-
};
|
|
460
421
|
|
|
461
422
|
const COMPONENT_ID$h = 'dropdowns.combobox.optgroup';
|
|
462
423
|
const StyledOptGroup = styled__default.default.ul.attrs({
|
|
463
424
|
'data-garden-id': COMPONENT_ID$h,
|
|
464
|
-
'data-garden-version': '9.0.0-next.
|
|
425
|
+
'data-garden-version': '9.0.0-next.25'
|
|
465
426
|
}).withConfig({
|
|
466
427
|
displayName: "StyledOptGroup",
|
|
467
428
|
componentId: "sc-1kavqsx-0"
|
|
468
429
|
})(["margin:0;padding:0;list-style-type:none;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
|
|
469
|
-
StyledOptGroup.defaultProps = {
|
|
470
|
-
theme: reactTheming.DEFAULT_THEME
|
|
471
|
-
};
|
|
472
430
|
|
|
473
431
|
const COMPONENT_ID$g = 'dropdowns.combobox.separator';
|
|
474
432
|
const colorStyles$5 = _ref => {
|
|
@@ -488,14 +446,11 @@ const sizeStyles$4 = props => {
|
|
|
488
446
|
};
|
|
489
447
|
const StyledListboxSeparator = styled__default.default.li.attrs({
|
|
490
448
|
'data-garden-id': COMPONENT_ID$g,
|
|
491
|
-
'data-garden-version': '9.0.0-next.
|
|
449
|
+
'data-garden-version': '9.0.0-next.25'
|
|
492
450
|
}).withConfig({
|
|
493
451
|
displayName: "StyledListboxSeparator",
|
|
494
452
|
componentId: "sc-1p6toh2-0"
|
|
495
453
|
})(["cursor:default;", ";", ";", ";"], sizeStyles$4, colorStyles$5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
|
|
496
|
-
StyledListboxSeparator.defaultProps = {
|
|
497
|
-
theme: reactTheming.DEFAULT_THEME
|
|
498
|
-
};
|
|
499
454
|
|
|
500
455
|
const COMPONENT_ID$f = 'dropdowns.combobox.listbox';
|
|
501
456
|
const sizeStyles$3 = props => {
|
|
@@ -505,14 +460,11 @@ const sizeStyles$3 = props => {
|
|
|
505
460
|
};
|
|
506
461
|
const StyledListbox = styled__default.default.ul.attrs({
|
|
507
462
|
'data-garden-id': COMPONENT_ID$f,
|
|
508
|
-
'data-garden-version': '9.0.0-next.
|
|
463
|
+
'data-garden-version': '9.0.0-next.25'
|
|
509
464
|
}).withConfig({
|
|
510
465
|
displayName: "StyledListbox",
|
|
511
466
|
componentId: "sc-1k13ba7-0"
|
|
512
467
|
})(["overflow-y:auto;list-style-type:none;", ";&&&{display:block;}", ":first-child ", " ", ":first-child ", "[role='none']:first-child{display:none;}"], sizeStyles$3, StyledOption, StyledOptionContent, StyledOptGroup, StyledListboxSeparator);
|
|
513
|
-
StyledListbox.defaultProps = {
|
|
514
|
-
theme: reactTheming.DEFAULT_THEME
|
|
515
|
-
};
|
|
516
468
|
|
|
517
469
|
const COMPONENT_ID$e = 'dropdowns.combobox.option.icon';
|
|
518
470
|
const colorStyles$4 = _ref => {
|
|
@@ -545,14 +497,11 @@ const sizeStyles$2 = props => {
|
|
|
545
497
|
};
|
|
546
498
|
const StyledOptionIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
|
|
547
499
|
'data-garden-id': COMPONENT_ID$e,
|
|
548
|
-
'data-garden-version': '9.0.0-next.
|
|
500
|
+
'data-garden-version': '9.0.0-next.25'
|
|
549
501
|
}).withConfig({
|
|
550
502
|
displayName: "StyledOptionIcon",
|
|
551
503
|
componentId: "sc-qsab3y-0"
|
|
552
504
|
})(["flex-shrink:0;", ";", ";", ";"], sizeStyles$2, colorStyles$4, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
|
|
553
|
-
StyledOptionIcon.defaultProps = {
|
|
554
|
-
theme: reactTheming.DEFAULT_THEME
|
|
555
|
-
};
|
|
556
505
|
|
|
557
506
|
const COMPONENT_ID$d = 'dropdowns.combobox.option.meta';
|
|
558
507
|
const colorStyles$3 = _ref => {
|
|
@@ -574,14 +523,11 @@ const sizeStyles$1 = props => {
|
|
|
574
523
|
};
|
|
575
524
|
const StyledOptionMeta = styled__default.default.div.attrs({
|
|
576
525
|
'data-garden-id': COMPONENT_ID$d,
|
|
577
|
-
'data-garden-version': '9.0.0-next.
|
|
526
|
+
'data-garden-version': '9.0.0-next.25'
|
|
578
527
|
}).withConfig({
|
|
579
528
|
displayName: "StyledOptionMeta",
|
|
580
529
|
componentId: "sc-j6pu10-0"
|
|
581
530
|
})(["transition:color 0.25s ease-in-out;font-weight:", ";", ";", ";", ";"], props => props.theme.fontWeights.regular, sizeStyles$1, colorStyles$3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
|
|
582
|
-
StyledOptionMeta.defaultProps = {
|
|
583
|
-
theme: reactTheming.DEFAULT_THEME
|
|
584
|
-
};
|
|
585
531
|
|
|
586
532
|
const COMPONENT_ID$c = 'dropdowns.combobox.option.type_icon';
|
|
587
533
|
const colorStyles$2 = _ref => {
|
|
@@ -620,19 +566,16 @@ const sizeStyles = props => {
|
|
|
620
566
|
};
|
|
621
567
|
const StyledOptionTypeIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
|
|
622
568
|
'data-garden-id': COMPONENT_ID$c,
|
|
623
|
-
'data-garden-version': '9.0.0-next.
|
|
569
|
+
'data-garden-version': '9.0.0-next.25'
|
|
624
570
|
}).withConfig({
|
|
625
571
|
displayName: "StyledOptionTypeIcon",
|
|
626
572
|
componentId: "sc-xpink2-0"
|
|
627
573
|
})(["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, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
|
|
628
|
-
StyledOptionTypeIcon.defaultProps = {
|
|
629
|
-
theme: reactTheming.DEFAULT_THEME
|
|
630
|
-
};
|
|
631
574
|
|
|
632
575
|
const COMPONENT_ID$b = 'dropdowns.combobox.tag';
|
|
633
576
|
const StyledTag = styled__default.default(reactTags.Tag).attrs({
|
|
634
577
|
'data-garden-id': COMPONENT_ID$b,
|
|
635
|
-
'data-garden-version': '9.0.0-next.
|
|
578
|
+
'data-garden-version': '9.0.0-next.25'
|
|
636
579
|
}).withConfig({
|
|
637
580
|
displayName: "StyledTag",
|
|
638
581
|
componentId: "sc-1alam0r-0"
|
|
@@ -640,9 +583,6 @@ const StyledTag = styled__default.default(reactTags.Tag).attrs({
|
|
|
640
583
|
theme: props.theme,
|
|
641
584
|
variable: 'foreground.disabled'
|
|
642
585
|
}), polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
|
|
643
|
-
StyledTag.defaultProps = {
|
|
644
|
-
theme: reactTheming.DEFAULT_THEME
|
|
645
|
-
};
|
|
646
586
|
|
|
647
587
|
const COMPONENT_ID$a = 'dropdowns.combobox.value';
|
|
648
588
|
const colorStyles$1 = _ref => {
|
|
@@ -658,7 +598,7 @@ const colorStyles$1 = _ref => {
|
|
|
658
598
|
};
|
|
659
599
|
const StyledValue = styled__default.default.div.attrs({
|
|
660
600
|
'data-garden-id': COMPONENT_ID$a,
|
|
661
|
-
'data-garden-version': '9.0.0-next.
|
|
601
|
+
'data-garden-version': '9.0.0-next.25'
|
|
662
602
|
}).withConfig({
|
|
663
603
|
displayName: "StyledValue",
|
|
664
604
|
componentId: "sc-t719sx-0"
|
|
@@ -668,9 +608,6 @@ const StyledValue = styled__default.default.div.attrs({
|
|
|
668
608
|
}
|
|
669
609
|
return props.isEditable && !props.isAutocomplete ? 'text' : 'pointer';
|
|
670
610
|
}, sizeStyles$9, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
|
|
671
|
-
StyledValue.defaultProps = {
|
|
672
|
-
theme: reactTheming.DEFAULT_THEME
|
|
673
|
-
};
|
|
674
611
|
|
|
675
612
|
const COMPONENT_ID$9 = 'dropdowns.combobox.tags_button';
|
|
676
613
|
const colorStyles = _ref => {
|
|
@@ -686,19 +623,16 @@ const colorStyles = _ref => {
|
|
|
686
623
|
const StyledTagsButton = styled__default.default(StyledValue).attrs({
|
|
687
624
|
as: 'button',
|
|
688
625
|
'data-garden-id': COMPONENT_ID$9,
|
|
689
|
-
'data-garden-version': '9.0.0-next.
|
|
626
|
+
'data-garden-version': '9.0.0-next.25'
|
|
690
627
|
}).withConfig({
|
|
691
628
|
displayName: "StyledTagsButton",
|
|
692
629
|
componentId: "sc-6q5w33-0"
|
|
693
630
|
})(["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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
|
|
694
|
-
StyledTagsButton.defaultProps = {
|
|
695
|
-
theme: reactTheming.DEFAULT_THEME
|
|
696
|
-
};
|
|
697
631
|
|
|
698
632
|
const COMPONENT_ID$8 = 'dropdowns.menu';
|
|
699
633
|
const StyledMenu = styled__default.default(StyledListbox).attrs({
|
|
700
634
|
'data-garden-id': COMPONENT_ID$8,
|
|
701
|
-
'data-garden-version': '9.0.0-next.
|
|
635
|
+
'data-garden-version': '9.0.0-next.25'
|
|
702
636
|
}).withConfig({
|
|
703
637
|
displayName: "StyledMenu",
|
|
704
638
|
componentId: "sc-f77ntu-0"
|
|
@@ -707,105 +641,78 @@ const StyledMenu = styled__default.default(StyledListbox).attrs({
|
|
|
707
641
|
inset: '1px',
|
|
708
642
|
animationModifier: '[data-garden-animate-arrow="true"]'
|
|
709
643
|
}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
|
|
710
|
-
StyledMenu.defaultProps = {
|
|
711
|
-
theme: reactTheming.DEFAULT_THEME
|
|
712
|
-
};
|
|
713
644
|
|
|
714
645
|
const COMPONENT_ID$7 = 'dropdowns.menu.floating';
|
|
715
646
|
const StyledFloatingMenu = styled__default.default(StyledFloatingListbox).attrs({
|
|
716
647
|
'data-garden-id': COMPONENT_ID$7,
|
|
717
|
-
'data-garden-version': '9.0.0-next.
|
|
648
|
+
'data-garden-version': '9.0.0-next.25'
|
|
718
649
|
}).withConfig({
|
|
719
650
|
displayName: "StyledFloatingMenu",
|
|
720
651
|
componentId: "sc-1rc7ahb-0"
|
|
721
652
|
})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
|
|
722
|
-
StyledFloatingMenu.defaultProps = {
|
|
723
|
-
theme: reactTheming.DEFAULT_THEME
|
|
724
|
-
};
|
|
725
653
|
|
|
726
654
|
const COMPONENT_ID$6 = 'dropdowns.menu.item';
|
|
727
655
|
const StyledItem = styled__default.default(StyledOption).attrs({
|
|
728
656
|
'data-garden-id': COMPONENT_ID$6,
|
|
729
|
-
'data-garden-version': '9.0.0-next.
|
|
657
|
+
'data-garden-version': '9.0.0-next.25'
|
|
730
658
|
}).withConfig({
|
|
731
659
|
displayName: "StyledItem",
|
|
732
660
|
componentId: "sc-1jp99dq-0"
|
|
733
661
|
})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
|
|
734
|
-
StyledItem.defaultProps = {
|
|
735
|
-
theme: reactTheming.DEFAULT_THEME
|
|
736
|
-
};
|
|
737
662
|
|
|
738
663
|
const COMPONENT_ID$5 = 'dropdowns.menu.item.content';
|
|
739
664
|
const StyledItemContent = styled__default.default(StyledOptionContent).attrs({
|
|
740
665
|
'data-garden-id': COMPONENT_ID$5,
|
|
741
|
-
'data-garden-version': '9.0.0-next.
|
|
666
|
+
'data-garden-version': '9.0.0-next.25'
|
|
742
667
|
}).withConfig({
|
|
743
668
|
displayName: "StyledItemContent",
|
|
744
669
|
componentId: "sc-1opglsb-0"
|
|
745
670
|
})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
|
|
746
|
-
StyledItemContent.defaultProps = {
|
|
747
|
-
theme: reactTheming.DEFAULT_THEME
|
|
748
|
-
};
|
|
749
671
|
|
|
750
672
|
const COMPONENT_ID$4 = 'dropdowns.menu.item_group';
|
|
751
673
|
const StyledItemGroup = styled__default.default(StyledOptGroup).attrs({
|
|
752
674
|
'data-garden-id': COMPONENT_ID$4,
|
|
753
|
-
'data-garden-version': '9.0.0-next.
|
|
675
|
+
'data-garden-version': '9.0.0-next.25'
|
|
754
676
|
}).withConfig({
|
|
755
677
|
displayName: "StyledItemGroup",
|
|
756
678
|
componentId: "sc-1umk3cg-0"
|
|
757
679
|
})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
|
|
758
|
-
StyledItemGroup.defaultProps = {
|
|
759
|
-
theme: reactTheming.DEFAULT_THEME
|
|
760
|
-
};
|
|
761
680
|
|
|
762
681
|
const COMPONENT_ID$3 = 'dropdowns.menu.item.icon';
|
|
763
682
|
const StyledItemIcon = styled__default.default(StyledOptionIcon).attrs({
|
|
764
683
|
'data-garden-id': COMPONENT_ID$3,
|
|
765
|
-
'data-garden-version': '9.0.0-next.
|
|
684
|
+
'data-garden-version': '9.0.0-next.25'
|
|
766
685
|
}).withConfig({
|
|
767
686
|
displayName: "StyledItemIcon",
|
|
768
687
|
componentId: "sc-w9orqb-0"
|
|
769
688
|
})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
|
|
770
|
-
StyledItemIcon.defaultProps = {
|
|
771
|
-
theme: reactTheming.DEFAULT_THEME
|
|
772
|
-
};
|
|
773
689
|
|
|
774
690
|
const COMPONENT_ID$2 = 'dropdowns.menu.item.meta';
|
|
775
691
|
const StyledItemMeta = styled__default.default(StyledOptionMeta).attrs({
|
|
776
692
|
'data-garden-id': COMPONENT_ID$2,
|
|
777
|
-
'data-garden-version': '9.0.0-next.
|
|
693
|
+
'data-garden-version': '9.0.0-next.25'
|
|
778
694
|
}).withConfig({
|
|
779
695
|
displayName: "StyledItemMeta",
|
|
780
696
|
componentId: "sc-1unw3x1-0"
|
|
781
697
|
})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
|
|
782
|
-
StyledItemMeta.defaultProps = {
|
|
783
|
-
theme: reactTheming.DEFAULT_THEME
|
|
784
|
-
};
|
|
785
698
|
|
|
786
699
|
const COMPONENT_ID$1 = 'dropdowns.menu.item.type_icon';
|
|
787
700
|
const StyledItemTypeIcon = styled__default.default(StyledOptionTypeIcon).attrs({
|
|
788
701
|
'data-garden-id': COMPONENT_ID$1,
|
|
789
|
-
'data-garden-version': '9.0.0-next.
|
|
702
|
+
'data-garden-version': '9.0.0-next.25'
|
|
790
703
|
}).withConfig({
|
|
791
704
|
displayName: "StyledItemTypeIcon",
|
|
792
705
|
componentId: "sc-1pll3nu-0"
|
|
793
706
|
})(["", "[aria-checked='true'] > &{opacity:1;}", ";"], StyledItem, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
|
|
794
|
-
StyledItemTypeIcon.defaultProps = {
|
|
795
|
-
theme: reactTheming.DEFAULT_THEME
|
|
796
|
-
};
|
|
797
707
|
|
|
798
708
|
const COMPONENT_ID = 'dropdowns.menu.separator';
|
|
799
709
|
const StyledSeparator = styled__default.default(StyledListboxSeparator).attrs({
|
|
800
710
|
'data-garden-id': COMPONENT_ID,
|
|
801
|
-
'data-garden-version': '9.0.0-next.
|
|
711
|
+
'data-garden-version': '9.0.0-next.25'
|
|
802
712
|
}).withConfig({
|
|
803
713
|
displayName: "StyledSeparator",
|
|
804
714
|
componentId: "sc-8kqwen-0"
|
|
805
715
|
})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
|
|
806
|
-
StyledSeparator.defaultProps = {
|
|
807
|
-
theme: reactTheming.DEFAULT_THEME
|
|
808
|
-
};
|
|
809
716
|
|
|
810
717
|
const Listbox = React.forwardRef((_ref, ref) => {
|
|
811
718
|
let {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-dropdowns",
|
|
3
|
-
"version": "9.0.0-next.
|
|
3
|
+
"version": "9.0.0-next.25",
|
|
4
4
|
"description": "Components related to dropdowns in the Garden Design System",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Zendesk Garden <garden@zendesk.com>",
|
|
@@ -25,10 +25,10 @@
|
|
|
25
25
|
"@zendeskgarden/container-combobox": "^2.0.0",
|
|
26
26
|
"@zendeskgarden/container-menu": "^0.4.0",
|
|
27
27
|
"@zendeskgarden/container-utilities": "^2.0.0",
|
|
28
|
-
"@zendeskgarden/react-buttons": "^9.0.0-next.
|
|
29
|
-
"@zendeskgarden/react-forms": "^9.0.0-next.
|
|
30
|
-
"@zendeskgarden/react-tags": "^9.0.0-next.
|
|
31
|
-
"@zendeskgarden/react-tooltips": "^9.0.0-next.
|
|
28
|
+
"@zendeskgarden/react-buttons": "^9.0.0-next.25",
|
|
29
|
+
"@zendeskgarden/react-forms": "^9.0.0-next.25",
|
|
30
|
+
"@zendeskgarden/react-tags": "^9.0.0-next.25",
|
|
31
|
+
"@zendeskgarden/react-tooltips": "^9.0.0-next.25",
|
|
32
32
|
"polished": "^4.3.1",
|
|
33
33
|
"prop-types": "^15.7.2",
|
|
34
34
|
"react-merge-refs": "^2.0.0"
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"styled-components": "^5.3.1"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@zendeskgarden/react-theming": "^9.0.0-next.
|
|
43
|
+
"@zendeskgarden/react-theming": "^9.0.0-next.25",
|
|
44
44
|
"@zendeskgarden/svg-icons": "7.2.0"
|
|
45
45
|
},
|
|
46
46
|
"keywords": [
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"access": "public"
|
|
55
55
|
},
|
|
56
56
|
"zendeskgarden:src": "src/index.ts",
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "460751d630ab1c46e11810d60e4d7701b9d30b8f"
|
|
58
58
|
}
|