@zendeskgarden/react-dropdowns 8.48.2 → 8.49.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/index.cjs.js +28 -25
- package/dist/index.esm.js +28 -25
- package/dist/typings/elements/Menu/Menu.d.ts +4 -0
- package/package.json +4 -4
package/dist/index.cjs.js
CHANGED
|
@@ -20,6 +20,7 @@ var polished = require('polished');
|
|
|
20
20
|
var reactForms = require('@zendeskgarden/react-forms');
|
|
21
21
|
var mergeRefs = require('react-merge-refs');
|
|
22
22
|
var containerSelection = require('@zendeskgarden/container-selection');
|
|
23
|
+
var reactDom = require('react-dom');
|
|
23
24
|
|
|
24
25
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
25
26
|
|
|
@@ -445,7 +446,7 @@ var COMPONENT_ID$m = 'dropdowns.menu';
|
|
|
445
446
|
var StyledMenu = styled__default["default"].ul.attrs(function (props) {
|
|
446
447
|
return {
|
|
447
448
|
'data-garden-id': COMPONENT_ID$m,
|
|
448
|
-
'data-garden-version': '8.
|
|
449
|
+
'data-garden-version': '8.49.0',
|
|
449
450
|
className: props.isAnimated && 'is-animated'
|
|
450
451
|
};
|
|
451
452
|
}).withConfig({
|
|
@@ -470,7 +471,7 @@ var COMPONENT_ID$l = 'dropdowns.menu_wrapper';
|
|
|
470
471
|
var StyledMenuWrapper = styled__default["default"].div.attrs(function (props) {
|
|
471
472
|
return {
|
|
472
473
|
'data-garden-id': COMPONENT_ID$l,
|
|
473
|
-
'data-garden-version': '8.
|
|
474
|
+
'data-garden-version': '8.49.0',
|
|
474
475
|
className: props.isAnimated && 'is-animated'
|
|
475
476
|
};
|
|
476
477
|
}).withConfig({
|
|
@@ -494,7 +495,7 @@ StyledMenuWrapper.defaultProps = {
|
|
|
494
495
|
var COMPONENT_ID$k = 'dropdowns.separator';
|
|
495
496
|
var StyledSeparator = styled__default["default"].li.attrs({
|
|
496
497
|
'data-garden-id': COMPONENT_ID$k,
|
|
497
|
-
'data-garden-version': '8.
|
|
498
|
+
'data-garden-version': '8.49.0',
|
|
498
499
|
role: 'separator'
|
|
499
500
|
}).withConfig({
|
|
500
501
|
displayName: "StyledSeparator",
|
|
@@ -534,7 +535,7 @@ var getColorStyles = function getColorStyles(props) {
|
|
|
534
535
|
var StyledItem = styled__default["default"].li.attrs(function (props) {
|
|
535
536
|
return {
|
|
536
537
|
'data-garden-id': COMPONENT_ID$j,
|
|
537
|
-
'data-garden-version': '8.
|
|
538
|
+
'data-garden-version': '8.49.0',
|
|
538
539
|
'aria-disabled': props.disabled
|
|
539
540
|
};
|
|
540
541
|
}).withConfig({
|
|
@@ -564,7 +565,7 @@ StyledItem.defaultProps = {
|
|
|
564
565
|
var COMPONENT_ID$i = 'dropdowns.add_item';
|
|
565
566
|
var StyledAddItem = styled__default["default"](StyledItem).attrs({
|
|
566
567
|
'data-garden-id': COMPONENT_ID$i,
|
|
567
|
-
'data-garden-version': '8.
|
|
568
|
+
'data-garden-version': '8.49.0'
|
|
568
569
|
}).withConfig({
|
|
569
570
|
displayName: "StyledAddItem",
|
|
570
571
|
componentId: "sc-ekqk50-0"
|
|
@@ -580,7 +581,7 @@ StyledAddItem.defaultProps = {
|
|
|
580
581
|
var COMPONENT_ID$h = 'dropdowns.item_meta';
|
|
581
582
|
var StyledItemMeta = styled__default["default"].span.attrs({
|
|
582
583
|
'data-garden-id': COMPONENT_ID$h,
|
|
583
|
-
'data-garden-version': '8.
|
|
584
|
+
'data-garden-version': '8.49.0'
|
|
584
585
|
}).withConfig({
|
|
585
586
|
displayName: "StyledItemMeta",
|
|
586
587
|
componentId: "sc-k6xy28-0"
|
|
@@ -603,7 +604,7 @@ var getSizeStyles = function getSizeStyles(props) {
|
|
|
603
604
|
};
|
|
604
605
|
var StyledItemIcon = styled__default["default"].div.attrs({
|
|
605
606
|
'data-garden-id': COMPONENT_ID$g,
|
|
606
|
-
'data-garden-version': '8.
|
|
607
|
+
'data-garden-version': '8.49.0'
|
|
607
608
|
}).withConfig({
|
|
608
609
|
displayName: "StyledItemIcon",
|
|
609
610
|
componentId: "sc-1v0ty11-0"
|
|
@@ -629,7 +630,7 @@ StyledItemIcon.defaultProps = {
|
|
|
629
630
|
var COMPONENT_ID$f = 'dropdowns.next_item';
|
|
630
631
|
var StyledNextItem = styled__default["default"](StyledItem).attrs({
|
|
631
632
|
'data-garden-id': COMPONENT_ID$f,
|
|
632
|
-
'data-garden-version': '8.
|
|
633
|
+
'data-garden-version': '8.49.0'
|
|
633
634
|
}).withConfig({
|
|
634
635
|
displayName: "StyledNextItem",
|
|
635
636
|
componentId: "sc-1bcygn5-0"
|
|
@@ -667,7 +668,7 @@ var NextIconComponent = function NextIconComponent(_ref) {
|
|
|
667
668
|
var className = _ref.className;
|
|
668
669
|
return React__default["default"].createElement(SvgChevronRightStroke, {
|
|
669
670
|
"data-garden-id": COMPONENT_ID$e,
|
|
670
|
-
"data-garden-version": '8.
|
|
671
|
+
"data-garden-version": '8.49.0',
|
|
671
672
|
className: className
|
|
672
673
|
});
|
|
673
674
|
};
|
|
@@ -688,7 +689,7 @@ StyledNextIcon.defaultProps = {
|
|
|
688
689
|
var COMPONENT_ID$d = 'dropdowns.previous_item';
|
|
689
690
|
var StyledPreviousItem = styled__default["default"](StyledItem).attrs({
|
|
690
691
|
'data-garden-id': COMPONENT_ID$d,
|
|
691
|
-
'data-garden-version': '8.
|
|
692
|
+
'data-garden-version': '8.49.0'
|
|
692
693
|
}).withConfig({
|
|
693
694
|
displayName: "StyledPreviousItem",
|
|
694
695
|
componentId: "sc-1nmdds9-0"
|
|
@@ -724,7 +725,7 @@ var PreviousIconComponent = function PreviousIconComponent(_ref) {
|
|
|
724
725
|
var className = _ref.className;
|
|
725
726
|
return React__default["default"].createElement(SvgChevronLeftStroke, {
|
|
726
727
|
"data-garden-id": COMPONENT_ID$c,
|
|
727
|
-
"data-garden-version": '8.
|
|
728
|
+
"data-garden-version": '8.49.0',
|
|
728
729
|
className: className
|
|
729
730
|
});
|
|
730
731
|
};
|
|
@@ -745,7 +746,7 @@ StyledPreviousIcon.defaultProps = {
|
|
|
745
746
|
var COMPONENT_ID$b = 'dropdowns.header_icon';
|
|
746
747
|
var StyledHeaderIcon = styled__default["default"].div.attrs({
|
|
747
748
|
'data-garden-id': COMPONENT_ID$b,
|
|
748
|
-
'data-garden-version': '8.
|
|
749
|
+
'data-garden-version': '8.49.0'
|
|
749
750
|
}).withConfig({
|
|
750
751
|
displayName: "StyledHeaderIcon",
|
|
751
752
|
componentId: "sc-1fl6nsz-0"
|
|
@@ -775,7 +776,7 @@ var getHorizontalPadding = function getHorizontalPadding(props) {
|
|
|
775
776
|
};
|
|
776
777
|
var StyledHeaderItem = styled__default["default"](StyledItem).attrs({
|
|
777
778
|
'data-garden-id': COMPONENT_ID$a,
|
|
778
|
-
'data-garden-version': '8.
|
|
779
|
+
'data-garden-version': '8.49.0'
|
|
779
780
|
}).withConfig({
|
|
780
781
|
displayName: "StyledHeaderItem",
|
|
781
782
|
componentId: "sc-137filx-0"
|
|
@@ -795,7 +796,7 @@ StyledHeaderItem.defaultProps = {
|
|
|
795
796
|
var COMPONENT_ID$9 = 'dropdowns.media_body';
|
|
796
797
|
var StyledMediaBody = styled__default["default"].div.attrs({
|
|
797
798
|
'data-garden-id': COMPONENT_ID$9,
|
|
798
|
-
'data-garden-version': '8.
|
|
799
|
+
'data-garden-version': '8.49.0'
|
|
799
800
|
}).withConfig({
|
|
800
801
|
displayName: "StyledMediaBody",
|
|
801
802
|
componentId: "sc-36j7ef-0"
|
|
@@ -823,7 +824,7 @@ function (_ref) {
|
|
|
823
824
|
);
|
|
824
825
|
}).attrs({
|
|
825
826
|
'data-garden-id': COMPONENT_ID$8,
|
|
826
|
-
'data-garden-version': '8.
|
|
827
|
+
'data-garden-version': '8.49.0'
|
|
827
828
|
}).withConfig({
|
|
828
829
|
displayName: "StyledMediaFigure",
|
|
829
830
|
componentId: "sc-2f2x8x-0"
|
|
@@ -845,7 +846,7 @@ StyledMediaFigure.defaultProps = {
|
|
|
845
846
|
var COMPONENT_ID$7 = 'dropdowns.media_item';
|
|
846
847
|
var StyledMediaItem = styled__default["default"](StyledItem).attrs({
|
|
847
848
|
'data-garden-id': COMPONENT_ID$7,
|
|
848
|
-
'data-garden-version': '8.
|
|
849
|
+
'data-garden-version': '8.49.0'
|
|
849
850
|
}).withConfig({
|
|
850
851
|
displayName: "StyledMediaItem",
|
|
851
852
|
componentId: "sc-ikwshz-0"
|
|
@@ -860,7 +861,7 @@ var COMPONENT_ID$6 = 'dropdowns.faux_input';
|
|
|
860
861
|
var StyledFauxInput = styled__default["default"](reactForms.FauxInput).attrs(function (props) {
|
|
861
862
|
return {
|
|
862
863
|
'data-garden-id': COMPONENT_ID$6,
|
|
863
|
-
'data-garden-version': '8.
|
|
864
|
+
'data-garden-version': '8.49.0',
|
|
864
865
|
mediaLayout: true,
|
|
865
866
|
theme: props.theme
|
|
866
867
|
};
|
|
@@ -882,7 +883,7 @@ var COMPONENT_ID$5 = 'dropdowns.input';
|
|
|
882
883
|
var hiddenStyling = styled.css(["position:fixed;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
|
|
883
884
|
var StyledInput = styled__default["default"](reactForms.Input).attrs({
|
|
884
885
|
'data-garden-id': COMPONENT_ID$5,
|
|
885
|
-
'data-garden-version': '8.
|
|
886
|
+
'data-garden-version': '8.49.0',
|
|
886
887
|
isBare: true
|
|
887
888
|
}).withConfig({
|
|
888
889
|
displayName: "StyledInput",
|
|
@@ -899,7 +900,7 @@ StyledInput.defaultProps = {
|
|
|
899
900
|
var COMPONENT_ID$4 = 'dropdowns.select';
|
|
900
901
|
var StyledSelect = styled__default["default"].div.attrs({
|
|
901
902
|
'data-garden-id': COMPONENT_ID$4,
|
|
902
|
-
'data-garden-version': '8.
|
|
903
|
+
'data-garden-version': '8.49.0'
|
|
903
904
|
}).withConfig({
|
|
904
905
|
displayName: "StyledSelect",
|
|
905
906
|
componentId: "sc-xifmwj-0"
|
|
@@ -922,7 +923,7 @@ var visibleStyling = function visibleStyling(props) {
|
|
|
922
923
|
};
|
|
923
924
|
var StyledMultiselectInput = styled__default["default"](StyledInput).attrs({
|
|
924
925
|
'data-garden-id': COMPONENT_ID$3,
|
|
925
|
-
'data-garden-version': '8.
|
|
926
|
+
'data-garden-version': '8.49.0'
|
|
926
927
|
}).withConfig({
|
|
927
928
|
displayName: "StyledMultiselectInput",
|
|
928
929
|
componentId: "sc-1avnf6f-0"
|
|
@@ -952,7 +953,7 @@ var sizeStyles = function sizeStyles(props) {
|
|
|
952
953
|
};
|
|
953
954
|
var StyledMultiselectItemsContainer = styled__default["default"].div.attrs({
|
|
954
955
|
'data-garden-id': COMPONENT_ID$2,
|
|
955
|
-
'data-garden-version': '8.
|
|
956
|
+
'data-garden-version': '8.49.0'
|
|
956
957
|
}).withConfig({
|
|
957
958
|
displayName: "StyledMultiselectItemsContainer",
|
|
958
959
|
componentId: "sc-1jzhet8-0"
|
|
@@ -968,7 +969,7 @@ StyledMultiselectItemsContainer.defaultProps = {
|
|
|
968
969
|
var COMPONENT_ID$1 = 'dropdowns.multiselect_item_wrapper';
|
|
969
970
|
var StyledMultiselectItemWrapper = styled__default["default"].div.attrs({
|
|
970
971
|
'data-garden-id': COMPONENT_ID$1,
|
|
971
|
-
'data-garden-version': '8.
|
|
972
|
+
'data-garden-version': '8.49.0'
|
|
972
973
|
}).withConfig({
|
|
973
974
|
displayName: "StyledMultiselectItemWrapper",
|
|
974
975
|
componentId: "sc-1rb2bye-0"
|
|
@@ -984,7 +985,7 @@ StyledMultiselectItemWrapper.defaultProps = {
|
|
|
984
985
|
var COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
|
|
985
986
|
var StyledMultiselectMoreAnchor = styled__default["default"].div.attrs({
|
|
986
987
|
'data-garden-id': COMPONENT_ID,
|
|
987
|
-
'data-garden-version': '8.
|
|
988
|
+
'data-garden-version': '8.49.0'
|
|
988
989
|
}).withConfig({
|
|
989
990
|
displayName: "StyledMultiselectMoreAnchor",
|
|
990
991
|
componentId: "sc-1m9v46e-0"
|
|
@@ -1874,7 +1875,7 @@ var useMenuContext = function useMenuContext() {
|
|
|
1874
1875
|
return menuContext;
|
|
1875
1876
|
};
|
|
1876
1877
|
|
|
1877
|
-
var _excluded$4 = ["placement", "popperModifiers", "eventsEnabled", "isAnimated", "maxHeight", "style", "zIndex", "isCompact", "children"];
|
|
1878
|
+
var _excluded$4 = ["placement", "popperModifiers", "eventsEnabled", "isAnimated", "maxHeight", "style", "zIndex", "isCompact", "children", "appendToNode"];
|
|
1878
1879
|
var Menu = React.forwardRef(function (props, menuRef) {
|
|
1879
1880
|
var placement = props.placement,
|
|
1880
1881
|
popperModifiers = props.popperModifiers,
|
|
@@ -1885,6 +1886,7 @@ var Menu = React.forwardRef(function (props, menuRef) {
|
|
|
1885
1886
|
zIndex = props.zIndex,
|
|
1886
1887
|
isCompact = props.isCompact,
|
|
1887
1888
|
children = props.children,
|
|
1889
|
+
appendToNode = props.appendToNode,
|
|
1888
1890
|
otherProps = _objectWithoutProperties(props, _excluded$4);
|
|
1889
1891
|
var _useDropdownContext = useDropdownContext(),
|
|
1890
1892
|
hasMenuRef = _useDropdownContext.hasMenuRef,
|
|
@@ -1955,7 +1957,7 @@ var Menu = React.forwardRef(function (props, menuRef) {
|
|
|
1955
1957
|
placement: currentPlacement,
|
|
1956
1958
|
isAnimated: isAnimated && (isOpen || isVisible)
|
|
1957
1959
|
}, otherProps));
|
|
1958
|
-
|
|
1960
|
+
var menu = React__default["default"].createElement(StyledMenuWrapper, {
|
|
1959
1961
|
ref: isOpen ? ref : undefined,
|
|
1960
1962
|
hasArrow: menuProps.hasArrow,
|
|
1961
1963
|
placement: menuProps.placement,
|
|
@@ -1969,6 +1971,7 @@ var Menu = React.forwardRef(function (props, menuRef) {
|
|
|
1969
1971
|
maxHeight: maxHeight,
|
|
1970
1972
|
style: computedStyle
|
|
1971
1973
|
}, menuProps), (isOpen || isVisible) && children));
|
|
1974
|
+
return appendToNode ? reactDom.createPortal(menu, appendToNode) : menu;
|
|
1972
1975
|
}))
|
|
1973
1976
|
);
|
|
1974
1977
|
});
|
package/dist/index.esm.js
CHANGED
|
@@ -18,6 +18,7 @@ import { rgba, math } from 'polished';
|
|
|
18
18
|
import { FauxInput, Input, MediaInput, Field as Field$1, Hint as Hint$1, Label as Label$1, Message as Message$1 } from '@zendeskgarden/react-forms';
|
|
19
19
|
import mergeRefs from 'react-merge-refs';
|
|
20
20
|
import { useSelection } from '@zendeskgarden/container-selection';
|
|
21
|
+
import { createPortal } from 'react-dom';
|
|
21
22
|
|
|
22
23
|
function ownKeys(object, enumerableOnly) {
|
|
23
24
|
var keys = Object.keys(object);
|
|
@@ -416,7 +417,7 @@ var COMPONENT_ID$m = 'dropdowns.menu';
|
|
|
416
417
|
var StyledMenu = styled.ul.attrs(function (props) {
|
|
417
418
|
return {
|
|
418
419
|
'data-garden-id': COMPONENT_ID$m,
|
|
419
|
-
'data-garden-version': '8.
|
|
420
|
+
'data-garden-version': '8.49.0',
|
|
420
421
|
className: props.isAnimated && 'is-animated'
|
|
421
422
|
};
|
|
422
423
|
}).withConfig({
|
|
@@ -441,7 +442,7 @@ var COMPONENT_ID$l = 'dropdowns.menu_wrapper';
|
|
|
441
442
|
var StyledMenuWrapper = styled.div.attrs(function (props) {
|
|
442
443
|
return {
|
|
443
444
|
'data-garden-id': COMPONENT_ID$l,
|
|
444
|
-
'data-garden-version': '8.
|
|
445
|
+
'data-garden-version': '8.49.0',
|
|
445
446
|
className: props.isAnimated && 'is-animated'
|
|
446
447
|
};
|
|
447
448
|
}).withConfig({
|
|
@@ -465,7 +466,7 @@ StyledMenuWrapper.defaultProps = {
|
|
|
465
466
|
var COMPONENT_ID$k = 'dropdowns.separator';
|
|
466
467
|
var StyledSeparator = styled.li.attrs({
|
|
467
468
|
'data-garden-id': COMPONENT_ID$k,
|
|
468
|
-
'data-garden-version': '8.
|
|
469
|
+
'data-garden-version': '8.49.0',
|
|
469
470
|
role: 'separator'
|
|
470
471
|
}).withConfig({
|
|
471
472
|
displayName: "StyledSeparator",
|
|
@@ -505,7 +506,7 @@ var getColorStyles = function getColorStyles(props) {
|
|
|
505
506
|
var StyledItem = styled.li.attrs(function (props) {
|
|
506
507
|
return {
|
|
507
508
|
'data-garden-id': COMPONENT_ID$j,
|
|
508
|
-
'data-garden-version': '8.
|
|
509
|
+
'data-garden-version': '8.49.0',
|
|
509
510
|
'aria-disabled': props.disabled
|
|
510
511
|
};
|
|
511
512
|
}).withConfig({
|
|
@@ -535,7 +536,7 @@ StyledItem.defaultProps = {
|
|
|
535
536
|
var COMPONENT_ID$i = 'dropdowns.add_item';
|
|
536
537
|
var StyledAddItem = styled(StyledItem).attrs({
|
|
537
538
|
'data-garden-id': COMPONENT_ID$i,
|
|
538
|
-
'data-garden-version': '8.
|
|
539
|
+
'data-garden-version': '8.49.0'
|
|
539
540
|
}).withConfig({
|
|
540
541
|
displayName: "StyledAddItem",
|
|
541
542
|
componentId: "sc-ekqk50-0"
|
|
@@ -551,7 +552,7 @@ StyledAddItem.defaultProps = {
|
|
|
551
552
|
var COMPONENT_ID$h = 'dropdowns.item_meta';
|
|
552
553
|
var StyledItemMeta = styled.span.attrs({
|
|
553
554
|
'data-garden-id': COMPONENT_ID$h,
|
|
554
|
-
'data-garden-version': '8.
|
|
555
|
+
'data-garden-version': '8.49.0'
|
|
555
556
|
}).withConfig({
|
|
556
557
|
displayName: "StyledItemMeta",
|
|
557
558
|
componentId: "sc-k6xy28-0"
|
|
@@ -574,7 +575,7 @@ var getSizeStyles = function getSizeStyles(props) {
|
|
|
574
575
|
};
|
|
575
576
|
var StyledItemIcon = styled.div.attrs({
|
|
576
577
|
'data-garden-id': COMPONENT_ID$g,
|
|
577
|
-
'data-garden-version': '8.
|
|
578
|
+
'data-garden-version': '8.49.0'
|
|
578
579
|
}).withConfig({
|
|
579
580
|
displayName: "StyledItemIcon",
|
|
580
581
|
componentId: "sc-1v0ty11-0"
|
|
@@ -600,7 +601,7 @@ StyledItemIcon.defaultProps = {
|
|
|
600
601
|
var COMPONENT_ID$f = 'dropdowns.next_item';
|
|
601
602
|
var StyledNextItem = styled(StyledItem).attrs({
|
|
602
603
|
'data-garden-id': COMPONENT_ID$f,
|
|
603
|
-
'data-garden-version': '8.
|
|
604
|
+
'data-garden-version': '8.49.0'
|
|
604
605
|
}).withConfig({
|
|
605
606
|
displayName: "StyledNextItem",
|
|
606
607
|
componentId: "sc-1bcygn5-0"
|
|
@@ -638,7 +639,7 @@ var NextIconComponent = function NextIconComponent(_ref) {
|
|
|
638
639
|
var className = _ref.className;
|
|
639
640
|
return React__default.createElement(SvgChevronRightStroke, {
|
|
640
641
|
"data-garden-id": COMPONENT_ID$e,
|
|
641
|
-
"data-garden-version": '8.
|
|
642
|
+
"data-garden-version": '8.49.0',
|
|
642
643
|
className: className
|
|
643
644
|
});
|
|
644
645
|
};
|
|
@@ -659,7 +660,7 @@ StyledNextIcon.defaultProps = {
|
|
|
659
660
|
var COMPONENT_ID$d = 'dropdowns.previous_item';
|
|
660
661
|
var StyledPreviousItem = styled(StyledItem).attrs({
|
|
661
662
|
'data-garden-id': COMPONENT_ID$d,
|
|
662
|
-
'data-garden-version': '8.
|
|
663
|
+
'data-garden-version': '8.49.0'
|
|
663
664
|
}).withConfig({
|
|
664
665
|
displayName: "StyledPreviousItem",
|
|
665
666
|
componentId: "sc-1nmdds9-0"
|
|
@@ -695,7 +696,7 @@ var PreviousIconComponent = function PreviousIconComponent(_ref) {
|
|
|
695
696
|
var className = _ref.className;
|
|
696
697
|
return React__default.createElement(SvgChevronLeftStroke, {
|
|
697
698
|
"data-garden-id": COMPONENT_ID$c,
|
|
698
|
-
"data-garden-version": '8.
|
|
699
|
+
"data-garden-version": '8.49.0',
|
|
699
700
|
className: className
|
|
700
701
|
});
|
|
701
702
|
};
|
|
@@ -716,7 +717,7 @@ StyledPreviousIcon.defaultProps = {
|
|
|
716
717
|
var COMPONENT_ID$b = 'dropdowns.header_icon';
|
|
717
718
|
var StyledHeaderIcon = styled.div.attrs({
|
|
718
719
|
'data-garden-id': COMPONENT_ID$b,
|
|
719
|
-
'data-garden-version': '8.
|
|
720
|
+
'data-garden-version': '8.49.0'
|
|
720
721
|
}).withConfig({
|
|
721
722
|
displayName: "StyledHeaderIcon",
|
|
722
723
|
componentId: "sc-1fl6nsz-0"
|
|
@@ -746,7 +747,7 @@ var getHorizontalPadding = function getHorizontalPadding(props) {
|
|
|
746
747
|
};
|
|
747
748
|
var StyledHeaderItem = styled(StyledItem).attrs({
|
|
748
749
|
'data-garden-id': COMPONENT_ID$a,
|
|
749
|
-
'data-garden-version': '8.
|
|
750
|
+
'data-garden-version': '8.49.0'
|
|
750
751
|
}).withConfig({
|
|
751
752
|
displayName: "StyledHeaderItem",
|
|
752
753
|
componentId: "sc-137filx-0"
|
|
@@ -766,7 +767,7 @@ StyledHeaderItem.defaultProps = {
|
|
|
766
767
|
var COMPONENT_ID$9 = 'dropdowns.media_body';
|
|
767
768
|
var StyledMediaBody = styled.div.attrs({
|
|
768
769
|
'data-garden-id': COMPONENT_ID$9,
|
|
769
|
-
'data-garden-version': '8.
|
|
770
|
+
'data-garden-version': '8.49.0'
|
|
770
771
|
}).withConfig({
|
|
771
772
|
displayName: "StyledMediaBody",
|
|
772
773
|
componentId: "sc-36j7ef-0"
|
|
@@ -794,7 +795,7 @@ function (_ref) {
|
|
|
794
795
|
);
|
|
795
796
|
}).attrs({
|
|
796
797
|
'data-garden-id': COMPONENT_ID$8,
|
|
797
|
-
'data-garden-version': '8.
|
|
798
|
+
'data-garden-version': '8.49.0'
|
|
798
799
|
}).withConfig({
|
|
799
800
|
displayName: "StyledMediaFigure",
|
|
800
801
|
componentId: "sc-2f2x8x-0"
|
|
@@ -816,7 +817,7 @@ StyledMediaFigure.defaultProps = {
|
|
|
816
817
|
var COMPONENT_ID$7 = 'dropdowns.media_item';
|
|
817
818
|
var StyledMediaItem = styled(StyledItem).attrs({
|
|
818
819
|
'data-garden-id': COMPONENT_ID$7,
|
|
819
|
-
'data-garden-version': '8.
|
|
820
|
+
'data-garden-version': '8.49.0'
|
|
820
821
|
}).withConfig({
|
|
821
822
|
displayName: "StyledMediaItem",
|
|
822
823
|
componentId: "sc-ikwshz-0"
|
|
@@ -831,7 +832,7 @@ var COMPONENT_ID$6 = 'dropdowns.faux_input';
|
|
|
831
832
|
var StyledFauxInput = styled(FauxInput).attrs(function (props) {
|
|
832
833
|
return {
|
|
833
834
|
'data-garden-id': COMPONENT_ID$6,
|
|
834
|
-
'data-garden-version': '8.
|
|
835
|
+
'data-garden-version': '8.49.0',
|
|
835
836
|
mediaLayout: true,
|
|
836
837
|
theme: props.theme
|
|
837
838
|
};
|
|
@@ -853,7 +854,7 @@ var COMPONENT_ID$5 = 'dropdowns.input';
|
|
|
853
854
|
var hiddenStyling = css(["position:fixed;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
|
|
854
855
|
var StyledInput = styled(Input).attrs({
|
|
855
856
|
'data-garden-id': COMPONENT_ID$5,
|
|
856
|
-
'data-garden-version': '8.
|
|
857
|
+
'data-garden-version': '8.49.0',
|
|
857
858
|
isBare: true
|
|
858
859
|
}).withConfig({
|
|
859
860
|
displayName: "StyledInput",
|
|
@@ -870,7 +871,7 @@ StyledInput.defaultProps = {
|
|
|
870
871
|
var COMPONENT_ID$4 = 'dropdowns.select';
|
|
871
872
|
var StyledSelect = styled.div.attrs({
|
|
872
873
|
'data-garden-id': COMPONENT_ID$4,
|
|
873
|
-
'data-garden-version': '8.
|
|
874
|
+
'data-garden-version': '8.49.0'
|
|
874
875
|
}).withConfig({
|
|
875
876
|
displayName: "StyledSelect",
|
|
876
877
|
componentId: "sc-xifmwj-0"
|
|
@@ -893,7 +894,7 @@ var visibleStyling = function visibleStyling(props) {
|
|
|
893
894
|
};
|
|
894
895
|
var StyledMultiselectInput = styled(StyledInput).attrs({
|
|
895
896
|
'data-garden-id': COMPONENT_ID$3,
|
|
896
|
-
'data-garden-version': '8.
|
|
897
|
+
'data-garden-version': '8.49.0'
|
|
897
898
|
}).withConfig({
|
|
898
899
|
displayName: "StyledMultiselectInput",
|
|
899
900
|
componentId: "sc-1avnf6f-0"
|
|
@@ -923,7 +924,7 @@ var sizeStyles = function sizeStyles(props) {
|
|
|
923
924
|
};
|
|
924
925
|
var StyledMultiselectItemsContainer = styled.div.attrs({
|
|
925
926
|
'data-garden-id': COMPONENT_ID$2,
|
|
926
|
-
'data-garden-version': '8.
|
|
927
|
+
'data-garden-version': '8.49.0'
|
|
927
928
|
}).withConfig({
|
|
928
929
|
displayName: "StyledMultiselectItemsContainer",
|
|
929
930
|
componentId: "sc-1jzhet8-0"
|
|
@@ -939,7 +940,7 @@ StyledMultiselectItemsContainer.defaultProps = {
|
|
|
939
940
|
var COMPONENT_ID$1 = 'dropdowns.multiselect_item_wrapper';
|
|
940
941
|
var StyledMultiselectItemWrapper = styled.div.attrs({
|
|
941
942
|
'data-garden-id': COMPONENT_ID$1,
|
|
942
|
-
'data-garden-version': '8.
|
|
943
|
+
'data-garden-version': '8.49.0'
|
|
943
944
|
}).withConfig({
|
|
944
945
|
displayName: "StyledMultiselectItemWrapper",
|
|
945
946
|
componentId: "sc-1rb2bye-0"
|
|
@@ -955,7 +956,7 @@ StyledMultiselectItemWrapper.defaultProps = {
|
|
|
955
956
|
var COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
|
|
956
957
|
var StyledMultiselectMoreAnchor = styled.div.attrs({
|
|
957
958
|
'data-garden-id': COMPONENT_ID,
|
|
958
|
-
'data-garden-version': '8.
|
|
959
|
+
'data-garden-version': '8.49.0'
|
|
959
960
|
}).withConfig({
|
|
960
961
|
displayName: "StyledMultiselectMoreAnchor",
|
|
961
962
|
componentId: "sc-1m9v46e-0"
|
|
@@ -1845,7 +1846,7 @@ var useMenuContext = function useMenuContext() {
|
|
|
1845
1846
|
return menuContext;
|
|
1846
1847
|
};
|
|
1847
1848
|
|
|
1848
|
-
var _excluded$4 = ["placement", "popperModifiers", "eventsEnabled", "isAnimated", "maxHeight", "style", "zIndex", "isCompact", "children"];
|
|
1849
|
+
var _excluded$4 = ["placement", "popperModifiers", "eventsEnabled", "isAnimated", "maxHeight", "style", "zIndex", "isCompact", "children", "appendToNode"];
|
|
1849
1850
|
var Menu = forwardRef(function (props, menuRef) {
|
|
1850
1851
|
var placement = props.placement,
|
|
1851
1852
|
popperModifiers = props.popperModifiers,
|
|
@@ -1856,6 +1857,7 @@ var Menu = forwardRef(function (props, menuRef) {
|
|
|
1856
1857
|
zIndex = props.zIndex,
|
|
1857
1858
|
isCompact = props.isCompact,
|
|
1858
1859
|
children = props.children,
|
|
1860
|
+
appendToNode = props.appendToNode,
|
|
1859
1861
|
otherProps = _objectWithoutProperties(props, _excluded$4);
|
|
1860
1862
|
var _useDropdownContext = useDropdownContext(),
|
|
1861
1863
|
hasMenuRef = _useDropdownContext.hasMenuRef,
|
|
@@ -1926,7 +1928,7 @@ var Menu = forwardRef(function (props, menuRef) {
|
|
|
1926
1928
|
placement: currentPlacement,
|
|
1927
1929
|
isAnimated: isAnimated && (isOpen || isVisible)
|
|
1928
1930
|
}, otherProps));
|
|
1929
|
-
|
|
1931
|
+
var menu = React__default.createElement(StyledMenuWrapper, {
|
|
1930
1932
|
ref: isOpen ? ref : undefined,
|
|
1931
1933
|
hasArrow: menuProps.hasArrow,
|
|
1932
1934
|
placement: menuProps.placement,
|
|
@@ -1940,6 +1942,7 @@ var Menu = forwardRef(function (props, menuRef) {
|
|
|
1940
1942
|
maxHeight: maxHeight,
|
|
1941
1943
|
style: computedStyle
|
|
1942
1944
|
}, menuProps), (isOpen || isVisible) && children));
|
|
1945
|
+
return appendToNode ? createPortal(menu, appendToNode) : menu;
|
|
1943
1946
|
}))
|
|
1944
1947
|
);
|
|
1945
1948
|
});
|
|
@@ -40,6 +40,10 @@ export interface IMenuProps extends HTMLAttributes<HTMLUListElement> {
|
|
|
40
40
|
* Sets the `max-height` of the menu
|
|
41
41
|
*/
|
|
42
42
|
maxHeight?: string;
|
|
43
|
+
/**
|
|
44
|
+
* Appends the menu to the element provided
|
|
45
|
+
*/
|
|
46
|
+
appendToNode?: HTMLElement;
|
|
43
47
|
}
|
|
44
48
|
/**
|
|
45
49
|
* @extends HTMLAttributes<HTMLUListElement>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-dropdowns",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.49.0",
|
|
4
4
|
"description": "Components relating to dropdowns in the Garden Design System",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Zendesk Garden <garden@zendesk.com>",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@zendeskgarden/container-selection": "^1.3.8",
|
|
25
25
|
"@zendeskgarden/container-utilities": "^0.7.0",
|
|
26
|
-
"@zendeskgarden/react-forms": "^8.
|
|
26
|
+
"@zendeskgarden/react-forms": "^8.49.0",
|
|
27
27
|
"downshift": "^6.0.0",
|
|
28
28
|
"polished": "^4.0.0",
|
|
29
29
|
"prop-types": "^15.5.7",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@types/lodash.debounce": "4.0.6",
|
|
41
|
-
"@zendeskgarden/react-theming": "^8.
|
|
41
|
+
"@zendeskgarden/react-theming": "^8.49.0",
|
|
42
42
|
"@zendeskgarden/svg-icons": "6.30.2",
|
|
43
43
|
"lodash.debounce": "4.0.8"
|
|
44
44
|
},
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"access": "public"
|
|
53
53
|
},
|
|
54
54
|
"zendeskgarden:src": "src/index.ts",
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "9c2b7501c2b0100f23fa3715a4d3b0d413645d99"
|
|
56
56
|
}
|