@ntragas/pouncejstest/dist/esm/components/Tooltip/Tooltip.js

A collection of UI components from Panther labs

import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import { useTooltip, TooltipPopup } from '@reach/tooltip';
import { useTransition, animated } from 'react-spring';
import { positionRight } from './utils';
import Box from '../Box';
var AnimatedTooltipPopup = animated(TooltipPopup);

/** A tooltip is a helper that shows some helping text when hovering or clicking something */
var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(_ref, ref) {
  var content = _ref.content,
      children = _ref.children;

  var _useTooltip = useTooltip(),
      trigger = _useTooltip[0],
      triggerRect = _useTooltip[1].triggerRect,
      isVisible = _useTooltip[2];

  var transitions = useTransition(isVisible, null, {
    from: {
      opacity: 0,
      transform: 'scale(0.95, 0.95)'
    },
    enter: {
      opacity: 1,
      transform: 'scale(1, 1)'
    },
    leave: {
      opacity: 0,
      transform: 'scale(0.95, 0.95)'
    },
    config: {
      duration: 150
    }
  });
  var childrenWithHandler = React.useMemo(function () {
    return /*#__PURE__*/React.cloneElement(children, trigger);
  }, [children, trigger]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, childrenWithHandler, transitions.map(function (_ref2) {
    var item = _ref2.item,
        key = _ref2.key,
        styles = _ref2.props;
    return item && /*#__PURE__*/React.createElement(AnimatedTooltipPopup, {
      triggerRect: triggerRect,
      isVisible: item,
      key: key,
      style: _extends({}, styles, {
        zIndex: 1,
        position: 'absolute'
      }),
      ref: ref,
      position: positionRight,
      as: 'div',
      label: /*#__PURE__*/React.createElement(Box, {
        borderRadius: "medium",
        bg: "navyblue-300",
        p: 4,
        m: 2,
        fontSize: "small",
        boxShadow: "dark250"
      }, content)
    });
  }));
});
export default /*#__PURE__*/React.memo(Tooltip);