@zendeskgarden/react-dropdowns 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/context/useComboboxContext.js +18 -0
- package/dist/esm/context/useFieldContext.js +18 -0
- package/dist/esm/context/useItemContext.js +18 -0
- package/dist/esm/context/useItemGroupContext.js +14 -0
- package/dist/esm/context/useMenuContext.js +18 -0
- package/dist/esm/context/useOptionContext.js +18 -0
- package/dist/esm/elements/combobox/Combobox.js +330 -0
- package/dist/esm/elements/combobox/Field.js +75 -0
- package/dist/esm/elements/combobox/Hint.js +57 -0
- package/dist/esm/elements/combobox/Label.js +68 -0
- package/dist/esm/elements/combobox/Listbox.js +155 -0
- package/dist/esm/elements/combobox/Message.js +63 -0
- package/dist/esm/elements/combobox/OptGroup.js +93 -0
- package/dist/esm/elements/combobox/Option.js +133 -0
- package/dist/esm/elements/combobox/OptionMeta.js +55 -0
- package/dist/esm/elements/combobox/Tag.js +98 -0
- package/dist/esm/elements/combobox/TagAvatar.js +13 -0
- package/dist/esm/elements/combobox/TagGroup.js +35 -0
- package/dist/esm/elements/combobox/utils.js +36 -0
- package/dist/esm/elements/menu/Item.js +140 -0
- package/dist/esm/elements/menu/ItemGroup.js +96 -0
- package/dist/esm/elements/menu/ItemMeta.js +55 -0
- package/dist/esm/elements/menu/Menu.js +157 -0
- package/dist/esm/elements/menu/MenuList.js +170 -0
- package/dist/esm/elements/menu/Separator.js +58 -0
- package/dist/esm/elements/menu/utils.js +55 -0
- package/dist/esm/index.js +19 -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/types/index.js +12 -0
- package/dist/esm/views/combobox/StyledCombobox.js +30 -0
- package/dist/esm/views/combobox/StyledContainer.js +22 -0
- package/dist/esm/views/combobox/StyledField.js +22 -0
- package/dist/esm/views/combobox/StyledFloatingListbox.js +27 -0
- package/dist/esm/views/combobox/StyledHint.js +23 -0
- package/dist/esm/views/combobox/StyledInput.js +41 -0
- package/dist/esm/views/combobox/StyledInputGroup.js +26 -0
- package/dist/esm/views/combobox/StyledInputIcon.js +56 -0
- package/dist/esm/views/combobox/StyledLabel.js +23 -0
- package/dist/esm/views/combobox/StyledListbox.js +31 -0
- package/dist/esm/views/combobox/StyledListboxSeparator.js +31 -0
- package/dist/esm/views/combobox/StyledMessage.js +23 -0
- package/dist/esm/views/combobox/StyledOptGroup.js +22 -0
- package/dist/esm/views/combobox/StyledOption.js +48 -0
- package/dist/esm/views/combobox/StyledOptionContent.js +22 -0
- package/dist/esm/views/combobox/StyledOptionIcon.js +37 -0
- package/dist/esm/views/combobox/StyledOptionMeta.js +31 -0
- package/dist/esm/views/combobox/StyledOptionTypeIcon.js +58 -0
- package/dist/esm/views/combobox/StyledTag.js +24 -0
- package/dist/esm/views/combobox/StyledTagsButton.js +28 -0
- package/dist/esm/views/combobox/StyledTrigger.js +94 -0
- package/dist/esm/views/combobox/StyledValue.js +32 -0
- package/dist/esm/views/menu/StyledButton.js +23 -0
- package/dist/esm/views/menu/StyledFloatingMenu.js +23 -0
- package/dist/esm/views/menu/StyledItem.js +23 -0
- package/dist/esm/views/menu/StyledItemContent.js +23 -0
- package/dist/esm/views/menu/StyledItemGroup.js +23 -0
- package/dist/esm/views/menu/StyledItemIcon.js +23 -0
- package/dist/esm/views/menu/StyledItemMeta.js +23 -0
- package/dist/esm/views/menu/StyledItemTypeIcon.js +24 -0
- package/dist/esm/views/menu/StyledMenu.js +27 -0
- package/dist/esm/views/menu/StyledSeparator.js +23 -0
- package/dist/index.cjs.js +61 -75
- package/package.json +9 -9
- package/dist/index.esm.js +0 -1969
package/dist/index.cjs.js
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
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
|
+
*/
|
|
8
7
|
'use strict';
|
|
9
8
|
|
|
10
9
|
var React = require('react');
|
|
@@ -47,21 +46,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
|
47
46
|
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
48
47
|
var styled__default = /*#__PURE__*/_interopDefault(styled);
|
|
49
48
|
|
|
50
|
-
function _extends$5() {
|
|
51
|
-
_extends$5 = Object.assign ? Object.assign.bind() : function (target) {
|
|
52
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
53
|
-
var source = arguments[i];
|
|
54
|
-
for (var key in source) {
|
|
55
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
56
|
-
target[key] = source[key];
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
return target;
|
|
61
|
-
};
|
|
62
|
-
return _extends$5.apply(this, arguments);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
49
|
var _path$4;
|
|
66
50
|
function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
|
|
67
51
|
var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
@@ -99,7 +83,7 @@ const useFieldContext = () => {
|
|
|
99
83
|
const COMPONENT_ID$v = 'dropdowns.combobox.label';
|
|
100
84
|
const StyledLabel = styled__default.default(reactForms.Field.Label).attrs({
|
|
101
85
|
'data-garden-id': COMPONENT_ID$v,
|
|
102
|
-
'data-garden-version': '9.0.0-next.
|
|
86
|
+
'data-garden-version': '9.0.0-next.8'
|
|
103
87
|
}).withConfig({
|
|
104
88
|
displayName: "StyledLabel",
|
|
105
89
|
componentId: "sc-az6now-0"
|
|
@@ -111,7 +95,7 @@ StyledLabel.defaultProps = {
|
|
|
111
95
|
const COMPONENT_ID$u = 'dropdowns.combobox.hint';
|
|
112
96
|
const StyledHint = styled__default.default(reactForms.Field.Hint).attrs({
|
|
113
97
|
'data-garden-id': COMPONENT_ID$u,
|
|
114
|
-
'data-garden-version': '9.0.0-next.
|
|
98
|
+
'data-garden-version': '9.0.0-next.8'
|
|
115
99
|
}).withConfig({
|
|
116
100
|
displayName: "StyledHint",
|
|
117
101
|
componentId: "sc-106qvqx-0"
|
|
@@ -123,7 +107,7 @@ StyledHint.defaultProps = {
|
|
|
123
107
|
const COMPONENT_ID$t = 'dropdowns.combobox.message';
|
|
124
108
|
const StyledMessage = styled__default.default(reactForms.Field.Message).attrs({
|
|
125
109
|
'data-garden-id': COMPONENT_ID$t,
|
|
126
|
-
'data-garden-version': '9.0.0-next.
|
|
110
|
+
'data-garden-version': '9.0.0-next.8'
|
|
127
111
|
}).withConfig({
|
|
128
112
|
displayName: "StyledMessage",
|
|
129
113
|
componentId: "sc-jux8m5-0"
|
|
@@ -140,7 +124,7 @@ const sizeStyles$a = props => {
|
|
|
140
124
|
};
|
|
141
125
|
const StyledCombobox = styled__default.default.div.attrs({
|
|
142
126
|
'data-garden-id': COMPONENT_ID$s,
|
|
143
|
-
'data-garden-version': '9.0.0-next.
|
|
127
|
+
'data-garden-version': '9.0.0-next.8'
|
|
144
128
|
}).withConfig({
|
|
145
129
|
displayName: "StyledCombobox",
|
|
146
130
|
componentId: "sc-13eybg8-0"
|
|
@@ -152,7 +136,7 @@ StyledCombobox.defaultProps = {
|
|
|
152
136
|
const COMPONENT_ID$r = 'dropdowns.combobox.container';
|
|
153
137
|
const StyledContainer = styled__default.default.div.attrs({
|
|
154
138
|
'data-garden-id': COMPONENT_ID$r,
|
|
155
|
-
'data-garden-version': '9.0.0-next.
|
|
139
|
+
'data-garden-version': '9.0.0-next.8'
|
|
156
140
|
}).withConfig({
|
|
157
141
|
displayName: "StyledContainer",
|
|
158
142
|
componentId: "sc-14i9jid-0"
|
|
@@ -164,7 +148,7 @@ StyledContainer.defaultProps = {
|
|
|
164
148
|
const COMPONENT_ID$q = 'dropdowns.combobox.field';
|
|
165
149
|
const StyledField = styled__default.default.div.attrs({
|
|
166
150
|
'data-garden-id': COMPONENT_ID$q,
|
|
167
|
-
'data-garden-version': '9.0.0-next.
|
|
151
|
+
'data-garden-version': '9.0.0-next.8'
|
|
168
152
|
}).withConfig({
|
|
169
153
|
displayName: "StyledField",
|
|
170
154
|
componentId: "sc-zc57xl-0"
|
|
@@ -176,7 +160,7 @@ StyledField.defaultProps = {
|
|
|
176
160
|
const COMPONENT_ID$p = 'dropdowns.combobox.floating';
|
|
177
161
|
const StyledFloatingListbox = styled__default.default.div.attrs({
|
|
178
162
|
'data-garden-id': COMPONENT_ID$p,
|
|
179
|
-
'data-garden-version': '9.0.0-next.
|
|
163
|
+
'data-garden-version': '9.0.0-next.8'
|
|
180
164
|
}).withConfig({
|
|
181
165
|
displayName: "StyledFloatingListbox",
|
|
182
166
|
componentId: "sc-1cp6spf-0"
|
|
@@ -211,7 +195,7 @@ const sizeStyles$9 = props => {
|
|
|
211
195
|
};
|
|
212
196
|
const StyledInput = styled__default.default.input.attrs({
|
|
213
197
|
'data-garden-id': COMPONENT_ID$o,
|
|
214
|
-
'data-garden-version': '9.0.0-next.
|
|
198
|
+
'data-garden-version': '9.0.0-next.8'
|
|
215
199
|
}).withConfig({
|
|
216
200
|
displayName: "StyledInput",
|
|
217
201
|
componentId: "sc-1lkqdg-0"
|
|
@@ -227,7 +211,7 @@ const sizeStyles$8 = props => {
|
|
|
227
211
|
};
|
|
228
212
|
const StyledInputGroup = styled__default.default.div.attrs({
|
|
229
213
|
'data-garden-id': COMPONENT_ID$n,
|
|
230
|
-
'data-garden-version': '9.0.0-next.
|
|
214
|
+
'data-garden-version': '9.0.0-next.8'
|
|
231
215
|
}).withConfig({
|
|
232
216
|
displayName: "StyledInputGroup",
|
|
233
217
|
componentId: "sc-yx3q7u-0"
|
|
@@ -276,8 +260,10 @@ const colorStyles$7 = props => {
|
|
|
276
260
|
return styled.css(["border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";}", " &[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], props.isLabelHovered ? hoverBorderColor : borderColor, backgroundColor, reactTheming.getColorV8('foreground', 600 , props.theme), hoverBorderColor, reactTheming.focusStyles({
|
|
277
261
|
theme: props.theme,
|
|
278
262
|
inset: props.focusInset,
|
|
279
|
-
|
|
280
|
-
|
|
263
|
+
color: {
|
|
264
|
+
hue: focusBorderColor,
|
|
265
|
+
shade: focusShade
|
|
266
|
+
},
|
|
281
267
|
selector: focusSelector,
|
|
282
268
|
styles: {
|
|
283
269
|
borderColor: focusBorderColor
|
|
@@ -307,7 +293,7 @@ const sizeStyles$7 = props => {
|
|
|
307
293
|
};
|
|
308
294
|
const StyledTrigger = styled__default.default.div.attrs({
|
|
309
295
|
'data-garden-id': COMPONENT_ID$m,
|
|
310
|
-
'data-garden-version': '9.0.0-next.
|
|
296
|
+
'data-garden-version': '9.0.0-next.8'
|
|
311
297
|
}).withConfig({
|
|
312
298
|
displayName: "StyledTrigger",
|
|
313
299
|
componentId: "sc-116nftk-0"
|
|
@@ -349,7 +335,7 @@ const StyledInputIcon = styled__default.default(_ref => {
|
|
|
349
335
|
return React.cloneElement(React.Children.only(children), props);
|
|
350
336
|
}).attrs({
|
|
351
337
|
'data-garden-id': COMPONENT_ID$l,
|
|
352
|
-
'data-garden-version': '9.0.0-next.
|
|
338
|
+
'data-garden-version': '9.0.0-next.8'
|
|
353
339
|
}).withConfig({
|
|
354
340
|
displayName: "StyledInputIcon",
|
|
355
341
|
componentId: "sc-gqbs1s-0"
|
|
@@ -386,7 +372,7 @@ const sizeStyles$5 = props => {
|
|
|
386
372
|
};
|
|
387
373
|
const StyledOption = styled__default.default.li.attrs({
|
|
388
374
|
'data-garden-id': COMPONENT_ID$k,
|
|
389
|
-
'data-garden-version': '9.0.0-next.
|
|
375
|
+
'data-garden-version': '9.0.0-next.8'
|
|
390
376
|
}).withConfig({
|
|
391
377
|
displayName: "StyledOption",
|
|
392
378
|
componentId: "sc-jl4wn6-0"
|
|
@@ -398,7 +384,7 @@ StyledOption.defaultProps = {
|
|
|
398
384
|
const COMPONENT_ID$j = 'dropdowns.combobox.option.content';
|
|
399
385
|
const StyledOptionContent = styled__default.default.div.attrs({
|
|
400
386
|
'data-garden-id': COMPONENT_ID$j,
|
|
401
|
-
'data-garden-version': '9.0.0-next.
|
|
387
|
+
'data-garden-version': '9.0.0-next.8'
|
|
402
388
|
}).withConfig({
|
|
403
389
|
displayName: "StyledOptionContent",
|
|
404
390
|
componentId: "sc-121ujpu-0"
|
|
@@ -410,7 +396,7 @@ StyledOptionContent.defaultProps = {
|
|
|
410
396
|
const COMPONENT_ID$i = 'dropdowns.combobox.optgroup';
|
|
411
397
|
const StyledOptGroup = styled__default.default.ul.attrs({
|
|
412
398
|
'data-garden-id': COMPONENT_ID$i,
|
|
413
|
-
'data-garden-version': '9.0.0-next.
|
|
399
|
+
'data-garden-version': '9.0.0-next.8'
|
|
414
400
|
}).withConfig({
|
|
415
401
|
displayName: "StyledOptGroup",
|
|
416
402
|
componentId: "sc-1kavqsx-0"
|
|
@@ -431,7 +417,7 @@ const sizeStyles$4 = props => {
|
|
|
431
417
|
};
|
|
432
418
|
const StyledListboxSeparator = styled__default.default.li.attrs({
|
|
433
419
|
'data-garden-id': COMPONENT_ID$h,
|
|
434
|
-
'data-garden-version': '9.0.0-next.
|
|
420
|
+
'data-garden-version': '9.0.0-next.8'
|
|
435
421
|
}).withConfig({
|
|
436
422
|
displayName: "StyledListboxSeparator",
|
|
437
423
|
componentId: "sc-1p6toh2-0"
|
|
@@ -448,7 +434,7 @@ const sizeStyles$3 = props => {
|
|
|
448
434
|
};
|
|
449
435
|
const StyledListbox = styled__default.default.ul.attrs({
|
|
450
436
|
'data-garden-id': COMPONENT_ID$g,
|
|
451
|
-
'data-garden-version': '9.0.0-next.
|
|
437
|
+
'data-garden-version': '9.0.0-next.8'
|
|
452
438
|
}).withConfig({
|
|
453
439
|
displayName: "StyledListbox",
|
|
454
440
|
componentId: "sc-1k13ba7-0"
|
|
@@ -473,7 +459,7 @@ const StyledOptionIcon = styled__default.default(_ref => {
|
|
|
473
459
|
return React.cloneElement(React.Children.only(children), props);
|
|
474
460
|
}).attrs({
|
|
475
461
|
'data-garden-id': COMPONENT_ID$f,
|
|
476
|
-
'data-garden-version': '9.0.0-next.
|
|
462
|
+
'data-garden-version': '9.0.0-next.8'
|
|
477
463
|
}).withConfig({
|
|
478
464
|
displayName: "StyledOptionIcon",
|
|
479
465
|
componentId: "sc-qsab3y-0"
|
|
@@ -494,7 +480,7 @@ const sizeStyles$1 = props => {
|
|
|
494
480
|
};
|
|
495
481
|
const StyledOptionMeta = styled__default.default.div.attrs({
|
|
496
482
|
'data-garden-id': COMPONENT_ID$e,
|
|
497
|
-
'data-garden-version': '9.0.0-next.
|
|
483
|
+
'data-garden-version': '9.0.0-next.8'
|
|
498
484
|
}).withConfig({
|
|
499
485
|
displayName: "StyledOptionMeta",
|
|
500
486
|
componentId: "sc-j6pu10-0"
|
|
@@ -539,7 +525,7 @@ const StyledOptionTypeIcon = styled__default.default(_ref => {
|
|
|
539
525
|
return React.cloneElement(React.Children.only(children), props);
|
|
540
526
|
}).attrs({
|
|
541
527
|
'data-garden-id': COMPONENT_ID$d,
|
|
542
|
-
'data-garden-version': '9.0.0-next.
|
|
528
|
+
'data-garden-version': '9.0.0-next.8'
|
|
543
529
|
}).withConfig({
|
|
544
530
|
displayName: "StyledOptionTypeIcon",
|
|
545
531
|
componentId: "sc-xpink2-0"
|
|
@@ -551,7 +537,7 @@ StyledOptionTypeIcon.defaultProps = {
|
|
|
551
537
|
const COMPONENT_ID$c = 'dropdowns.combobox.tag';
|
|
552
538
|
const StyledTag = styled__default.default(reactTags.Tag).attrs({
|
|
553
539
|
'data-garden-id': COMPONENT_ID$c,
|
|
554
|
-
'data-garden-version': '9.0.0-next.
|
|
540
|
+
'data-garden-version': '9.0.0-next.8'
|
|
555
541
|
}).withConfig({
|
|
556
542
|
displayName: "StyledTag",
|
|
557
543
|
componentId: "sc-1alam0r-0"
|
|
@@ -567,7 +553,7 @@ const colorStyles$1 = props => {
|
|
|
567
553
|
};
|
|
568
554
|
const StyledValue = styled__default.default.div.attrs({
|
|
569
555
|
'data-garden-id': COMPONENT_ID$b,
|
|
570
|
-
'data-garden-version': '9.0.0-next.
|
|
556
|
+
'data-garden-version': '9.0.0-next.8'
|
|
571
557
|
}).withConfig({
|
|
572
558
|
displayName: "StyledValue",
|
|
573
559
|
componentId: "sc-t719sx-0"
|
|
@@ -589,7 +575,7 @@ const colorStyles = props => {
|
|
|
589
575
|
const StyledTagsButton = styled__default.default(StyledValue).attrs({
|
|
590
576
|
as: 'button',
|
|
591
577
|
'data-garden-id': COMPONENT_ID$a,
|
|
592
|
-
'data-garden-version': '9.0.0-next.
|
|
578
|
+
'data-garden-version': '9.0.0-next.8'
|
|
593
579
|
}).withConfig({
|
|
594
580
|
displayName: "StyledTagsButton",
|
|
595
581
|
componentId: "sc-6q5w33-0"
|
|
@@ -601,7 +587,7 @@ StyledTagsButton.defaultProps = {
|
|
|
601
587
|
const COMPONENT_ID$9 = 'dropdowns.menu';
|
|
602
588
|
const StyledMenu = styled__default.default(StyledListbox).attrs({
|
|
603
589
|
'data-garden-id': COMPONENT_ID$9,
|
|
604
|
-
'data-garden-version': '9.0.0-next.
|
|
590
|
+
'data-garden-version': '9.0.0-next.8'
|
|
605
591
|
}).withConfig({
|
|
606
592
|
displayName: "StyledMenu",
|
|
607
593
|
componentId: "sc-f77ntu-0"
|
|
@@ -617,7 +603,7 @@ StyledMenu.defaultProps = {
|
|
|
617
603
|
const COMPONENT_ID$8 = 'dropdowns.menu.floating';
|
|
618
604
|
const StyledFloatingMenu = styled__default.default(StyledFloatingListbox).attrs({
|
|
619
605
|
'data-garden-id': COMPONENT_ID$8,
|
|
620
|
-
'data-garden-version': '9.0.0-next.
|
|
606
|
+
'data-garden-version': '9.0.0-next.8'
|
|
621
607
|
}).withConfig({
|
|
622
608
|
displayName: "StyledFloatingMenu",
|
|
623
609
|
componentId: "sc-1rc7ahb-0"
|
|
@@ -629,7 +615,7 @@ StyledFloatingMenu.defaultProps = {
|
|
|
629
615
|
const COMPONENT_ID$7 = 'dropdowns.menu.item';
|
|
630
616
|
const StyledItem = styled__default.default(StyledOption).attrs({
|
|
631
617
|
'data-garden-id': COMPONENT_ID$7,
|
|
632
|
-
'data-garden-version': '9.0.0-next.
|
|
618
|
+
'data-garden-version': '9.0.0-next.8'
|
|
633
619
|
}).withConfig({
|
|
634
620
|
displayName: "StyledItem",
|
|
635
621
|
componentId: "sc-1jp99dq-0"
|
|
@@ -641,7 +627,7 @@ StyledItem.defaultProps = {
|
|
|
641
627
|
const COMPONENT_ID$6 = 'dropdowns.menu.item.content';
|
|
642
628
|
const StyledItemContent = styled__default.default(StyledOptionContent).attrs({
|
|
643
629
|
'data-garden-id': COMPONENT_ID$6,
|
|
644
|
-
'data-garden-version': '9.0.0-next.
|
|
630
|
+
'data-garden-version': '9.0.0-next.8'
|
|
645
631
|
}).withConfig({
|
|
646
632
|
displayName: "StyledItemContent",
|
|
647
633
|
componentId: "sc-1opglsb-0"
|
|
@@ -653,7 +639,7 @@ StyledItemContent.defaultProps = {
|
|
|
653
639
|
const COMPONENT_ID$5 = 'dropdowns.menu.item_group';
|
|
654
640
|
const StyledItemGroup = styled__default.default(StyledOptGroup).attrs({
|
|
655
641
|
'data-garden-id': COMPONENT_ID$5,
|
|
656
|
-
'data-garden-version': '9.0.0-next.
|
|
642
|
+
'data-garden-version': '9.0.0-next.8'
|
|
657
643
|
}).withConfig({
|
|
658
644
|
displayName: "StyledItemGroup",
|
|
659
645
|
componentId: "sc-1umk3cg-0"
|
|
@@ -665,7 +651,7 @@ StyledItemGroup.defaultProps = {
|
|
|
665
651
|
const COMPONENT_ID$4 = 'dropdowns.menu.item.icon';
|
|
666
652
|
const StyledItemIcon = styled__default.default(StyledOptionIcon).attrs({
|
|
667
653
|
'data-garden-id': COMPONENT_ID$4,
|
|
668
|
-
'data-garden-version': '9.0.0-next.
|
|
654
|
+
'data-garden-version': '9.0.0-next.8'
|
|
669
655
|
}).withConfig({
|
|
670
656
|
displayName: "StyledItemIcon",
|
|
671
657
|
componentId: "sc-w9orqb-0"
|
|
@@ -677,7 +663,7 @@ StyledItemIcon.defaultProps = {
|
|
|
677
663
|
const COMPONENT_ID$3 = 'dropdowns.menu.item.meta';
|
|
678
664
|
const StyledItemMeta = styled__default.default(StyledOptionMeta).attrs({
|
|
679
665
|
'data-garden-id': COMPONENT_ID$3,
|
|
680
|
-
'data-garden-version': '9.0.0-next.
|
|
666
|
+
'data-garden-version': '9.0.0-next.8'
|
|
681
667
|
}).withConfig({
|
|
682
668
|
displayName: "StyledItemMeta",
|
|
683
669
|
componentId: "sc-1unw3x1-0"
|
|
@@ -689,7 +675,7 @@ StyledItemMeta.defaultProps = {
|
|
|
689
675
|
const COMPONENT_ID$2 = 'dropdowns.menu.item.type_icon';
|
|
690
676
|
const StyledItemTypeIcon = styled__default.default(StyledOptionTypeIcon).attrs({
|
|
691
677
|
'data-garden-id': COMPONENT_ID$2,
|
|
692
|
-
'data-garden-version': '9.0.0-next.
|
|
678
|
+
'data-garden-version': '9.0.0-next.8'
|
|
693
679
|
}).withConfig({
|
|
694
680
|
displayName: "StyledItemTypeIcon",
|
|
695
681
|
componentId: "sc-1pll3nu-0"
|
|
@@ -701,7 +687,7 @@ StyledItemTypeIcon.defaultProps = {
|
|
|
701
687
|
const COMPONENT_ID$1 = 'dropdowns.menu.button';
|
|
702
688
|
const StyledButton = styled__default.default(reactButtons.Button).attrs({
|
|
703
689
|
'data-garden-id': COMPONENT_ID$1,
|
|
704
|
-
'data-garden-version': '9.0.0-next.
|
|
690
|
+
'data-garden-version': '9.0.0-next.8'
|
|
705
691
|
}).withConfig({
|
|
706
692
|
displayName: "StyledButton",
|
|
707
693
|
componentId: "sc-5hs2jg-0"
|
|
@@ -713,7 +699,7 @@ StyledButton.defaultProps = {
|
|
|
713
699
|
const COMPONENT_ID = 'dropdowns.menu.separator';
|
|
714
700
|
const StyledSeparator = styled__default.default(StyledListboxSeparator).attrs({
|
|
715
701
|
'data-garden-id': COMPONENT_ID,
|
|
716
|
-
'data-garden-version': '9.0.0-next.
|
|
702
|
+
'data-garden-version': '9.0.0-next.8'
|
|
717
703
|
}).withConfig({
|
|
718
704
|
displayName: "StyledSeparator",
|
|
719
705
|
componentId: "sc-8kqwen-0"
|
|
@@ -807,7 +793,7 @@ const Listbox = React.forwardRef((_ref, ref) => {
|
|
|
807
793
|
},
|
|
808
794
|
zIndex: zIndex,
|
|
809
795
|
ref: floatingRef
|
|
810
|
-
}, React__namespace.default.createElement(StyledListbox,
|
|
796
|
+
}, React__namespace.default.createElement(StyledListbox, Object.assign({
|
|
811
797
|
isCompact: isCompact,
|
|
812
798
|
maxHeight: maxHeight,
|
|
813
799
|
minHeight: minHeight,
|
|
@@ -857,7 +843,7 @@ const TagComponent = React.forwardRef((_ref, ref) => {
|
|
|
857
843
|
const theme = React.useContext(styled.ThemeContext) || reactTheming.DEFAULT_THEME;
|
|
858
844
|
const doc = reactTheming.useDocument(theme);
|
|
859
845
|
const handleClick = () => removeSelection(option.value);
|
|
860
|
-
return React__namespace.default.createElement(StyledTag,
|
|
846
|
+
return React__namespace.default.createElement(StyledTag, Object.assign({
|
|
861
847
|
"aria-disabled": option.disabled,
|
|
862
848
|
tabIndex: option.disabled ? undefined : 0
|
|
863
849
|
}, tagProps, props, {
|
|
@@ -897,7 +883,7 @@ const TagGroup = _ref => {
|
|
|
897
883
|
} = _ref;
|
|
898
884
|
return React__namespace.default.createElement(React__namespace.default.Fragment, null, selection.map((option, index) => {
|
|
899
885
|
const disabled = isDisabled || option.disabled;
|
|
900
|
-
return React__namespace.default.createElement(Tag,
|
|
886
|
+
return React__namespace.default.createElement(Tag, Object.assign({
|
|
901
887
|
key: option.value,
|
|
902
888
|
hidden: !isExpanded && index >= maxTags,
|
|
903
889
|
option: {
|
|
@@ -1126,7 +1112,7 @@ const Combobox = React.forwardRef((_ref, ref) => {
|
|
|
1126
1112
|
}, [getMessageProps, messageProps, setMessageProps]);
|
|
1127
1113
|
return React__namespace.default.createElement(ComboboxContext.Provider, {
|
|
1128
1114
|
value: contextValue
|
|
1129
|
-
}, React__namespace.default.createElement(StyledCombobox,
|
|
1115
|
+
}, React__namespace.default.createElement(StyledCombobox, Object.assign({
|
|
1130
1116
|
isCompact: isCompact,
|
|
1131
1117
|
tabIndex: -1
|
|
1132
1118
|
}, props, {
|
|
@@ -1166,7 +1152,7 @@ const Combobox = React.forwardRef((_ref, ref) => {
|
|
|
1166
1152
|
isEnd: true,
|
|
1167
1153
|
isLabelHovered: isLabelHovered,
|
|
1168
1154
|
isRotated: hasChevron && isExpanded
|
|
1169
|
-
}, hasChevron ? React__namespace.default.createElement(SvgChevronDownStroke, null) : endIcon))), React__namespace.default.createElement(Listbox,
|
|
1155
|
+
}, hasChevron ? React__namespace.default.createElement(SvgChevronDownStroke, null) : endIcon))), React__namespace.default.createElement(Listbox, Object.assign({
|
|
1170
1156
|
appendToNode: listboxAppendToNode,
|
|
1171
1157
|
isCompact: isCompact,
|
|
1172
1158
|
isExpanded: isExpanded,
|
|
@@ -1224,7 +1210,7 @@ const Hint = React.forwardRef((props, ref) => {
|
|
|
1224
1210
|
setHasHint(true);
|
|
1225
1211
|
return () => setHasHint(false);
|
|
1226
1212
|
}, [setHasHint]);
|
|
1227
|
-
return React__namespace.default.createElement(StyledHint,
|
|
1213
|
+
return React__namespace.default.createElement(StyledHint, Object.assign({}, hintProps, props, {
|
|
1228
1214
|
ref: ref
|
|
1229
1215
|
}));
|
|
1230
1216
|
});
|
|
@@ -1240,7 +1226,7 @@ const Label = React.forwardRef((_ref, ref) => {
|
|
|
1240
1226
|
const {
|
|
1241
1227
|
labelProps
|
|
1242
1228
|
} = useFieldContext();
|
|
1243
|
-
return React__namespace.default.createElement(StyledLabel,
|
|
1229
|
+
return React__namespace.default.createElement(StyledLabel, Object.assign({}, labelProps, {
|
|
1244
1230
|
onClick: containerUtilities.composeEventHandlers(onClick, labelProps?.onClick),
|
|
1245
1231
|
onMouseEnter: containerUtilities.composeEventHandlers(onMouseEnter, labelProps?.onMouseEnter),
|
|
1246
1232
|
onMouseLeave: containerUtilities.composeEventHandlers(onMouseLeave, labelProps?.onMouseLeave)
|
|
@@ -1263,7 +1249,7 @@ const Message = React.forwardRef((props, ref) => {
|
|
|
1263
1249
|
setHasMessage(true);
|
|
1264
1250
|
return () => setHasMessage(false);
|
|
1265
1251
|
}, [setHasMessage]);
|
|
1266
|
-
return React__namespace.default.createElement(StyledMessage,
|
|
1252
|
+
return React__namespace.default.createElement(StyledMessage, Object.assign({}, messageProps, props, {
|
|
1267
1253
|
ref: ref
|
|
1268
1254
|
}));
|
|
1269
1255
|
});
|
|
@@ -1293,7 +1279,7 @@ const FieldComponent = React.forwardRef((props, ref) => {
|
|
|
1293
1279
|
}), [labelProps, setLabelProps, hasHint, setHasHint, hintProps, setHintProps, hasMessage, setHasMessage, messageProps, setMessageProps]);
|
|
1294
1280
|
return React__namespace.default.createElement(FieldContext.Provider, {
|
|
1295
1281
|
value: contextValue
|
|
1296
|
-
}, React__namespace.default.createElement(StyledField,
|
|
1282
|
+
}, React__namespace.default.createElement(StyledField, Object.assign({}, props, {
|
|
1297
1283
|
ref: ref
|
|
1298
1284
|
})));
|
|
1299
1285
|
});
|
|
@@ -1387,7 +1373,7 @@ const OptionMetaComponent = React.forwardRef((props, ref) => {
|
|
|
1387
1373
|
const {
|
|
1388
1374
|
isDisabled
|
|
1389
1375
|
} = useOptionContext();
|
|
1390
|
-
return React__namespace.default.createElement(StyledOptionMeta,
|
|
1376
|
+
return React__namespace.default.createElement(StyledOptionMeta, Object.assign({
|
|
1391
1377
|
isDisabled: isDisabled
|
|
1392
1378
|
}, props, {
|
|
1393
1379
|
ref: ref
|
|
@@ -1454,7 +1440,7 @@ const OptionComponent = React.forwardRef((_ref, ref) => {
|
|
|
1454
1440
|
});
|
|
1455
1441
|
return React__namespace.default.createElement(OptionContext.Provider, {
|
|
1456
1442
|
value: contextValue
|
|
1457
|
-
}, React__namespace.default.createElement(StyledOption,
|
|
1443
|
+
}, React__namespace.default.createElement(StyledOption, Object.assign({
|
|
1458
1444
|
isActive: isActive,
|
|
1459
1445
|
isCompact: isCompact,
|
|
1460
1446
|
$type: type
|
|
@@ -1498,7 +1484,7 @@ const OptGroup = React.forwardRef((_ref, ref) => {
|
|
|
1498
1484
|
const optGroupProps = getOptGroupProps({
|
|
1499
1485
|
'aria-label': groupAriaLabel || legend
|
|
1500
1486
|
});
|
|
1501
|
-
return React__namespace.default.createElement(StyledOption,
|
|
1487
|
+
return React__namespace.default.createElement(StyledOption, Object.assign({
|
|
1502
1488
|
isCompact: isCompact,
|
|
1503
1489
|
$type: "group",
|
|
1504
1490
|
onMouseDown: containerUtilities.composeEventHandlers(onMouseDown, handleMouseDown),
|
|
@@ -1512,7 +1498,7 @@ const OptGroup = React.forwardRef((_ref, ref) => {
|
|
|
1512
1498
|
}, icon && React__namespace.default.createElement(StyledOptionTypeIcon, {
|
|
1513
1499
|
isCompact: isCompact,
|
|
1514
1500
|
type: "header"
|
|
1515
|
-
}, icon), content || legend), React__namespace.default.createElement(StyledOptGroup,
|
|
1501
|
+
}, icon), content || legend), React__namespace.default.createElement(StyledOptGroup, Object.assign({
|
|
1516
1502
|
isCompact: isCompact
|
|
1517
1503
|
}, optGroupProps), React__namespace.default.createElement(StyledListboxSeparator, {
|
|
1518
1504
|
role: "none"
|
|
@@ -1671,7 +1657,7 @@ const MenuList = React.forwardRef((_ref, ref) => {
|
|
|
1671
1657
|
transform
|
|
1672
1658
|
},
|
|
1673
1659
|
ref: floatingRef
|
|
1674
|
-
}, React__namespace.default.createElement(StyledMenu,
|
|
1660
|
+
}, React__namespace.default.createElement(StyledMenu, Object.assign({
|
|
1675
1661
|
"data-garden-animate-arrow": isVisible,
|
|
1676
1662
|
arrowPosition: hasArrow ? reactTheming.getArrowPosition(theme, placement) : undefined,
|
|
1677
1663
|
isCompact: isCompact,
|
|
@@ -1775,7 +1761,7 @@ const Menu = React.forwardRef((_ref, ref) => {
|
|
|
1775
1761
|
}), [isCompact, focusedValue, getItemProps, getItemGroupProps, getSeparatorProps]);
|
|
1776
1762
|
return React__namespace.default.createElement(MenuContext.Provider, {
|
|
1777
1763
|
value: contextValue
|
|
1778
|
-
}, trigger, React__namespace.default.createElement(MenuList,
|
|
1764
|
+
}, trigger, React__namespace.default.createElement(MenuList, Object.assign({}, props, getMenuProps({
|
|
1779
1765
|
onMouseLeave
|
|
1780
1766
|
}), {
|
|
1781
1767
|
ref: reactMergeRefs.mergeRefs([menuRef, ref]),
|
|
@@ -1839,7 +1825,7 @@ const ItemGroup = React.forwardRef((_ref, ref) => {
|
|
|
1839
1825
|
}), [type]);
|
|
1840
1826
|
return React__namespace.default.createElement(ItemGroupContext.Provider, {
|
|
1841
1827
|
value: contextValue
|
|
1842
|
-
}, React__namespace.default.createElement(StyledItem,
|
|
1828
|
+
}, React__namespace.default.createElement(StyledItem, Object.assign({
|
|
1843
1829
|
isCompact: isCompact,
|
|
1844
1830
|
$type: "group"
|
|
1845
1831
|
}, props, {
|
|
@@ -1851,7 +1837,7 @@ const ItemGroup = React.forwardRef((_ref, ref) => {
|
|
|
1851
1837
|
}, icon && React__namespace.default.createElement(StyledItemTypeIcon, {
|
|
1852
1838
|
isCompact: isCompact,
|
|
1853
1839
|
type: "header"
|
|
1854
|
-
}, icon), content || legend), React__namespace.default.createElement(StyledItemGroup,
|
|
1840
|
+
}, icon), content || legend), React__namespace.default.createElement(StyledItemGroup, Object.assign({
|
|
1855
1841
|
isCompact: isCompact
|
|
1856
1842
|
}, groupProps), React__namespace.default.createElement(StyledSeparator, {
|
|
1857
1843
|
role: "none"
|
|
@@ -1878,7 +1864,7 @@ const ItemMetaComponent = React.forwardRef((props, ref) => {
|
|
|
1878
1864
|
const {
|
|
1879
1865
|
isDisabled
|
|
1880
1866
|
} = useItemContext();
|
|
1881
|
-
return React__namespace.default.createElement(StyledItemMeta,
|
|
1867
|
+
return React__namespace.default.createElement(StyledItemMeta, Object.assign({
|
|
1882
1868
|
isDisabled: isDisabled
|
|
1883
1869
|
}, props, {
|
|
1884
1870
|
ref: ref
|
|
@@ -1950,7 +1936,7 @@ const ItemComponent = React.forwardRef((_ref, ref) => {
|
|
|
1950
1936
|
}), [isDisabled]);
|
|
1951
1937
|
return React__namespace.default.createElement(ItemContext.Provider, {
|
|
1952
1938
|
value: contextValue
|
|
1953
|
-
}, React__namespace.default.createElement(StyledItem,
|
|
1939
|
+
}, React__namespace.default.createElement(StyledItem, Object.assign({
|
|
1954
1940
|
$type: type,
|
|
1955
1941
|
isCompact: isCompact,
|
|
1956
1942
|
isActive: isActive
|
|
@@ -1984,7 +1970,7 @@ const Separator = React.forwardRef(
|
|
|
1984
1970
|
getSeparatorProps
|
|
1985
1971
|
} = useMenuContext();
|
|
1986
1972
|
const separatorProps = getSeparatorProps();
|
|
1987
|
-
return React__namespace.default.createElement(StyledSeparator,
|
|
1973
|
+
return React__namespace.default.createElement(StyledSeparator, Object.assign({}, props, separatorProps, {
|
|
1988
1974
|
ref: ref
|
|
1989
1975
|
}));
|
|
1990
1976
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-dropdowns",
|
|
3
|
-
"version": "9.0.0-next.
|
|
3
|
+
"version": "9.0.0-next.8",
|
|
4
4
|
"description": "Components related to dropdowns in the Garden Design System",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Zendesk Garden <garden@zendesk.com>",
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"url": "https://github.com/zendeskgarden/react-components/issues"
|
|
11
11
|
},
|
|
12
12
|
"main": "dist/index.cjs.js",
|
|
13
|
-
"module": "dist/index.
|
|
13
|
+
"module": "dist/esm/index.js",
|
|
14
14
|
"files": [
|
|
15
15
|
"dist"
|
|
16
16
|
],
|
|
@@ -25,22 +25,22 @@
|
|
|
25
25
|
"@zendeskgarden/container-combobox": "^2.0.0",
|
|
26
26
|
"@zendeskgarden/container-menu": "^0.3.0",
|
|
27
27
|
"@zendeskgarden/container-utilities": "^2.0.0",
|
|
28
|
-
"@zendeskgarden/react-buttons": "^9.0.0-next.
|
|
29
|
-
"@zendeskgarden/react-forms": "^9.0.0-next.
|
|
30
|
-
"@zendeskgarden/react-tags": "^9.0.0-next.
|
|
31
|
-
"@zendeskgarden/react-tooltips": "^9.0.0-next.
|
|
28
|
+
"@zendeskgarden/react-buttons": "^9.0.0-next.8",
|
|
29
|
+
"@zendeskgarden/react-forms": "^9.0.0-next.8",
|
|
30
|
+
"@zendeskgarden/react-tags": "^9.0.0-next.8",
|
|
31
|
+
"@zendeskgarden/react-tooltips": "^9.0.0-next.8",
|
|
32
32
|
"polished": "^4.0.0",
|
|
33
33
|
"prop-types": "^15.7.2",
|
|
34
34
|
"react-merge-refs": "^2.0.0"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
|
-
"@zendeskgarden/react-theming": "
|
|
37
|
+
"@zendeskgarden/react-theming": ">=9.0.0-next",
|
|
38
38
|
"react": ">=16.8.0",
|
|
39
39
|
"react-dom": ">=16.8.0",
|
|
40
40
|
"styled-components": "^5.3.1"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@zendeskgarden/react-theming": "^9.0.0-next.
|
|
43
|
+
"@zendeskgarden/react-theming": "^9.0.0-next.8",
|
|
44
44
|
"@zendeskgarden/svg-icons": "7.0.0"
|
|
45
45
|
},
|
|
46
46
|
"keywords": [
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"access": "public"
|
|
55
55
|
},
|
|
56
56
|
"zendeskgarden:src": "src/index.ts",
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "a3d6534843d5a4f5cb60b52bc67264f3230f2da0"
|
|
58
58
|
}
|