@zendeskgarden/react-dropdowns 9.1.2 → 9.3.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/combobox/Combobox.js +1 -0
- package/dist/esm/elements/combobox/Field.js +1 -0
- package/dist/esm/elements/combobox/Hint.js +1 -0
- package/dist/esm/elements/combobox/Label.js +1 -0
- package/dist/esm/elements/combobox/Listbox.js +1 -0
- package/dist/esm/elements/combobox/Message.js +1 -0
- package/dist/esm/elements/combobox/OptGroup.js +1 -0
- package/dist/esm/elements/combobox/Option.js +7 -1
- package/dist/esm/elements/combobox/OptionMeta.js +1 -0
- package/dist/esm/elements/combobox/Tag.js +1 -0
- package/dist/esm/elements/menu/Item.js +1 -0
- package/dist/esm/elements/menu/ItemGroup.js +1 -0
- package/dist/esm/elements/menu/ItemMeta.js +1 -0
- package/dist/esm/elements/menu/MenuList.js +1 -0
- package/dist/esm/elements/menu/Separator.js +1 -0
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/circle-sm-fill.svg.js +27 -0
- package/dist/esm/views/combobox/StyledCombobox.js +1 -1
- package/dist/esm/views/combobox/StyledContainer.js +1 -1
- package/dist/esm/views/combobox/StyledField.js +2 -2
- package/dist/esm/views/combobox/StyledFloatingListbox.js +1 -1
- package/dist/esm/views/combobox/StyledHint.js +1 -1
- package/dist/esm/views/combobox/StyledInput.js +1 -1
- package/dist/esm/views/combobox/StyledInputGroup.js +1 -1
- package/dist/esm/views/combobox/StyledInputIcon.js +1 -1
- package/dist/esm/views/combobox/StyledLabel.js +1 -1
- package/dist/esm/views/combobox/StyledListbox.js +1 -1
- package/dist/esm/views/combobox/StyledListboxSeparator.js +1 -1
- package/dist/esm/views/combobox/StyledMessage.js +1 -1
- package/dist/esm/views/combobox/StyledOptGroup.js +1 -1
- package/dist/esm/views/combobox/StyledOption.js +1 -1
- package/dist/esm/views/combobox/StyledOptionContent.js +1 -1
- package/dist/esm/views/combobox/StyledOptionIcon.js +1 -1
- package/dist/esm/views/combobox/StyledOptionMeta.js +1 -1
- package/dist/esm/views/combobox/StyledOptionSelectionIcon.js +45 -0
- package/dist/esm/views/combobox/StyledOptionTypeIcon.js +1 -1
- package/dist/esm/views/combobox/StyledTag.js +1 -1
- package/dist/esm/views/combobox/StyledTagsButton.js +1 -1
- package/dist/esm/views/combobox/StyledTrigger.js +1 -1
- package/dist/esm/views/combobox/StyledValue.js +1 -1
- package/dist/esm/views/menu/StyledFloatingMenu.js +1 -1
- package/dist/esm/views/menu/StyledItem.js +1 -1
- package/dist/esm/views/menu/StyledItemContent.js +1 -1
- package/dist/esm/views/menu/StyledItemGroup.js +1 -1
- package/dist/esm/views/menu/StyledItemIcon.js +1 -1
- package/dist/esm/views/menu/StyledItemMeta.js +1 -1
- package/dist/esm/views/menu/StyledItemTypeIcon.js +1 -1
- package/dist/esm/views/menu/StyledMenu.js +1 -1
- package/dist/esm/views/menu/StyledSeparator.js +1 -1
- package/dist/index.cjs.js +169 -114
- package/dist/typings/elements/combobox/TagAvatar.d.ts +1 -1
- package/dist/typings/types/index.d.ts +2 -0
- package/dist/typings/views/combobox/StyledCombobox.d.ts +3 -4
- package/dist/typings/views/combobox/StyledContainer.d.ts +3 -4
- package/dist/typings/views/combobox/StyledField.d.ts +3 -4
- package/dist/typings/views/combobox/StyledFloatingListbox.d.ts +3 -4
- package/dist/typings/views/combobox/StyledHint.d.ts +5 -4
- package/dist/typings/views/combobox/StyledInput.d.ts +4 -5
- package/dist/typings/views/combobox/StyledInputGroup.d.ts +3 -5
- package/dist/typings/views/combobox/StyledInputIcon.d.ts +2 -5
- package/dist/typings/views/combobox/StyledLabel.d.ts +5 -4
- package/dist/typings/views/combobox/StyledListbox.d.ts +3 -4
- package/dist/typings/views/combobox/StyledListboxSeparator.d.ts +3 -5
- package/dist/typings/views/combobox/StyledMessage.d.ts +5 -4
- package/dist/typings/views/combobox/StyledOptGroup.d.ts +3 -4
- package/dist/typings/views/combobox/StyledOption.d.ts +3 -4
- package/dist/typings/views/combobox/StyledOptionContent.d.ts +3 -4
- package/dist/typings/views/combobox/StyledOptionIcon.d.ts +2 -5
- package/dist/typings/views/combobox/StyledOptionMeta.d.ts +3 -4
- package/dist/typings/views/combobox/StyledOptionSelectionIcon.d.ts +11 -0
- package/dist/typings/views/combobox/StyledOptionTypeIcon.d.ts +2 -5
- package/dist/typings/views/combobox/StyledTag.d.ts +6 -5
- package/dist/typings/views/combobox/StyledTagsButton.d.ts +5 -5
- package/dist/typings/views/combobox/StyledTrigger.d.ts +3 -4
- package/dist/typings/views/combobox/StyledValue.d.ts +3 -4
- package/dist/typings/views/index.d.ts +1 -0
- package/dist/typings/views/menu/StyledFloatingMenu.d.ts +5 -7
- package/dist/typings/views/menu/StyledItem.d.ts +5 -7
- package/dist/typings/views/menu/StyledItemContent.d.ts +5 -7
- package/dist/typings/views/menu/StyledItemGroup.d.ts +5 -7
- package/dist/typings/views/menu/StyledItemIcon.d.ts +1 -7
- package/dist/typings/views/menu/StyledItemMeta.d.ts +5 -7
- package/dist/typings/views/menu/StyledItemTypeIcon.d.ts +1 -7
- package/dist/typings/views/menu/StyledMenu.d.ts +5 -7
- package/dist/typings/views/menu/StyledSeparator.d.ts +5 -7
- package/package.json +8 -8
|
@@ -30,6 +30,7 @@ import '../../views/combobox/StyledOption.js';
|
|
|
30
30
|
import '../../views/combobox/StyledOptionContent.js';
|
|
31
31
|
import '../../views/combobox/StyledOptionIcon.js';
|
|
32
32
|
import '../../views/combobox/StyledOptionMeta.js';
|
|
33
|
+
import '../../views/combobox/StyledOptionSelectionIcon.js';
|
|
33
34
|
import '../../views/combobox/StyledOptionTypeIcon.js';
|
|
34
35
|
import '../../views/combobox/StyledTag.js';
|
|
35
36
|
import { StyledTagsButton } from '../../views/combobox/StyledTagsButton.js';
|
|
@@ -23,6 +23,7 @@ import '../../views/combobox/StyledOption.js';
|
|
|
23
23
|
import '../../views/combobox/StyledOptionContent.js';
|
|
24
24
|
import '../../views/combobox/StyledOptionIcon.js';
|
|
25
25
|
import '../../views/combobox/StyledOptionMeta.js';
|
|
26
|
+
import '../../views/combobox/StyledOptionSelectionIcon.js';
|
|
26
27
|
import '../../views/combobox/StyledOptionTypeIcon.js';
|
|
27
28
|
import '../../views/combobox/StyledTag.js';
|
|
28
29
|
import '../../views/combobox/StyledTagsButton.js';
|
|
@@ -23,6 +23,7 @@ import '../../views/combobox/StyledOption.js';
|
|
|
23
23
|
import '../../views/combobox/StyledOptionContent.js';
|
|
24
24
|
import '../../views/combobox/StyledOptionIcon.js';
|
|
25
25
|
import '../../views/combobox/StyledOptionMeta.js';
|
|
26
|
+
import '../../views/combobox/StyledOptionSelectionIcon.js';
|
|
26
27
|
import '../../views/combobox/StyledOptionTypeIcon.js';
|
|
27
28
|
import '../../views/combobox/StyledTag.js';
|
|
28
29
|
import '../../views/combobox/StyledTagsButton.js';
|
|
@@ -25,6 +25,7 @@ import '../../views/combobox/StyledOption.js';
|
|
|
25
25
|
import '../../views/combobox/StyledOptionContent.js';
|
|
26
26
|
import '../../views/combobox/StyledOptionIcon.js';
|
|
27
27
|
import '../../views/combobox/StyledOptionMeta.js';
|
|
28
|
+
import '../../views/combobox/StyledOptionSelectionIcon.js';
|
|
28
29
|
import '../../views/combobox/StyledOptionTypeIcon.js';
|
|
29
30
|
import '../../views/combobox/StyledTag.js';
|
|
30
31
|
import '../../views/combobox/StyledTagsButton.js';
|
|
@@ -25,6 +25,7 @@ import '../../views/combobox/StyledOption.js';
|
|
|
25
25
|
import '../../views/combobox/StyledOptionContent.js';
|
|
26
26
|
import '../../views/combobox/StyledOptionIcon.js';
|
|
27
27
|
import '../../views/combobox/StyledOptionMeta.js';
|
|
28
|
+
import '../../views/combobox/StyledOptionSelectionIcon.js';
|
|
28
29
|
import '../../views/combobox/StyledOptionTypeIcon.js';
|
|
29
30
|
import '../../views/combobox/StyledTag.js';
|
|
30
31
|
import '../../views/combobox/StyledTagsButton.js';
|
|
@@ -25,6 +25,7 @@ import '../../views/combobox/StyledOption.js';
|
|
|
25
25
|
import '../../views/combobox/StyledOptionContent.js';
|
|
26
26
|
import '../../views/combobox/StyledOptionIcon.js';
|
|
27
27
|
import '../../views/combobox/StyledOptionMeta.js';
|
|
28
|
+
import '../../views/combobox/StyledOptionSelectionIcon.js';
|
|
28
29
|
import '../../views/combobox/StyledOptionTypeIcon.js';
|
|
29
30
|
import '../../views/combobox/StyledTag.js';
|
|
30
31
|
import '../../views/combobox/StyledTagsButton.js';
|
|
@@ -26,6 +26,7 @@ import { StyledOption } from '../../views/combobox/StyledOption.js';
|
|
|
26
26
|
import { StyledOptionContent } from '../../views/combobox/StyledOptionContent.js';
|
|
27
27
|
import '../../views/combobox/StyledOptionIcon.js';
|
|
28
28
|
import '../../views/combobox/StyledOptionMeta.js';
|
|
29
|
+
import '../../views/combobox/StyledOptionSelectionIcon.js';
|
|
29
30
|
import { StyledOptionTypeIcon } from '../../views/combobox/StyledOptionTypeIcon.js';
|
|
30
31
|
import '../../views/combobox/StyledTag.js';
|
|
31
32
|
import '../../views/combobox/StyledTagsButton.js';
|
|
@@ -11,6 +11,7 @@ import SvgPlusStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/pl
|
|
|
11
11
|
import SvgChevronRightStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg.js';
|
|
12
12
|
import SvgChevronLeftStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg.js';
|
|
13
13
|
import SvgCheckLgStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/check-lg-stroke.svg.js';
|
|
14
|
+
import SvgCircleSmFill from '../../node_modules/@zendeskgarden/svg-icons/src/12/circle-sm-fill.svg.js';
|
|
14
15
|
import { OPTION_TYPE } from '../../types/index.js';
|
|
15
16
|
import useComboboxContext from '../../context/useComboboxContext.js';
|
|
16
17
|
import { OptionContext } from '../../context/useOptionContext.js';
|
|
@@ -31,6 +32,7 @@ import { StyledOption } from '../../views/combobox/StyledOption.js';
|
|
|
31
32
|
import { StyledOptionContent } from '../../views/combobox/StyledOptionContent.js';
|
|
32
33
|
import { StyledOptionIcon } from '../../views/combobox/StyledOptionIcon.js';
|
|
33
34
|
import '../../views/combobox/StyledOptionMeta.js';
|
|
35
|
+
import { StyledOptionSelectionIcon } from '../../views/combobox/StyledOptionSelectionIcon.js';
|
|
34
36
|
import { StyledOptionTypeIcon } from '../../views/combobox/StyledOptionTypeIcon.js';
|
|
35
37
|
import '../../views/combobox/StyledTag.js';
|
|
36
38
|
import '../../views/combobox/StyledTagsButton.js';
|
|
@@ -51,6 +53,7 @@ import { toOption } from './utils.js';
|
|
|
51
53
|
const OptionComponent = forwardRef((_ref, ref) => {
|
|
52
54
|
let {
|
|
53
55
|
children,
|
|
56
|
+
hasSelection,
|
|
54
57
|
icon,
|
|
55
58
|
isDisabled,
|
|
56
59
|
isHidden,
|
|
@@ -112,7 +115,9 @@ const OptionComponent = forwardRef((_ref, ref) => {
|
|
|
112
115
|
$isActive: isActive,
|
|
113
116
|
$isCompact: isCompact,
|
|
114
117
|
$type: type
|
|
115
|
-
}, props, optionProps), React__default.createElement(
|
|
118
|
+
}, props, optionProps), !!hasSelection && type === 'next' && React__default.createElement(StyledOptionSelectionIcon, {
|
|
119
|
+
$isCompact: isCompact
|
|
120
|
+
}, React__default.createElement(SvgCircleSmFill, null)), React__default.createElement(StyledOptionTypeIcon, {
|
|
116
121
|
$isCompact: isCompact,
|
|
117
122
|
$type: type
|
|
118
123
|
}, renderActionIcon(type)), !!icon && React__default.createElement(StyledOptionIcon, {
|
|
@@ -122,6 +127,7 @@ const OptionComponent = forwardRef((_ref, ref) => {
|
|
|
122
127
|
});
|
|
123
128
|
OptionComponent.displayName = 'Option';
|
|
124
129
|
OptionComponent.propTypes = {
|
|
130
|
+
hasSelection: PropTypes.bool,
|
|
125
131
|
icon: PropTypes.any,
|
|
126
132
|
isDisabled: PropTypes.bool,
|
|
127
133
|
isSelected: PropTypes.bool,
|
|
@@ -23,6 +23,7 @@ import '../../views/combobox/StyledOption.js';
|
|
|
23
23
|
import '../../views/combobox/StyledOptionContent.js';
|
|
24
24
|
import '../../views/combobox/StyledOptionIcon.js';
|
|
25
25
|
import { StyledOptionMeta } from '../../views/combobox/StyledOptionMeta.js';
|
|
26
|
+
import '../../views/combobox/StyledOptionSelectionIcon.js';
|
|
26
27
|
import '../../views/combobox/StyledOptionTypeIcon.js';
|
|
27
28
|
import '../../views/combobox/StyledTag.js';
|
|
28
29
|
import '../../views/combobox/StyledTagsButton.js';
|
|
@@ -27,6 +27,7 @@ import '../../views/combobox/StyledOption.js';
|
|
|
27
27
|
import '../../views/combobox/StyledOptionContent.js';
|
|
28
28
|
import '../../views/combobox/StyledOptionIcon.js';
|
|
29
29
|
import '../../views/combobox/StyledOptionMeta.js';
|
|
30
|
+
import '../../views/combobox/StyledOptionSelectionIcon.js';
|
|
30
31
|
import '../../views/combobox/StyledOptionTypeIcon.js';
|
|
31
32
|
import { StyledTag } from '../../views/combobox/StyledTag.js';
|
|
32
33
|
import '../../views/combobox/StyledTagsButton.js';
|
|
@@ -29,6 +29,7 @@ import '../../views/combobox/StyledOption.js';
|
|
|
29
29
|
import '../../views/combobox/StyledOptionContent.js';
|
|
30
30
|
import '../../views/combobox/StyledOptionIcon.js';
|
|
31
31
|
import '../../views/combobox/StyledOptionMeta.js';
|
|
32
|
+
import '../../views/combobox/StyledOptionSelectionIcon.js';
|
|
32
33
|
import '../../views/combobox/StyledOptionTypeIcon.js';
|
|
33
34
|
import '../../views/combobox/StyledTag.js';
|
|
34
35
|
import '../../views/combobox/StyledTagsButton.js';
|
|
@@ -25,6 +25,7 @@ import '../../views/combobox/StyledOption.js';
|
|
|
25
25
|
import '../../views/combobox/StyledOptionContent.js';
|
|
26
26
|
import '../../views/combobox/StyledOptionIcon.js';
|
|
27
27
|
import '../../views/combobox/StyledOptionMeta.js';
|
|
28
|
+
import '../../views/combobox/StyledOptionSelectionIcon.js';
|
|
28
29
|
import '../../views/combobox/StyledOptionTypeIcon.js';
|
|
29
30
|
import '../../views/combobox/StyledTag.js';
|
|
30
31
|
import '../../views/combobox/StyledTagsButton.js';
|
|
@@ -23,6 +23,7 @@ import '../../views/combobox/StyledOption.js';
|
|
|
23
23
|
import '../../views/combobox/StyledOptionContent.js';
|
|
24
24
|
import '../../views/combobox/StyledOptionIcon.js';
|
|
25
25
|
import '../../views/combobox/StyledOptionMeta.js';
|
|
26
|
+
import '../../views/combobox/StyledOptionSelectionIcon.js';
|
|
26
27
|
import '../../views/combobox/StyledOptionTypeIcon.js';
|
|
27
28
|
import '../../views/combobox/StyledTag.js';
|
|
28
29
|
import '../../views/combobox/StyledTagsButton.js';
|
|
@@ -27,6 +27,7 @@ import '../../views/combobox/StyledOption.js';
|
|
|
27
27
|
import '../../views/combobox/StyledOptionContent.js';
|
|
28
28
|
import '../../views/combobox/StyledOptionIcon.js';
|
|
29
29
|
import '../../views/combobox/StyledOptionMeta.js';
|
|
30
|
+
import '../../views/combobox/StyledOptionSelectionIcon.js';
|
|
30
31
|
import '../../views/combobox/StyledOptionTypeIcon.js';
|
|
31
32
|
import '../../views/combobox/StyledTag.js';
|
|
32
33
|
import '../../views/combobox/StyledTagsButton.js';
|
|
@@ -22,6 +22,7 @@ import '../../views/combobox/StyledOption.js';
|
|
|
22
22
|
import '../../views/combobox/StyledOptionContent.js';
|
|
23
23
|
import '../../views/combobox/StyledOptionIcon.js';
|
|
24
24
|
import '../../views/combobox/StyledOptionMeta.js';
|
|
25
|
+
import '../../views/combobox/StyledOptionSelectionIcon.js';
|
|
25
26
|
import '../../views/combobox/StyledOptionTypeIcon.js';
|
|
26
27
|
import '../../views/combobox/StyledTag.js';
|
|
27
28
|
import '../../views/combobox/StyledTagsButton.js';
|
|
@@ -0,0 +1,27 @@
|
|
|
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 * as React from 'react';
|
|
8
|
+
|
|
9
|
+
var _circle;
|
|
10
|
+
function _extends() { return _extends = 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.apply(null, arguments); }
|
|
11
|
+
var SvgCircleSmFill = function SvgCircleSmFill(props) {
|
|
12
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
13
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
14
|
+
width: 12,
|
|
15
|
+
height: 12,
|
|
16
|
+
focusable: "false",
|
|
17
|
+
viewBox: "0 0 12 12",
|
|
18
|
+
"aria-hidden": "true"
|
|
19
|
+
}, props), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
|
|
20
|
+
cx: 6,
|
|
21
|
+
cy: 6,
|
|
22
|
+
r: 2,
|
|
23
|
+
fill: "currentColor"
|
|
24
|
+
})));
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export { SvgCircleSmFill as default };
|
|
@@ -18,7 +18,7 @@ const sizeStyles = props => {
|
|
|
18
18
|
};
|
|
19
19
|
const StyledCombobox = styled.div.attrs({
|
|
20
20
|
'data-garden-id': COMPONENT_ID,
|
|
21
|
-
'data-garden-version': '9.
|
|
21
|
+
'data-garden-version': '9.3.0'
|
|
22
22
|
}).withConfig({
|
|
23
23
|
displayName: "StyledCombobox",
|
|
24
24
|
componentId: "sc-13eybg8-0"
|
|
@@ -10,7 +10,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
|
10
10
|
const COMPONENT_ID = 'dropdowns.combobox.container';
|
|
11
11
|
const StyledContainer = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.
|
|
13
|
+
'data-garden-version': '9.3.0'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledContainer",
|
|
16
16
|
componentId: "sc-14i9jid-0"
|
|
@@ -10,10 +10,10 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
|
10
10
|
const COMPONENT_ID = 'dropdowns.combobox.field';
|
|
11
11
|
const StyledField = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.
|
|
13
|
+
'data-garden-version': '9.3.0'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledField",
|
|
16
16
|
componentId: "sc-zc57xl-0"
|
|
17
|
-
})(["direction:", ";", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
17
|
+
})(["direction:", ";text-align:start;", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
18
|
|
|
19
19
|
export { StyledField };
|
|
@@ -10,7 +10,7 @@ import { menuStyles, retrieveComponentStyles } from '@zendeskgarden/react-themin
|
|
|
10
10
|
const COMPONENT_ID = 'dropdowns.combobox.floating';
|
|
11
11
|
const StyledFloatingListbox = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.
|
|
13
|
+
'data-garden-version': '9.3.0'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledFloatingListbox",
|
|
16
16
|
componentId: "sc-1cp6spf-0"
|
|
@@ -11,7 +11,7 @@ import { Field } from '@zendeskgarden/react-forms';
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.combobox.hint';
|
|
12
12
|
const StyledHint = styled(Field.Hint).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.
|
|
14
|
+
'data-garden-version': '9.3.0'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledHint",
|
|
17
17
|
componentId: "sc-106qvqx-0"
|
|
@@ -35,7 +35,7 @@ const sizeStyles = props => {
|
|
|
35
35
|
};
|
|
36
36
|
const StyledInput = styled.input.attrs({
|
|
37
37
|
'data-garden-id': COMPONENT_ID,
|
|
38
|
-
'data-garden-version': '9.
|
|
38
|
+
'data-garden-version': '9.3.0'
|
|
39
39
|
}).withConfig({
|
|
40
40
|
displayName: "StyledInput",
|
|
41
41
|
componentId: "sc-1lkqdg-0"
|
|
@@ -14,7 +14,7 @@ const sizeStyles = props => {
|
|
|
14
14
|
};
|
|
15
15
|
const StyledInputGroup = styled.div.attrs({
|
|
16
16
|
'data-garden-id': COMPONENT_ID,
|
|
17
|
-
'data-garden-version': '9.
|
|
17
|
+
'data-garden-version': '9.3.0'
|
|
18
18
|
}).withConfig({
|
|
19
19
|
displayName: "StyledInputGroup",
|
|
20
20
|
componentId: "sc-yx3q7u-0"
|
|
@@ -50,7 +50,7 @@ const sizeStyles = props => {
|
|
|
50
50
|
};
|
|
51
51
|
const StyledInputIcon = styled(StyledBaseIcon).attrs({
|
|
52
52
|
'data-garden-id': COMPONENT_ID,
|
|
53
|
-
'data-garden-version': '9.
|
|
53
|
+
'data-garden-version': '9.3.0'
|
|
54
54
|
}).withConfig({
|
|
55
55
|
displayName: "StyledInputIcon",
|
|
56
56
|
componentId: "sc-gqbs1s-0"
|
|
@@ -11,7 +11,7 @@ import { Field } from '@zendeskgarden/react-forms';
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.combobox.label';
|
|
12
12
|
const StyledLabel = styled(Field.Label).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.
|
|
14
|
+
'data-garden-version': '9.3.0'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledLabel",
|
|
17
17
|
componentId: "sc-az6now-0"
|
|
@@ -18,7 +18,7 @@ const sizeStyles = props => {
|
|
|
18
18
|
};
|
|
19
19
|
const StyledListbox = styled.ul.attrs({
|
|
20
20
|
'data-garden-id': COMPONENT_ID,
|
|
21
|
-
'data-garden-version': '9.
|
|
21
|
+
'data-garden-version': '9.3.0'
|
|
22
22
|
}).withConfig({
|
|
23
23
|
displayName: "StyledListbox",
|
|
24
24
|
componentId: "sc-1k13ba7-0"
|
|
@@ -25,7 +25,7 @@ const sizeStyles = props => {
|
|
|
25
25
|
};
|
|
26
26
|
const StyledListboxSeparator = styled.li.attrs({
|
|
27
27
|
'data-garden-id': COMPONENT_ID,
|
|
28
|
-
'data-garden-version': '9.
|
|
28
|
+
'data-garden-version': '9.3.0'
|
|
29
29
|
}).withConfig({
|
|
30
30
|
displayName: "StyledListboxSeparator",
|
|
31
31
|
componentId: "sc-1p6toh2-0"
|
|
@@ -11,7 +11,7 @@ import { Field } from '@zendeskgarden/react-forms';
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.combobox.message';
|
|
12
12
|
const StyledMessage = styled(Field.Message).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.
|
|
14
|
+
'data-garden-version': '9.3.0'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledMessage",
|
|
17
17
|
componentId: "sc-jux8m5-0"
|
|
@@ -10,7 +10,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
|
10
10
|
const COMPONENT_ID = 'dropdowns.combobox.optgroup';
|
|
11
11
|
const StyledOptGroup = styled.ul.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.
|
|
13
|
+
'data-garden-version': '9.3.0'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledOptGroup",
|
|
16
16
|
componentId: "sc-1kavqsx-0"
|
|
@@ -57,7 +57,7 @@ const sizeStyles = props => {
|
|
|
57
57
|
};
|
|
58
58
|
const StyledOption = styled.li.attrs({
|
|
59
59
|
'data-garden-id': COMPONENT_ID,
|
|
60
|
-
'data-garden-version': '9.
|
|
60
|
+
'data-garden-version': '9.3.0'
|
|
61
61
|
}).withConfig({
|
|
62
62
|
displayName: "StyledOption",
|
|
63
63
|
componentId: "sc-jl4wn6-0"
|
|
@@ -10,7 +10,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
|
10
10
|
const COMPONENT_ID = 'dropdowns.combobox.option.content';
|
|
11
11
|
const StyledOptionContent = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.
|
|
13
|
+
'data-garden-version': '9.3.0'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledOptionContent",
|
|
16
16
|
componentId: "sc-121ujpu-0"
|
|
@@ -39,7 +39,7 @@ const sizeStyles = props => {
|
|
|
39
39
|
};
|
|
40
40
|
const StyledOptionIcon = styled(StyledBaseIcon).attrs({
|
|
41
41
|
'data-garden-id': COMPONENT_ID,
|
|
42
|
-
'data-garden-version': '9.
|
|
42
|
+
'data-garden-version': '9.3.0'
|
|
43
43
|
}).withConfig({
|
|
44
44
|
displayName: "StyledOptionIcon",
|
|
45
45
|
componentId: "sc-qsab3y-0"
|
|
@@ -27,7 +27,7 @@ const sizeStyles = props => {
|
|
|
27
27
|
};
|
|
28
28
|
const StyledOptionMeta = styled.div.attrs({
|
|
29
29
|
'data-garden-id': COMPONENT_ID,
|
|
30
|
-
'data-garden-version': '9.
|
|
30
|
+
'data-garden-version': '9.3.0'
|
|
31
31
|
}).withConfig({
|
|
32
32
|
displayName: "StyledOptionMeta",
|
|
33
33
|
componentId: "sc-j6pu10-0"
|
|
@@ -0,0 +1,45 @@
|
|
|
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 { math } from 'polished';
|
|
9
|
+
import { StyledBaseIcon, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
10
|
+
import { getMinHeight } from './StyledOption.js';
|
|
11
|
+
|
|
12
|
+
const COMPONENT_ID = 'dropdowns.combobox.option.selection_icon';
|
|
13
|
+
const colorStyles = _ref => {
|
|
14
|
+
let {
|
|
15
|
+
theme
|
|
16
|
+
} = _ref;
|
|
17
|
+
const color = getColor({
|
|
18
|
+
theme,
|
|
19
|
+
variable: 'foreground.primary'
|
|
20
|
+
});
|
|
21
|
+
return css(["color:", ";"], color);
|
|
22
|
+
};
|
|
23
|
+
const sizeStyles = _ref2 => {
|
|
24
|
+
let {
|
|
25
|
+
theme,
|
|
26
|
+
$isCompact
|
|
27
|
+
} = _ref2;
|
|
28
|
+
const size = theme.iconSizes.sm;
|
|
29
|
+
const position = `${theme.space.base * 3.5}px`;
|
|
30
|
+
const top = math(`(${getMinHeight({
|
|
31
|
+
theme,
|
|
32
|
+
$isCompact
|
|
33
|
+
})} - ${size}) / 2`);
|
|
34
|
+
const side = theme.rtl ? 'right' : 'left';
|
|
35
|
+
return css(["top:", ";", ":", ";width:", ";height:", ";"], top, side, position, size, size);
|
|
36
|
+
};
|
|
37
|
+
const StyledOptionSelectionIcon = styled(StyledBaseIcon).attrs({
|
|
38
|
+
'data-garden-id': COMPONENT_ID,
|
|
39
|
+
'data-garden-version': '9.3.0'
|
|
40
|
+
}).withConfig({
|
|
41
|
+
displayName: "StyledOptionSelectionIcon",
|
|
42
|
+
componentId: "sc-12wj24m-0"
|
|
43
|
+
})(["position:absolute;", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
44
|
+
|
|
45
|
+
export { StyledOptionSelectionIcon };
|
|
@@ -46,7 +46,7 @@ const sizeStyles = props => {
|
|
|
46
46
|
};
|
|
47
47
|
const StyledOptionTypeIcon = styled(StyledBaseIcon).attrs({
|
|
48
48
|
'data-garden-id': COMPONENT_ID,
|
|
49
|
-
'data-garden-version': '9.
|
|
49
|
+
'data-garden-version': '9.3.0'
|
|
50
50
|
}).withConfig({
|
|
51
51
|
displayName: "StyledOptionTypeIcon",
|
|
52
52
|
componentId: "sc-xpink2-0"
|
|
@@ -12,7 +12,7 @@ import { Tag } from '@zendeskgarden/react-tags';
|
|
|
12
12
|
const COMPONENT_ID = 'dropdowns.combobox.tag';
|
|
13
13
|
const StyledTag = styled(Tag).attrs({
|
|
14
14
|
'data-garden-id': COMPONENT_ID,
|
|
15
|
-
'data-garden-version': '9.
|
|
15
|
+
'data-garden-version': '9.3.0'
|
|
16
16
|
}).withConfig({
|
|
17
17
|
displayName: "StyledTag",
|
|
18
18
|
componentId: "sc-1alam0r-0"
|
|
@@ -22,7 +22,7 @@ const colorStyles = _ref => {
|
|
|
22
22
|
const StyledTagsButton = styled(StyledValue).attrs({
|
|
23
23
|
as: 'button',
|
|
24
24
|
'data-garden-id': COMPONENT_ID,
|
|
25
|
-
'data-garden-version': '9.
|
|
25
|
+
'data-garden-version': '9.3.0'
|
|
26
26
|
}).withConfig({
|
|
27
27
|
displayName: "StyledTagsButton",
|
|
28
28
|
componentId: "sc-6q5w33-0"
|
|
@@ -113,7 +113,7 @@ const sizeStyles = props => {
|
|
|
113
113
|
};
|
|
114
114
|
const StyledTrigger = styled.div.attrs({
|
|
115
115
|
'data-garden-id': COMPONENT_ID,
|
|
116
|
-
'data-garden-version': '9.
|
|
116
|
+
'data-garden-version': '9.3.0'
|
|
117
117
|
}).withConfig({
|
|
118
118
|
displayName: "StyledTrigger",
|
|
119
119
|
componentId: "sc-116nftk-0"
|
|
@@ -22,7 +22,7 @@ const colorStyles = _ref => {
|
|
|
22
22
|
};
|
|
23
23
|
const StyledValue = styled.div.attrs({
|
|
24
24
|
'data-garden-id': COMPONENT_ID,
|
|
25
|
-
'data-garden-version': '9.
|
|
25
|
+
'data-garden-version': '9.3.0'
|
|
26
26
|
}).withConfig({
|
|
27
27
|
displayName: "StyledValue",
|
|
28
28
|
componentId: "sc-t719sx-0"
|
|
@@ -11,7 +11,7 @@ import { StyledFloatingListbox } from '../combobox/StyledFloatingListbox.js';
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.menu.floating';
|
|
12
12
|
const StyledFloatingMenu = styled(StyledFloatingListbox).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.
|
|
14
|
+
'data-garden-version': '9.3.0'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledFloatingMenu",
|
|
17
17
|
componentId: "sc-1rc7ahb-0"
|
|
@@ -11,7 +11,7 @@ import { StyledOption } from '../combobox/StyledOption.js';
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.menu.item';
|
|
12
12
|
const StyledItem = styled(StyledOption).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.
|
|
14
|
+
'data-garden-version': '9.3.0'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledItem",
|
|
17
17
|
componentId: "sc-1jp99dq-0"
|
|
@@ -11,7 +11,7 @@ import { StyledOptionContent } from '../combobox/StyledOptionContent.js';
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.menu.item.content';
|
|
12
12
|
const StyledItemContent = styled(StyledOptionContent).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.
|
|
14
|
+
'data-garden-version': '9.3.0'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledItemContent",
|
|
17
17
|
componentId: "sc-1opglsb-0"
|
|
@@ -11,7 +11,7 @@ import { StyledOptGroup } from '../combobox/StyledOptGroup.js';
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.menu.item_group';
|
|
12
12
|
const StyledItemGroup = styled(StyledOptGroup).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.
|
|
14
|
+
'data-garden-version': '9.3.0'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledItemGroup",
|
|
17
17
|
componentId: "sc-1umk3cg-0"
|
|
@@ -11,7 +11,7 @@ import { StyledOptionIcon } from '../combobox/StyledOptionIcon.js';
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.menu.item.icon';
|
|
12
12
|
const StyledItemIcon = styled(StyledOptionIcon).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.
|
|
14
|
+
'data-garden-version': '9.3.0'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledItemIcon",
|
|
17
17
|
componentId: "sc-w9orqb-0"
|
|
@@ -11,7 +11,7 @@ import { StyledOptionMeta } from '../combobox/StyledOptionMeta.js';
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.menu.item.meta';
|
|
12
12
|
const StyledItemMeta = styled(StyledOptionMeta).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.
|
|
14
|
+
'data-garden-version': '9.3.0'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledItemMeta",
|
|
17
17
|
componentId: "sc-1unw3x1-0"
|
|
@@ -12,7 +12,7 @@ import { StyledItem } from './StyledItem.js';
|
|
|
12
12
|
const COMPONENT_ID = 'dropdowns.menu.item.type_icon';
|
|
13
13
|
const StyledItemTypeIcon = styled(StyledOptionTypeIcon).attrs({
|
|
14
14
|
'data-garden-id': COMPONENT_ID,
|
|
15
|
-
'data-garden-version': '9.
|
|
15
|
+
'data-garden-version': '9.3.0'
|
|
16
16
|
}).withConfig({
|
|
17
17
|
displayName: "StyledItemTypeIcon",
|
|
18
18
|
componentId: "sc-1pll3nu-0"
|
|
@@ -11,7 +11,7 @@ import { StyledListbox } from '../combobox/StyledListbox.js';
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.menu';
|
|
12
12
|
const StyledMenu = styled(StyledListbox).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.
|
|
14
|
+
'data-garden-version': '9.3.0'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledMenu",
|
|
17
17
|
componentId: "sc-f77ntu-0"
|
|
@@ -11,7 +11,7 @@ import { StyledListboxSeparator } from '../combobox/StyledListboxSeparator.js';
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.menu.separator';
|
|
12
12
|
const StyledSeparator = styled(StyledListboxSeparator).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.
|
|
14
|
+
'data-garden-version': '9.3.0'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledSeparator",
|
|
17
17
|
componentId: "sc-8kqwen-0"
|