@grafana/ui/dist/cjs/components/Sidebar/SidebarButton.cjs.map

Grafana Components Library

{"version":3,"file":"SidebarButton.cjs","sources":["../../../../src/components/Sidebar/SidebarButton.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport React, { type ButtonHTMLAttributes } from 'react';\n\nimport { type GrafanaTheme2, type IconName, isIconName } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';\nimport { type ButtonVariant } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nimport { useSidebarContext } from './useSidebar';\n\nexport interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {\n  icon: IconName;\n  active?: boolean;\n  tooltip?: string;\n  title: string;\n  variant?: ButtonVariant;\n}\n\nexport const SidebarButton = React.forwardRef<HTMLButtonElement, Props>(\n  ({ icon, active, onClick, title, tooltip, variant, ...restProps }, ref) => {\n    const styles = useStyles2(getStyles);\n    const sidebarContext = useSidebarContext();\n\n    if (!sidebarContext) {\n      throw new Error('Sidebar.Button must be used within a Sidebar component');\n    }\n\n    const buttonClass = cx(\n      styles.button,\n      sidebarContext.compact && styles.compact,\n      sidebarContext.position === 'left' && styles.leftButton\n    );\n\n    return (\n      <Tooltip ref={ref} content={tooltip ?? title} placement={sidebarContext.position === 'left' ? 'right' : 'left'}>\n        <button\n          className={buttonClass}\n          aria-label={title}\n          aria-expanded={active}\n          type=\"button\"\n          onClick={onClick}\n          {...restProps}\n        >\n          <div className={cx(styles.iconWrapper, variant, active && styles.iconActive)}>{renderIcon(icon)}</div>\n          {!sidebarContext.compact && <div className={cx(styles.title, active && styles.titleActive)}>{title}</div>}\n        </button>\n      </Tooltip>\n    );\n  }\n);\n\nSidebarButton.displayName = 'SidebarButton';\n\nfunction renderIcon(icon: IconName | React.ReactNode) {\n  if (!icon) {\n    return null;\n  }\n\n  if (isIconName(icon)) {\n    return <Icon name={icon} size=\"lg\" />;\n  }\n\n  return icon;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    button: css({\n      label: 'toolbar-button',\n      position: 'relative',\n      display: 'flex',\n      flexDirection: 'column',\n      minHeight: theme.spacing(theme.components.height.sm),\n      padding: theme.spacing(0, 1),\n      width: '100%',\n      overflow: 'hidden',\n      lineHeight: `${theme.components.height.sm * theme.spacing.gridSize - 2}px`,\n      fontWeight: theme.typography.fontWeightMedium,\n      color: theme.colors.text.secondary,\n      background: 'transparent',\n      border: `none`,\n\n      '&:focus, &:focus-visible': {\n        ...getFocusStyles(theme),\n        zIndex: 1,\n      },\n\n      '&:focus:not(:focus-visible)': getMouseFocusStyles(theme),\n\n      '&[disabled], &:disabled': {\n        cursor: 'not-allowed',\n        opacity: theme.colors.action.disabledOpacity,\n      },\n    }),\n    compact: css({\n      padding: theme.spacing(0, 1),\n      width: theme.spacing(5),\n    }),\n    iconWrapper: css({\n      padding: 3,\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      alignSelf: 'center',\n      position: 'relative',\n      borderRadius: theme.shape.radius.sm,\n      '&:hover, &:focus-visible': {\n        background: theme.colors.action.hover,\n      },\n      '&.primary': {\n        background: theme.colors.primary.main,\n        color: theme.colors.getContrastText(theme.colors.primary.main),\n        '&:hover': {\n          backgroundColor: theme.colors.primary.shade,\n        },\n      },\n      [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n        ...getIconTransitionStyles(theme),\n      },\n    }),\n    iconActive: css({\n      color: theme.colors.text.primary,\n      background: theme.colors.secondary.main,\n      '&::before': {\n        display: 'block',\n        content: '\" \"',\n        position: 'absolute',\n        right: 0,\n        bottom: 0,\n        width: '100%',\n        height: '2px',\n        borderBottomLeftRadius: theme.shape.radius.sm,\n        borderBottomRightRadius: theme.shape.radius.sm,\n        backgroundImage: theme.colors.gradients.brandHorizontal,\n        [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n          ...getIconTransitionStyles(theme),\n        },\n      },\n      svg: {\n        [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n          ...getIconTransitionStyles(theme),\n        },\n      },\n    }),\n    title: css({\n      fontSize: theme.typography.bodySmall.fontSize,\n      color: theme.colors.text.secondary,\n      textOverflow: 'ellipsis',\n      overflow: 'hidden',\n      textAlign: 'center',\n      whiteSpace: 'nowrap',\n    }),\n    titleActive: css({\n      color: theme.colors.text.primary,\n    }),\n    leftButton: css({\n      '&::before': {\n        right: 'unset',\n        left: 0,\n        top: 0,\n        height: '100%',\n      },\n    }),\n  };\n};\n\nfunction getIconTransitionStyles(theme: GrafanaTheme2) {\n  return {\n    transition: theme.transitions.create(['background-color', 'color'], {\n      duration: theme.transitions.duration.short,\n    }),\n  };\n}\n"],"names":["React","useStyles2","useSidebarContext","cx","jsx","Tooltip","jsxs","isIconName","Icon","css","getFocusStyles","getMouseFocusStyles"],"mappings":"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"}