@zendeskgarden/react-dropdowns.legacy 9.0.0-next.9 → 9.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/elements/Autocomplete/Autocomplete.js +1 -1
- package/dist/esm/elements/Menu/Items/AddItem.js +3 -3
- package/dist/esm/elements/Menu/Items/HeaderItem.js +8 -3
- package/dist/esm/elements/Menu/Items/Item.js +16 -15
- package/dist/esm/elements/Menu/Items/ItemMeta.js +2 -2
- package/dist/esm/elements/Menu/Items/MediaBody.js +1 -1
- package/dist/esm/elements/Menu/Items/MediaFigure.js +1 -1
- package/dist/esm/elements/Menu/Items/NextItem.js +4 -4
- package/dist/esm/elements/Menu/Items/PreviousItem.js +4 -4
- package/dist/esm/elements/Menu/Menu.js +54 -55
- package/dist/esm/elements/Multiselect/Multiselect.js +7 -7
- package/dist/esm/elements/Select/Select.js +1 -1
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/check-lg-stroke.svg.js +1 -1
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js +1 -1
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg.js +1 -1
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg.js +1 -1
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/plus-stroke.svg.js +1 -1
- package/dist/esm/styled/items/StyledAddItem.js +6 -6
- package/dist/esm/styled/items/StyledItem.js +21 -14
- package/dist/esm/styled/items/StyledItemIcon.js +6 -6
- package/dist/esm/styled/items/StyledItemMeta.js +6 -6
- package/dist/esm/styled/items/StyledNextIcon.js +6 -6
- package/dist/esm/styled/items/StyledNextItem.js +2 -5
- package/dist/esm/styled/items/StyledPreviousIcon.js +6 -6
- package/dist/esm/styled/items/StyledPreviousItem.js +2 -5
- package/dist/esm/styled/items/header/StyledHeaderIcon.js +6 -6
- package/dist/esm/styled/items/header/StyledHeaderItem.js +3 -6
- package/dist/esm/styled/items/media/StyledMediaBody.js +2 -5
- package/dist/esm/styled/items/media/StyledMediaFigure.js +4 -9
- package/dist/esm/styled/items/media/StyledMediaItem.js +2 -5
- package/dist/esm/styled/menu/StyledMenu.js +7 -10
- package/dist/esm/styled/menu/StyledMenuWrapper.js +8 -11
- package/dist/esm/styled/menu/StyledSeparator.js +6 -6
- 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 +5 -8
- package/dist/esm/styled/multiselect/StyledMultiselectMoreAnchor.js +6 -6
- 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 +198 -229
- package/dist/typings/styled/items/StyledItem.d.ts +3 -3
- package/dist/typings/styled/items/StyledItemIcon.d.ts +3 -3
- package/dist/typings/styled/items/StyledItemMeta.d.ts +2 -2
- package/dist/typings/styled/items/StyledNextIcon.d.ts +1 -1
- package/dist/typings/styled/items/StyledPreviousIcon.d.ts +1 -1
- package/dist/typings/styled/items/header/StyledHeaderItem.d.ts +2 -2
- package/dist/typings/styled/items/media/StyledMediaBody.d.ts +1 -1
- package/dist/typings/styled/items/media/StyledMediaFigure.d.ts +13 -13
- package/dist/typings/styled/menu/StyledMenu.d.ts +5 -5
- package/dist/typings/styled/menu/StyledMenuWrapper.d.ts +5 -5
- package/dist/typings/styled/multiselect/StyledMultiselectInput.d.ts +0 -1
- package/dist/typings/styled/multiselect/StyledMultiselectItemsContainer.d.ts +2 -2
- package/dist/typings/styled/multiselect/StyledMultiselectMoreAnchor.d.ts +2 -2
- package/dist/typings/styled/select/StyledFauxInput.d.ts +4 -11
- package/dist/typings/styled/select/StyledInput.d.ts +0 -1
- package/dist/typings/utils/garden-placements.d.ts +2 -1
- package/package.json +8 -8
|
@@ -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 {
|
|
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,16 +16,16 @@ 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.
|
|
19
|
+
"data-garden-version": '9.1.0',
|
|
20
20
|
className: className
|
|
21
21
|
});
|
|
22
22
|
};
|
|
23
23
|
const StyledPreviousIcon = styled(PreviousIconComponent).withConfig({
|
|
24
24
|
displayName: "StyledPreviousIcon",
|
|
25
25
|
componentId: "sc-1n1t07s-0"
|
|
26
|
-
})(["transform:", ";color:", ";", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
};
|
|
26
|
+
})(["transform:", ";color:", ";", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.$isDisabled ? 'inherit' : getColor({
|
|
27
|
+
theme: props.theme,
|
|
28
|
+
variable: 'foreground.subtle'
|
|
29
|
+
}), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
30
30
|
|
|
31
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.
|
|
14
|
+
'data-garden-version': '9.1.0'
|
|
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,18 +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 {
|
|
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.
|
|
13
|
+
'data-garden-version': '9.1.0'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledHeaderIcon",
|
|
16
16
|
componentId: "sc-ow8s45-0"
|
|
17
|
-
})(["display:flex;position:absolute;top:0;bottom:0;align-items:center;justify-content:center;", ":", "px;color:", ";& > *{width:", ";height:", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 3, props =>
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
};
|
|
17
|
+
})(["display:flex;position:absolute;top:0;bottom:0;align-items:center;justify-content:center;", ":", "px;color:", ";& > *{width:", ";height:", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 3, props => getColor({
|
|
18
|
+
theme: props.theme,
|
|
19
|
+
variable: 'foreground.subtle'
|
|
20
|
+
}), props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
21
21
|
|
|
22
22
|
export { StyledHeaderIcon };
|
|
@@ -5,25 +5,22 @@
|
|
|
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';
|
|
12
12
|
const getHorizontalPadding = props => {
|
|
13
|
-
if (props
|
|
13
|
+
if (props.$hasIcon) {
|
|
14
14
|
return undefined;
|
|
15
15
|
}
|
|
16
16
|
return `${props.theme.space.base * 3}px`;
|
|
17
17
|
};
|
|
18
18
|
const StyledHeaderItem = styled(StyledItem).attrs({
|
|
19
19
|
'data-garden-id': COMPONENT_ID,
|
|
20
|
-
'data-garden-version': '9.
|
|
20
|
+
'data-garden-version': '9.1.0'
|
|
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.
|
|
13
|
+
'data-garden-version': '9.1.0'
|
|
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,29 +6,24 @@
|
|
|
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(
|
|
13
13
|
_ref => {
|
|
14
14
|
let {
|
|
15
15
|
children,
|
|
16
|
-
isCompact,
|
|
16
|
+
$isCompact,
|
|
17
17
|
theme,
|
|
18
18
|
...props
|
|
19
19
|
} = _ref;
|
|
20
|
-
return
|
|
21
|
-
React__default.cloneElement(Children.only(children), props)
|
|
22
|
-
);
|
|
20
|
+
return React__default.cloneElement(Children.only(children), props);
|
|
23
21
|
}).attrs({
|
|
24
22
|
'data-garden-id': COMPONENT_ID,
|
|
25
|
-
'data-garden-version': '9.
|
|
23
|
+
'data-garden-version': '9.1.0'
|
|
26
24
|
}).withConfig({
|
|
27
25
|
displayName: "StyledMediaFigure",
|
|
28
26
|
componentId: "sc-16vz3xj-0"
|
|
29
27
|
})(["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
28
|
|
|
34
29
|
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.
|
|
14
|
+
'data-garden-version': '9.1.0'
|
|
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,24 +5,21 @@
|
|
|
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.
|
|
15
|
-
className: props
|
|
14
|
+
'data-garden-version': '9.1.0',
|
|
15
|
+
className: props.$isAnimated && 'is-animated'
|
|
16
16
|
})).withConfig({
|
|
17
17
|
displayName: "StyledMenu",
|
|
18
18
|
componentId: "sc-lzt5u6-0"
|
|
19
|
-
})(["position:static !important;max-height:", ";overflow-y:auto;", ";", ";"], props => props
|
|
20
|
-
size: `${props.theme.space.base *
|
|
21
|
-
inset: '
|
|
22
|
-
animationModifier: props
|
|
19
|
+
})(["position:static !important;max-height:", ";overflow-y:auto;", ";", ";"], props => props.$maxHeight, props => props.$hasArrow && arrowStyles(getArrowPosition(props.$placement), {
|
|
20
|
+
size: `${props.theme.space.base * 1.5}px`,
|
|
21
|
+
inset: '1px',
|
|
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,26 +5,23 @@
|
|
|
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.
|
|
15
|
-
className: props
|
|
14
|
+
'data-garden-version': '9.1.0',
|
|
15
|
+
className: props.$isAnimated && 'is-animated'
|
|
16
16
|
})).withConfig({
|
|
17
17
|
displayName: "StyledMenuWrapper",
|
|
18
18
|
componentId: "sc-u70fn3-0"
|
|
19
|
-
})(["", ";", ";"], props => menuStyles(getMenuPosition(props
|
|
19
|
+
})(["", ";", ";"], props => menuStyles(getMenuPosition(props.$placement), {
|
|
20
20
|
theme: props.theme,
|
|
21
|
-
hidden: props
|
|
22
|
-
margin: `${props.theme.space.base * (props
|
|
23
|
-
zIndex: props
|
|
24
|
-
animationModifier: props
|
|
21
|
+
hidden: props.$isHidden,
|
|
22
|
+
margin: `${props.theme.space.base * (props.$hasArrow ? 2 : 1)}px`,
|
|
23
|
+
zIndex: props.$zIndex,
|
|
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,19 +5,19 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import {
|
|
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.
|
|
13
|
+
'data-garden-version': '9.1.0',
|
|
14
14
|
role: 'separator'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledSeparator",
|
|
17
17
|
componentId: "sc-oncsf0-0"
|
|
18
|
-
})(["display:block;margin:", "px 0;border-bottom:", ";", ";"], props => props.theme.space.base, props => `${props.theme.borders.sm} ${
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
};
|
|
18
|
+
})(["display:block;margin:", "px 0;border-bottom:", ";", ";"], props => props.theme.space.base, props => `${props.theme.borders.sm} ${getColor({
|
|
19
|
+
theme: props.theme,
|
|
20
|
+
variable: 'border.subtle'
|
|
21
|
+
})}`, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
22
22
|
|
|
23
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.
|
|
23
|
+
'data-garden-version': '9.1.0',
|
|
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.
|
|
13
|
+
'data-garden-version': '9.1.0'
|
|
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,16 +5,16 @@
|
|
|
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 => {
|
|
12
12
|
let margin;
|
|
13
13
|
let padding;
|
|
14
|
-
if (!props
|
|
15
|
-
const marginVertical = props
|
|
14
|
+
if (!props.$isBare) {
|
|
15
|
+
const marginVertical = props.$isCompact ? `-${props.theme.space.base * 1.5}px` : `-${props.theme.space.base * 2.5}px`;
|
|
16
16
|
margin = `${marginVertical} 0`;
|
|
17
|
-
const paddingVertical = props
|
|
17
|
+
const paddingVertical = props.$isCompact ? '3px' : '1px';
|
|
18
18
|
const paddingEnd = `${props.theme.space.base}px`;
|
|
19
19
|
padding = `${paddingVertical} ${props.theme.rtl ? 0 : paddingEnd} ${paddingVertical} ${props.theme.rtl ? paddingEnd : 0}`;
|
|
20
20
|
}
|
|
@@ -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.
|
|
25
|
+
'data-garden-version': '9.1.0'
|
|
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,18 +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 { getLineHeight,
|
|
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.
|
|
13
|
+
'data-garden-version': '9.1.0'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledMultiselectMoreAnchor",
|
|
16
16
|
componentId: "sc-pkakky-0"
|
|
17
|
-
})(["display:inline-block;cursor:", ";padding:", "px 0;overflow:hidden;user-select:none;text-overflow:ellipsis;line-height:", ";white-space:nowrap;color:", ";:hover{text-decoration:", ";}", ";"], props => props
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
};
|
|
17
|
+
})(["display:inline-block;cursor:", ";padding:", "px 0;overflow:hidden;user-select:none;text-overflow:ellipsis;line-height:", ";white-space:nowrap;color:", ";:hover{text-decoration:", ";}", ";"], props => props.$isDisabled ? 'default' : 'pointer', props => props.theme.space.base * (props.$isCompact ? 0.75 : 1.5), props => props.$isCompact ? '1em' : getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => getColor({
|
|
18
|
+
theme: props.theme,
|
|
19
|
+
variable: props.$isDisabled ? 'foreground.disabled' : 'foreground.primary'
|
|
20
|
+
}), props => !props.$isDisabled && 'underline', props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
21
21
|
|
|
22
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.
|
|
14
|
+
'data-garden-version': '9.1.0',
|
|
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.
|
|
15
|
+
'data-garden-version': '9.1.0',
|
|
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.
|
|
13
|
+
'data-garden-version': '9.1.0'
|
|
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 };
|