pouncejs/dist/esm/components/utils/Menu/Menu.js

A collection of UI components from Panther labs

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React from 'react';
import { useTransition, animated } from 'react-spring';
import Box from '../../Box';
import { useComposedRefs } from '@reach/utils';
import { useAlignment } from '../../../utils/useAlignment';
var AnimatedBox = animated(Box);
var Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardedRef) {
  var children = _ref.children,
      isOpen = _ref.isOpen,
      triggerRef = _ref.triggerRef,
      rest = _objectWithoutPropertiesLoose(_ref, ["children", "isOpen", "triggerRef"]);

  var menuRef = React.useRef(null);
  var positionProperties = useAlignment(triggerRef, menuRef, 'bottom-right');
  var transitions = useTransition(isOpen, null, {
    from: {
      transform: 'scale(0.9,0.9)',
      opacity: 0
    },
    enter: {
      transform: 'scale(1, 1)',
      opacity: 1
    },
    leave: {
      transform: 'scale(0.9, 0.9)',
      opacity: 0
    },
    config: {
      duration: 150
    }
  }); // Make sure to include both our current ref and also the forwarded one (in case we it's needed by the parent component

  var composedRef = useComposedRefs(menuRef, forwardedRef);
  return /*#__PURE__*/React.createElement(Box, _extends({
    ref: composedRef,
    position: "absolute",
    zIndex: 10
  }, positionProperties), transitions.map(function (_ref2) {
    var _triggerRef$current;

    var item = _ref2.item,
        key = _ref2.key,
        styles = _ref2.props;
    return item ? /*#__PURE__*/React.createElement(AnimatedBox, _extends({
      key: key,
      style: styles,
      my: "6px",
      border: "1px solid",
      borderColor: "blue-400",
      borderRadius: "medium",
      backgroundColor: "navyblue-300",
      minWidth: (_triggerRef$current = triggerRef.current) == null ? void 0 : _triggerRef$current.offsetWidth,
      width: "max-content",
      overflowX: "hidden",
      overflowY: "auto"
    }, rest), children) : /*#__PURE__*/React.createElement(Box, _extends({
      key: key
    }, rest));
  }));
});
export default Menu;