@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 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.48.2',
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.48.2',
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.48.2',
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.48.2',
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.48.2'
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.48.2'
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.48.2'
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.48.2'
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.48.2',
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.48.2'
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.48.2',
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.48.2'
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.48.2'
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.48.2'
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.48.2'
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.48.2'
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.48.2',
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.48.2',
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.48.2'
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.48.2'
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.48.2'
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.48.2'
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.48.2'
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
- return React__default["default"].createElement(StyledMenuWrapper, {
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.48.2',
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.48.2',
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.48.2',
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.48.2',
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.48.2'
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.48.2'
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.48.2'
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.48.2'
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.48.2',
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.48.2'
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.48.2',
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.48.2'
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.48.2'
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.48.2'
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.48.2'
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.48.2'
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.48.2',
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.48.2',
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.48.2'
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.48.2'
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.48.2'
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.48.2'
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.48.2'
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
- return React__default.createElement(StyledMenuWrapper, {
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.48.2",
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.48.2",
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.48.2",
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": "c514c351b0973fe1f9853853c536d4fac10f4ce4"
55
+ "gitHead": "9c2b7501c2b0100f23fa3715a4d3b0d413645d99"
56
56
  }