@grafana/ui/dist/cjs/components/Tooltip/Popover.cjs

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var react = require('@floating-ui/react');
var React = require('react');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var floating = require('../../utils/floating.cjs');
var tooltipUtils = require('../../utils/tooltipUtils.cjs');
var Portal = require('../Portal/Portal.cjs');

function _interopNamespaceCompat(e) {
  if (e && typeof e === 'object' && 'default' in e) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);

"use strict";
function Popover({
  content,
  show,
  placement,
  className,
  wrapperClassName,
  referenceElement,
  renderArrow,
  hidePopper,
  style: styleOverrides,
  ...rest
}) {
  const theme = ThemeContext.useTheme2();
  const arrowRef = React.useRef(null);
  const floatingUIPlacement = tooltipUtils.getPlacement(placement);
  const middleware = [react.offset(8), ...floating.getPositioningMiddleware(floatingUIPlacement)];
  if (renderArrow) {
    middleware.push(
      react.arrow({
        element: arrowRef
      })
    );
  }
  const { context, refs, floatingStyles } = react.useFloating({
    open: show,
    placement: floatingUIPlacement,
    middleware,
    whileElementsMounted: react.autoUpdate,
    strategy: "fixed"
  });
  React.useLayoutEffect(() => {
    refs.setReference(referenceElement);
  }, [referenceElement, refs]);
  const { styles: placementStyles } = react.useTransitionStyles(context, {
    initial: () => ({
      opacity: 0
    }),
    duration: theme.transitions.duration.enteringScreen
  });
  return show ? /* @__PURE__ */ jsxRuntime.jsx(Portal.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      ref: refs.setFloating,
      style: {
        ...floatingStyles,
        ...placementStyles,
        ...styleOverrides
      },
      className: wrapperClassName,
      ...rest,
      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
        renderArrow && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingArrow, { fill: theme.colors.border.weak, ref: arrowRef, context }),
        typeof content === "string" && content,
        React__namespace.isValidElement(content) && React__namespace.cloneElement(content),
        typeof content === "function" && content({ hidePopper })
      ] })
    }
  ) }) : void 0;
}

exports.Popover = Popover;
//# sourceMappingURL=Popover.cjs.map