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

A collection of UI components from Panther labs

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = exports.DropdownMenu = void 0;

var _react = _interopRequireDefault(require("react"));

var _useDropdownAlignment = _interopRequireDefault(require("./useDropdownAlignment"));

var _menuButton = require("@reach/menu-button");

var _reactSpring = require("react-spring");

var _Box = _interopRequireDefault(require("../Box"));

var AnimatedPopover = (0, _reactSpring.animated)(_menuButton.MenuPopover);

var DropdownMenu = /*#__PURE__*/_react.default.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 = (0, _useDropdownAlignment.default)({
    alignment: alignment
  });

  var _useDropdownContext = (0, _menuButton.useMenuButtonContext)(),
      isExpanded = _useDropdownContext.isExpanded;

  var transitions = (0, _reactSpring.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.default.createElement(_react.default.Fragment, null, transitions.map(function (_ref2) {
    var item = _ref2.item,
        key = _ref2.key,
        styles = _ref2.props;
    return item && /*#__PURE__*/_react.default.createElement(AnimatedPopover, {
      key: key,
      style: styles,
      position: position,
      ref: ref,
      hidden: false,
      as: 'div'
    }, /*#__PURE__*/_react.default.createElement(_Box.default, {
      as: _menuButton.MenuItems,
      bg: "navyblue-300",
      borderRadius: "medium",
      zIndex: 99,
      mt: 2,
      outline: "none",
      overflow: "hidden",
      boxShadow: "dark200",
      transform: transform,
      minWidth: minWidth
    }, children));
  }));
});

exports.DropdownMenu = DropdownMenu;
var _default = DropdownMenu;
exports.default = _default;