@zendeskgarden/react-dropdowns.legacy 9.0.0-next.7 → 9.0.0-next.8
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 +144 -0
- package/dist/esm/elements/Combobox/Combobox.js +106 -0
- package/dist/esm/elements/Dropdown/Dropdown.js +178 -0
- package/dist/esm/elements/Fields/Field.js +35 -0
- package/dist/esm/elements/Fields/Hint.js +15 -0
- package/dist/esm/elements/Fields/Label.js +46 -0
- package/dist/esm/elements/Fields/Message.js +19 -0
- package/dist/esm/elements/Menu/Items/AddItem.js +66 -0
- package/dist/esm/elements/Menu/Items/HeaderIcon.js +44 -0
- package/dist/esm/elements/Menu/Items/HeaderItem.js +44 -0
- package/dist/esm/elements/Menu/Items/Item.js +140 -0
- package/dist/esm/elements/Menu/Items/ItemMeta.js +49 -0
- package/dist/esm/elements/Menu/Items/MediaBody.js +44 -0
- package/dist/esm/elements/Menu/Items/MediaFigure.js +42 -0
- package/dist/esm/elements/Menu/Items/MediaItem.js +44 -0
- package/dist/esm/elements/Menu/Items/NextItem.js +90 -0
- package/dist/esm/elements/Menu/Items/PreviousItem.js +87 -0
- package/dist/esm/elements/Menu/Menu.js +160 -0
- package/dist/esm/elements/Menu/Separator.js +37 -0
- package/dist/esm/elements/Multiselect/Multiselect.js +316 -0
- package/dist/esm/elements/Select/Select.js +195 -0
- package/dist/esm/elements/Trigger/Trigger.js +185 -0
- package/dist/esm/index.js +29 -0
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/check-lg-stroke.svg.js +28 -0
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js +25 -0
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg.js +25 -0
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg.js +25 -0
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/plus-stroke.svg.js +26 -0
- package/dist/esm/styled/items/StyledAddItem.js +23 -0
- package/dist/esm/styled/items/StyledItem.js +44 -0
- package/dist/esm/styled/items/StyledItemIcon.js +27 -0
- package/dist/esm/styled/items/StyledItemMeta.js +22 -0
- package/dist/esm/styled/items/StyledNextIcon.js +31 -0
- package/dist/esm/styled/items/StyledNextItem.js +24 -0
- package/dist/esm/styled/items/StyledPreviousIcon.js +31 -0
- package/dist/esm/styled/items/StyledPreviousItem.js +23 -0
- package/dist/esm/styled/items/header/StyledHeaderIcon.js +22 -0
- package/dist/esm/styled/items/header/StyledHeaderItem.js +29 -0
- package/dist/esm/styled/items/media/StyledMediaBody.js +22 -0
- package/dist/esm/styled/items/media/StyledMediaFigure.js +34 -0
- package/dist/esm/styled/items/media/StyledMediaItem.js +23 -0
- package/dist/esm/styled/menu/StyledMenu.js +28 -0
- package/dist/esm/styled/menu/StyledMenuWrapper.js +30 -0
- package/dist/esm/styled/menu/StyledSeparator.js +23 -0
- package/dist/esm/styled/multiselect/StyledMultiselectInput.js +33 -0
- package/dist/esm/styled/multiselect/StyledMultiselectItemWrapper.js +22 -0
- package/dist/esm/styled/multiselect/StyledMultiselectItemsContainer.js +34 -0
- package/dist/esm/styled/multiselect/StyledMultiselectMoreAnchor.js +22 -0
- package/dist/esm/styled/select/StyledFauxInput.js +25 -0
- package/dist/esm/styled/select/StyledInput.js +25 -0
- package/dist/esm/styled/select/StyledSelect.js +22 -0
- package/dist/esm/types/index.js +10 -0
- package/dist/esm/utils/garden-placements.js +77 -0
- package/dist/esm/utils/useDropdownContext.js +18 -0
- package/dist/esm/utils/useFieldContext.js +18 -0
- package/dist/esm/utils/useItemContext.js +18 -0
- package/dist/esm/utils/useMenuContext.js +18 -0
- package/dist/index.cjs.js +51 -67
- package/package.json +6 -6
- package/dist/index.esm.js +0 -2032
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import React__default from 'react';
|
|
8
|
+
import styled from 'styled-components';
|
|
9
|
+
import SvgChevronRightStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg.js';
|
|
10
|
+
import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
11
|
+
|
|
12
|
+
const COMPONENT_ID = 'dropdowns.next_item_icon';
|
|
13
|
+
const NextIconComponent = _ref => {
|
|
14
|
+
let {
|
|
15
|
+
className
|
|
16
|
+
} = _ref;
|
|
17
|
+
return React__default.createElement(SvgChevronRightStroke, {
|
|
18
|
+
"data-garden-id": COMPONENT_ID,
|
|
19
|
+
"data-garden-version": '9.0.0-next.8',
|
|
20
|
+
className: className
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
const StyledNextIcon = styled(NextIconComponent).withConfig({
|
|
24
|
+
displayName: "StyledNextIcon",
|
|
25
|
+
componentId: "sc-1nzkdnq-0"
|
|
26
|
+
})(["transform:", ";color:", ";", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.isDisabled ? 'inherit' : getColorV8('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
27
|
+
StyledNextIcon.defaultProps = {
|
|
28
|
+
theme: DEFAULT_THEME
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
export { StyledNextIcon };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled from 'styled-components';
|
|
8
|
+
import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
|
+
import { StyledItem } from './StyledItem.js';
|
|
10
|
+
import { StyledItemIcon } from './StyledItemIcon.js';
|
|
11
|
+
|
|
12
|
+
const COMPONENT_ID = 'dropdowns.next_item';
|
|
13
|
+
const StyledNextItem = styled(StyledItem).attrs({
|
|
14
|
+
'data-garden-id': COMPONENT_ID,
|
|
15
|
+
'data-garden-version': '9.0.0-next.8'
|
|
16
|
+
}).withConfig({
|
|
17
|
+
displayName: "StyledNextItem",
|
|
18
|
+
componentId: "sc-1wrjlge-0"
|
|
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
|
+
|
|
24
|
+
export { StyledNextItem };
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import React__default from 'react';
|
|
8
|
+
import styled from 'styled-components';
|
|
9
|
+
import SvgChevronLeftStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg.js';
|
|
10
|
+
import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
11
|
+
|
|
12
|
+
const COMPONENT_ID = 'dropdowns.previous_item_icon';
|
|
13
|
+
const PreviousIconComponent = _ref => {
|
|
14
|
+
let {
|
|
15
|
+
className
|
|
16
|
+
} = _ref;
|
|
17
|
+
return React__default.createElement(SvgChevronLeftStroke, {
|
|
18
|
+
"data-garden-id": COMPONENT_ID,
|
|
19
|
+
"data-garden-version": '9.0.0-next.8',
|
|
20
|
+
className: className
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
const StyledPreviousIcon = styled(PreviousIconComponent).withConfig({
|
|
24
|
+
displayName: "StyledPreviousIcon",
|
|
25
|
+
componentId: "sc-1n1t07s-0"
|
|
26
|
+
})(["transform:", ";color:", ";", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.isDisabled ? 'inherit' : getColorV8('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
27
|
+
StyledPreviousIcon.defaultProps = {
|
|
28
|
+
theme: DEFAULT_THEME
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
export { StyledPreviousIcon };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled from 'styled-components';
|
|
8
|
+
import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
|
+
import { StyledItem } from './StyledItem.js';
|
|
10
|
+
|
|
11
|
+
const COMPONENT_ID = 'dropdowns.previous_item';
|
|
12
|
+
const StyledPreviousItem = styled(StyledItem).attrs({
|
|
13
|
+
'data-garden-id': COMPONENT_ID,
|
|
14
|
+
'data-garden-version': '9.0.0-next.8'
|
|
15
|
+
}).withConfig({
|
|
16
|
+
displayName: "StyledPreviousItem",
|
|
17
|
+
componentId: "sc-1qv9jwe-0"
|
|
18
|
+
})(["font-weight:", ";", ";"], props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
19
|
+
StyledPreviousItem.defaultProps = {
|
|
20
|
+
theme: DEFAULT_THEME
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export { StyledPreviousItem };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled from 'styled-components';
|
|
8
|
+
import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
|
+
|
|
10
|
+
const COMPONENT_ID = 'dropdowns.header_icon';
|
|
11
|
+
const StyledHeaderIcon = styled.div.attrs({
|
|
12
|
+
'data-garden-id': COMPONENT_ID,
|
|
13
|
+
'data-garden-version': '9.0.0-next.8'
|
|
14
|
+
}).withConfig({
|
|
15
|
+
displayName: "StyledHeaderIcon",
|
|
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 => getColorV8('neutralHue', 600, props.theme), props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
+
StyledHeaderIcon.defaultProps = {
|
|
19
|
+
theme: DEFAULT_THEME
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export { StyledHeaderIcon };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled from 'styled-components';
|
|
8
|
+
import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
|
+
import { StyledItem } from '../StyledItem.js';
|
|
10
|
+
|
|
11
|
+
const COMPONENT_ID = 'dropdowns.header_item';
|
|
12
|
+
const getHorizontalPadding = props => {
|
|
13
|
+
if (props.hasIcon) {
|
|
14
|
+
return undefined;
|
|
15
|
+
}
|
|
16
|
+
return `${props.theme.space.base * 3}px`;
|
|
17
|
+
};
|
|
18
|
+
const StyledHeaderItem = styled(StyledItem).attrs({
|
|
19
|
+
'data-garden-id': COMPONENT_ID,
|
|
20
|
+
'data-garden-version': '9.0.0-next.8'
|
|
21
|
+
}).withConfig({
|
|
22
|
+
displayName: "StyledHeaderItem",
|
|
23
|
+
componentId: "sc-1xosinr-0"
|
|
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
|
+
|
|
29
|
+
export { StyledHeaderItem };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled from 'styled-components';
|
|
8
|
+
import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
|
+
|
|
10
|
+
const COMPONENT_ID = 'dropdowns.media_body';
|
|
11
|
+
const StyledMediaBody = styled.div.attrs({
|
|
12
|
+
'data-garden-id': COMPONENT_ID,
|
|
13
|
+
'data-garden-version': '9.0.0-next.8'
|
|
14
|
+
}).withConfig({
|
|
15
|
+
displayName: "StyledMediaBody",
|
|
16
|
+
componentId: "sc-133sssc-0"
|
|
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
|
+
|
|
22
|
+
export { StyledMediaBody };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import React__default, { Children } from 'react';
|
|
8
|
+
import styled from 'styled-components';
|
|
9
|
+
import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
10
|
+
|
|
11
|
+
const COMPONENT_ID = 'dropdowns.media_figure';
|
|
12
|
+
const StyledMediaFigure = styled(
|
|
13
|
+
_ref => {
|
|
14
|
+
let {
|
|
15
|
+
children,
|
|
16
|
+
isCompact,
|
|
17
|
+
theme,
|
|
18
|
+
...props
|
|
19
|
+
} = _ref;
|
|
20
|
+
return (
|
|
21
|
+
React__default.cloneElement(Children.only(children), props)
|
|
22
|
+
);
|
|
23
|
+
}).attrs({
|
|
24
|
+
'data-garden-id': COMPONENT_ID,
|
|
25
|
+
'data-garden-version': '9.0.0-next.8'
|
|
26
|
+
}).withConfig({
|
|
27
|
+
displayName: "StyledMediaFigure",
|
|
28
|
+
componentId: "sc-16vz3xj-0"
|
|
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
|
+
|
|
34
|
+
export { StyledMediaFigure };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled from 'styled-components';
|
|
8
|
+
import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
|
+
import { StyledItem } from '../StyledItem.js';
|
|
10
|
+
|
|
11
|
+
const COMPONENT_ID = 'dropdowns.media_item';
|
|
12
|
+
const StyledMediaItem = styled(StyledItem).attrs({
|
|
13
|
+
'data-garden-id': COMPONENT_ID,
|
|
14
|
+
'data-garden-version': '9.0.0-next.8'
|
|
15
|
+
}).withConfig({
|
|
16
|
+
displayName: "StyledMediaItem",
|
|
17
|
+
componentId: "sc-af4509-0"
|
|
18
|
+
})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
19
|
+
StyledMediaItem.defaultProps = {
|
|
20
|
+
theme: DEFAULT_THEME
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export { StyledMediaItem };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled from 'styled-components';
|
|
8
|
+
import { arrowStyles, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
|
+
import { getArrowPosition } from '../../utils/garden-placements.js';
|
|
10
|
+
|
|
11
|
+
const COMPONENT_ID = 'dropdowns.menu';
|
|
12
|
+
const StyledMenu = styled.ul.attrs(props => ({
|
|
13
|
+
'data-garden-id': COMPONENT_ID,
|
|
14
|
+
'data-garden-version': '9.0.0-next.8',
|
|
15
|
+
className: props.isAnimated && 'is-animated'
|
|
16
|
+
})).withConfig({
|
|
17
|
+
displayName: "StyledMenu",
|
|
18
|
+
componentId: "sc-lzt5u6-0"
|
|
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 * 2}px`,
|
|
21
|
+
inset: '2px',
|
|
22
|
+
animationModifier: props.isAnimated ? '.is-animated' : undefined
|
|
23
|
+
}), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
24
|
+
StyledMenu.defaultProps = {
|
|
25
|
+
theme: DEFAULT_THEME
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
export { StyledMenu };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled from 'styled-components';
|
|
8
|
+
import { menuStyles, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
|
+
import { getMenuPosition } from '../../utils/garden-placements.js';
|
|
10
|
+
|
|
11
|
+
const COMPONENT_ID = 'dropdowns.menu_wrapper';
|
|
12
|
+
const StyledMenuWrapper = styled.div.attrs(props => ({
|
|
13
|
+
'data-garden-id': COMPONENT_ID,
|
|
14
|
+
'data-garden-version': '9.0.0-next.8',
|
|
15
|
+
className: props.isAnimated && 'is-animated'
|
|
16
|
+
})).withConfig({
|
|
17
|
+
displayName: "StyledMenuWrapper",
|
|
18
|
+
componentId: "sc-u70fn3-0"
|
|
19
|
+
})(["", ";", ";"], props => menuStyles(getMenuPosition(props.placement), {
|
|
20
|
+
theme: props.theme,
|
|
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
|
+
}), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
26
|
+
StyledMenuWrapper.defaultProps = {
|
|
27
|
+
theme: DEFAULT_THEME
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export { StyledMenuWrapper };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled from 'styled-components';
|
|
8
|
+
import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
|
+
|
|
10
|
+
const COMPONENT_ID = 'dropdowns.separator';
|
|
11
|
+
const StyledSeparator = styled.li.attrs({
|
|
12
|
+
'data-garden-id': COMPONENT_ID,
|
|
13
|
+
'data-garden-version': '9.0.0-next.8',
|
|
14
|
+
role: 'separator'
|
|
15
|
+
}).withConfig({
|
|
16
|
+
displayName: "StyledSeparator",
|
|
17
|
+
componentId: "sc-oncsf0-0"
|
|
18
|
+
})(["display:block;margin:", "px 0;border-bottom:", ";", ";"], props => props.theme.space.base, props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 200, props.theme)}`, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
19
|
+
StyledSeparator.defaultProps = {
|
|
20
|
+
theme: DEFAULT_THEME
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export { StyledSeparator };
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled, { css } from 'styled-components';
|
|
8
|
+
import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
|
+
import { StyledInput } from '../select/StyledInput.js';
|
|
10
|
+
|
|
11
|
+
const COMPONENT_ID = 'dropdowns.multiselect_input';
|
|
12
|
+
const visibleStyling = props => {
|
|
13
|
+
const margin = props.isVisible ? `${props.theme.space.base / 2}px` : 0;
|
|
14
|
+
const minWidth = props.isVisible ? `${props.theme.space.base * 15}px` : 0;
|
|
15
|
+
let height = '0';
|
|
16
|
+
if (props.isVisible) {
|
|
17
|
+
height = `${props.theme.space.base * (props.isCompact ? 5 : 8)}px`;
|
|
18
|
+
}
|
|
19
|
+
return css(["opacity:", ";margin:", ";width:", ";min-width:", ";height:", ";"], !props.isVisible && 0, margin, !props.isVisible && 0, minWidth, height);
|
|
20
|
+
};
|
|
21
|
+
const StyledMultiselectInput = styled(StyledInput).attrs({
|
|
22
|
+
'data-garden-id': COMPONENT_ID,
|
|
23
|
+
'data-garden-version': '9.0.0-next.8',
|
|
24
|
+
isBare: true
|
|
25
|
+
}).withConfig({
|
|
26
|
+
displayName: "StyledMultiselectInput",
|
|
27
|
+
componentId: "sc-iiow29-0"
|
|
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
|
+
|
|
33
|
+
export { StyledMultiselectInput };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled from 'styled-components';
|
|
8
|
+
import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
|
+
|
|
10
|
+
const COMPONENT_ID = 'dropdowns.multiselect_item_wrapper';
|
|
11
|
+
const StyledMultiselectItemWrapper = styled.div.attrs({
|
|
12
|
+
'data-garden-id': COMPONENT_ID,
|
|
13
|
+
'data-garden-version': '9.0.0-next.8'
|
|
14
|
+
}).withConfig({
|
|
15
|
+
displayName: "StyledMultiselectItemWrapper",
|
|
16
|
+
componentId: "sc-vgr7nd-0"
|
|
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
|
+
|
|
22
|
+
export { StyledMultiselectItemWrapper };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled, { css } from 'styled-components';
|
|
8
|
+
import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
|
+
|
|
10
|
+
const COMPONENT_ID = 'dropdowns.multiselect_items_container';
|
|
11
|
+
const sizeStyles = props => {
|
|
12
|
+
let margin;
|
|
13
|
+
let padding;
|
|
14
|
+
if (!props.isBare) {
|
|
15
|
+
const marginVertical = props.isCompact ? `-${props.theme.space.base * 1.5}px` : `-${props.theme.space.base * 2.5}px`;
|
|
16
|
+
margin = `${marginVertical} 0`;
|
|
17
|
+
const paddingVertical = props.isCompact ? '3px' : '1px';
|
|
18
|
+
const paddingEnd = `${props.theme.space.base}px`;
|
|
19
|
+
padding = `${paddingVertical} ${props.theme.rtl ? 0 : paddingEnd} ${paddingVertical} ${props.theme.rtl ? paddingEnd : 0}`;
|
|
20
|
+
}
|
|
21
|
+
return css(["margin:", ";padding:", ";"], margin, padding);
|
|
22
|
+
};
|
|
23
|
+
const StyledMultiselectItemsContainer = styled.div.attrs({
|
|
24
|
+
'data-garden-id': COMPONENT_ID,
|
|
25
|
+
'data-garden-version': '9.0.0-next.8'
|
|
26
|
+
}).withConfig({
|
|
27
|
+
displayName: "StyledMultiselectItemsContainer",
|
|
28
|
+
componentId: "sc-1dxwjyz-0"
|
|
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
|
+
|
|
34
|
+
export { StyledMultiselectItemsContainer };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled from 'styled-components';
|
|
8
|
+
import { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
|
+
|
|
10
|
+
const COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
|
|
11
|
+
const StyledMultiselectMoreAnchor = styled.div.attrs({
|
|
12
|
+
'data-garden-id': COMPONENT_ID,
|
|
13
|
+
'data-garden-version': '9.0.0-next.8'
|
|
14
|
+
}).withConfig({
|
|
15
|
+
displayName: "StyledMultiselectMoreAnchor",
|
|
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.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 => props.isDisabled ? getColorV8('neutralHue', 400, props.theme) : getColorV8('primaryHue', 600, props.theme), props => !props.isDisabled && 'underline', props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
+
StyledMultiselectMoreAnchor.defaultProps = {
|
|
19
|
+
theme: DEFAULT_THEME
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export { StyledMultiselectMoreAnchor };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled from 'styled-components';
|
|
8
|
+
import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
|
+
import { FauxInput } from '@zendeskgarden/react-forms';
|
|
10
|
+
|
|
11
|
+
const COMPONENT_ID = 'dropdowns.faux_input';
|
|
12
|
+
const StyledFauxInput = styled(FauxInput).attrs(props => ({
|
|
13
|
+
'data-garden-id': COMPONENT_ID,
|
|
14
|
+
'data-garden-version': '9.0.0-next.8',
|
|
15
|
+
mediaLayout: true,
|
|
16
|
+
theme: props.theme
|
|
17
|
+
})).withConfig({
|
|
18
|
+
displayName: "StyledFauxInput",
|
|
19
|
+
componentId: "sc-bk8odf-0"
|
|
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
|
+
|
|
25
|
+
export { StyledFauxInput };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled, { css } from 'styled-components';
|
|
8
|
+
import { Input } from '@zendeskgarden/react-forms';
|
|
9
|
+
import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
10
|
+
|
|
11
|
+
const COMPONENT_ID = 'dropdowns.input';
|
|
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
|
+
const StyledInput = styled(Input).attrs({
|
|
14
|
+
'data-garden-id': COMPONENT_ID,
|
|
15
|
+
'data-garden-version': '9.0.0-next.8',
|
|
16
|
+
isBare: true
|
|
17
|
+
}).withConfig({
|
|
18
|
+
displayName: "StyledInput",
|
|
19
|
+
componentId: "sc-kykaw8-0"
|
|
20
|
+
})(["", ";", ";"], props => props.isHidden && hiddenStyling, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
21
|
+
StyledInput.defaultProps = {
|
|
22
|
+
theme: DEFAULT_THEME
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export { StyledInput };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled from 'styled-components';
|
|
8
|
+
import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
|
+
|
|
10
|
+
const COMPONENT_ID = 'dropdowns.select';
|
|
11
|
+
const StyledSelect = styled.div.attrs({
|
|
12
|
+
'data-garden-id': COMPONENT_ID,
|
|
13
|
+
'data-garden-version': '9.0.0-next.8'
|
|
14
|
+
}).withConfig({
|
|
15
|
+
displayName: "StyledSelect",
|
|
16
|
+
componentId: "sc-xf4qjv-0"
|
|
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
|
+
|
|
22
|
+
export { StyledSelect };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
const SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
|
|
8
|
+
const PLACEMENT = [...SHARED_PLACEMENT, 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'];
|
|
9
|
+
|
|
10
|
+
export { PLACEMENT };
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
function getPopperPlacement(gardenPlacement) {
|
|
8
|
+
switch (gardenPlacement) {
|
|
9
|
+
case 'end':
|
|
10
|
+
return 'right';
|
|
11
|
+
case 'end-top':
|
|
12
|
+
return 'right-start';
|
|
13
|
+
case 'end-bottom':
|
|
14
|
+
return 'right-end';
|
|
15
|
+
case 'start':
|
|
16
|
+
return 'left';
|
|
17
|
+
case 'start-top':
|
|
18
|
+
return 'left-start';
|
|
19
|
+
case 'start-bottom':
|
|
20
|
+
return 'left-end';
|
|
21
|
+
default:
|
|
22
|
+
return gardenPlacement;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
function getRtlPopperPlacement(gardenPlacement) {
|
|
26
|
+
const popperPlacement = getPopperPlacement(gardenPlacement);
|
|
27
|
+
switch (popperPlacement) {
|
|
28
|
+
case 'left':
|
|
29
|
+
return 'right';
|
|
30
|
+
case 'left-start':
|
|
31
|
+
return 'right-start';
|
|
32
|
+
case 'left-end':
|
|
33
|
+
return 'right-end';
|
|
34
|
+
case 'top-start':
|
|
35
|
+
return 'top-end';
|
|
36
|
+
case 'top-end':
|
|
37
|
+
return 'top-start';
|
|
38
|
+
case 'right':
|
|
39
|
+
return 'left';
|
|
40
|
+
case 'right-start':
|
|
41
|
+
return 'left-start';
|
|
42
|
+
case 'right-end':
|
|
43
|
+
return 'left-end';
|
|
44
|
+
case 'bottom-start':
|
|
45
|
+
return 'bottom-end';
|
|
46
|
+
case 'bottom-end':
|
|
47
|
+
return 'bottom-start';
|
|
48
|
+
default:
|
|
49
|
+
return popperPlacement;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
function getArrowPosition(popperPlacement) {
|
|
53
|
+
const arrowPositionMappings = {
|
|
54
|
+
auto: 'top',
|
|
55
|
+
top: 'bottom',
|
|
56
|
+
'top-start': 'bottom-left',
|
|
57
|
+
'top-end': 'bottom-right',
|
|
58
|
+
right: 'left',
|
|
59
|
+
'right-start': 'left-top',
|
|
60
|
+
'right-end': 'left-bottom',
|
|
61
|
+
bottom: 'top',
|
|
62
|
+
'bottom-start': 'top-left',
|
|
63
|
+
'bottom-end': 'top-right',
|
|
64
|
+
left: 'right',
|
|
65
|
+
'left-start': 'right-top',
|
|
66
|
+
'left-end': 'right-bottom'
|
|
67
|
+
};
|
|
68
|
+
return popperPlacement ? arrowPositionMappings[popperPlacement] : 'top';
|
|
69
|
+
}
|
|
70
|
+
function getMenuPosition(popperPlacement) {
|
|
71
|
+
if (popperPlacement === 'auto') {
|
|
72
|
+
return 'bottom';
|
|
73
|
+
}
|
|
74
|
+
return popperPlacement ? popperPlacement.split('-')[0] : 'bottom';
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
export { getArrowPosition, getMenuPosition, getPopperPlacement, getRtlPopperPlacement };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import React__default, { useContext } from 'react';
|
|
8
|
+
|
|
9
|
+
const DropdownContext = React__default.createContext(undefined);
|
|
10
|
+
const useDropdownContext = () => {
|
|
11
|
+
const dropdownContext = useContext(DropdownContext);
|
|
12
|
+
if (!dropdownContext) {
|
|
13
|
+
throw new Error('This component must be rendered within a `Dropdown` component.');
|
|
14
|
+
}
|
|
15
|
+
return dropdownContext;
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export { DropdownContext, useDropdownContext as default };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import React__default, { useContext } from 'react';
|
|
8
|
+
|
|
9
|
+
const FieldContext = React__default.createContext(undefined);
|
|
10
|
+
const useFieldContext = () => {
|
|
11
|
+
const fieldContext = useContext(FieldContext);
|
|
12
|
+
if (!fieldContext) {
|
|
13
|
+
throw new Error('This component must be rendered within a `Field` component.');
|
|
14
|
+
}
|
|
15
|
+
return fieldContext;
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export { FieldContext, useFieldContext as default };
|