@grafana/ui/dist/cjs/components/ToolbarButton/ToolbarButton.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 data = require('@grafana/data');
var e2eSelectors = require('@grafana/e2e-selectors');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var mixins = require('../../themes/mixins.cjs');
var Button = require('../Button/Button.cjs');
var Icon = require('../Icon/Icon.cjs');
var Tooltip = require('../Tooltip/Tooltip.cjs');

"use strict";
const ToolbarButton = React.forwardRef((props, ref) => {
  const styles = ThemeContext.useStyles2(getStyles);
  const {
    tooltip,
    icon,
    iconSize,
    className,
    children,
    imgSrc,
    imgAlt,
    fullWidth,
    isOpen,
    narrow,
    variant = "default",
    iconOnly,
    "aria-label": ariaLabel,
    isHighlighted,
    ...rest
  } = props;
  const buttonStyles = css.cx(
    {
      [styles.button]: true,
      [styles.buttonFullWidth]: fullWidth,
      [styles.narrow]: narrow
    },
    styles[variant],
    className
  );
  const contentStyles = css.cx({
    [styles.content]: true,
    [styles.contentWithIcon]: !!icon,
    [styles.contentWithRightIcon]: isOpen !== void 0
  });
  const body = /* @__PURE__ */ jsxRuntime.jsxs(
    "button",
    {
      ref,
      className: buttonStyles,
      "aria-label": getButtonAriaLabel(ariaLabel, tooltip),
      "aria-expanded": isOpen,
      type: "button",
      ...rest,
      children: [
        renderIcon(icon, iconSize),
        imgSrc && /* @__PURE__ */ jsxRuntime.jsx("img", { className: styles.img, src: imgSrc, alt: imgAlt != null ? imgAlt : "" }),
        children && !iconOnly && /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentStyles, children }),
        isOpen === false && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "angle-down" }),
        isOpen === true && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "angle-up" }),
        isHighlighted && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.highlight })
      ]
    }
  );
  return tooltip ? /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { ref, content: tooltip, placement: "bottom", children: body }) : body;
});
ToolbarButton.displayName = "ToolbarButton";
function getButtonAriaLabel(ariaLabel, tooltip) {
  return ariaLabel ? ariaLabel : tooltip ? e2eSelectors.selectors.components.PageToolbar.item(tooltip) : void 0;
}
function renderIcon(icon, iconSize) {
  if (!icon) {
    return null;
  }
  if (data.isIconName(icon)) {
    return /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size: `${iconSize ? iconSize : "lg"}` });
  }
  return icon;
}
const getStyles = (theme) => {
  const primaryVariant = Button.getPropertiesForVariant(theme, "primary", "solid");
  const destructiveVariant = Button.getPropertiesForVariant(theme, "destructive", "solid");
  const defaultOld = css.css({
    color: theme.colors.text.primary,
    background: theme.colors.secondary.main,
    "&:hover, &:focus": {
      color: theme.colors.text.primary,
      background: theme.colors.secondary.shade,
      border: `1px solid ${theme.colors.border.medium}`
    },
    "&:active": {
      ...Button.getActiveButtonStyles(theme.colors.secondary, "solid")
    }
  });
  return {
    button: css.css({
      label: "toolbar-button",
      position: "relative",
      display: "flex",
      alignItems: "center",
      height: theme.spacing(theme.components.height.md),
      padding: theme.spacing(0, 1),
      borderRadius: theme.shape.radius.default,
      lineHeight: `${theme.components.height.md * theme.spacing.gridSize - 2}px`,
      fontWeight: theme.typography.fontWeightMedium,
      border: `1px solid ${theme.colors.secondary.border}`,
      whiteSpace: "nowrap",
      [theme.transitions.handleMotion("no-preference", "reduce")]: {
        transition: theme.transitions.create(["background-color", "border-color", "color"], {
          duration: theme.transitions.duration.short
        })
      },
      [theme.breakpoints.down("md")]: {
        width: "auto !important"
      },
      "&:focus, &:focus-visible": {
        ...mixins.getFocusStyles(theme),
        zIndex: 1
      },
      "&:focus:not(:focus-visible)": mixins.getMouseFocusStyles(theme),
      "&[disabled], &:disabled": {
        cursor: "not-allowed",
        opacity: theme.colors.action.disabledOpacity,
        background: theme.colors.action.disabledBackground,
        boxShadow: "none",
        "&:hover": {
          color: theme.colors.text.disabled,
          background: theme.colors.action.disabledBackground,
          boxShadow: "none"
        }
      }
    }),
    default: css.css({
      color: theme.colors.text.secondary,
      background: "transparent",
      border: `1px solid transparent`,
      "&:hover": {
        color: theme.colors.text.primary,
        background: theme.colors.action.hover
      },
      "&:active": {
        ...Button.getActiveButtonStyles(theme.colors.secondary, "solid")
      }
    }),
    canvas: defaultOld,
    active: css.cx(
      defaultOld,
      css.css({
        "&::before": {
          display: "block",
          content: '" "',
          position: "absolute",
          left: 0,
          right: 0,
          height: "2px",
          bottom: 0,
          borderRadius: theme.shape.radius.default,
          backgroundImage: theme.colors.gradients.brandHorizontal
        }
      })
    ),
    primary: css.css(primaryVariant),
    destructive: css.css(destructiveVariant),
    narrow: css.css({
      padding: theme.spacing(0, 0.5)
    }),
    img: css.css({
      width: "16px",
      height: "16px",
      marginRight: theme.spacing(1)
    }),
    buttonFullWidth: css.css({
      flexGrow: 1
    }),
    content: css.css({
      display: "flex",
      flexGrow: 1
    }),
    contentWithIcon: css.css({
      display: "none",
      paddingLeft: theme.spacing(1),
      [`@media ${mixins.mediaUp(theme.v1.breakpoints.md)}`]: {
        display: "block"
      }
    }),
    contentWithRightIcon: css.css({
      paddingRight: theme.spacing(0.5)
    }),
    highlight: css.css({
      backgroundColor: theme.colors.success.main,
      borderRadius: theme.shape.radius.circle,
      width: "6px",
      height: "6px",
      position: "absolute",
      top: "-3px",
      right: "-3px",
      zIndex: 1
    })
  };
};

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