@grafana/ui/dist/cjs/components/Sidebar/SidebarButton.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 Icon = require('../Icon/Icon.cjs');
var Tooltip = require('../Tooltip/Tooltip.cjs');
var useSidebar = require('./useSidebar.cjs');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefaultCompat(React);

"use strict";
const SidebarButton = React__default.default.forwardRef(
  ({ icon, active, onClick, title, tooltip, variant, ...restProps }, ref) => {
    const styles = ThemeContext.useStyles2(getStyles);
    const sidebarContext = useSidebar.useSidebarContext();
    if (!sidebarContext) {
      throw new Error("Sidebar.Button must be used within a Sidebar component");
    }
    const buttonClass = css.cx(
      styles.button,
      sidebarContext.compact && styles.compact,
      sidebarContext.position === "left" && styles.leftButton
    );
    return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { ref, content: tooltip != null ? tooltip : title, placement: sidebarContext.position === "left" ? "right" : "left", children: /* @__PURE__ */ jsxRuntime.jsxs(
      "button",
      {
        className: buttonClass,
        "aria-label": title,
        "aria-expanded": active,
        type: "button",
        onClick,
        ...restProps,
        children: [
          /* @__PURE__ */ jsxRuntime.jsx("div", { className: css.cx(styles.iconWrapper, variant, active && styles.iconActive), children: renderIcon(icon) }),
          !sidebarContext.compact && /* @__PURE__ */ jsxRuntime.jsx("div", { className: css.cx(styles.title, active && styles.titleActive), children: title })
        ]
      }
    ) });
  }
);
SidebarButton.displayName = "SidebarButton";
function renderIcon(icon) {
  if (!icon) {
    return null;
  }
  if (data.isIconName(icon)) {
    return /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size: "lg" });
  }
  return icon;
}
const getStyles = (theme) => {
  return {
    button: css.css({
      label: "toolbar-button",
      position: "relative",
      display: "flex",
      flexDirection: "column",
      minHeight: theme.spacing(theme.components.height.sm),
      padding: theme.spacing(0, 1),
      width: "100%",
      overflow: "hidden",
      lineHeight: `${theme.components.height.sm * theme.spacing.gridSize - 2}px`,
      fontWeight: theme.typography.fontWeightMedium,
      color: theme.colors.text.secondary,
      background: "transparent",
      border: `none`,
      "&: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
      }
    }),
    compact: css.css({
      padding: theme.spacing(0, 1),
      width: theme.spacing(5)
    }),
    iconWrapper: css.css({
      padding: 3,
      display: "inline-flex",
      alignItems: "center",
      justifyContent: "center",
      alignSelf: "center",
      position: "relative",
      borderRadius: theme.shape.radius.sm,
      "&:hover, &:focus-visible": {
        background: theme.colors.action.hover
      },
      "&.primary": {
        background: theme.colors.primary.main,
        color: theme.colors.getContrastText(theme.colors.primary.main),
        "&:hover": {
          backgroundColor: theme.colors.primary.shade
        }
      },
      [theme.transitions.handleMotion("no-preference", "reduce")]: {
        ...getIconTransitionStyles(theme)
      }
    }),
    iconActive: css.css({
      color: theme.colors.text.primary,
      background: theme.colors.secondary.main,
      "&::before": {
        display: "block",
        content: '" "',
        position: "absolute",
        right: 0,
        bottom: 0,
        width: "100%",
        height: "2px",
        borderBottomLeftRadius: theme.shape.radius.sm,
        borderBottomRightRadius: theme.shape.radius.sm,
        backgroundImage: theme.colors.gradients.brandHorizontal,
        [theme.transitions.handleMotion("no-preference", "reduce")]: {
          ...getIconTransitionStyles(theme)
        }
      },
      svg: {
        [theme.transitions.handleMotion("no-preference", "reduce")]: {
          ...getIconTransitionStyles(theme)
        }
      }
    }),
    title: css.css({
      fontSize: theme.typography.bodySmall.fontSize,
      color: theme.colors.text.secondary,
      textOverflow: "ellipsis",
      overflow: "hidden",
      textAlign: "center",
      whiteSpace: "nowrap"
    }),
    titleActive: css.css({
      color: theme.colors.text.primary
    }),
    leftButton: css.css({
      "&::before": {
        right: "unset",
        left: 0,
        top: 0,
        height: "100%"
      }
    })
  };
};
function getIconTransitionStyles(theme) {
  return {
    transition: theme.transitions.create(["background-color", "color"], {
      duration: theme.transitions.duration.short
    })
  };
}

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