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

function _interopNamespaceCompat(e) {
  if (e && typeof e === 'object' && 'default' in e) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);

"use strict";
const IconButton = React__namespace.forwardRef((props, ref) => {
  const { size = "md", variant = "secondary" } = props;
  let limitedIconSize;
  if (size === "xxl" || size === "xxxl") {
    data.deprecationWarning("IconButton", 'size="xxl" and size="xxxl"', 'size="xl"');
    limitedIconSize = "xl";
  } else {
    limitedIconSize = size;
  }
  const styles = ThemeContext.useStyles2(getStyles, limitedIconSize, variant);
  let ariaLabel;
  let buttonRef;
  if ("tooltip" in props) {
    const { tooltip } = props;
    ariaLabel = typeof tooltip === "string" ? tooltip : void 0;
  } else if ("ariaLabel" in props || "aria-label" in props) {
    const { ariaLabel: deprecatedAriaLabel, ["aria-label"]: ariaLabelProp } = props;
    ariaLabel = ariaLabelProp || deprecatedAriaLabel;
    buttonRef = ref;
  }
  if ("tooltip" in props) {
    const { name, iconType, className, tooltip, tooltipPlacement, type, ...restProps } = props;
    return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { ref, content: tooltip, placement: tooltipPlacement, children: /* @__PURE__ */ jsxRuntime.jsx(
      "button",
      {
        ...restProps,
        ref: buttonRef,
        "aria-label": ariaLabel,
        className: css.cx(styles.button, className),
        type: type || "button",
        children: /* @__PURE__ */ jsxRuntime.jsx(Button.IconRenderer, { icon: name, size: limitedIconSize, className: styles.icon, iconType })
      }
    ) });
  } else {
    const { name, iconType, className, type, ...restProps } = props;
    return /* @__PURE__ */ jsxRuntime.jsx(
      "button",
      {
        ...restProps,
        ref: buttonRef,
        "aria-label": ariaLabel,
        className: css.cx(styles.button, className),
        type: type || "button",
        children: /* @__PURE__ */ jsxRuntime.jsx(Button.IconRenderer, { icon: name, size: limitedIconSize, className: styles.icon, iconType })
      }
    );
  }
});
IconButton.displayName = "IconButton";
const getStyles = (theme, size, variant) => {
  const hoverSize = utils.getSvgSize(size) + theme.spacing.gridSize;
  const activeButtonStyle = Button.getActiveButtonStyles(theme.colors.secondary, "text");
  let iconColor = theme.colors.primary.text;
  let hoverColor = theme.colors.primary.transparent;
  if (variant === "secondary") {
    iconColor = theme.colors.secondary.text;
    hoverColor = theme.colors.secondary.transparent;
  } else if (variant === "destructive") {
    iconColor = theme.colors.error.text;
    hoverColor = theme.colors.error.transparent;
  }
  return {
    button: css.css({
      zIndex: 0,
      position: "relative",
      margin: `0 ${theme.spacing.x0_5} 0 0`,
      boxShadow: "none",
      border: "none",
      display: "inline-flex",
      background: "transparent",
      justifyContent: "center",
      alignItems: "center",
      padding: 0,
      color: iconColor,
      borderRadius: theme.shape.radius.default,
      "&:active": {
        "&:before, &:hover:before": {
          backgroundColor: activeButtonStyle.background
        }
      },
      "&[disabled], &:disabled": {
        cursor: "not-allowed",
        color: theme.colors.action.disabledText,
        opacity: 0.65,
        "&:hover:before": {
          backgroundColor: "transparent"
        }
      },
      "&:before": {
        zIndex: -1,
        position: "absolute",
        opacity: 0,
        width: `${hoverSize}px`,
        height: `${hoverSize}px`,
        borderRadius: theme.shape.radius.default,
        content: '""',
        [theme.transitions.handleMotion("no-preference", "reduce")]: {
          transitionDuration: "0.2s",
          transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
          transitionProperty: "opacity"
        }
      },
      "&:focus, &:focus-visible": mixins.getFocusStyles(theme),
      "&:focus:not(:focus-visible)": mixins.getMouseFocusStyles(theme),
      "&:hover:before": {
        backgroundColor: hoverColor,
        opacity: 1
      }
    }),
    icon: css.css({
      verticalAlign: "baseline"
    })
  };
};

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