'use strict';

var clsx = require('clsx');
var React = require('react');
var reactPopper = require('react-popper');
require('../common/theme.js');
require('../common/direction.js');
require('../common/propsValues/control.js');
require('../common/propsValues/breakpoint.js');
require('../common/propsValues/size.js');
require('../common/propsValues/typography.js');
require('../common/propsValues/width.js');
require('../common/propsValues/type.js');
require('../common/propsValues/dateMode.js');
require('../common/propsValues/monthFormat.js');
var position = require('../common/propsValues/position.js');
require('../common/propsValues/layouts.js');
require('../common/propsValues/status.js');
require('../common/propsValues/sentiment.js');
require('../common/propsValues/profileType.js');
require('../common/propsValues/variant.js');
require('../common/propsValues/scroll.js');
require('../common/propsValues/markdownNodeType.js');
require('../common/fileType.js');
require('@transferwise/icons');
require('react-intl');
require('../common/closeButton/CloseButton.messages.js');
var jsxRuntime = require('react/jsx-runtime');

/* eslint-disable @typescript-eslint/ban-ts-comment */
const Tooltip = ({
  position: position$1 = position.Position.TOP,
  children = undefined,
  label,
  id,
  className
}) => {
  const [open, setOpen] = React.useState(false);
  const anchorReference = React.useRef(null);
  const [arrowElement, setArrowElement] = React.useState(null);
  const [popperElement, setPopperElement] = React.useState(null);
  const fallbackId = React.useId();
  const tooltipId = id ?? fallbackId;
  const modifiers = [];
  modifiers.push({
    name: 'arrow',
    options: {
      element: arrowElement,
      options: {
        padding: 8 // 8px from the edges of the popper
      }
    }
  });
  // This lets you displace a popper element from its reference element.
  modifiers.push({
    name: 'offset',
    options: {
      offset: [0, 16]
    }
  });
  modifiers.push({
    name: 'flip',
    options: {
      fallbackPlacements: position.Position.TOP
    }
  });
  const {
    styles,
    attributes,
    forceUpdate
  } = reactPopper.usePopper(anchorReference.current, popperElement, {
    placement: position$1,
    modifiers
  });
  // If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),
  // it is most simple just to always position before opening
  React.useEffect(() => {
    if (open && forceUpdate) {
      forceUpdate();
    }
  }, [open]);
  return /*#__PURE__*/jsxRuntime.jsxs("span", {
    ref: anchorReference,
    className: "tw-tooltip-container",
    onMouseOver: () => setOpen(true),
    onFocus: () => setOpen(true),
    onMouseOut: () => setOpen(false),
    onBlur: () => setOpen(false),
    children: [children ? /*#__PURE__*/React.cloneElement(children, {
      'aria-describedby': `${tooltipId}-tooltip`
    }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
      // @ts-expect-error
      ref: setPopperElement,
      className: clsx.clsx('np-tooltip', 'np-panel', open ? `np-panel--open np-tooltip--open` : null, className)
      // eslint-disable-next-line react/forbid-dom-props
      ,
      style: {
        ...styles.popper
      },
      ...attributes.popper,
      "aria-hidden": !open,
      role: "tooltip",
      id: `${tooltipId}-tooltip`,
      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
        className: "np-panel__content tooltip-inner",
        children: [label, /*#__PURE__*/jsxRuntime.jsx("div", {
          // @ts-expect-error
          ref: setArrowElement,
          className: clsx.clsx('np-panel__arrow')
          // eslint-disable-next-line react/forbid-dom-props
          ,
          style: styles.arrow
        })]
      })
    })]
  });
};

module.exports = Tooltip;
//# sourceMappingURL=Tooltip.js.map
