@zendeskgarden/react-dropdowns 9.0.0-next.7 → 9.0.0-next.9

package/dist/esm/elements/combobox/utils.js

@@ -0,0 +1,36 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { Children, isValidElement } from 'react';
+
+const toOption = props => {
+  return {
+    value: props.value,
+    label: props.label,
+    hidden: props.isHidden,
+    disabled: props.isDisabled,
+    selected: props.isSelected
+  };
+};
+const toOptions = (children, optionTagProps) => Children.toArray(children).reduce((options, option) => {
+  const retVal = options;
+  if ( isValidElement(option)) {
+    if ('value' in option.props) {
+      retVal.push(toOption(option.props));
+      optionTagProps[option.props.value] = option.props.tagProps;
+    } else {
+      const props = option.props;
+      const groupOptions = toOptions(props.children, optionTagProps);
+      retVal.push({
+        label: props.legend,
+        options: groupOptions
+      });
+    }
+  }
+  return retVal;
+}, []);
+
+export { toOption, toOptions };

package/dist/esm/elements/menu/Item.js

@@ -0,0 +1,140 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { forwardRef, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { mergeRefs } from 'react-merge-refs';
+import SvgPlusStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/plus-stroke.svg.js';
+import SvgChevronRightStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg.js';
+import SvgChevronLeftStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg.js';
+import SvgCheckLgStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/check-lg-stroke.svg.js';
+import { OPTION_TYPE } from '../../types/index.js';
+import '../../views/combobox/StyledCombobox.js';
+import '../../views/combobox/StyledContainer.js';
+import '../../views/combobox/StyledField.js';
+import '../../views/combobox/StyledFloatingListbox.js';
+import '../../views/combobox/StyledHint.js';
+import '../../views/combobox/StyledInput.js';
+import '../../views/combobox/StyledInputGroup.js';
+import '../../views/combobox/StyledInputIcon.js';
+import '../../views/combobox/StyledLabel.js';
+import '../../views/combobox/StyledListbox.js';
+import '../../views/combobox/StyledListboxSeparator.js';
+import '../../views/combobox/StyledMessage.js';
+import '../../views/combobox/StyledOptGroup.js';
+import '../../views/combobox/StyledOption.js';
+import '../../views/combobox/StyledOptionContent.js';
+import '../../views/combobox/StyledOptionIcon.js';
+import '../../views/combobox/StyledOptionMeta.js';
+import '../../views/combobox/StyledOptionTypeIcon.js';
+import '../../views/combobox/StyledTag.js';
+import '../../views/combobox/StyledTagsButton.js';
+import '../../views/combobox/StyledTrigger.js';
+import '../../views/combobox/StyledValue.js';
+import '../../views/menu/StyledMenu.js';
+import '../../views/menu/StyledFloatingMenu.js';
+import { StyledItem } from '../../views/menu/StyledItem.js';
+import { StyledItemContent } from '../../views/menu/StyledItemContent.js';
+import '../../views/menu/StyledItemGroup.js';
+import { StyledItemIcon } from '../../views/menu/StyledItemIcon.js';
+import '../../views/menu/StyledItemMeta.js';
+import { StyledItemTypeIcon } from '../../views/menu/StyledItemTypeIcon.js';
+import '../../views/menu/StyledButton.js';
+import '../../views/menu/StyledSeparator.js';
+import { ItemMeta } from './ItemMeta.js';
+import useMenuContext from '../../context/useMenuContext.js';
+import useItemGroupContext from '../../context/useItemGroupContext.js';
+import { ItemContext } from '../../context/useItemContext.js';
+import { toItem } from './utils.js';
+
+const ItemComponent = forwardRef((_ref, ref) => {
+  let {
+    children,
+    value,
+    label = value,
+    isSelected,
+    icon,
+    isDisabled,
+    type,
+    name,
+    onClick,
+    onKeyDown,
+    onMouseEnter,
+    ...props
+  } = _ref;
+  const {
+    type: selectionType
+  } = useItemGroupContext();
+  const {
+    focusedValue,
+    getItemProps
+  } = useMenuContext();
+  const item = {
+    ...toItem({
+      value,
+      label,
+      name,
+      type,
+      isSelected,
+      isDisabled
+    }),
+    type: selectionType
+  };
+  const {
+    ref: _itemRef,
+    ...itemProps
+  } = getItemProps({
+    item,
+    onClick,
+    onKeyDown,
+    onMouseEnter
+  });
+  const isActive = value === focusedValue;
+  const {
+    isCompact
+  } = useMenuContext();
+  const renderActionIcon = iconType => {
+    switch (iconType) {
+      case 'add':
+        return React__default.createElement(SvgPlusStroke, null);
+      case 'next':
+        return React__default.createElement(SvgChevronRightStroke, null);
+      case 'previous':
+        return React__default.createElement(SvgChevronLeftStroke, null);
+      default:
+        return React__default.createElement(SvgCheckLgStroke, null);
+    }
+  };
+  const contextValue = useMemo(() => ({
+    isDisabled
+  }), [isDisabled]);
+  return React__default.createElement(ItemContext.Provider, {
+    value: contextValue
+  }, React__default.createElement(StyledItem, Object.assign({
+    $type: type,
+    isCompact: isCompact,
+    isActive: isActive
+  }, props, itemProps, {
+    ref: mergeRefs([_itemRef, ref])
+  }), React__default.createElement(StyledItemTypeIcon, {
+    $isCompact: isCompact,
+    $type: type
+  }, renderActionIcon(type)), icon && React__default.createElement(StyledItemIcon, null, icon), React__default.createElement(StyledItemContent, null, children || label)));
+});
+ItemComponent.displayName = 'Item';
+ItemComponent.propTypes = {
+  icon: PropTypes.any,
+  isDisabled: PropTypes.bool,
+  isSelected: PropTypes.bool,
+  label: PropTypes.string,
+  name: PropTypes.string,
+  type: PropTypes.oneOf(OPTION_TYPE),
+  value: PropTypes.string.isRequired
+};
+const Item = ItemComponent;
+Item.Meta = ItemMeta;
+
+export { Item };

package/dist/esm/elements/menu/ItemGroup.js

@@ -0,0 +1,96 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { forwardRef, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useText } from '@zendeskgarden/react-theming';
+import useMenuContext from '../../context/useMenuContext.js';
+import '../../views/combobox/StyledCombobox.js';
+import '../../views/combobox/StyledContainer.js';
+import '../../views/combobox/StyledField.js';
+import '../../views/combobox/StyledFloatingListbox.js';
+import '../../views/combobox/StyledHint.js';
+import '../../views/combobox/StyledInput.js';
+import '../../views/combobox/StyledInputGroup.js';
+import '../../views/combobox/StyledInputIcon.js';
+import '../../views/combobox/StyledLabel.js';
+import '../../views/combobox/StyledListbox.js';
+import '../../views/combobox/StyledListboxSeparator.js';
+import '../../views/combobox/StyledMessage.js';
+import '../../views/combobox/StyledOptGroup.js';
+import '../../views/combobox/StyledOption.js';
+import '../../views/combobox/StyledOptionContent.js';
+import '../../views/combobox/StyledOptionIcon.js';
+import '../../views/combobox/StyledOptionMeta.js';
+import '../../views/combobox/StyledOptionTypeIcon.js';
+import '../../views/combobox/StyledTag.js';
+import '../../views/combobox/StyledTagsButton.js';
+import '../../views/combobox/StyledTrigger.js';
+import '../../views/combobox/StyledValue.js';
+import '../../views/menu/StyledMenu.js';
+import '../../views/menu/StyledFloatingMenu.js';
+import { StyledItem } from '../../views/menu/StyledItem.js';
+import { StyledItemContent } from '../../views/menu/StyledItemContent.js';
+import { StyledItemGroup } from '../../views/menu/StyledItemGroup.js';
+import '../../views/menu/StyledItemIcon.js';
+import '../../views/menu/StyledItemMeta.js';
+import { StyledItemTypeIcon } from '../../views/menu/StyledItemTypeIcon.js';
+import '../../views/menu/StyledButton.js';
+import { StyledSeparator } from '../../views/menu/StyledSeparator.js';
+import { ItemGroupContext } from '../../context/useItemGroupContext.js';
+
+const ItemGroup = forwardRef((_ref, ref) => {
+  let {
+    children,
+    content,
+    legend,
+    icon,
+    'aria-label': ariaLabel,
+    type,
+    ...props
+  } = _ref;
+  const {
+    isCompact,
+    getItemGroupProps
+  } = useMenuContext();
+  const groupAriaLabel = useText(ItemGroup, {
+    'aria-label': ariaLabel
+  }, 'aria-label', 'Group', !legend );
+  const groupProps = getItemGroupProps({
+    'aria-label': groupAriaLabel || legend
+  });
+  const contextValue = useMemo(() => ({
+    type
+  }), [type]);
+  return React__default.createElement(ItemGroupContext.Provider, {
+    value: contextValue
+  }, React__default.createElement(StyledItem, Object.assign({
+    isCompact: isCompact,
+    $type: "group"
+  }, props, {
+    ref: ref
+  }), React__default.createElement(StyledItemContent, null, (content || legend) && React__default.createElement(StyledItem, {
+    as: "div",
+    isCompact: isCompact,
+    $type: "header"
+  }, icon && React__default.createElement(StyledItemTypeIcon, {
+    $isCompact: isCompact,
+    $type: "header"
+  }, icon), content || legend), React__default.createElement(StyledItemGroup, Object.assign({
+    isCompact: isCompact
+  }, groupProps), React__default.createElement(StyledSeparator, {
+    role: "none"
+  }), children))));
+});
+ItemGroup.displayName = 'ItemGroup';
+ItemGroup.propTypes = {
+  content: PropTypes.any,
+  icon: PropTypes.any,
+  legend: PropTypes.string,
+  type: PropTypes.oneOf(['checkbox', 'radio', undefined])
+};
+
+export { ItemGroup };

package/dist/esm/elements/menu/ItemMeta.js

@@ -0,0 +1,55 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { forwardRef } from 'react';
+import useItemContext from '../../context/useItemContext.js';
+import '../../views/combobox/StyledCombobox.js';
+import '../../views/combobox/StyledContainer.js';
+import '../../views/combobox/StyledField.js';
+import '../../views/combobox/StyledFloatingListbox.js';
+import '../../views/combobox/StyledHint.js';
+import '../../views/combobox/StyledInput.js';
+import '../../views/combobox/StyledInputGroup.js';
+import '../../views/combobox/StyledInputIcon.js';
+import '../../views/combobox/StyledLabel.js';
+import '../../views/combobox/StyledListbox.js';
+import '../../views/combobox/StyledListboxSeparator.js';
+import '../../views/combobox/StyledMessage.js';
+import '../../views/combobox/StyledOptGroup.js';
+import '../../views/combobox/StyledOption.js';
+import '../../views/combobox/StyledOptionContent.js';
+import '../../views/combobox/StyledOptionIcon.js';
+import '../../views/combobox/StyledOptionMeta.js';
+import '../../views/combobox/StyledOptionTypeIcon.js';
+import '../../views/combobox/StyledTag.js';
+import '../../views/combobox/StyledTagsButton.js';
+import '../../views/combobox/StyledTrigger.js';
+import '../../views/combobox/StyledValue.js';
+import '../../views/menu/StyledMenu.js';
+import '../../views/menu/StyledFloatingMenu.js';
+import '../../views/menu/StyledItem.js';
+import '../../views/menu/StyledItemContent.js';
+import '../../views/menu/StyledItemGroup.js';
+import '../../views/menu/StyledItemIcon.js';
+import { StyledItemMeta } from '../../views/menu/StyledItemMeta.js';
+import '../../views/menu/StyledItemTypeIcon.js';
+import '../../views/menu/StyledButton.js';
+import '../../views/menu/StyledSeparator.js';
+
+const ItemMetaComponent = forwardRef((props, ref) => {
+  const {
+    isDisabled
+  } = useItemContext();
+  return React__default.createElement(StyledItemMeta, Object.assign({
+    isDisabled: isDisabled
+  }, props, {
+    ref: ref
+  }));
+});
+ItemMetaComponent.displayName = 'Item.Meta';
+const ItemMeta = ItemMetaComponent;
+
+export { ItemMeta };

package/dist/esm/elements/menu/Menu.js

@@ -0,0 +1,157 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { forwardRef, useRef, useContext, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { mergeRefs } from 'react-merge-refs';
+import { ThemeContext } from 'styled-components';
+import { useMenu } from '@zendeskgarden/container-menu';
+import { DEFAULT_THEME, useWindow } from '@zendeskgarden/react-theming';
+import { PLACEMENT } from '../../types/index.js';
+import { MenuContext } from '../../context/useMenuContext.js';
+import { toItems } from './utils.js';
+import { MenuList } from './MenuList.js';
+import '../../views/combobox/StyledCombobox.js';
+import '../../views/combobox/StyledContainer.js';
+import '../../views/combobox/StyledField.js';
+import '../../views/combobox/StyledFloatingListbox.js';
+import '../../views/combobox/StyledHint.js';
+import '../../views/combobox/StyledInput.js';
+import '../../views/combobox/StyledInputGroup.js';
+import '../../views/combobox/StyledInputIcon.js';
+import '../../views/combobox/StyledLabel.js';
+import '../../views/combobox/StyledListbox.js';
+import '../../views/combobox/StyledListboxSeparator.js';
+import '../../views/combobox/StyledMessage.js';
+import '../../views/combobox/StyledOptGroup.js';
+import '../../views/combobox/StyledOption.js';
+import '../../views/combobox/StyledOptionContent.js';
+import '../../views/combobox/StyledOptionIcon.js';
+import '../../views/combobox/StyledOptionMeta.js';
+import '../../views/combobox/StyledOptionTypeIcon.js';
+import '../../views/combobox/StyledTag.js';
+import '../../views/combobox/StyledTagsButton.js';
+import '../../views/combobox/StyledTrigger.js';
+import '../../views/combobox/StyledValue.js';
+import '../../views/menu/StyledMenu.js';
+import '../../views/menu/StyledFloatingMenu.js';
+import '../../views/menu/StyledItem.js';
+import '../../views/menu/StyledItemContent.js';
+import '../../views/menu/StyledItemGroup.js';
+import '../../views/menu/StyledItemIcon.js';
+import '../../views/menu/StyledItemMeta.js';
+import '../../views/menu/StyledItemTypeIcon.js';
+import { StyledButton } from '../../views/menu/StyledButton.js';
+import '../../views/menu/StyledSeparator.js';
+import SvgChevronDownStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js';
+
+const Menu = forwardRef((_ref, ref) => {
+  let {
+    button,
+    buttonProps: _buttonProps = {},
+    children,
+    isCompact,
+    focusedValue: _focusedValue,
+    defaultFocusedValue,
+    defaultExpanded,
+    isExpanded: _isExpanded,
+    selectedItems,
+    onChange,
+    onMouseLeave,
+    ...props
+  } = _ref;
+  const triggerRef = useRef(null);
+  const menuRef = useRef(null);
+  const items = toItems(children);
+  const theme = useContext(ThemeContext) || DEFAULT_THEME;
+  const environment = useWindow(theme);
+  const {
+    isExpanded,
+    focusedValue,
+    getTriggerProps,
+    getMenuProps,
+    getItemProps,
+    getItemGroupProps,
+    getSeparatorProps
+  } = useMenu({
+    rtl: theme.rtl,
+    environment,
+    defaultFocusedValue,
+    focusedValue: _focusedValue,
+    defaultExpanded,
+    isExpanded: _isExpanded,
+    selectedItems,
+    items,
+    menuRef,
+    triggerRef,
+    onChange
+  });
+  const {
+    onClick,
+    onKeyDown,
+    disabled,
+    ...buttonProps
+  } = _buttonProps;
+  const triggerProps = {
+    ...(isCompact && {
+      size: 'small'
+    }),
+    ...buttonProps,
+    ...getTriggerProps({
+      type: 'button',
+      onClick,
+      onKeyDown,
+      disabled
+    }),
+    ref: mergeRefs([triggerRef, ref])
+  };
+  const trigger = typeof button === 'function' ? button(triggerProps) : React__default.createElement(StyledButton, triggerProps, button, React__default.createElement(StyledButton.EndIcon, {
+    isRotated: isExpanded
+  }, React__default.createElement(SvgChevronDownStroke, null)));
+  const contextValue = useMemo(() => ({
+    isCompact,
+    focusedValue,
+    getItemProps,
+    getItemGroupProps,
+    getSeparatorProps
+  }), [isCompact, focusedValue, getItemProps, getItemGroupProps, getSeparatorProps]);
+  return React__default.createElement(MenuContext.Provider, {
+    value: contextValue
+  }, trigger, React__default.createElement(MenuList, Object.assign({}, props, getMenuProps({
+    onMouseLeave
+  }), {
+    ref: mergeRefs([menuRef, ref]),
+    isCompact: isCompact,
+    isExpanded: isExpanded,
+    triggerRef: triggerRef
+  }), children));
+});
+Menu.displayName = 'Menu';
+Menu.propTypes = {
+  appendToNode: PropTypes.any,
+  button: PropTypes.any.isRequired,
+  buttonProps: PropTypes.object,
+  defaultExpanded: PropTypes.bool,
+  defaultFocusedValue: PropTypes.string,
+  fallbackPlacements: PropTypes.arrayOf(PropTypes.any),
+  focusedValue: PropTypes.string,
+  hasArrow: PropTypes.bool,
+  isCompact: PropTypes.bool,
+  isExpanded: PropTypes.bool,
+  maxHeight: PropTypes.string,
+  minHeight: PropTypes.string,
+  onChange: PropTypes.func,
+  placement: PropTypes.oneOf(PLACEMENT),
+  selectedItems: PropTypes.arrayOf(PropTypes.any),
+  zIndex: PropTypes.number
+};
+Menu.defaultProps = {
+  maxHeight: '400px',
+  placement: 'bottom-start',
+  zIndex: 1000
+};
+
+export { Menu };

package/dist/esm/elements/menu/MenuList.js

@@ -0,0 +1,170 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { forwardRef, useRef, useState, useContext, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { ThemeContext } from 'styled-components';
+import { DEFAULT_THEME, getFloatingPlacements, getMenuPosition, getArrowPosition } from '@zendeskgarden/react-theming';
+import { useFloating, platform, offset, autoPlacement, flip, size, autoUpdate } from '@floating-ui/react-dom';
+import { PLACEMENT } from '../../types/index.js';
+import '../../views/combobox/StyledCombobox.js';
+import '../../views/combobox/StyledContainer.js';
+import '../../views/combobox/StyledField.js';
+import '../../views/combobox/StyledFloatingListbox.js';
+import '../../views/combobox/StyledHint.js';
+import '../../views/combobox/StyledInput.js';
+import '../../views/combobox/StyledInputGroup.js';
+import '../../views/combobox/StyledInputIcon.js';
+import '../../views/combobox/StyledLabel.js';
+import '../../views/combobox/StyledListbox.js';
+import '../../views/combobox/StyledListboxSeparator.js';
+import '../../views/combobox/StyledMessage.js';
+import '../../views/combobox/StyledOptGroup.js';
+import '../../views/combobox/StyledOption.js';
+import '../../views/combobox/StyledOptionContent.js';
+import '../../views/combobox/StyledOptionIcon.js';
+import '../../views/combobox/StyledOptionMeta.js';
+import '../../views/combobox/StyledOptionTypeIcon.js';
+import '../../views/combobox/StyledTag.js';
+import '../../views/combobox/StyledTagsButton.js';
+import '../../views/combobox/StyledTrigger.js';
+import '../../views/combobox/StyledValue.js';
+import { StyledMenu } from '../../views/menu/StyledMenu.js';
+import { StyledFloatingMenu } from '../../views/menu/StyledFloatingMenu.js';
+import '../../views/menu/StyledItem.js';
+import '../../views/menu/StyledItemContent.js';
+import '../../views/menu/StyledItemGroup.js';
+import '../../views/menu/StyledItemIcon.js';
+import '../../views/menu/StyledItemMeta.js';
+import '../../views/menu/StyledItemTypeIcon.js';
+import '../../views/menu/StyledButton.js';
+import '../../views/menu/StyledSeparator.js';
+import { createPortal } from 'react-dom';
+
+const PLACEMENT_DEFAULT = 'bottom-start';
+const MenuList = forwardRef((_ref, ref) => {
+  let {
+    appendToNode,
+    hasArrow,
+    isCompact,
+    isExpanded,
+    fallbackPlacements: _fallbackPlacements,
+    maxHeight,
+    minHeight,
+    placement: _placement,
+    triggerRef,
+    zIndex,
+    children,
+    ...props
+  } = _ref;
+  const floatingRef = useRef(null);
+  const [isVisible, setIsVisible] = useState(isExpanded);
+  const [height, setHeight] = useState();
+  const theme = useContext(ThemeContext) || DEFAULT_THEME;
+  const [floatingPlacement, fallbackPlacements] = getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement, _fallbackPlacements);
+  const {
+    refs,
+    placement,
+    update,
+    floatingStyles: {
+      transform
+    }
+  } = useFloating({
+    platform: {
+      ...platform,
+      isRTL: () => theme.rtl
+    },
+    elements: {
+      reference: triggerRef?.current,
+      floating: floatingRef?.current
+    },
+    placement: floatingPlacement,
+    middleware: [offset(theme.space.base * (hasArrow ? 2 : 1)), _placement === 'auto' ? autoPlacement() : flip({
+      fallbackPlacements
+    }), size({
+      apply: _ref2 => {
+        let {
+          rects,
+          availableHeight
+        } = _ref2;
+        if (!(minHeight === null || minHeight === 'fit-content')) {
+          if (rects.floating.height > availableHeight) {
+            setHeight(availableHeight);
+          }
+        }
+      }
+    })]
+  });
+  useEffect(() => {
+    let cleanup;
+    if (isExpanded && refs.reference.current && refs.floating.current) {
+      cleanup = autoUpdate(refs.reference.current, refs.floating.current, update, {
+        elementResize: typeof ResizeObserver === 'function'
+      });
+    }
+    return () => cleanup && cleanup();
+  }, [isExpanded, refs.reference, refs.floating, update]);
+  useEffect(() => {
+    let timeout;
+    if (isExpanded) {
+      setIsVisible(true);
+    } else {
+      timeout = setTimeout(() => {
+        setIsVisible(false);
+        setHeight(undefined);
+      }, 200 );
+    }
+    return () => clearTimeout(timeout);
+  }, [isExpanded]);
+  useEffect(() => {
+    if (height) {
+      setHeight(undefined);
+      update();
+    }
+  }, [
+  children, update]);
+  const Node = React__default.createElement(StyledFloatingMenu, {
+    "data-garden-animate": isVisible,
+    isHidden: !isExpanded,
+    position: getMenuPosition(placement),
+    zIndex: zIndex,
+    style: {
+      transform
+    },
+    ref: floatingRef
+  }, React__default.createElement(StyledMenu, Object.assign({
+    "data-garden-animate-arrow": isVisible,
+    arrowPosition: hasArrow ? getArrowPosition(theme, placement) : undefined,
+    isCompact: isCompact,
+    minHeight: minHeight,
+    maxHeight: maxHeight,
+    style: {
+      height
+    }
+  }, props, {
+    ref: ref
+  }), isVisible && children));
+  return appendToNode ? createPortal(Node, appendToNode) : Node;
+});
+MenuList.displayName = 'MenuList';
+MenuList.propTypes = {
+  appendToNode: PropTypes.any,
+  hasArrow: PropTypes.bool,
+  isCompact: PropTypes.bool,
+  isExpanded: PropTypes.bool,
+  maxHeight: PropTypes.string,
+  minHeight: PropTypes.string,
+  placement: PropTypes.oneOf(PLACEMENT),
+  triggerRef: PropTypes.any,
+  zIndex: PropTypes.number
+};
+MenuList.defaultProps = {
+  maxHeight: '400px',
+  placement: PLACEMENT_DEFAULT,
+  zIndex: 1000
+};
+
+export { MenuList };