pouncejs/dist/esm/components/Dropdown/DropdownMenu.js

A collection of UI components from Panther labs

import React from 'react';
import useDropdownAlignment from './useDropdownAlignment';
import { MenuItems as ReachMenuItems, MenuPopover as ReachMenuPopover, useMenuButtonContext as useDropdownContext } from '@reach/menu-button';
import { useTransition, animated } from 'react-spring';
import Box from '../Box';
var AnimatedPopover = animated(ReachMenuPopover);
export var DropdownMenu = /*#__PURE__*/React.forwardRef(function DropdownMenu(_ref, ref) {
  var _ref$alignment = _ref.alignment,
      alignment = _ref$alignment === void 0 ? 'right' : _ref$alignment,
      transform = _ref.transform,
      _ref$minWidth = _ref.minWidth,
      minWidth = _ref$minWidth === void 0 ? '75px' : _ref$minWidth,
      children = _ref.children;
  var position = useDropdownAlignment({
    alignment: alignment
  });

  var _useDropdownContext = useDropdownContext(),
      isExpanded = _useDropdownContext.isExpanded;

  var transitions = useTransition(isExpanded, null, {
    from: {
      transform: 'translate3d(0, -10px, 0)',
      opacity: 0,
      pointerEvents: 'none'
    },
    enter: {
      transform: 'translate3d(0, 0, 0)',
      opacity: 1,
      pointerEvents: 'auto'
    },
    leave: {
      transform: 'translate3d(0, -10px, 0)',
      opacity: 0,
      pointerEvents: 'none'
    },
    config: {
      duration: 250
    }
  });
  return /*#__PURE__*/React.createElement(React.Fragment, null, transitions.map(function (_ref2) {
    var item = _ref2.item,
        key = _ref2.key,
        styles = _ref2.props;
    return item && /*#__PURE__*/React.createElement(AnimatedPopover, {
      key: key,
      style: styles,
      position: position,
      ref: ref,
      hidden: false,
      as: 'div'
    }, /*#__PURE__*/React.createElement(Box, {
      as: ReachMenuItems,
      bg: "navyblue-300",
      borderRadius: "medium",
      zIndex: 99,
      mt: 2,
      outline: "none",
      overflow: "hidden",
      boxShadow: "dark200",
      transform: transform,
      minWidth: minWidth
    }, children));
  }));
});
export default DropdownMenu;