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

A collection of UI components from Panther labs

"use strict";

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

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

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

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

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

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

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

var _utils = require("@reach/utils");

var _useAlignment = require("../../../utils/useAlignment");

var AnimatedBox = (0, _reactSpring.animated)(_Box.default);

var Menu = /*#__PURE__*/_react.default.forwardRef(function Menu(_ref, forwardedRef) {
  var children = _ref.children,
      isOpen = _ref.isOpen,
      triggerRef = _ref.triggerRef,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["children", "isOpen", "triggerRef"]);

  var menuRef = _react.default.useRef(null);

  var positionProperties = (0, _useAlignment.useAlignment)(triggerRef, menuRef, 'bottom-right');
  var transitions = (0, _reactSpring.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 = (0, _utils.useComposedRefs)(menuRef, forwardedRef);
  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
    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.default.createElement(AnimatedBox, (0, _extends2.default)({
      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.default.createElement(_Box.default, (0, _extends2.default)({
      key: key
    }, rest));
  }));
});

var _default = Menu;
exports.default = _default;