@grafana/ui/dist/cjs/components/PanelChrome/TitleItem.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('react');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var mixins = require('../../themes/mixins.cjs');
var Button = require('../Button/Button.cjs');

"use strict";
const TitleItem = React.forwardRef(
  ({ className, children, href, onClick, target, title, ...rest }, ref) => {
    const styles = ThemeContext.useStyles2(getStyles);
    if (href) {
      return /* @__PURE__ */ jsxRuntime.jsx(
        "a",
        {
          ref,
          href,
          onClick,
          target,
          title,
          className: css.cx(styles.linkItem, className),
          ...rest,
          children
        }
      );
    } else if (onClick) {
      return /* @__PURE__ */ jsxRuntime.jsx(
        Button.Button,
        {
          ref,
          className: css.cx(styles.buttonItem, className),
          variant: "secondary",
          fill: "text",
          onClick,
          children
        }
      );
    } else {
      return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: css.cx(styles.item, className), ...rest, children });
    }
  }
);
TitleItem.displayName = "TitleItem";
const getStyles = (theme) => {
  const item = css.css({
    color: `${theme.colors.text.secondary}`,
    label: "panel-header-item",
    border: "none",
    borderRadius: `${theme.shape.radius.default}`,
    padding: `${theme.spacing(0, 1)}`,
    height: `${theme.spacing(theme.components.height.md)}`,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    "&:focus, &:focus-visible": {
      ...mixins.getFocusStyles(theme),
      zIndex: 1
    },
    "&: focus:not(:focus-visible)": mixins.getMouseFocusStyles(theme),
    "&:hover ": {
      boxShadow: `${theme.shadows.z1}`,
      background: theme.colors.secondary.shade,
      color: `${theme.colors.text.primary}`
    }
  });
  return {
    item,
    linkItem: css.cx(item, css.css({ cursor: "pointer" })),
    buttonItem: css.cx(item, css.css({ cursor: "pointer" }))
  };
};

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