@zendeskgarden/react-dropdowns.legacy 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/styled/items/StyledAddItem.js +2 -5
- package/dist/esm/styled/items/StyledItem.js +2 -5
- package/dist/esm/styled/items/StyledItemIcon.js +2 -5
- package/dist/esm/styled/items/StyledItemMeta.js +2 -5
- package/dist/esm/styled/items/StyledNextIcon.js +2 -5
- package/dist/esm/styled/items/StyledNextItem.js +2 -5
- package/dist/esm/styled/items/StyledPreviousIcon.js +2 -5
- package/dist/esm/styled/items/StyledPreviousItem.js +2 -5
- package/dist/esm/styled/items/header/StyledHeaderIcon.js +2 -5
- package/dist/esm/styled/items/header/StyledHeaderItem.js +2 -5
- package/dist/esm/styled/items/media/StyledMediaBody.js +2 -5
- package/dist/esm/styled/items/media/StyledMediaFigure.js +2 -5
- package/dist/esm/styled/items/media/StyledMediaItem.js +2 -5
- package/dist/esm/styled/menu/StyledMenu.js +2 -5
- package/dist/esm/styled/menu/StyledMenuWrapper.js +2 -5
- package/dist/esm/styled/menu/StyledSeparator.js +2 -5
- package/dist/esm/styled/multiselect/StyledMultiselectInput.js +2 -5
- package/dist/esm/styled/multiselect/StyledMultiselectItemWrapper.js +2 -5
- package/dist/esm/styled/multiselect/StyledMultiselectItemsContainer.js +2 -5
- package/dist/esm/styled/multiselect/StyledMultiselectMoreAnchor.js +2 -5
- package/dist/esm/styled/select/StyledFauxInput.js +2 -5
- package/dist/esm/styled/select/StyledInput.js +2 -5
- package/dist/esm/styled/select/StyledSelect.js +2 -5
- package/dist/index.cjs.js +23 -92
- package/package.json +4 -4
|
@@ -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 { getColor, retrieveComponentStyles
|
|
8
|
+
import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledItem } from './StyledItem.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.add_item';
|
|
12
12
|
const StyledAddItem = styled(StyledItem).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: "StyledAddItem",
|
|
17
17
|
componentId: "sc-mlto71-0"
|
|
@@ -19,8 +19,5 @@ const StyledAddItem = styled(StyledItem).attrs({
|
|
|
19
19
|
theme: props.theme,
|
|
20
20
|
variable: 'foreground.primary'
|
|
21
21
|
}), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
22
|
-
StyledAddItem.defaultProps = {
|
|
23
|
-
theme: DEFAULT_THEME
|
|
24
|
-
};
|
|
25
22
|
|
|
26
23
|
export { StyledAddItem };
|
|
@@ -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.item';
|
|
11
11
|
const getItemPaddingVertical = props => {
|
|
@@ -41,14 +41,11 @@ const getColorStyles = props => {
|
|
|
41
41
|
};
|
|
42
42
|
const StyledItem = styled.li.attrs(props => ({
|
|
43
43
|
'data-garden-id': COMPONENT_ID,
|
|
44
|
-
'data-garden-version': '9.0.0-next.
|
|
44
|
+
'data-garden-version': '9.0.0-next.26',
|
|
45
45
|
'aria-disabled': props.disabled
|
|
46
46
|
})).withConfig({
|
|
47
47
|
displayName: "StyledItem",
|
|
48
48
|
componentId: "sc-x4h8aw-0"
|
|
49
49
|
})(["display:block;position:relative;z-index:0;cursor:", ";padding:", " ", "px;text-decoration:none;line-height:", "px;word-wrap:break-word;user-select:none;&:first-child{margin-top:", "px;}&:last-child{margin-bottom:", "px;}&:focus{outline:none;}& a,& a:hover,& a:focus,& a:active{text-decoration:none;}", ";", ";"], props => props.disabled ? 'default' : 'pointer', props => getItemPaddingVertical(props), props => props.theme.space.base * 9, props => props.theme.space.base * 5, props => props.theme.space.base, props => props.theme.space.base, props => getColorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
50
|
-
StyledItem.defaultProps = {
|
|
51
|
-
theme: DEFAULT_THEME
|
|
52
|
-
};
|
|
53
50
|
|
|
54
51
|
export { StyledItem, getItemPaddingVertical };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
|
-
import { getColor
|
|
9
|
+
import { getColor } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { getItemPaddingVertical } from './StyledItem.js';
|
|
11
11
|
|
|
12
12
|
const COMPONENT_ID = 'dropdowns.item_icon';
|
|
@@ -15,7 +15,7 @@ const getSizeStyles = props => {
|
|
|
15
15
|
};
|
|
16
16
|
const StyledItemIcon = styled.div.attrs({
|
|
17
17
|
'data-garden-id': COMPONENT_ID,
|
|
18
|
-
'data-garden-version': '9.0.0-next.
|
|
18
|
+
'data-garden-version': '9.0.0-next.26'
|
|
19
19
|
}).withConfig({
|
|
20
20
|
displayName: "StyledItemIcon",
|
|
21
21
|
componentId: "sc-pspm80-0"
|
|
@@ -23,8 +23,5 @@ const StyledItemIcon = styled.div.attrs({
|
|
|
23
23
|
theme: props.theme,
|
|
24
24
|
variable: 'foreground.primary'
|
|
25
25
|
}), props => getSizeStyles(props), props => props.theme.iconSizes.md, props => props.theme.iconSizes.md);
|
|
26
|
-
StyledItemIcon.defaultProps = {
|
|
27
|
-
theme: DEFAULT_THEME
|
|
28
|
-
};
|
|
29
26
|
|
|
30
27
|
export { StyledItemIcon };
|
|
@@ -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 { getColor, retrieveComponentStyles
|
|
8
|
+
import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'dropdowns.item_meta';
|
|
11
11
|
const StyledItemMeta = styled.span.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: "StyledItemMeta",
|
|
16
16
|
componentId: "sc-1m3x8m1-0"
|
|
@@ -18,8 +18,5 @@ const StyledItemMeta = styled.span.attrs({
|
|
|
18
18
|
theme: props.theme,
|
|
19
19
|
variable: props.isDisabled ? 'foreground.disabled' : 'foreground.subtle'
|
|
20
20
|
}), props => props.theme.fontSizes.sm, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
21
|
-
StyledItemMeta.defaultProps = {
|
|
22
|
-
theme: DEFAULT_THEME
|
|
23
|
-
};
|
|
24
21
|
|
|
25
22
|
export { StyledItemMeta };
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
import React__default from 'react';
|
|
8
8
|
import styled from 'styled-components';
|
|
9
9
|
import SvgChevronRightStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg.js';
|
|
10
|
-
import { getColor, retrieveComponentStyles
|
|
10
|
+
import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
11
11
|
|
|
12
12
|
const COMPONENT_ID = 'dropdowns.next_item_icon';
|
|
13
13
|
const NextIconComponent = _ref => {
|
|
@@ -16,7 +16,7 @@ const NextIconComponent = _ref => {
|
|
|
16
16
|
} = _ref;
|
|
17
17
|
return React__default.createElement(SvgChevronRightStroke, {
|
|
18
18
|
"data-garden-id": COMPONENT_ID,
|
|
19
|
-
"data-garden-version": '9.0.0-next.
|
|
19
|
+
"data-garden-version": '9.0.0-next.26',
|
|
20
20
|
className: className
|
|
21
21
|
});
|
|
22
22
|
};
|
|
@@ -27,8 +27,5 @@ const StyledNextIcon = styled(NextIconComponent).withConfig({
|
|
|
27
27
|
theme: props.theme,
|
|
28
28
|
variable: 'foreground.disabled'
|
|
29
29
|
}), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
30
|
-
StyledNextIcon.defaultProps = {
|
|
31
|
-
theme: DEFAULT_THEME
|
|
32
|
-
};
|
|
33
30
|
|
|
34
31
|
export { StyledNextIcon };
|
|
@@ -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 { StyledItem } from './StyledItem.js';
|
|
10
10
|
import { StyledItemIcon } from './StyledItemIcon.js';
|
|
11
11
|
|
|
12
12
|
const COMPONENT_ID = 'dropdowns.next_item';
|
|
13
13
|
const StyledNextItem = styled(StyledItem).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: "StyledNextItem",
|
|
18
18
|
componentId: "sc-1wrjlge-0"
|
|
19
19
|
})(["", "{right:", ";left:", ";}", ";"], StyledItemIcon, props => props.theme.rtl ? 'auto' : `${props.theme.space.base * 3}px`, props => props.theme.rtl ? `${props.theme.space.base * 3}px` : 'auto', props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
20
|
-
StyledNextItem.defaultProps = {
|
|
21
|
-
theme: DEFAULT_THEME
|
|
22
|
-
};
|
|
23
20
|
|
|
24
21
|
export { StyledNextItem };
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
import React__default from 'react';
|
|
8
8
|
import styled from 'styled-components';
|
|
9
9
|
import SvgChevronLeftStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg.js';
|
|
10
|
-
import { getColor, retrieveComponentStyles
|
|
10
|
+
import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
11
11
|
|
|
12
12
|
const COMPONENT_ID = 'dropdowns.previous_item_icon';
|
|
13
13
|
const PreviousIconComponent = _ref => {
|
|
@@ -16,7 +16,7 @@ const PreviousIconComponent = _ref => {
|
|
|
16
16
|
} = _ref;
|
|
17
17
|
return React__default.createElement(SvgChevronLeftStroke, {
|
|
18
18
|
"data-garden-id": COMPONENT_ID,
|
|
19
|
-
"data-garden-version": '9.0.0-next.
|
|
19
|
+
"data-garden-version": '9.0.0-next.26',
|
|
20
20
|
className: className
|
|
21
21
|
});
|
|
22
22
|
};
|
|
@@ -27,8 +27,5 @@ const StyledPreviousIcon = styled(PreviousIconComponent).withConfig({
|
|
|
27
27
|
theme: props.theme,
|
|
28
28
|
variable: 'foreground.subtle'
|
|
29
29
|
}), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
30
|
-
StyledPreviousIcon.defaultProps = {
|
|
31
|
-
theme: DEFAULT_THEME
|
|
32
|
-
};
|
|
33
30
|
|
|
34
31
|
export { StyledPreviousIcon };
|
|
@@ -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 { StyledItem } from './StyledItem.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.previous_item';
|
|
12
12
|
const StyledPreviousItem = styled(StyledItem).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: "StyledPreviousItem",
|
|
17
17
|
componentId: "sc-1qv9jwe-0"
|
|
18
18
|
})(["font-weight:", ";", ";"], props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
19
|
-
StyledPreviousItem.defaultProps = {
|
|
20
|
-
theme: DEFAULT_THEME
|
|
21
|
-
};
|
|
22
19
|
|
|
23
20
|
export { StyledPreviousItem };
|
|
@@ -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 { getColor, retrieveComponentStyles
|
|
8
|
+
import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'dropdowns.header_icon';
|
|
11
11
|
const StyledHeaderIcon = 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: "StyledHeaderIcon",
|
|
16
16
|
componentId: "sc-ow8s45-0"
|
|
@@ -18,8 +18,5 @@ const StyledHeaderIcon = styled.div.attrs({
|
|
|
18
18
|
theme: props.theme,
|
|
19
19
|
variable: 'foreground.subtle'
|
|
20
20
|
}), props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
21
|
-
StyledHeaderIcon.defaultProps = {
|
|
22
|
-
theme: DEFAULT_THEME
|
|
23
|
-
};
|
|
24
21
|
|
|
25
22
|
export { StyledHeaderIcon };
|
|
@@ -5,7 +5,7 @@
|
|
|
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 { StyledItem } from '../StyledItem.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.header_item';
|
|
@@ -17,13 +17,10 @@ const getHorizontalPadding = props => {
|
|
|
17
17
|
};
|
|
18
18
|
const StyledHeaderItem = styled(StyledItem).attrs({
|
|
19
19
|
'data-garden-id': COMPONENT_ID,
|
|
20
|
-
'data-garden-version': '9.0.0-next.
|
|
20
|
+
'data-garden-version': '9.0.0-next.26'
|
|
21
21
|
}).withConfig({
|
|
22
22
|
displayName: "StyledHeaderItem",
|
|
23
23
|
componentId: "sc-1xosinr-0"
|
|
24
24
|
})(["cursor:default;padding-right:", ";padding-left:", ";font-weight:", ";", ";"], props => getHorizontalPadding(props), props => getHorizontalPadding(props), props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
25
|
-
StyledHeaderItem.defaultProps = {
|
|
26
|
-
theme: DEFAULT_THEME
|
|
27
|
-
};
|
|
28
25
|
|
|
29
26
|
export { StyledHeaderItem };
|
|
@@ -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.media_body';
|
|
11
11
|
const StyledMediaBody = 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: "StyledMediaBody",
|
|
16
16
|
componentId: "sc-133sssc-0"
|
|
17
17
|
})(["display:block;overflow:hidden;padding-", ":", "px;", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledMediaBody.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledMediaBody };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import React__default, { Children } from 'react';
|
|
8
8
|
import styled from 'styled-components';
|
|
9
|
-
import { retrieveComponentStyles
|
|
9
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.media_figure';
|
|
12
12
|
const StyledMediaFigure = styled(
|
|
@@ -22,13 +22,10 @@ _ref => {
|
|
|
22
22
|
);
|
|
23
23
|
}).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: "StyledMediaFigure",
|
|
28
28
|
componentId: "sc-16vz3xj-0"
|
|
29
29
|
})(["float:", ";margin-top:", "px !important;width:", ";height:", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 0.5, props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
30
|
-
StyledMediaFigure.defaultProps = {
|
|
31
|
-
theme: DEFAULT_THEME
|
|
32
|
-
};
|
|
33
30
|
|
|
34
31
|
export { StyledMediaFigure };
|
|
@@ -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 { StyledItem } from '../StyledItem.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.media_item';
|
|
12
12
|
const StyledMediaItem = styled(StyledItem).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: "StyledMediaItem",
|
|
17
17
|
componentId: "sc-af4509-0"
|
|
18
18
|
})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
19
|
-
StyledMediaItem.defaultProps = {
|
|
20
|
-
theme: DEFAULT_THEME
|
|
21
|
-
};
|
|
22
19
|
|
|
23
20
|
export { StyledMediaItem };
|
|
@@ -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 { getArrowPosition } from '../../utils/garden-placements.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.menu';
|
|
12
12
|
const StyledMenu = styled.ul.attrs(props => ({
|
|
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
|
className: props.isAnimated && 'is-animated'
|
|
16
16
|
})).withConfig({
|
|
17
17
|
displayName: "StyledMenu",
|
|
@@ -21,8 +21,5 @@ const StyledMenu = styled.ul.attrs(props => ({
|
|
|
21
21
|
inset: '1px',
|
|
22
22
|
animationModifier: props.isAnimated ? '.is-animated' : undefined
|
|
23
23
|
}), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
24
|
-
StyledMenu.defaultProps = {
|
|
25
|
-
theme: DEFAULT_THEME
|
|
26
|
-
};
|
|
27
24
|
|
|
28
25
|
export { StyledMenu };
|
|
@@ -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 { menuStyles, retrieveComponentStyles
|
|
8
|
+
import { menuStyles, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { getMenuPosition } from '../../utils/garden-placements.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.menu_wrapper';
|
|
12
12
|
const StyledMenuWrapper = styled.div.attrs(props => ({
|
|
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
|
className: props.isAnimated && 'is-animated'
|
|
16
16
|
})).withConfig({
|
|
17
17
|
displayName: "StyledMenuWrapper",
|
|
@@ -23,8 +23,5 @@ const StyledMenuWrapper = styled.div.attrs(props => ({
|
|
|
23
23
|
zIndex: props.zIndex,
|
|
24
24
|
animationModifier: props.isAnimated ? '.is-animated' : undefined
|
|
25
25
|
}), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
26
|
-
StyledMenuWrapper.defaultProps = {
|
|
27
|
-
theme: DEFAULT_THEME
|
|
28
|
-
};
|
|
29
26
|
|
|
30
27
|
export { StyledMenuWrapper };
|
|
@@ -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 { getColor, retrieveComponentStyles
|
|
8
|
+
import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'dropdowns.separator';
|
|
11
11
|
const StyledSeparator = styled.li.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
|
role: 'separator'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledSeparator",
|
|
@@ -19,8 +19,5 @@ const StyledSeparator = styled.li.attrs({
|
|
|
19
19
|
theme: props.theme,
|
|
20
20
|
variable: 'border.subtle'
|
|
21
21
|
})}`, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
22
|
-
StyledSeparator.defaultProps = {
|
|
23
|
-
theme: DEFAULT_THEME
|
|
24
|
-
};
|
|
25
22
|
|
|
26
23
|
export { StyledSeparator };
|
|
@@ -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 { StyledInput } from '../select/StyledInput.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.multiselect_input';
|
|
@@ -20,14 +20,11 @@ const visibleStyling = props => {
|
|
|
20
20
|
};
|
|
21
21
|
const StyledMultiselectInput = styled(StyledInput).attrs({
|
|
22
22
|
'data-garden-id': COMPONENT_ID,
|
|
23
|
-
'data-garden-version': '9.0.0-next.
|
|
23
|
+
'data-garden-version': '9.0.0-next.26',
|
|
24
24
|
isBare: true
|
|
25
25
|
}).withConfig({
|
|
26
26
|
displayName: "StyledMultiselectInput",
|
|
27
27
|
componentId: "sc-iiow29-0"
|
|
28
28
|
})(["flex-basis:", "px;flex-grow:1;align-self:center;min-height:0;", ";", ";"], props => props.theme.space.base * 15, props => visibleStyling(props), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
29
|
-
StyledMultiselectInput.defaultProps = {
|
|
30
|
-
theme: DEFAULT_THEME
|
|
31
|
-
};
|
|
32
29
|
|
|
33
30
|
export { StyledMultiselectInput };
|
|
@@ -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.multiselect_item_wrapper';
|
|
11
11
|
const StyledMultiselectItemWrapper = 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: "StyledMultiselectItemWrapper",
|
|
16
16
|
componentId: "sc-vgr7nd-0"
|
|
17
17
|
})(["display:inline-flex;align-items:center;margin:", "px;max-width:100%;", ";"], props => props.theme.space.base / 2, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledMultiselectItemWrapper.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledMultiselectItemWrapper };
|
|
@@ -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.multiselect_items_container';
|
|
11
11
|
const sizeStyles = props => {
|
|
@@ -22,13 +22,10 @@ const sizeStyles = props => {
|
|
|
22
22
|
};
|
|
23
23
|
const StyledMultiselectItemsContainer = 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: "StyledMultiselectItemsContainer",
|
|
28
28
|
componentId: "sc-1dxwjyz-0"
|
|
29
29
|
})(["display:inline-flex;flex-grow:1;flex-wrap:wrap;min-width:0;", ";", ";"], props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
30
|
-
StyledMultiselectItemsContainer.defaultProps = {
|
|
31
|
-
theme: DEFAULT_THEME
|
|
32
|
-
};
|
|
33
30
|
|
|
34
31
|
export { StyledMultiselectItemsContainer };
|
|
@@ -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 { getLineHeight, getColor, retrieveComponentStyles
|
|
8
|
+
import { getLineHeight, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
|
|
11
11
|
const StyledMultiselectMoreAnchor = 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: "StyledMultiselectMoreAnchor",
|
|
16
16
|
componentId: "sc-pkakky-0"
|
|
@@ -18,8 +18,5 @@ const StyledMultiselectMoreAnchor = styled.div.attrs({
|
|
|
18
18
|
theme: props.theme,
|
|
19
19
|
variable: props.isDisabled ? 'foreground.disabled' : 'foreground.primary'
|
|
20
20
|
}), props => !props.isDisabled && 'underline', props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
21
|
-
StyledMultiselectMoreAnchor.defaultProps = {
|
|
22
|
-
theme: DEFAULT_THEME
|
|
23
|
-
};
|
|
24
21
|
|
|
25
22
|
export { StyledMultiselectMoreAnchor };
|
|
@@ -5,21 +5,18 @@
|
|
|
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 { FauxInput } from '@zendeskgarden/react-forms';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.faux_input';
|
|
12
12
|
const StyledFauxInput = styled(FauxInput).attrs(props => ({
|
|
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
|
mediaLayout: true,
|
|
16
16
|
theme: props.theme
|
|
17
17
|
})).withConfig({
|
|
18
18
|
displayName: "StyledFauxInput",
|
|
19
19
|
componentId: "sc-bk8odf-0"
|
|
20
20
|
})(["cursor:", ";min-width:", "px;", ";"], props => !props.disabled && 'pointer', props => props.theme.space.base * (props.isCompact ? 25 : 36), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
21
|
-
StyledFauxInput.defaultProps = {
|
|
22
|
-
theme: DEFAULT_THEME
|
|
23
|
-
};
|
|
24
21
|
|
|
25
22
|
export { StyledFauxInput };
|
|
@@ -6,20 +6,17 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { Input } from '@zendeskgarden/react-forms';
|
|
9
|
-
import { retrieveComponentStyles
|
|
9
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.input';
|
|
12
12
|
const hiddenStyling = css(["position:fixed;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
|
|
13
13
|
const StyledInput = styled(Input).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
|
isBare: true
|
|
17
17
|
}).withConfig({
|
|
18
18
|
displayName: "StyledInput",
|
|
19
19
|
componentId: "sc-kykaw8-0"
|
|
20
20
|
})(["", ";", ";"], props => props.isHidden && hiddenStyling, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
21
|
-
StyledInput.defaultProps = {
|
|
22
|
-
theme: DEFAULT_THEME
|
|
23
|
-
};
|
|
24
21
|
|
|
25
22
|
export { StyledInput };
|
|
@@ -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.select';
|
|
11
11
|
const StyledSelect = 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: "StyledSelect",
|
|
16
16
|
componentId: "sc-xf4qjv-0"
|
|
17
17
|
})(["flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledSelect.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledSelect };
|
package/dist/index.cjs.js
CHANGED
|
@@ -289,7 +289,7 @@ function getMenuPosition(popperPlacement) {
|
|
|
289
289
|
const COMPONENT_ID$m = 'dropdowns.menu';
|
|
290
290
|
const StyledMenu = styled__default.default.ul.attrs(props => ({
|
|
291
291
|
'data-garden-id': COMPONENT_ID$m,
|
|
292
|
-
'data-garden-version': '9.0.0-next.
|
|
292
|
+
'data-garden-version': '9.0.0-next.26',
|
|
293
293
|
className: props.isAnimated && 'is-animated'
|
|
294
294
|
})).withConfig({
|
|
295
295
|
displayName: "StyledMenu",
|
|
@@ -299,14 +299,11 @@ const StyledMenu = styled__default.default.ul.attrs(props => ({
|
|
|
299
299
|
inset: '1px',
|
|
300
300
|
animationModifier: props.isAnimated ? '.is-animated' : undefined
|
|
301
301
|
}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props));
|
|
302
|
-
StyledMenu.defaultProps = {
|
|
303
|
-
theme: reactTheming.DEFAULT_THEME
|
|
304
|
-
};
|
|
305
302
|
|
|
306
303
|
const COMPONENT_ID$l = 'dropdowns.menu_wrapper';
|
|
307
304
|
const StyledMenuWrapper = styled__default.default.div.attrs(props => ({
|
|
308
305
|
'data-garden-id': COMPONENT_ID$l,
|
|
309
|
-
'data-garden-version': '9.0.0-next.
|
|
306
|
+
'data-garden-version': '9.0.0-next.26',
|
|
310
307
|
className: props.isAnimated && 'is-animated'
|
|
311
308
|
})).withConfig({
|
|
312
309
|
displayName: "StyledMenuWrapper",
|
|
@@ -318,14 +315,11 @@ const StyledMenuWrapper = styled__default.default.div.attrs(props => ({
|
|
|
318
315
|
zIndex: props.zIndex,
|
|
319
316
|
animationModifier: props.isAnimated ? '.is-animated' : undefined
|
|
320
317
|
}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
|
|
321
|
-
StyledMenuWrapper.defaultProps = {
|
|
322
|
-
theme: reactTheming.DEFAULT_THEME
|
|
323
|
-
};
|
|
324
318
|
|
|
325
319
|
const COMPONENT_ID$k = 'dropdowns.separator';
|
|
326
320
|
const StyledSeparator = styled__default.default.li.attrs({
|
|
327
321
|
'data-garden-id': COMPONENT_ID$k,
|
|
328
|
-
'data-garden-version': '9.0.0-next.
|
|
322
|
+
'data-garden-version': '9.0.0-next.26',
|
|
329
323
|
role: 'separator'
|
|
330
324
|
}).withConfig({
|
|
331
325
|
displayName: "StyledSeparator",
|
|
@@ -334,9 +328,6 @@ const StyledSeparator = styled__default.default.li.attrs({
|
|
|
334
328
|
theme: props.theme,
|
|
335
329
|
variable: 'border.subtle'
|
|
336
330
|
})}`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props));
|
|
337
|
-
StyledSeparator.defaultProps = {
|
|
338
|
-
theme: reactTheming.DEFAULT_THEME
|
|
339
|
-
};
|
|
340
331
|
|
|
341
332
|
const COMPONENT_ID$j = 'dropdowns.item';
|
|
342
333
|
const getItemPaddingVertical = props => {
|
|
@@ -372,20 +363,17 @@ const getColorStyles = props => {
|
|
|
372
363
|
};
|
|
373
364
|
const StyledItem = styled__default.default.li.attrs(props => ({
|
|
374
365
|
'data-garden-id': COMPONENT_ID$j,
|
|
375
|
-
'data-garden-version': '9.0.0-next.
|
|
366
|
+
'data-garden-version': '9.0.0-next.26',
|
|
376
367
|
'aria-disabled': props.disabled
|
|
377
368
|
})).withConfig({
|
|
378
369
|
displayName: "StyledItem",
|
|
379
370
|
componentId: "sc-x4h8aw-0"
|
|
380
371
|
})(["display:block;position:relative;z-index:0;cursor:", ";padding:", " ", "px;text-decoration:none;line-height:", "px;word-wrap:break-word;user-select:none;&:first-child{margin-top:", "px;}&:last-child{margin-bottom:", "px;}&:focus{outline:none;}& a,& a:hover,& a:focus,& a:active{text-decoration:none;}", ";", ";"], props => props.disabled ? 'default' : 'pointer', props => getItemPaddingVertical(props), props => props.theme.space.base * 9, props => props.theme.space.base * 5, props => props.theme.space.base, props => props.theme.space.base, props => getColorStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props));
|
|
381
|
-
StyledItem.defaultProps = {
|
|
382
|
-
theme: reactTheming.DEFAULT_THEME
|
|
383
|
-
};
|
|
384
372
|
|
|
385
373
|
const COMPONENT_ID$i = 'dropdowns.add_item';
|
|
386
374
|
const StyledAddItem = styled__default.default(StyledItem).attrs({
|
|
387
375
|
'data-garden-id': COMPONENT_ID$i,
|
|
388
|
-
'data-garden-version': '9.0.0-next.
|
|
376
|
+
'data-garden-version': '9.0.0-next.26'
|
|
389
377
|
}).withConfig({
|
|
390
378
|
displayName: "StyledAddItem",
|
|
391
379
|
componentId: "sc-mlto71-0"
|
|
@@ -393,14 +381,11 @@ const StyledAddItem = styled__default.default(StyledItem).attrs({
|
|
|
393
381
|
theme: props.theme,
|
|
394
382
|
variable: 'foreground.primary'
|
|
395
383
|
}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
|
|
396
|
-
StyledAddItem.defaultProps = {
|
|
397
|
-
theme: reactTheming.DEFAULT_THEME
|
|
398
|
-
};
|
|
399
384
|
|
|
400
385
|
const COMPONENT_ID$h = 'dropdowns.item_meta';
|
|
401
386
|
const StyledItemMeta = styled__default.default.span.attrs({
|
|
402
387
|
'data-garden-id': COMPONENT_ID$h,
|
|
403
|
-
'data-garden-version': '9.0.0-next.
|
|
388
|
+
'data-garden-version': '9.0.0-next.26'
|
|
404
389
|
}).withConfig({
|
|
405
390
|
displayName: "StyledItemMeta",
|
|
406
391
|
componentId: "sc-1m3x8m1-0"
|
|
@@ -408,9 +393,6 @@ const StyledItemMeta = styled__default.default.span.attrs({
|
|
|
408
393
|
theme: props.theme,
|
|
409
394
|
variable: props.isDisabled ? 'foreground.disabled' : 'foreground.subtle'
|
|
410
395
|
}), props => props.theme.fontSizes.sm, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
|
|
411
|
-
StyledItemMeta.defaultProps = {
|
|
412
|
-
theme: reactTheming.DEFAULT_THEME
|
|
413
|
-
};
|
|
414
396
|
|
|
415
397
|
const COMPONENT_ID$g = 'dropdowns.item_icon';
|
|
416
398
|
const getSizeStyles = props => {
|
|
@@ -418,7 +400,7 @@ const getSizeStyles = props => {
|
|
|
418
400
|
};
|
|
419
401
|
const StyledItemIcon = styled__default.default.div.attrs({
|
|
420
402
|
'data-garden-id': COMPONENT_ID$g,
|
|
421
|
-
'data-garden-version': '9.0.0-next.
|
|
403
|
+
'data-garden-version': '9.0.0-next.26'
|
|
422
404
|
}).withConfig({
|
|
423
405
|
displayName: "StyledItemIcon",
|
|
424
406
|
componentId: "sc-pspm80-0"
|
|
@@ -426,21 +408,15 @@ const StyledItemIcon = styled__default.default.div.attrs({
|
|
|
426
408
|
theme: props.theme,
|
|
427
409
|
variable: 'foreground.primary'
|
|
428
410
|
}), props => getSizeStyles(props), props => props.theme.iconSizes.md, props => props.theme.iconSizes.md);
|
|
429
|
-
StyledItemIcon.defaultProps = {
|
|
430
|
-
theme: reactTheming.DEFAULT_THEME
|
|
431
|
-
};
|
|
432
411
|
|
|
433
412
|
const COMPONENT_ID$f = 'dropdowns.next_item';
|
|
434
413
|
const StyledNextItem = styled__default.default(StyledItem).attrs({
|
|
435
414
|
'data-garden-id': COMPONENT_ID$f,
|
|
436
|
-
'data-garden-version': '9.0.0-next.
|
|
415
|
+
'data-garden-version': '9.0.0-next.26'
|
|
437
416
|
}).withConfig({
|
|
438
417
|
displayName: "StyledNextItem",
|
|
439
418
|
componentId: "sc-1wrjlge-0"
|
|
440
419
|
})(["", "{right:", ";left:", ";}", ";"], StyledItemIcon, props => props.theme.rtl ? 'auto' : `${props.theme.space.base * 3}px`, props => props.theme.rtl ? `${props.theme.space.base * 3}px` : 'auto', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
|
|
441
|
-
StyledNextItem.defaultProps = {
|
|
442
|
-
theme: reactTheming.DEFAULT_THEME
|
|
443
|
-
};
|
|
444
420
|
|
|
445
421
|
var _path$4;
|
|
446
422
|
function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
|
|
@@ -465,7 +441,7 @@ const NextIconComponent = _ref => {
|
|
|
465
441
|
} = _ref;
|
|
466
442
|
return React__namespace.default.createElement(SvgChevronRightStroke, {
|
|
467
443
|
"data-garden-id": COMPONENT_ID$e,
|
|
468
|
-
"data-garden-version": '9.0.0-next.
|
|
444
|
+
"data-garden-version": '9.0.0-next.26',
|
|
469
445
|
className: className
|
|
470
446
|
});
|
|
471
447
|
};
|
|
@@ -476,21 +452,15 @@ const StyledNextIcon = styled__default.default(NextIconComponent).withConfig({
|
|
|
476
452
|
theme: props.theme,
|
|
477
453
|
variable: 'foreground.disabled'
|
|
478
454
|
}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
|
|
479
|
-
StyledNextIcon.defaultProps = {
|
|
480
|
-
theme: reactTheming.DEFAULT_THEME
|
|
481
|
-
};
|
|
482
455
|
|
|
483
456
|
const COMPONENT_ID$d = 'dropdowns.previous_item';
|
|
484
457
|
const StyledPreviousItem = styled__default.default(StyledItem).attrs({
|
|
485
458
|
'data-garden-id': COMPONENT_ID$d,
|
|
486
|
-
'data-garden-version': '9.0.0-next.
|
|
459
|
+
'data-garden-version': '9.0.0-next.26'
|
|
487
460
|
}).withConfig({
|
|
488
461
|
displayName: "StyledPreviousItem",
|
|
489
462
|
componentId: "sc-1qv9jwe-0"
|
|
490
463
|
})(["font-weight:", ";", ";"], props => props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
|
|
491
|
-
StyledPreviousItem.defaultProps = {
|
|
492
|
-
theme: reactTheming.DEFAULT_THEME
|
|
493
|
-
};
|
|
494
464
|
|
|
495
465
|
var _path$3;
|
|
496
466
|
function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
|
|
@@ -515,7 +485,7 @@ const PreviousIconComponent = _ref => {
|
|
|
515
485
|
} = _ref;
|
|
516
486
|
return React__namespace.default.createElement(SvgChevronLeftStroke, {
|
|
517
487
|
"data-garden-id": COMPONENT_ID$c,
|
|
518
|
-
"data-garden-version": '9.0.0-next.
|
|
488
|
+
"data-garden-version": '9.0.0-next.26',
|
|
519
489
|
className: className
|
|
520
490
|
});
|
|
521
491
|
};
|
|
@@ -526,14 +496,11 @@ const StyledPreviousIcon = styled__default.default(PreviousIconComponent).withCo
|
|
|
526
496
|
theme: props.theme,
|
|
527
497
|
variable: 'foreground.subtle'
|
|
528
498
|
}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
|
|
529
|
-
StyledPreviousIcon.defaultProps = {
|
|
530
|
-
theme: reactTheming.DEFAULT_THEME
|
|
531
|
-
};
|
|
532
499
|
|
|
533
500
|
const COMPONENT_ID$b = 'dropdowns.header_icon';
|
|
534
501
|
const StyledHeaderIcon = styled__default.default.div.attrs({
|
|
535
502
|
'data-garden-id': COMPONENT_ID$b,
|
|
536
|
-
'data-garden-version': '9.0.0-next.
|
|
503
|
+
'data-garden-version': '9.0.0-next.26'
|
|
537
504
|
}).withConfig({
|
|
538
505
|
displayName: "StyledHeaderIcon",
|
|
539
506
|
componentId: "sc-ow8s45-0"
|
|
@@ -541,9 +508,6 @@ const StyledHeaderIcon = styled__default.default.div.attrs({
|
|
|
541
508
|
theme: props.theme,
|
|
542
509
|
variable: 'foreground.subtle'
|
|
543
510
|
}), props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
|
|
544
|
-
StyledHeaderIcon.defaultProps = {
|
|
545
|
-
theme: reactTheming.DEFAULT_THEME
|
|
546
|
-
};
|
|
547
511
|
|
|
548
512
|
const COMPONENT_ID$a = 'dropdowns.header_item';
|
|
549
513
|
const getHorizontalPadding = props => {
|
|
@@ -554,26 +518,20 @@ const getHorizontalPadding = props => {
|
|
|
554
518
|
};
|
|
555
519
|
const StyledHeaderItem = styled__default.default(StyledItem).attrs({
|
|
556
520
|
'data-garden-id': COMPONENT_ID$a,
|
|
557
|
-
'data-garden-version': '9.0.0-next.
|
|
521
|
+
'data-garden-version': '9.0.0-next.26'
|
|
558
522
|
}).withConfig({
|
|
559
523
|
displayName: "StyledHeaderItem",
|
|
560
524
|
componentId: "sc-1xosinr-0"
|
|
561
525
|
})(["cursor:default;padding-right:", ";padding-left:", ";font-weight:", ";", ";"], props => getHorizontalPadding(props), props => getHorizontalPadding(props), props => props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
|
|
562
|
-
StyledHeaderItem.defaultProps = {
|
|
563
|
-
theme: reactTheming.DEFAULT_THEME
|
|
564
|
-
};
|
|
565
526
|
|
|
566
527
|
const COMPONENT_ID$9 = 'dropdowns.media_body';
|
|
567
528
|
const StyledMediaBody = styled__default.default.div.attrs({
|
|
568
529
|
'data-garden-id': COMPONENT_ID$9,
|
|
569
|
-
'data-garden-version': '9.0.0-next.
|
|
530
|
+
'data-garden-version': '9.0.0-next.26'
|
|
570
531
|
}).withConfig({
|
|
571
532
|
displayName: "StyledMediaBody",
|
|
572
533
|
componentId: "sc-133sssc-0"
|
|
573
534
|
})(["display:block;overflow:hidden;padding-", ":", "px;", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
|
|
574
|
-
StyledMediaBody.defaultProps = {
|
|
575
|
-
theme: reactTheming.DEFAULT_THEME
|
|
576
|
-
};
|
|
577
535
|
|
|
578
536
|
const COMPONENT_ID$8 = 'dropdowns.media_figure';
|
|
579
537
|
const StyledMediaFigure = styled__default.default(
|
|
@@ -589,66 +547,51 @@ _ref => {
|
|
|
589
547
|
);
|
|
590
548
|
}).attrs({
|
|
591
549
|
'data-garden-id': COMPONENT_ID$8,
|
|
592
|
-
'data-garden-version': '9.0.0-next.
|
|
550
|
+
'data-garden-version': '9.0.0-next.26'
|
|
593
551
|
}).withConfig({
|
|
594
552
|
displayName: "StyledMediaFigure",
|
|
595
553
|
componentId: "sc-16vz3xj-0"
|
|
596
554
|
})(["float:", ";margin-top:", "px !important;width:", ";height:", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 0.5, props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
|
|
597
|
-
StyledMediaFigure.defaultProps = {
|
|
598
|
-
theme: reactTheming.DEFAULT_THEME
|
|
599
|
-
};
|
|
600
555
|
|
|
601
556
|
const COMPONENT_ID$7 = 'dropdowns.media_item';
|
|
602
557
|
const StyledMediaItem = styled__default.default(StyledItem).attrs({
|
|
603
558
|
'data-garden-id': COMPONENT_ID$7,
|
|
604
|
-
'data-garden-version': '9.0.0-next.
|
|
559
|
+
'data-garden-version': '9.0.0-next.26'
|
|
605
560
|
}).withConfig({
|
|
606
561
|
displayName: "StyledMediaItem",
|
|
607
562
|
componentId: "sc-af4509-0"
|
|
608
563
|
})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
|
|
609
|
-
StyledMediaItem.defaultProps = {
|
|
610
|
-
theme: reactTheming.DEFAULT_THEME
|
|
611
|
-
};
|
|
612
564
|
|
|
613
565
|
const COMPONENT_ID$6 = 'dropdowns.faux_input';
|
|
614
566
|
const StyledFauxInput = styled__default.default(reactForms.FauxInput).attrs(props => ({
|
|
615
567
|
'data-garden-id': COMPONENT_ID$6,
|
|
616
|
-
'data-garden-version': '9.0.0-next.
|
|
568
|
+
'data-garden-version': '9.0.0-next.26',
|
|
617
569
|
mediaLayout: true,
|
|
618
570
|
theme: props.theme
|
|
619
571
|
})).withConfig({
|
|
620
572
|
displayName: "StyledFauxInput",
|
|
621
573
|
componentId: "sc-bk8odf-0"
|
|
622
574
|
})(["cursor:", ";min-width:", "px;", ";"], props => !props.disabled && 'pointer', props => props.theme.space.base * (props.isCompact ? 25 : 36), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
|
|
623
|
-
StyledFauxInput.defaultProps = {
|
|
624
|
-
theme: reactTheming.DEFAULT_THEME
|
|
625
|
-
};
|
|
626
575
|
|
|
627
576
|
const COMPONENT_ID$5 = 'dropdowns.input';
|
|
628
577
|
const hiddenStyling = styled.css(["position:fixed;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
|
|
629
578
|
const StyledInput = styled__default.default(reactForms.Input).attrs({
|
|
630
579
|
'data-garden-id': COMPONENT_ID$5,
|
|
631
|
-
'data-garden-version': '9.0.0-next.
|
|
580
|
+
'data-garden-version': '9.0.0-next.26',
|
|
632
581
|
isBare: true
|
|
633
582
|
}).withConfig({
|
|
634
583
|
displayName: "StyledInput",
|
|
635
584
|
componentId: "sc-kykaw8-0"
|
|
636
585
|
})(["", ";", ";"], props => props.isHidden && hiddenStyling, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
|
|
637
|
-
StyledInput.defaultProps = {
|
|
638
|
-
theme: reactTheming.DEFAULT_THEME
|
|
639
|
-
};
|
|
640
586
|
|
|
641
587
|
const COMPONENT_ID$4 = 'dropdowns.select';
|
|
642
588
|
const StyledSelect = styled__default.default.div.attrs({
|
|
643
589
|
'data-garden-id': COMPONENT_ID$4,
|
|
644
|
-
'data-garden-version': '9.0.0-next.
|
|
590
|
+
'data-garden-version': '9.0.0-next.26'
|
|
645
591
|
}).withConfig({
|
|
646
592
|
displayName: "StyledSelect",
|
|
647
593
|
componentId: "sc-xf4qjv-0"
|
|
648
594
|
})(["flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
|
|
649
|
-
StyledSelect.defaultProps = {
|
|
650
|
-
theme: reactTheming.DEFAULT_THEME
|
|
651
|
-
};
|
|
652
595
|
|
|
653
596
|
const COMPONENT_ID$3 = 'dropdowns.multiselect_input';
|
|
654
597
|
const visibleStyling = props => {
|
|
@@ -662,15 +605,12 @@ const visibleStyling = props => {
|
|
|
662
605
|
};
|
|
663
606
|
const StyledMultiselectInput = styled__default.default(StyledInput).attrs({
|
|
664
607
|
'data-garden-id': COMPONENT_ID$3,
|
|
665
|
-
'data-garden-version': '9.0.0-next.
|
|
608
|
+
'data-garden-version': '9.0.0-next.26',
|
|
666
609
|
isBare: true
|
|
667
610
|
}).withConfig({
|
|
668
611
|
displayName: "StyledMultiselectInput",
|
|
669
612
|
componentId: "sc-iiow29-0"
|
|
670
613
|
})(["flex-basis:", "px;flex-grow:1;align-self:center;min-height:0;", ";", ";"], props => props.theme.space.base * 15, props => visibleStyling(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
|
|
671
|
-
StyledMultiselectInput.defaultProps = {
|
|
672
|
-
theme: reactTheming.DEFAULT_THEME
|
|
673
|
-
};
|
|
674
614
|
|
|
675
615
|
const COMPONENT_ID$2 = 'dropdowns.multiselect_items_container';
|
|
676
616
|
const sizeStyles = props => {
|
|
@@ -687,31 +627,25 @@ const sizeStyles = props => {
|
|
|
687
627
|
};
|
|
688
628
|
const StyledMultiselectItemsContainer = styled__default.default.div.attrs({
|
|
689
629
|
'data-garden-id': COMPONENT_ID$2,
|
|
690
|
-
'data-garden-version': '9.0.0-next.
|
|
630
|
+
'data-garden-version': '9.0.0-next.26'
|
|
691
631
|
}).withConfig({
|
|
692
632
|
displayName: "StyledMultiselectItemsContainer",
|
|
693
633
|
componentId: "sc-1dxwjyz-0"
|
|
694
634
|
})(["display:inline-flex;flex-grow:1;flex-wrap:wrap;min-width:0;", ";", ";"], props => sizeStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
|
|
695
|
-
StyledMultiselectItemsContainer.defaultProps = {
|
|
696
|
-
theme: reactTheming.DEFAULT_THEME
|
|
697
|
-
};
|
|
698
635
|
|
|
699
636
|
const COMPONENT_ID$1 = 'dropdowns.multiselect_item_wrapper';
|
|
700
637
|
const StyledMultiselectItemWrapper = styled__default.default.div.attrs({
|
|
701
638
|
'data-garden-id': COMPONENT_ID$1,
|
|
702
|
-
'data-garden-version': '9.0.0-next.
|
|
639
|
+
'data-garden-version': '9.0.0-next.26'
|
|
703
640
|
}).withConfig({
|
|
704
641
|
displayName: "StyledMultiselectItemWrapper",
|
|
705
642
|
componentId: "sc-vgr7nd-0"
|
|
706
643
|
})(["display:inline-flex;align-items:center;margin:", "px;max-width:100%;", ";"], props => props.theme.space.base / 2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
|
|
707
|
-
StyledMultiselectItemWrapper.defaultProps = {
|
|
708
|
-
theme: reactTheming.DEFAULT_THEME
|
|
709
|
-
};
|
|
710
644
|
|
|
711
645
|
const COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
|
|
712
646
|
const StyledMultiselectMoreAnchor = styled__default.default.div.attrs({
|
|
713
647
|
'data-garden-id': COMPONENT_ID,
|
|
714
|
-
'data-garden-version': '9.0.0-next.
|
|
648
|
+
'data-garden-version': '9.0.0-next.26'
|
|
715
649
|
}).withConfig({
|
|
716
650
|
displayName: "StyledMultiselectMoreAnchor",
|
|
717
651
|
componentId: "sc-pkakky-0"
|
|
@@ -719,9 +653,6 @@ const StyledMultiselectMoreAnchor = styled__default.default.div.attrs({
|
|
|
719
653
|
theme: props.theme,
|
|
720
654
|
variable: props.isDisabled ? 'foreground.disabled' : 'foreground.primary'
|
|
721
655
|
}), props => !props.isDisabled && 'underline', props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
|
|
722
|
-
StyledMultiselectMoreAnchor.defaultProps = {
|
|
723
|
-
theme: reactTheming.DEFAULT_THEME
|
|
724
|
-
};
|
|
725
656
|
|
|
726
657
|
const Trigger = _ref => {
|
|
727
658
|
let {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-dropdowns.legacy",
|
|
3
|
-
"version": "9.0.0-next.
|
|
3
|
+
"version": "9.0.0-next.26",
|
|
4
4
|
"description": "Components relating to dropdowns in the Garden Design System",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Zendesk Garden <garden@zendesk.com>",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@zendeskgarden/container-selection": "^2.0.0",
|
|
25
25
|
"@zendeskgarden/container-utilities": "^1.0.14",
|
|
26
|
-
"@zendeskgarden/react-forms": "^9.0.0-next.
|
|
26
|
+
"@zendeskgarden/react-forms": "^9.0.0-next.26",
|
|
27
27
|
"downshift": "^7.0.0",
|
|
28
28
|
"polished": "^4.3.1",
|
|
29
29
|
"prop-types": "^15.5.7",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@types/lodash.debounce": "4.0.9",
|
|
41
|
-
"@zendeskgarden/react-theming": "^9.0.0-next.
|
|
41
|
+
"@zendeskgarden/react-theming": "^9.0.0-next.26",
|
|
42
42
|
"@zendeskgarden/svg-icons": "7.1.1",
|
|
43
43
|
"lodash.debounce": "4.0.8"
|
|
44
44
|
},
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"access": "public"
|
|
53
53
|
},
|
|
54
54
|
"zendeskgarden:src": "src/index.ts",
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "049dd7bd143029147de333f78bd879dc7d7251f2"
|
|
56
56
|
}
|