@grafana/ui/dist/cjs/components/DataLinks/DataLinksContextMenu.cjs

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var e2eSelectors = require('@grafana/e2e-selectors');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var dataLinks = require('../../utils/dataLinks.cjs');
var WithContextMenu = require('../ContextMenu/WithContextMenu.cjs');
var MenuGroup = require('../Menu/MenuGroup.cjs');
var MenuItem = require('../Menu/MenuItem.cjs');

"use strict";
const DataLinksContextMenu = ({ children, links, style }) => {
  const styles = ThemeContext.useStyles2(getStyles);
  const itemsGroup = [
    { items: dataLinks.linkModelToContextMenuItems(links), label: Boolean(links().length) ? "Data links" : "" }
  ];
  const linksCounter = itemsGroup[0].items.length;
  const renderMenuGroupItems = () => {
    return itemsGroup.map((group, groupIdx) => /* @__PURE__ */ jsxRuntime.jsx(MenuGroup.MenuGroup, { label: group.label, children: (group.items || []).map((item, itemIdx) => /* @__PURE__ */ jsxRuntime.jsx(
      MenuItem.MenuItem,
      {
        url: item.url,
        label: item.label,
        target: item.target,
        icon: item.icon,
        active: item.active,
        onClick: item.onClick,
        className: styles.itemWrapper
      },
      `${group.label}-${groupIdx}-${itemIdx}}`
    )) }, `${group.label}${groupIdx}`));
  };
  const targetClassName = styles.menuTarget;
  if (linksCounter > 1) {
    return /* @__PURE__ */ jsxRuntime.jsx(WithContextMenu.WithContextMenu, { renderMenuItems: renderMenuGroupItems, children: ({ openMenu }) => {
      const triggerProps = {
        role: "button",
        tabIndex: 0,
        "aria-haspopup": "menu",
        onClick: (e) => openMenu(e),
        onKeyDown: (e) => {
          if (e.key === "Enter" || e.key === " ") {
            e.preventDefault();
            openMenu(e.currentTarget);
          }
        }
      };
      return children({ openMenu, targetClassName, triggerProps });
    } });
  } else if (linksCounter === 1) {
    const linkModel = links()[0];
    return /* @__PURE__ */ jsxRuntime.jsx(
      "a",
      {
        href: linkModel.href,
        onClick: linkModel.onClick,
        target: linkModel.target,
        title: linkModel.title,
        style: { ...style, overflow: "hidden", display: "flex" },
        className: styles.singleLink,
        "data-testid": e2eSelectors.selectors.components.DataLinksContextMenu.singleLink,
        children: children({})
      }
    );
  }
  return children({});
};
const getStyles = (theme) => ({
  itemWrapper: css.css({
    fontSize: 12
  }),
  // The single-link path used to ship only inline styles; the `:focus-visible`
  // ring is the one piece of polish that was missing and the reason panels
  // were re-implementing this branch themselves. Layout shorthands stay
  // inline (see component) so this class is purely visual.
  singleLink: css.css({
    color: "inherit",
    textDecoration: "none",
    borderRadius: theme.shape.radius.default,
    "&:focus-visible": {
      outline: `2px solid ${theme.colors.primary.main}`,
      outlineOffset: "2px"
    }
  }),
  menuTarget: css.css({
    cursor: "context-menu",
    borderRadius: theme.shape.radius.default,
    "&:focus-visible": {
      outline: `2px solid ${theme.colors.primary.main}`,
      outlineOffset: "2px"
    }
  })
});

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