@grafana/ui/dist/esm/components/DataLinks/DataLinksContextMenu.mjs

Grafana Components Library

import { jsx } from 'react/jsx-runtime';
import { css } from '@emotion/css';
import { selectors } from '@grafana/e2e-selectors';
import { useStyles2 } from '../../themes/ThemeContext.mjs';
import { linkModelToContextMenuItems } from '../../utils/dataLinks.mjs';
import { WithContextMenu } from '../ContextMenu/WithContextMenu.mjs';
import { MenuGroup } from '../Menu/MenuGroup.mjs';
import { MenuItem } from '../Menu/MenuItem.mjs';

"use strict";
const DataLinksContextMenu = ({ children, links, style }) => {
  const styles = useStyles2(getStyles);
  const itemsGroup = [
    { items: linkModelToContextMenuItems(links), label: Boolean(links().length) ? "Data links" : "" }
  ];
  const linksCounter = itemsGroup[0].items.length;
  const renderMenuGroupItems = () => {
    return itemsGroup.map((group, groupIdx) => /* @__PURE__ */ jsx(MenuGroup, { label: group.label, children: (group.items || []).map((item, itemIdx) => /* @__PURE__ */ jsx(
      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__ */ jsx(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__ */ 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": selectors.components.DataLinksContextMenu.singleLink,
        children: children({})
      }
    );
  }
  return children({});
};
const getStyles = (theme) => ({
  itemWrapper: 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({
    color: "inherit",
    textDecoration: "none",
    borderRadius: theme.shape.radius.default,
    "&:focus-visible": {
      outline: `2px solid ${theme.colors.primary.main}`,
      outlineOffset: "2px"
    }
  }),
  menuTarget: css({
    cursor: "context-menu",
    borderRadius: theme.shape.radius.default,
    "&:focus-visible": {
      outline: `2px solid ${theme.colors.primary.main}`,
      outlineOffset: "2px"
    }
  })
});

export { DataLinksContextMenu };
//# sourceMappingURL=DataLinksContextMenu.mjs.map