@grafana/ui/dist/esm/components/Tabs/Tab.mjs.map

Grafana Components Library

{"version":3,"file":"Tab.mjs","sources":["../../../../src/components/Tabs/Tab.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { HTMLProps } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2, NavModelItem } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getFocusStyles } from '../../themes/mixins';\nimport { IconName } from '../../types/icon';\nimport { clearButtonStyles } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nimport { Counter } from './Counter';\n\nexport interface TabProps extends HTMLProps<HTMLElement> {\n  label: string;\n  active?: boolean;\n  /** When provided, it is possible to use the tab as a hyperlink. Use in cases where the tabs update location. */\n  href?: string;\n  icon?: IconName;\n  onChangeTab?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** A number rendered next to the text. Usually used to display the number of items in a tab's view. */\n  counter?: number | null;\n  /** Extra content, displayed after the tab label and counter */\n  suffix?: NavModelItem['tabSuffix'];\n  truncate?: boolean;\n  tooltip?: string;\n  /** When true, the tab will be disabled and not clickable */\n  disabled?: boolean;\n}\n\n/**\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/navigation-tabs--docs\n */\nexport const Tab = React.forwardRef<HTMLElement, TabProps>(\n  (\n    {\n      label,\n      active,\n      icon,\n      onChangeTab,\n      counter,\n      suffix: Suffix,\n      className,\n      href,\n      truncate,\n      tooltip,\n      disabled,\n      ...otherProps\n    },\n    ref\n  ) => {\n    const tabsStyles = useStyles2(getStyles);\n    const clearStyles = useStyles2(clearButtonStyles);\n\n    const content = () => (\n      <>\n        {icon && <Icon name={icon} data-testid={`tab-icon-${icon}`} />}\n        {label}\n        {typeof counter === 'number' && <Counter value={counter} />}\n        {Suffix && <Suffix className={tabsStyles.suffix} />}\n      </>\n    );\n\n    const linkClass = cx(\n      clearStyles,\n      tabsStyles.link,\n      active ? tabsStyles.activeStyle : tabsStyles.notActive,\n      truncate && tabsStyles.linkTruncate,\n      disabled && tabsStyles.disabled\n    );\n\n    const commonProps = {\n      className: linkClass,\n      'data-testid': selectors.components.Tab.title(label),\n      ...otherProps,\n      onClick: disabled ? undefined : onChangeTab,\n      role: 'tab',\n      'aria-selected': active,\n      'aria-disabled': disabled,\n      tabIndex: disabled ? -1 : undefined,\n      title: !!tooltip ? undefined : otherProps.title, // If tooltip is provided, don't set the title on the link or button, it looks weird\n    };\n\n    let tab = null;\n\n    if (href) {\n      tab = (\n        <div className={cx(tabsStyles.item, truncate && tabsStyles.itemTruncate, className)}>\n          <a\n            {...commonProps}\n            href={disabled ? undefined : href}\n            // don't think we can avoid the type assertion here :(\n            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n            ref={ref as React.ForwardedRef<HTMLAnchorElement>}\n          >\n            {content()}\n          </a>\n        </div>\n      );\n    } else {\n      tab = (\n        <div className={cx(tabsStyles.item, truncate && tabsStyles.itemTruncate, className)}>\n          <button\n            {...commonProps}\n            type=\"button\"\n            // don't think we can avoid the type assertion here :(\n            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n            ref={ref as React.ForwardedRef<HTMLButtonElement>}\n          >\n            {content()}\n          </button>\n        </div>\n      );\n    }\n\n    if (tooltip) {\n      return <Tooltip content={tooltip}>{tab}</Tooltip>;\n    }\n\n    return tab;\n  }\n);\n\nTab.displayName = 'Tab';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    item: css({\n      listStyle: 'none',\n      position: 'relative',\n      display: 'flex',\n      whiteSpace: 'nowrap',\n      padding: theme.spacing(0, 0.5),\n    }),\n    itemTruncate: css({\n      maxWidth: theme.spacing(40),\n    }),\n    link: css({\n      color: theme.colors.text.secondary,\n      padding: theme.spacing(1, 1.5, 1),\n      borderRadius: theme.shape.radius.default,\n\n      display: 'block',\n      height: '100%',\n\n      svg: {\n        marginRight: theme.spacing(1),\n      },\n\n      '&:focus-visible': getFocusStyles(theme),\n\n      '&::before': {\n        display: 'block',\n        content: '\" \"',\n        position: 'absolute',\n        left: 0,\n        right: 0,\n        height: '2px',\n        borderRadius: theme.shape.radius.default,\n        bottom: 0,\n      },\n    }),\n    linkTruncate: css({\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n      wordBreak: 'break-word',\n      overflow: 'hidden',\n    }),\n    notActive: css({\n      'a:hover, &:hover, &:focus': {\n        color: theme.colors.text.primary,\n\n        '&::before': {\n          backgroundColor: theme.colors.action.hover,\n        },\n      },\n    }),\n    activeStyle: css({\n      label: 'activeTabStyle',\n      color: theme.colors.text.primary,\n      overflow: 'hidden',\n\n      '&::before': {\n        backgroundImage: theme.colors.gradients.brandHorizontal,\n      },\n    }),\n    suffix: css({\n      marginLeft: theme.spacing(1),\n    }),\n    disabled: css({\n      color: theme.colors.text.disabled,\n      cursor: 'not-allowed',\n\n      '&:hover, &:focus': {\n        color: theme.colors.text.disabled,\n\n        '&::before': {\n          backgroundColor: 'transparent',\n        },\n      },\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}