@grafana/ui/dist/cjs/components/Tabs/VerticalTab.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 e2eSelectors = require('@grafana/e2e-selectors');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Icon = require('../Icon/Icon.cjs');
var Counter = require('./Counter.cjs');

"use strict";
const VerticalTab = React.forwardRef(
  ({ label, active, icon, counter, className, suffix: Suffix, onChangeTab, href, ...otherProps }, ref) => {
    const tabsStyles = ThemeContext.useStyles2(getTabStyles);
    const content = () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
      icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon }),
      label,
      typeof counter === "number" && /* @__PURE__ */ jsxRuntime.jsx(Counter.Counter, { value: counter }),
      Suffix && /* @__PURE__ */ jsxRuntime.jsx(Suffix, { className: tabsStyles.suffix })
    ] });
    const linkClass = css.cx(tabsStyles.link, active && tabsStyles.activeStyle);
    return /* @__PURE__ */ jsxRuntime.jsx(
      "a",
      {
        href,
        className: linkClass,
        ...otherProps,
        onClick: onChangeTab,
        "aria-label": otherProps["aria-label"] || e2eSelectors.selectors.components.Tab.title(label),
        role: "tab",
        "aria-selected": active,
        ref,
        children: content()
      }
    );
  }
);
VerticalTab.displayName = "Tab";
const getTabStyles = (theme) => {
  return {
    link: css.css({
      padding: "6px 12px",
      display: "block",
      height: "100%",
      cursor: "pointer",
      position: "relative",
      color: theme.colors.text.primary,
      svg: {
        marginRight: theme.spacing(1)
      },
      "&:hover, &:focus": {
        textDecoration: "underline"
      }
    }),
    activeStyle: css.css({
      label: "activeTabStyle",
      color: theme.colors.text.maxContrast,
      overflow: "hidden",
      "&::before": {
        display: "block",
        content: '" "',
        position: "absolute",
        left: 0,
        width: "4px",
        bottom: "2px",
        top: "2px",
        borderRadius: theme.shape.radius.default,
        backgroundImage: "linear-gradient(0deg, #f05a28 30%, #fbca0a 99%)"
      }
    }),
    suffix: css.css({
      marginLeft: theme.spacing(1)
    })
  };
};

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