'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var react = require('@floating-ui/react');
var clsx = require('clsx');
var React = require('react');
require('../common/theme.js');
require('../common/direction.js');
require('@transferwise/neptune-tokens');
require('../common/propsValues/control.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/formatting');
require('@transferwise/icons');
require('react-intl');
require('../common/closeButton/CloseButton.messages.js');
var jsxRuntime = require('react/jsx-runtime');

const Tooltip = ({
  position: position$1 = position.Position.TOP,
  children = undefined,
  label,
  id,
  className
}) => {
  const [open, setOpen] = React.useState(false);
  const arrowRef = React.useRef(null);
  const fallbackId = React.useId();
  const tooltipId = id ?? fallbackId;
  const {
    refs,
    floatingStyles,
    placement,
    middlewareData
  } = react.useFloating({
    placement: position$1,
    middleware: [react.offset(16), react.flip({
      fallbackPlacements: [position.Position.TOP]
    }),
    // eslint-disable-next-line react-hooks/refs -- arrowRef is passed to floating-ui middleware, legitimate API usage
    react.arrow({
      element: arrowRef,
      padding: 8
    })],
    whileElementsMounted: open ? react.autoUpdate : undefined,
    open
  });
  const arrowStyle = {
    ...(middlewareData.arrow?.x != null ? {
      left: middlewareData.arrow.x
    } : {}),
    ...(middlewareData.arrow?.y != null ? {
      top: middlewareData.arrow.y
    } : {})
  };
  return /*#__PURE__*/ /* eslint-disable react-hooks/refs -- setReference and setFloating are callback refs from floating-ui, safe to pass during render */jsxRuntime.jsxs("span", {
    ref: refs.setReference,
    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", {
      ref: refs.setFloating,
      className: clsx.clsx('np-tooltip', 'np-panel', open ? `np-panel--open np-tooltip--open` : null, className),
      style: floatingStyles,
      "data-popper-placement": placement,
      "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", {
          ref: arrowRef,
          className: clsx.clsx('np-panel__arrow'),
          style: arrowStyle
        })]
      })
    })]
  })
  /* eslint-enable react-hooks/refs */;
};

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