@grafana/ui/dist/esm/components/Sidebar/SidebarButton.mjs

Grafana Components Library

import { jsx, jsxs } from 'react/jsx-runtime';
import { cx, css } from '@emotion/css';
import React__default from 'react';
import { isIconName } from '@grafana/data';
import { useStyles2 } from '../../themes/ThemeContext.mjs';
import { getMouseFocusStyles, getFocusStyles } from '../../themes/mixins.mjs';
import { Icon } from '../Icon/Icon.mjs';
import { Tooltip } from '../Tooltip/Tooltip.mjs';
import { useSidebarContext } from './useSidebar.mjs';

"use strict";
const SidebarButton = React__default.forwardRef(
  ({ icon, active, onClick, title, tooltip, variant, ...restProps }, ref) => {
    const styles = useStyles2(getStyles);
    const sidebarContext = useSidebarContext();
    if (!sidebarContext) {
      throw new Error("Sidebar.Button must be used within a Sidebar component");
    }
    const buttonClass = cx(
      styles.button,
      sidebarContext.compact && styles.compact,
      sidebarContext.position === "left" && styles.leftButton
    );
    return /* @__PURE__ */ jsx(Tooltip, { ref, content: tooltip != null ? tooltip : title, placement: sidebarContext.position === "left" ? "right" : "left", children: /* @__PURE__ */ jsxs(
      "button",
      {
        className: buttonClass,
        "aria-label": title,
        "aria-expanded": active,
        type: "button",
        onClick,
        ...restProps,
        children: [
          /* @__PURE__ */ jsx("div", { className: cx(styles.iconWrapper, variant, active && styles.iconActive), children: renderIcon(icon) }),
          !sidebarContext.compact && /* @__PURE__ */ jsx("div", { className: cx(styles.title, active && styles.titleActive), children: title })
        ]
      }
    ) });
  }
);
SidebarButton.displayName = "SidebarButton";
function renderIcon(icon) {
  if (!icon) {
    return null;
  }
  if (isIconName(icon)) {
    return /* @__PURE__ */ jsx(Icon, { name: icon, size: "lg" });
  }
  return icon;
}
const getStyles = (theme) => {
  return {
    button: 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": {
        ...getFocusStyles(theme),
        zIndex: 1
      },
      "&:focus:not(:focus-visible)": getMouseFocusStyles(theme),
      "&[disabled], &:disabled": {
        cursor: "not-allowed",
        opacity: theme.colors.action.disabledOpacity
      }
    }),
    compact: css({
      padding: theme.spacing(0, 1),
      width: theme.spacing(5)
    }),
    iconWrapper: 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({
      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({
      fontSize: theme.typography.bodySmall.fontSize,
      color: theme.colors.text.secondary,
      textOverflow: "ellipsis",
      overflow: "hidden",
      textAlign: "center",
      whiteSpace: "nowrap"
    }),
    titleActive: css({
      color: theme.colors.text.primary
    }),
    leftButton: 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
    })
  };
}

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