@zendeskgarden/react-dropdowns 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/elements/menu/Menu.js +4 -3
- package/dist/esm/elements/menu/MenuList.js +1 -1
- package/dist/esm/views/combobox/StyledCombobox.js +2 -5
- package/dist/esm/views/combobox/StyledContainer.js +2 -5
- package/dist/esm/views/combobox/StyledField.js +2 -5
- package/dist/esm/views/combobox/StyledFloatingListbox.js +2 -5
- package/dist/esm/views/combobox/StyledHint.js +2 -5
- package/dist/esm/views/combobox/StyledInput.js +2 -5
- package/dist/esm/views/combobox/StyledInputGroup.js +2 -5
- package/dist/esm/views/combobox/StyledInputIcon.js +2 -5
- package/dist/esm/views/combobox/StyledLabel.js +2 -5
- package/dist/esm/views/combobox/StyledListbox.js +1 -5
- package/dist/esm/views/combobox/StyledListboxSeparator.js +2 -5
- package/dist/esm/views/combobox/StyledMessage.js +2 -5
- package/dist/esm/views/combobox/StyledOptGroup.js +2 -5
- package/dist/esm/views/combobox/StyledOption.js +2 -5
- package/dist/esm/views/combobox/StyledOptionContent.js +2 -5
- package/dist/esm/views/combobox/StyledOptionIcon.js +2 -5
- package/dist/esm/views/combobox/StyledOptionMeta.js +2 -5
- package/dist/esm/views/combobox/StyledOptionTypeIcon.js +2 -5
- package/dist/esm/views/combobox/StyledTag.js +2 -5
- package/dist/esm/views/combobox/StyledTagsButton.js +2 -5
- package/dist/esm/views/combobox/StyledTrigger.js +2 -5
- package/dist/esm/views/combobox/StyledValue.js +2 -5
- package/dist/esm/views/menu/StyledFloatingMenu.js +2 -5
- package/dist/esm/views/menu/StyledItem.js +2 -5
- package/dist/esm/views/menu/StyledItemContent.js +2 -5
- package/dist/esm/views/menu/StyledItemGroup.js +2 -5
- package/dist/esm/views/menu/StyledItemIcon.js +2 -5
- package/dist/esm/views/menu/StyledItemMeta.js +2 -5
- package/dist/esm/views/menu/StyledItemTypeIcon.js +2 -5
- package/dist/esm/views/menu/StyledMenu.js +2 -5
- package/dist/esm/views/menu/StyledSeparator.js +2 -5
- package/dist/index.cjs.js +36 -128
- package/package.json +7 -7
|
@@ -5,19 +5,16 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledOptGroup } from '../combobox/StyledOptGroup.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.menu.item_group';
|
|
12
12
|
const StyledItemGroup = styled(StyledOptGroup).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.26'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledItemGroup",
|
|
17
17
|
componentId: "sc-1umk3cg-0"
|
|
18
18
|
})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
19
|
-
StyledItemGroup.defaultProps = {
|
|
20
|
-
theme: DEFAULT_THEME
|
|
21
|
-
};
|
|
22
19
|
|
|
23
20
|
export { StyledItemGroup };
|
|
@@ -5,19 +5,16 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledOptionIcon } from '../combobox/StyledOptionIcon.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.menu.item.icon';
|
|
12
12
|
const StyledItemIcon = styled(StyledOptionIcon).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.26'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledItemIcon",
|
|
17
17
|
componentId: "sc-w9orqb-0"
|
|
18
18
|
})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
19
|
-
StyledItemIcon.defaultProps = {
|
|
20
|
-
theme: DEFAULT_THEME
|
|
21
|
-
};
|
|
22
19
|
|
|
23
20
|
export { StyledItemIcon };
|
|
@@ -5,19 +5,16 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledOptionMeta } from '../combobox/StyledOptionMeta.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.menu.item.meta';
|
|
12
12
|
const StyledItemMeta = styled(StyledOptionMeta).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.26'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledItemMeta",
|
|
17
17
|
componentId: "sc-1unw3x1-0"
|
|
18
18
|
})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
19
|
-
StyledItemMeta.defaultProps = {
|
|
20
|
-
theme: DEFAULT_THEME
|
|
21
|
-
};
|
|
22
19
|
|
|
23
20
|
export { StyledItemMeta };
|
|
@@ -5,20 +5,17 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledOptionTypeIcon } from '../combobox/StyledOptionTypeIcon.js';
|
|
10
10
|
import { StyledItem } from './StyledItem.js';
|
|
11
11
|
|
|
12
12
|
const COMPONENT_ID = 'dropdowns.menu.item.type_icon';
|
|
13
13
|
const StyledItemTypeIcon = styled(StyledOptionTypeIcon).attrs({
|
|
14
14
|
'data-garden-id': COMPONENT_ID,
|
|
15
|
-
'data-garden-version': '9.0.0-next.
|
|
15
|
+
'data-garden-version': '9.0.0-next.26'
|
|
16
16
|
}).withConfig({
|
|
17
17
|
displayName: "StyledItemTypeIcon",
|
|
18
18
|
componentId: "sc-1pll3nu-0"
|
|
19
19
|
})(["", "[aria-checked='true'] > &{opacity:1;}", ";"], StyledItem, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
20
|
-
StyledItemTypeIcon.defaultProps = {
|
|
21
|
-
theme: DEFAULT_THEME
|
|
22
|
-
};
|
|
23
20
|
|
|
24
21
|
export { StyledItemTypeIcon };
|
|
@@ -5,13 +5,13 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { arrowStyles, retrieveComponentStyles
|
|
8
|
+
import { arrowStyles, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledListbox } from '../combobox/StyledListbox.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.menu';
|
|
12
12
|
const StyledMenu = styled(StyledListbox).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.26'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledMenu",
|
|
17
17
|
componentId: "sc-f77ntu-0"
|
|
@@ -20,8 +20,5 @@ const StyledMenu = styled(StyledListbox).attrs({
|
|
|
20
20
|
inset: '1px',
|
|
21
21
|
animationModifier: '[data-garden-animate-arrow="true"]'
|
|
22
22
|
}), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
23
|
-
StyledMenu.defaultProps = {
|
|
24
|
-
theme: DEFAULT_THEME
|
|
25
|
-
};
|
|
26
23
|
|
|
27
24
|
export { StyledMenu };
|
|
@@ -5,19 +5,16 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledListboxSeparator } from '../combobox/StyledListboxSeparator.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.menu.separator';
|
|
12
12
|
const StyledSeparator = styled(StyledListboxSeparator).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.26'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledSeparator",
|
|
17
17
|
componentId: "sc-8kqwen-0"
|
|
18
18
|
})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
19
|
-
StyledSeparator.defaultProps = {
|
|
20
|
-
theme: DEFAULT_THEME
|
|
21
|
-
};
|
|
22
19
|
|
|
23
20
|
export { StyledSeparator };
|
package/dist/index.cjs.js
CHANGED
|
@@ -83,38 +83,29 @@ const useFieldContext = () => {
|
|
|
83
83
|
const COMPONENT_ID$u = 'dropdowns.combobox.label';
|
|
84
84
|
const StyledLabel = styled__default.default(reactForms.Field.Label).attrs({
|
|
85
85
|
'data-garden-id': COMPONENT_ID$u,
|
|
86
|
-
'data-garden-version': '9.0.0-next.
|
|
86
|
+
'data-garden-version': '9.0.0-next.26'
|
|
87
87
|
}).withConfig({
|
|
88
88
|
displayName: "StyledLabel",
|
|
89
89
|
componentId: "sc-az6now-0"
|
|
90
90
|
})(["vertical-align:revert;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$u, props));
|
|
91
|
-
StyledLabel.defaultProps = {
|
|
92
|
-
theme: reactTheming.DEFAULT_THEME
|
|
93
|
-
};
|
|
94
91
|
|
|
95
92
|
const COMPONENT_ID$t = 'dropdowns.combobox.hint';
|
|
96
93
|
const StyledHint = styled__default.default(reactForms.Field.Hint).attrs({
|
|
97
94
|
'data-garden-id': COMPONENT_ID$t,
|
|
98
|
-
'data-garden-version': '9.0.0-next.
|
|
95
|
+
'data-garden-version': '9.0.0-next.26'
|
|
99
96
|
}).withConfig({
|
|
100
97
|
displayName: "StyledHint",
|
|
101
98
|
componentId: "sc-106qvqx-0"
|
|
102
99
|
})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$t, props));
|
|
103
|
-
StyledHint.defaultProps = {
|
|
104
|
-
theme: reactTheming.DEFAULT_THEME
|
|
105
|
-
};
|
|
106
100
|
|
|
107
101
|
const COMPONENT_ID$s = 'dropdowns.combobox.message';
|
|
108
102
|
const StyledMessage = styled__default.default(reactForms.Field.Message).attrs({
|
|
109
103
|
'data-garden-id': COMPONENT_ID$s,
|
|
110
|
-
'data-garden-version': '9.0.0-next.
|
|
104
|
+
'data-garden-version': '9.0.0-next.26'
|
|
111
105
|
}).withConfig({
|
|
112
106
|
displayName: "StyledMessage",
|
|
113
107
|
componentId: "sc-jux8m5-0"
|
|
114
108
|
})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$s, props));
|
|
115
|
-
StyledMessage.defaultProps = {
|
|
116
|
-
theme: reactTheming.DEFAULT_THEME
|
|
117
|
-
};
|
|
118
109
|
|
|
119
110
|
const COMPONENT_ID$r = 'dropdowns.combobox';
|
|
120
111
|
const sizeStyles$a = props => {
|
|
@@ -124,43 +115,34 @@ const sizeStyles$a = props => {
|
|
|
124
115
|
};
|
|
125
116
|
const StyledCombobox = styled__default.default.div.attrs({
|
|
126
117
|
'data-garden-id': COMPONENT_ID$r,
|
|
127
|
-
'data-garden-version': '9.0.0-next.
|
|
118
|
+
'data-garden-version': '9.0.0-next.26'
|
|
128
119
|
}).withConfig({
|
|
129
120
|
displayName: "StyledCombobox",
|
|
130
121
|
componentId: "sc-13eybg8-0"
|
|
131
122
|
})(["", ";", ";"], sizeStyles$a, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$r, props));
|
|
132
|
-
StyledCombobox.defaultProps = {
|
|
133
|
-
theme: reactTheming.DEFAULT_THEME
|
|
134
|
-
};
|
|
135
123
|
|
|
136
124
|
const COMPONENT_ID$q = 'dropdowns.combobox.container';
|
|
137
125
|
const StyledContainer = styled__default.default.div.attrs({
|
|
138
126
|
'data-garden-id': COMPONENT_ID$q,
|
|
139
|
-
'data-garden-version': '9.0.0-next.
|
|
127
|
+
'data-garden-version': '9.0.0-next.26'
|
|
140
128
|
}).withConfig({
|
|
141
129
|
displayName: "StyledContainer",
|
|
142
130
|
componentId: "sc-14i9jid-0"
|
|
143
131
|
})(["display:flex;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$q, props));
|
|
144
|
-
StyledContainer.defaultProps = {
|
|
145
|
-
theme: reactTheming.DEFAULT_THEME
|
|
146
|
-
};
|
|
147
132
|
|
|
148
133
|
const COMPONENT_ID$p = 'dropdowns.combobox.field';
|
|
149
134
|
const StyledField = styled__default.default.div.attrs({
|
|
150
135
|
'data-garden-id': COMPONENT_ID$p,
|
|
151
|
-
'data-garden-version': '9.0.0-next.
|
|
136
|
+
'data-garden-version': '9.0.0-next.26'
|
|
152
137
|
}).withConfig({
|
|
153
138
|
displayName: "StyledField",
|
|
154
139
|
componentId: "sc-zc57xl-0"
|
|
155
140
|
})(["direction:", ";", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$p, props));
|
|
156
|
-
StyledField.defaultProps = {
|
|
157
|
-
theme: reactTheming.DEFAULT_THEME
|
|
158
|
-
};
|
|
159
141
|
|
|
160
142
|
const COMPONENT_ID$o = 'dropdowns.combobox.floating';
|
|
161
143
|
const StyledFloatingListbox = styled__default.default.div.attrs({
|
|
162
144
|
'data-garden-id': COMPONENT_ID$o,
|
|
163
|
-
'data-garden-version': '9.0.0-next.
|
|
145
|
+
'data-garden-version': '9.0.0-next.26'
|
|
164
146
|
}).withConfig({
|
|
165
147
|
displayName: "StyledFloatingListbox",
|
|
166
148
|
componentId: "sc-1cp6spf-0"
|
|
@@ -170,9 +152,6 @@ const StyledFloatingListbox = styled__default.default.div.attrs({
|
|
|
170
152
|
animationModifier: '[data-garden-animate="true"]',
|
|
171
153
|
zIndex: props.zIndex
|
|
172
154
|
}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$o, props));
|
|
173
|
-
StyledFloatingListbox.defaultProps = {
|
|
174
|
-
theme: reactTheming.DEFAULT_THEME
|
|
175
|
-
};
|
|
176
155
|
|
|
177
156
|
const COMPONENT_ID$n = 'dropdowns.combobox.input';
|
|
178
157
|
const colorStyles$9 = _ref => {
|
|
@@ -201,14 +180,11 @@ const sizeStyles$9 = props => {
|
|
|
201
180
|
};
|
|
202
181
|
const StyledInput = styled__default.default.input.attrs({
|
|
203
182
|
'data-garden-id': COMPONENT_ID$n,
|
|
204
|
-
'data-garden-version': '9.0.0-next.
|
|
183
|
+
'data-garden-version': '9.0.0-next.26'
|
|
205
184
|
}).withConfig({
|
|
206
185
|
displayName: "StyledInput",
|
|
207
186
|
componentId: "sc-1lkqdg-0"
|
|
208
187
|
})(["flex-basis:0;flex-grow:1;border:none;padding:0;font-family:inherit;&:focus{outline:none;}", ";", ";&[hidden]{display:revert;", "}&[aria-hidden='true']{display:none;}", ";"], sizeStyles$9, colorStyles$9, props => props.isEditable && polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$n, props));
|
|
209
|
-
StyledInput.defaultProps = {
|
|
210
|
-
theme: reactTheming.DEFAULT_THEME
|
|
211
|
-
};
|
|
212
188
|
|
|
213
189
|
const COMPONENT_ID$m = 'dropdowns.combobox.input_group';
|
|
214
190
|
const sizeStyles$8 = props => {
|
|
@@ -217,14 +193,11 @@ const sizeStyles$8 = props => {
|
|
|
217
193
|
};
|
|
218
194
|
const StyledInputGroup = styled__default.default.div.attrs({
|
|
219
195
|
'data-garden-id': COMPONENT_ID$m,
|
|
220
|
-
'data-garden-version': '9.0.0-next.
|
|
196
|
+
'data-garden-version': '9.0.0-next.26'
|
|
221
197
|
}).withConfig({
|
|
222
198
|
displayName: "StyledInputGroup",
|
|
223
199
|
componentId: "sc-yx3q7u-0"
|
|
224
200
|
})(["display:flex;flex-grow:1;flex-wrap:wrap;", ";", ";"], sizeStyles$8, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props));
|
|
225
|
-
StyledInputGroup.defaultProps = {
|
|
226
|
-
theme: reactTheming.DEFAULT_THEME
|
|
227
|
-
};
|
|
228
201
|
|
|
229
202
|
const COMPONENT_ID$l = 'dropdowns.combobox.trigger';
|
|
230
203
|
const colorStyles$8 = _ref => {
|
|
@@ -330,14 +303,11 @@ const sizeStyles$7 = props => {
|
|
|
330
303
|
};
|
|
331
304
|
const StyledTrigger = styled__default.default.div.attrs({
|
|
332
305
|
'data-garden-id': COMPONENT_ID$l,
|
|
333
|
-
'data-garden-version': '9.0.0-next.
|
|
306
|
+
'data-garden-version': '9.0.0-next.26'
|
|
334
307
|
}).withConfig({
|
|
335
308
|
displayName: "StyledTrigger",
|
|
336
309
|
componentId: "sc-116nftk-0"
|
|
337
310
|
})(["overflow-y:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:", ";border-radius:", ";cursor:", ";box-sizing:border-box;", ";&:focus{outline:none;}", ";&[aria-disabled='true']{cursor:default;}", ";"], props => props.isBare && !props.isMultiselectable ? 'visible' : 'auto', props => props.isBare ? 'none' : props.theme.borders.sm, props => props.isBare ? '0' : props.theme.borderRadii.md, props => !props.isAutocomplete && props.isEditable ? 'text' : 'pointer', sizeStyles$7, colorStyles$8, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
|
|
338
|
-
StyledTrigger.defaultProps = {
|
|
339
|
-
theme: reactTheming.DEFAULT_THEME
|
|
340
|
-
};
|
|
341
311
|
|
|
342
312
|
const COMPONENT_ID$k = 'dropdowns.combobox.input_icon';
|
|
343
313
|
const colorStyles$7 = _ref => {
|
|
@@ -379,14 +349,11 @@ const sizeStyles$6 = props => {
|
|
|
379
349
|
};
|
|
380
350
|
const StyledInputIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
|
|
381
351
|
'data-garden-id': COMPONENT_ID$k,
|
|
382
|
-
'data-garden-version': '9.0.0-next.
|
|
352
|
+
'data-garden-version': '9.0.0-next.26'
|
|
383
353
|
}).withConfig({
|
|
384
354
|
displayName: "StyledInputIcon",
|
|
385
355
|
componentId: "sc-gqbs1s-0"
|
|
386
356
|
})(["position:sticky;flex-shrink:0;transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", ";", ";"], props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, sizeStyles$6, colorStyles$7, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props));
|
|
387
|
-
StyledInputIcon.defaultProps = {
|
|
388
|
-
theme: reactTheming.DEFAULT_THEME
|
|
389
|
-
};
|
|
390
357
|
|
|
391
358
|
const COMPONENT_ID$j = 'dropdowns.combobox.option';
|
|
392
359
|
const colorStyles$6 = _ref => {
|
|
@@ -437,38 +404,29 @@ const sizeStyles$5 = props => {
|
|
|
437
404
|
};
|
|
438
405
|
const StyledOption = styled__default.default.li.attrs({
|
|
439
406
|
'data-garden-id': COMPONENT_ID$j,
|
|
440
|
-
'data-garden-version': '9.0.0-next.
|
|
407
|
+
'data-garden-version': '9.0.0-next.26'
|
|
441
408
|
}).withConfig({
|
|
442
409
|
displayName: "StyledOption",
|
|
443
410
|
componentId: "sc-jl4wn6-0"
|
|
444
411
|
})(["display:flex;position:relative;transition:color 0.25s ease-in-out;cursor:", ";overflow-wrap:anywhere;font-weight:", ";user-select:none;&:focus{outline:none;}", ";", ";&[aria-disabled='true']{cursor:default;}&[aria-hidden='true']{", ";}", ";"], props => props.$type === 'group' || props.$type === 'header' ? 'default' : 'pointer', props => props.$type === 'header' || props.$type === 'previous' ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular, sizeStyles$5, colorStyles$6, polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props));
|
|
445
|
-
StyledOption.defaultProps = {
|
|
446
|
-
theme: reactTheming.DEFAULT_THEME
|
|
447
|
-
};
|
|
448
412
|
|
|
449
413
|
const COMPONENT_ID$i = 'dropdowns.combobox.option.content';
|
|
450
414
|
const StyledOptionContent = styled__default.default.div.attrs({
|
|
451
415
|
'data-garden-id': COMPONENT_ID$i,
|
|
452
|
-
'data-garden-version': '9.0.0-next.
|
|
416
|
+
'data-garden-version': '9.0.0-next.26'
|
|
453
417
|
}).withConfig({
|
|
454
418
|
displayName: "StyledOptionContent",
|
|
455
419
|
componentId: "sc-121ujpu-0"
|
|
456
420
|
})(["display:flex;flex-direction:column;flex-grow:1;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
|
|
457
|
-
StyledOptionContent.defaultProps = {
|
|
458
|
-
theme: reactTheming.DEFAULT_THEME
|
|
459
|
-
};
|
|
460
421
|
|
|
461
422
|
const COMPONENT_ID$h = 'dropdowns.combobox.optgroup';
|
|
462
423
|
const StyledOptGroup = styled__default.default.ul.attrs({
|
|
463
424
|
'data-garden-id': COMPONENT_ID$h,
|
|
464
|
-
'data-garden-version': '9.0.0-next.
|
|
425
|
+
'data-garden-version': '9.0.0-next.26'
|
|
465
426
|
}).withConfig({
|
|
466
427
|
displayName: "StyledOptGroup",
|
|
467
428
|
componentId: "sc-1kavqsx-0"
|
|
468
429
|
})(["margin:0;padding:0;list-style-type:none;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
|
|
469
|
-
StyledOptGroup.defaultProps = {
|
|
470
|
-
theme: reactTheming.DEFAULT_THEME
|
|
471
|
-
};
|
|
472
430
|
|
|
473
431
|
const COMPONENT_ID$g = 'dropdowns.combobox.separator';
|
|
474
432
|
const colorStyles$5 = _ref => {
|
|
@@ -488,14 +446,11 @@ const sizeStyles$4 = props => {
|
|
|
488
446
|
};
|
|
489
447
|
const StyledListboxSeparator = styled__default.default.li.attrs({
|
|
490
448
|
'data-garden-id': COMPONENT_ID$g,
|
|
491
|
-
'data-garden-version': '9.0.0-next.
|
|
449
|
+
'data-garden-version': '9.0.0-next.26'
|
|
492
450
|
}).withConfig({
|
|
493
451
|
displayName: "StyledListboxSeparator",
|
|
494
452
|
componentId: "sc-1p6toh2-0"
|
|
495
453
|
})(["cursor:default;", ";", ";", ";"], sizeStyles$4, colorStyles$5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
|
|
496
|
-
StyledListboxSeparator.defaultProps = {
|
|
497
|
-
theme: reactTheming.DEFAULT_THEME
|
|
498
|
-
};
|
|
499
454
|
|
|
500
455
|
const COMPONENT_ID$f = 'dropdowns.combobox.listbox';
|
|
501
456
|
const sizeStyles$3 = props => {
|
|
@@ -505,14 +460,11 @@ const sizeStyles$3 = props => {
|
|
|
505
460
|
};
|
|
506
461
|
const StyledListbox = styled__default.default.ul.attrs({
|
|
507
462
|
'data-garden-id': COMPONENT_ID$f,
|
|
508
|
-
'data-garden-version': '9.0.0-next.
|
|
463
|
+
'data-garden-version': '9.0.0-next.26'
|
|
509
464
|
}).withConfig({
|
|
510
465
|
displayName: "StyledListbox",
|
|
511
466
|
componentId: "sc-1k13ba7-0"
|
|
512
467
|
})(["overflow-y:auto;list-style-type:none;", ";&&&{display:block;}", ":first-child ", " ", ":first-child ", "[role='none']:first-child{display:none;}"], sizeStyles$3, StyledOption, StyledOptionContent, StyledOptGroup, StyledListboxSeparator);
|
|
513
|
-
StyledListbox.defaultProps = {
|
|
514
|
-
theme: reactTheming.DEFAULT_THEME
|
|
515
|
-
};
|
|
516
468
|
|
|
517
469
|
const COMPONENT_ID$e = 'dropdowns.combobox.option.icon';
|
|
518
470
|
const colorStyles$4 = _ref => {
|
|
@@ -545,14 +497,11 @@ const sizeStyles$2 = props => {
|
|
|
545
497
|
};
|
|
546
498
|
const StyledOptionIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
|
|
547
499
|
'data-garden-id': COMPONENT_ID$e,
|
|
548
|
-
'data-garden-version': '9.0.0-next.
|
|
500
|
+
'data-garden-version': '9.0.0-next.26'
|
|
549
501
|
}).withConfig({
|
|
550
502
|
displayName: "StyledOptionIcon",
|
|
551
503
|
componentId: "sc-qsab3y-0"
|
|
552
504
|
})(["flex-shrink:0;", ";", ";", ";"], sizeStyles$2, colorStyles$4, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
|
|
553
|
-
StyledOptionIcon.defaultProps = {
|
|
554
|
-
theme: reactTheming.DEFAULT_THEME
|
|
555
|
-
};
|
|
556
505
|
|
|
557
506
|
const COMPONENT_ID$d = 'dropdowns.combobox.option.meta';
|
|
558
507
|
const colorStyles$3 = _ref => {
|
|
@@ -574,14 +523,11 @@ const sizeStyles$1 = props => {
|
|
|
574
523
|
};
|
|
575
524
|
const StyledOptionMeta = styled__default.default.div.attrs({
|
|
576
525
|
'data-garden-id': COMPONENT_ID$d,
|
|
577
|
-
'data-garden-version': '9.0.0-next.
|
|
526
|
+
'data-garden-version': '9.0.0-next.26'
|
|
578
527
|
}).withConfig({
|
|
579
528
|
displayName: "StyledOptionMeta",
|
|
580
529
|
componentId: "sc-j6pu10-0"
|
|
581
530
|
})(["transition:color 0.25s ease-in-out;font-weight:", ";", ";", ";", ";"], props => props.theme.fontWeights.regular, sizeStyles$1, colorStyles$3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
|
|
582
|
-
StyledOptionMeta.defaultProps = {
|
|
583
|
-
theme: reactTheming.DEFAULT_THEME
|
|
584
|
-
};
|
|
585
531
|
|
|
586
532
|
const COMPONENT_ID$c = 'dropdowns.combobox.option.type_icon';
|
|
587
533
|
const colorStyles$2 = _ref => {
|
|
@@ -620,19 +566,16 @@ const sizeStyles = props => {
|
|
|
620
566
|
};
|
|
621
567
|
const StyledOptionTypeIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
|
|
622
568
|
'data-garden-id': COMPONENT_ID$c,
|
|
623
|
-
'data-garden-version': '9.0.0-next.
|
|
569
|
+
'data-garden-version': '9.0.0-next.26'
|
|
624
570
|
}).withConfig({
|
|
625
571
|
displayName: "StyledOptionTypeIcon",
|
|
626
572
|
componentId: "sc-xpink2-0"
|
|
627
573
|
})(["position:absolute;transform:", ";transition:opacity 0.1s ease-in-out;", ";", ";", ";"], props => props.theme.rtl && (props.$type === 'next' || props.$type === 'previous') && 'rotate(180deg)', sizeStyles, colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
|
|
628
|
-
StyledOptionTypeIcon.defaultProps = {
|
|
629
|
-
theme: reactTheming.DEFAULT_THEME
|
|
630
|
-
};
|
|
631
574
|
|
|
632
575
|
const COMPONENT_ID$b = 'dropdowns.combobox.tag';
|
|
633
576
|
const StyledTag = styled__default.default(reactTags.Tag).attrs({
|
|
634
577
|
'data-garden-id': COMPONENT_ID$b,
|
|
635
|
-
'data-garden-version': '9.0.0-next.
|
|
578
|
+
'data-garden-version': '9.0.0-next.26'
|
|
636
579
|
}).withConfig({
|
|
637
580
|
displayName: "StyledTag",
|
|
638
581
|
componentId: "sc-1alam0r-0"
|
|
@@ -640,9 +583,6 @@ const StyledTag = styled__default.default(reactTags.Tag).attrs({
|
|
|
640
583
|
theme: props.theme,
|
|
641
584
|
variable: 'foreground.disabled'
|
|
642
585
|
}), polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
|
|
643
|
-
StyledTag.defaultProps = {
|
|
644
|
-
theme: reactTheming.DEFAULT_THEME
|
|
645
|
-
};
|
|
646
586
|
|
|
647
587
|
const COMPONENT_ID$a = 'dropdowns.combobox.value';
|
|
648
588
|
const colorStyles$1 = _ref => {
|
|
@@ -658,7 +598,7 @@ const colorStyles$1 = _ref => {
|
|
|
658
598
|
};
|
|
659
599
|
const StyledValue = styled__default.default.div.attrs({
|
|
660
600
|
'data-garden-id': COMPONENT_ID$a,
|
|
661
|
-
'data-garden-version': '9.0.0-next.
|
|
601
|
+
'data-garden-version': '9.0.0-next.26'
|
|
662
602
|
}).withConfig({
|
|
663
603
|
displayName: "StyledValue",
|
|
664
604
|
componentId: "sc-t719sx-0"
|
|
@@ -668,9 +608,6 @@ const StyledValue = styled__default.default.div.attrs({
|
|
|
668
608
|
}
|
|
669
609
|
return props.isEditable && !props.isAutocomplete ? 'text' : 'pointer';
|
|
670
610
|
}, sizeStyles$9, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
|
|
671
|
-
StyledValue.defaultProps = {
|
|
672
|
-
theme: reactTheming.DEFAULT_THEME
|
|
673
|
-
};
|
|
674
611
|
|
|
675
612
|
const COMPONENT_ID$9 = 'dropdowns.combobox.tags_button';
|
|
676
613
|
const colorStyles = _ref => {
|
|
@@ -686,19 +623,16 @@ const colorStyles = _ref => {
|
|
|
686
623
|
const StyledTagsButton = styled__default.default(StyledValue).attrs({
|
|
687
624
|
as: 'button',
|
|
688
625
|
'data-garden-id': COMPONENT_ID$9,
|
|
689
|
-
'data-garden-version': '9.0.0-next.
|
|
626
|
+
'data-garden-version': '9.0.0-next.26'
|
|
690
627
|
}).withConfig({
|
|
691
628
|
displayName: "StyledTagsButton",
|
|
692
629
|
componentId: "sc-6q5w33-0"
|
|
693
630
|
})(["display:inline-flex;flex:0 1 auto;align-items:center;border:none;background-color:transparent;cursor:pointer;min-width:auto;font-family:inherit;&:hover{text-decoration:underline;}", ";&:disabled{cursor:default;text-decoration:none;}", ";"], colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
|
|
694
|
-
StyledTagsButton.defaultProps = {
|
|
695
|
-
theme: reactTheming.DEFAULT_THEME
|
|
696
|
-
};
|
|
697
631
|
|
|
698
632
|
const COMPONENT_ID$8 = 'dropdowns.menu';
|
|
699
633
|
const StyledMenu = styled__default.default(StyledListbox).attrs({
|
|
700
634
|
'data-garden-id': COMPONENT_ID$8,
|
|
701
|
-
'data-garden-version': '9.0.0-next.
|
|
635
|
+
'data-garden-version': '9.0.0-next.26'
|
|
702
636
|
}).withConfig({
|
|
703
637
|
displayName: "StyledMenu",
|
|
704
638
|
componentId: "sc-f77ntu-0"
|
|
@@ -707,105 +641,78 @@ const StyledMenu = styled__default.default(StyledListbox).attrs({
|
|
|
707
641
|
inset: '1px',
|
|
708
642
|
animationModifier: '[data-garden-animate-arrow="true"]'
|
|
709
643
|
}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
|
|
710
|
-
StyledMenu.defaultProps = {
|
|
711
|
-
theme: reactTheming.DEFAULT_THEME
|
|
712
|
-
};
|
|
713
644
|
|
|
714
645
|
const COMPONENT_ID$7 = 'dropdowns.menu.floating';
|
|
715
646
|
const StyledFloatingMenu = styled__default.default(StyledFloatingListbox).attrs({
|
|
716
647
|
'data-garden-id': COMPONENT_ID$7,
|
|
717
|
-
'data-garden-version': '9.0.0-next.
|
|
648
|
+
'data-garden-version': '9.0.0-next.26'
|
|
718
649
|
}).withConfig({
|
|
719
650
|
displayName: "StyledFloatingMenu",
|
|
720
651
|
componentId: "sc-1rc7ahb-0"
|
|
721
652
|
})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
|
|
722
|
-
StyledFloatingMenu.defaultProps = {
|
|
723
|
-
theme: reactTheming.DEFAULT_THEME
|
|
724
|
-
};
|
|
725
653
|
|
|
726
654
|
const COMPONENT_ID$6 = 'dropdowns.menu.item';
|
|
727
655
|
const StyledItem = styled__default.default(StyledOption).attrs({
|
|
728
656
|
'data-garden-id': COMPONENT_ID$6,
|
|
729
|
-
'data-garden-version': '9.0.0-next.
|
|
657
|
+
'data-garden-version': '9.0.0-next.26'
|
|
730
658
|
}).withConfig({
|
|
731
659
|
displayName: "StyledItem",
|
|
732
660
|
componentId: "sc-1jp99dq-0"
|
|
733
661
|
})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
|
|
734
|
-
StyledItem.defaultProps = {
|
|
735
|
-
theme: reactTheming.DEFAULT_THEME
|
|
736
|
-
};
|
|
737
662
|
|
|
738
663
|
const COMPONENT_ID$5 = 'dropdowns.menu.item.content';
|
|
739
664
|
const StyledItemContent = styled__default.default(StyledOptionContent).attrs({
|
|
740
665
|
'data-garden-id': COMPONENT_ID$5,
|
|
741
|
-
'data-garden-version': '9.0.0-next.
|
|
666
|
+
'data-garden-version': '9.0.0-next.26'
|
|
742
667
|
}).withConfig({
|
|
743
668
|
displayName: "StyledItemContent",
|
|
744
669
|
componentId: "sc-1opglsb-0"
|
|
745
670
|
})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
|
|
746
|
-
StyledItemContent.defaultProps = {
|
|
747
|
-
theme: reactTheming.DEFAULT_THEME
|
|
748
|
-
};
|
|
749
671
|
|
|
750
672
|
const COMPONENT_ID$4 = 'dropdowns.menu.item_group';
|
|
751
673
|
const StyledItemGroup = styled__default.default(StyledOptGroup).attrs({
|
|
752
674
|
'data-garden-id': COMPONENT_ID$4,
|
|
753
|
-
'data-garden-version': '9.0.0-next.
|
|
675
|
+
'data-garden-version': '9.0.0-next.26'
|
|
754
676
|
}).withConfig({
|
|
755
677
|
displayName: "StyledItemGroup",
|
|
756
678
|
componentId: "sc-1umk3cg-0"
|
|
757
679
|
})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
|
|
758
|
-
StyledItemGroup.defaultProps = {
|
|
759
|
-
theme: reactTheming.DEFAULT_THEME
|
|
760
|
-
};
|
|
761
680
|
|
|
762
681
|
const COMPONENT_ID$3 = 'dropdowns.menu.item.icon';
|
|
763
682
|
const StyledItemIcon = styled__default.default(StyledOptionIcon).attrs({
|
|
764
683
|
'data-garden-id': COMPONENT_ID$3,
|
|
765
|
-
'data-garden-version': '9.0.0-next.
|
|
684
|
+
'data-garden-version': '9.0.0-next.26'
|
|
766
685
|
}).withConfig({
|
|
767
686
|
displayName: "StyledItemIcon",
|
|
768
687
|
componentId: "sc-w9orqb-0"
|
|
769
688
|
})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
|
|
770
|
-
StyledItemIcon.defaultProps = {
|
|
771
|
-
theme: reactTheming.DEFAULT_THEME
|
|
772
|
-
};
|
|
773
689
|
|
|
774
690
|
const COMPONENT_ID$2 = 'dropdowns.menu.item.meta';
|
|
775
691
|
const StyledItemMeta = styled__default.default(StyledOptionMeta).attrs({
|
|
776
692
|
'data-garden-id': COMPONENT_ID$2,
|
|
777
|
-
'data-garden-version': '9.0.0-next.
|
|
693
|
+
'data-garden-version': '9.0.0-next.26'
|
|
778
694
|
}).withConfig({
|
|
779
695
|
displayName: "StyledItemMeta",
|
|
780
696
|
componentId: "sc-1unw3x1-0"
|
|
781
697
|
})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
|
|
782
|
-
StyledItemMeta.defaultProps = {
|
|
783
|
-
theme: reactTheming.DEFAULT_THEME
|
|
784
|
-
};
|
|
785
698
|
|
|
786
699
|
const COMPONENT_ID$1 = 'dropdowns.menu.item.type_icon';
|
|
787
700
|
const StyledItemTypeIcon = styled__default.default(StyledOptionTypeIcon).attrs({
|
|
788
701
|
'data-garden-id': COMPONENT_ID$1,
|
|
789
|
-
'data-garden-version': '9.0.0-next.
|
|
702
|
+
'data-garden-version': '9.0.0-next.26'
|
|
790
703
|
}).withConfig({
|
|
791
704
|
displayName: "StyledItemTypeIcon",
|
|
792
705
|
componentId: "sc-1pll3nu-0"
|
|
793
706
|
})(["", "[aria-checked='true'] > &{opacity:1;}", ";"], StyledItem, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
|
|
794
|
-
StyledItemTypeIcon.defaultProps = {
|
|
795
|
-
theme: reactTheming.DEFAULT_THEME
|
|
796
|
-
};
|
|
797
707
|
|
|
798
708
|
const COMPONENT_ID = 'dropdowns.menu.separator';
|
|
799
709
|
const StyledSeparator = styled__default.default(StyledListboxSeparator).attrs({
|
|
800
710
|
'data-garden-id': COMPONENT_ID,
|
|
801
|
-
'data-garden-version': '9.0.0-next.
|
|
711
|
+
'data-garden-version': '9.0.0-next.26'
|
|
802
712
|
}).withConfig({
|
|
803
713
|
displayName: "StyledSeparator",
|
|
804
714
|
componentId: "sc-8kqwen-0"
|
|
805
715
|
})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
|
|
806
|
-
StyledSeparator.defaultProps = {
|
|
807
|
-
theme: reactTheming.DEFAULT_THEME
|
|
808
|
-
};
|
|
809
716
|
|
|
810
717
|
const Listbox = React.forwardRef((_ref, ref) => {
|
|
811
718
|
let {
|
|
@@ -1753,7 +1660,7 @@ const MenuList = React.forwardRef((_ref, ref) => {
|
|
|
1753
1660
|
children, update]);
|
|
1754
1661
|
const Node = React__namespace.default.createElement(StyledFloatingMenu, {
|
|
1755
1662
|
"data-garden-animate": isVisible,
|
|
1756
|
-
isHidden: !isExpanded,
|
|
1663
|
+
isHidden: !isExpanded || !isVisible ,
|
|
1757
1664
|
position: reactTheming.getMenuPosition(placement),
|
|
1758
1665
|
zIndex: zIndex,
|
|
1759
1666
|
style: {
|
|
@@ -1792,7 +1699,7 @@ MenuList.defaultProps = {
|
|
|
1792
1699
|
zIndex: 1000
|
|
1793
1700
|
};
|
|
1794
1701
|
|
|
1795
|
-
const Menu = React.forwardRef((
|
|
1702
|
+
const Menu = React.forwardRef((_ref2, ref) => {
|
|
1796
1703
|
let {
|
|
1797
1704
|
button,
|
|
1798
1705
|
buttonProps: _buttonProps = {},
|
|
@@ -1806,7 +1713,7 @@ const Menu = React.forwardRef((_ref, ref) => {
|
|
|
1806
1713
|
onChange,
|
|
1807
1714
|
onMouseLeave,
|
|
1808
1715
|
...props
|
|
1809
|
-
} =
|
|
1716
|
+
} = _ref2;
|
|
1810
1717
|
const triggerRef = React.useRef(null);
|
|
1811
1718
|
const menuRef = React.useRef(null);
|
|
1812
1719
|
const items = toItems(children);
|
|
@@ -1837,6 +1744,7 @@ const Menu = React.forwardRef((_ref, ref) => {
|
|
|
1837
1744
|
onClick,
|
|
1838
1745
|
onKeyDown,
|
|
1839
1746
|
disabled,
|
|
1747
|
+
ref: _ref,
|
|
1840
1748
|
...buttonProps
|
|
1841
1749
|
} = _buttonProps;
|
|
1842
1750
|
const triggerProps = {
|
|
@@ -1850,7 +1758,7 @@ const Menu = React.forwardRef((_ref, ref) => {
|
|
|
1850
1758
|
onKeyDown,
|
|
1851
1759
|
disabled
|
|
1852
1760
|
}),
|
|
1853
|
-
ref: reactMergeRefs.mergeRefs([triggerRef,
|
|
1761
|
+
ref: reactMergeRefs.mergeRefs([triggerRef, _ref])
|
|
1854
1762
|
};
|
|
1855
1763
|
const trigger = typeof button === 'function' ? button(triggerProps) : React__namespace.default.createElement(reactButtons.Button, triggerProps, button, React__namespace.default.createElement(reactButtons.Button.EndIcon, {
|
|
1856
1764
|
isRotated: isExpanded
|