@grafana/ui/dist/cjs/components/Table/DataLinksActionsTooltip.cjs

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var react = require('@floating-ui/react');
var React = require('react');
var e2eSelectors = require('@grafana/e2e-selectors');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var floating = require('../../utils/floating.cjs');
var Portal = require('../Portal/Portal.cjs');
var VizTooltipFooter = require('../VizTooltip/VizTooltipFooter.cjs');
var VizTooltipWrapper = require('../VizTooltip/VizTooltipWrapper.cjs');

"use strict";
const DataLinksActionsTooltip = ({ links, actions, value, coords, onTooltipClose }) => {
  const theme = ThemeContext.useTheme2();
  const styles = ThemeContext.useStyles2(getStyles);
  const placement = "right-start";
  const middleware = floating.getPositioningMiddleware(placement);
  const virtual = React.useMemo(() => {
    const { clientX, clientY } = coords;
    return {
      getBoundingClientRect() {
        return {
          width: 0,
          height: 0,
          x: clientX,
          y: clientY,
          top: clientY,
          left: clientX,
          right: clientX,
          bottom: clientY
        };
      }
    };
  }, [coords]);
  const refCallback = (el) => {
    refs.setFloating(el);
    refs.setReference(virtual);
  };
  const { context, refs, floatingStyles } = react.useFloating({
    open: true,
    placement,
    onOpenChange: onTooltipClose,
    middleware
    // whileElementsMounted: autoUpdate,
  });
  const dismiss = react.useDismiss(context);
  const { getFloatingProps, getReferenceProps } = react.useInteractions([dismiss]);
  if (links.length === 0 && !Boolean(actions == null ? void 0 : actions.length)) {
    return null;
  }
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
    value,
    /* @__PURE__ */ jsxRuntime.jsx(Portal.Portal, { zIndex: theme.zIndex.tooltip, children: /* @__PURE__ */ jsxRuntime.jsx(
      "div",
      {
        ref: refCallback,
        ...getReferenceProps(),
        ...getFloatingProps(),
        style: floatingStyles,
        className: styles.tooltipWrapper,
        "data-testid": e2eSelectors.selectors.components.DataLinksActionsTooltip.tooltipWrapper,
        children: /* @__PURE__ */ jsxRuntime.jsx(VizTooltipWrapper.VizTooltipWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(VizTooltipFooter.VizTooltipFooter, { dataLinks: links, actions }) })
      }
    ) })
  ] });
};
const renderSingleLink = (link, children, className) => {
  return /* @__PURE__ */ jsxRuntime.jsx(
    "a",
    {
      href: link.href,
      onClick: link.onClick,
      target: link.target,
      title: link.title,
      "data-testid": e2eSelectors.selectors.components.DataLinksContextMenu.singleLink,
      className,
      children
    }
  );
};
const getStyles = (theme) => {
  return {
    tooltipWrapper: css.css({
      whiteSpace: "pre",
      borderRadius: theme.shape.radius.default,
      background: theme.colors.background.primary,
      border: `1px solid ${theme.colors.border.weak}`,
      boxShadow: theme.shadows.z3,
      maxHeight: `calc(100vh - ${theme.spacing(4)})`,
      overflowX: "hidden",
      userSelect: "text",
      fontSize: theme.typography.bodySmall.fontSize
    })
  };
};

exports.DataLinksActionsTooltip = DataLinksActionsTooltip;
exports.renderSingleLink = renderSingleLink;
//# sourceMappingURL=DataLinksActionsTooltip.cjs.map