pouncejs/dist/esm/components/Popover/PopoverContent.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 ReachUIPopover from '@reach/popover';
import { useComposedRefs } from '@reach/utils';
import { animated, useTransition } from 'react-spring';
import { usePopoverContext } from './Popover';
import useOutsideClick from '../../utils/useOutsideClick';
import useEscapeKey from '../../utils/useEscapeKey';
import Box from '../Box';
import { useAlignmentFunction } from '../../utils/useAlignment';
var AnimatedPopover = animated(ReachUIPopover);
var PopoverContent = /*#__PURE__*/React.forwardRef(function PopoverContent(_ref, forwardedRef) {
  var _ref$alignment = _ref.alignment,
      alignment = _ref$alignment === void 0 ? 'bottom-left' : _ref$alignment,
      children = _ref.children,
      _ref$persistOnOutside = _ref.persistOnOutsideClicks,
      persistOnOutsideClicks = _ref$persistOnOutside === void 0 ? false : _ref$persistOnOutside,
      rest = _objectWithoutPropertiesLoose(_ref, ["alignment", "children", "persistOnOutsideClicks"]);

  var alignmentFunction = useAlignmentFunction(alignment);

  var _usePopoverContext = 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.useEffect(function () {
    window.requestAnimationFrame(function () {
      if (isOpen && popoverRef.current) {
        popoverRef.current.focus();
      }
    });
  }, [isOpen, popoverRef]); // Close popover on clicks outside

  useOutsideClick({
    refs: [popoverRef, triggerRef],
    callback: function callback() {
      return isOpen && close();
    },
    disabled: persistOnOutsideClicks || !isOpen
  }); // Close on ESC key presses

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

  var ref = useComposedRefs(popoverRef, forwardedRef);
  var transitions = 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.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,
      targetRef: triggerRef,
      position: alignmentFunction,
      role: "tooltip",
      id: popoverId,
      as: 'div'
    }, /*#__PURE__*/React.createElement(Box, _extends({
      ref: ref,
      tabIndex: 0,
      outline: "none"
    }, rest), children));
  }));
});
export default /*#__PURE__*/React.memo(PopoverContent);