@grafana/ui/dist/cjs/components/Tabs/Tab.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 mixins = require('../../themes/mixins.cjs');
var Button = require('../Button/Button.cjs');
var Icon = require('../Icon/Icon.cjs');
var Tooltip = require('../Tooltip/Tooltip.cjs');
var Counter = require('./Counter.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 Tab = React__namespace.forwardRef(
  ({
    label,
    active,
    icon,
    onChangeTab,
    counter,
    suffix: Suffix,
    className,
    href,
    truncate,
    tooltip,
    disabled,
    "data-testid": testId,
    ...otherProps
  }, ref) => {
    const tabsStyles = ThemeContext.useStyles2(getStyles);
    const clearStyles = ThemeContext.useStyles2(Button.clearButtonStyles);
    const content = () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
      icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, "data-testid": `tab-icon-${icon}` }),
      label,
      typeof counter === "number" && /* @__PURE__ */ jsxRuntime.jsx(Counter.Counter, { value: counter }),
      Suffix && /* @__PURE__ */ jsxRuntime.jsx(Suffix, { className: tabsStyles.suffix })
    ] });
    const linkClass = css.cx(
      clearStyles,
      tabsStyles.link,
      active ? tabsStyles.activeStyle : tabsStyles.notActive,
      truncate && tabsStyles.linkTruncate,
      disabled && tabsStyles.disabled
    );
    const commonProps = {
      className: linkClass,
      "data-testid": testId != null ? testId : e2eSelectors.selectors.components.Tab.title(label),
      ...otherProps,
      onClick: disabled ? void 0 : onChangeTab,
      role: "tab",
      "aria-selected": active,
      "aria-disabled": disabled,
      tabIndex: disabled ? -1 : void 0,
      title: !!tooltip ? void 0 : otherProps.title
      // If tooltip is provided, don't set the title on the link or button, it looks weird
    };
    let tab = null;
    if (href) {
      tab = /* @__PURE__ */ jsxRuntime.jsx("div", { className: css.cx(tabsStyles.item, truncate && tabsStyles.itemTruncate, className), children: /* @__PURE__ */ jsxRuntime.jsx(
        "a",
        {
          ...commonProps,
          href: disabled ? void 0 : href,
          ref,
          children: content()
        }
      ) });
    } else {
      tab = /* @__PURE__ */ jsxRuntime.jsx("div", { className: css.cx(tabsStyles.item, truncate && tabsStyles.itemTruncate, className), children: /* @__PURE__ */ jsxRuntime.jsx(
        "button",
        {
          ...commonProps,
          type: "button",
          ref,
          children: content()
        }
      ) });
    }
    if (tooltip) {
      return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltip, children: tab });
    }
    return tab;
  }
);
Tab.displayName = "Tab";
const getStyles = (theme) => {
  return {
    item: css.css({
      listStyle: "none",
      position: "relative",
      display: "flex",
      whiteSpace: "nowrap",
      padding: theme.spacing(0, 0.5)
    }),
    itemTruncate: css.css({
      maxWidth: theme.spacing(40)
    }),
    link: css.css({
      color: theme.colors.text.secondary,
      padding: theme.spacing(1, 1.5, 1),
      borderRadius: theme.shape.radius.default,
      display: "block",
      height: "100%",
      svg: {
        marginRight: theme.spacing(1)
      },
      "&:focus-visible": mixins.getFocusStyles(theme),
      "&::before": {
        display: "block",
        content: '" "',
        position: "absolute",
        left: 0,
        right: 0,
        height: "2px",
        borderRadius: theme.shape.radius.default,
        bottom: 0
      }
    }),
    linkTruncate: css.css({
      textOverflow: "ellipsis",
      whiteSpace: "nowrap",
      wordBreak: "break-word",
      overflow: "hidden"
    }),
    notActive: css.css({
      "a:hover, &:hover, &:focus": {
        color: theme.colors.text.primary,
        "&::before": {
          backgroundColor: theme.colors.action.hover
        }
      }
    }),
    activeStyle: css.css({
      label: "activeTabStyle",
      color: theme.colors.text.primary,
      overflow: "hidden",
      "&::before": {
        backgroundImage: theme.colors.gradients.brandHorizontal
      }
    }),
    suffix: css.css({
      marginLeft: theme.spacing(1)
    }),
    disabled: css.css({
      color: theme.colors.text.disabled,
      cursor: "not-allowed",
      "&:hover, &:focus": {
        color: theme.colors.text.disabled,
        "&::before": {
          backgroundColor: "transparent"
        }
      }
    })
  };
};

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