@ntragas/pouncejstest/dist/cjs/components/Popover/PopoverContent.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 _popover = _interopRequireDefault(require("@reach/popover"));

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

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

var _Popover = require("./Popover");

var _usePopoverContentAlignment = _interopRequireDefault(require("./usePopoverContentAlignment"));

var _useOutsideClick = _interopRequireDefault(require("../../utils/useOutsideClick"));

var _useEscapeKey = _interopRequireDefault(require("../../utils/useEscapeKey"));

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

var AnimatedPopover = (0, _reactSpring.animated)(_popover.default);

var PopoverContent = /*#__PURE__*/_react.default.forwardRef(function PopoverContent(_ref, forwardedRef) {
  var _ref$alignment = _ref.alignment,
      alignment = _ref$alignment === void 0 ? 'bottom-left' : _ref$alignment,
      children = _ref.children,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["alignment", "children"]);
  var popoverAlignment = (0, _usePopoverContentAlignment.default)(alignment);

  var _usePopoverContext = (0, _Popover.usePopoverContext)(),
      popoverId = _usePopoverContext.popoverId,
      isOpen = _usePopoverContext.isOpen,
      triggerRef = _usePopoverContext.triggerRef,
      popoverRef = _usePopoverContext.popoverRef,
      close = _usePopoverContext.close; // When the popoover opens, it should immediately get focus


  _react.default.useEffect(function () {
    window.requestAnimationFrame(function () {
      if (isOpen && popoverRef.current) {
        popoverRef.current.focus();
      }
    });
  }, [isOpen, popoverRef]); // Close popover on clicks outside


  (0, _useOutsideClick.default)({
    refs: [popoverRef, triggerRef],
    callback: function callback() {
      return isOpen && close();
    },
    disabled: !isOpen
  }); // Close on ESC key presses

  (0, _useEscapeKey.default)({
    ref: popoverRef,
    callback: close,
    disabled: !isOpen
  }); // merge internal + passed prop together

  var ref = (0, _utils.useForkedRef)(popoverRef, forwardedRef);
  var transitions = (0, _reactSpring.useTransition)(isOpen, 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,
      targetRef: triggerRef,
      position: popoverAlignment,
      role: "tooltip",
      id: popoverId,
      as: 'div'
    }, /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
      ref: ref,
      tabIndex: 0,
      outline: "none"
    }, rest), children));
  }));
});

var _default = /*#__PURE__*/_react.default.memo(PopoverContent);

exports.default = _default;