{"version":3,"file":"ToolbarButton.cjs","sources":["../../../../src/components/ToolbarButton/ToolbarButton.tsx"],"sourcesContent":["import { cx, css } from '@emotion/css';\nimport { forwardRef, ButtonHTMLAttributes, ReactNode } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2, IconName, isIconName } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getFocusStyles, getMouseFocusStyles, mediaUp } from '../../themes/mixins';\nimport { IconSize } from '../../types/icon';\nimport { getActiveButtonStyles, getPropertiesForVariant } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\ninterface BaseProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Icon name */\n  icon?: IconName | React.ReactNode;\n  /** Icon size */\n  iconSize?: IconSize;\n  /** Tooltip */\n  tooltip?: string;\n  /** For image icons */\n  imgSrc?: string;\n  /** Alt text for imgSrc */\n  imgAlt?: string;\n  /** if true or false will show angle-down/up */\n  isOpen?: boolean;\n  /** Controls flex-grow: 1 */\n  fullWidth?: boolean;\n  /** reduces padding to xs */\n  narrow?: boolean;\n  /** variant */\n  variant?: ToolbarButtonVariant;\n  /** Hide any children and only show icon */\n  iconOnly?: boolean;\n  /** Show highlight dot */\n  isHighlighted?: boolean;\n}\n\ninterface BasePropsWithChildren extends BaseProps {\n  children: ReactNode;\n}\n\ninterface BasePropsWithTooltip extends BaseProps {\n  tooltip: string;\n}\n\ninterface BasePropsWithAriaLabel extends BaseProps {\n  ['aria-label']: string;\n}\n\nexport type ToolbarButtonProps = BasePropsWithChildren | BasePropsWithTooltip | BasePropsWithAriaLabel;\n\nexport type ToolbarButtonVariant = 'default' | 'primary' | 'destructive' | 'active' | 'canvas';\n\n/**\n * Multiple buttons that form a toolbar. Each button can contain an icon, image and text. There are three variants of the ToolbarButton: default, primary and destructive.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/navigation-toolbarbutton--docs\n */\nexport const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>((props, ref) => {\n  const styles = useStyles2(getStyles);\n  const {\n    tooltip,\n    icon,\n    iconSize,\n    className,\n    children,\n    imgSrc,\n    imgAlt,\n    fullWidth,\n    isOpen,\n    narrow,\n    variant = 'default',\n    iconOnly,\n    'aria-label': ariaLabel,\n    isHighlighted,\n    ...rest\n  } = props;\n\n  const buttonStyles = cx(\n    {\n      [styles.button]: true,\n      [styles.buttonFullWidth]: fullWidth,\n      [styles.narrow]: narrow,\n    },\n    styles[variant],\n    className\n  );\n\n  const contentStyles = cx({\n    [styles.content]: true,\n    [styles.contentWithIcon]: !!icon,\n    [styles.contentWithRightIcon]: isOpen !== undefined,\n  });\n\n  const body = (\n    <button\n      ref={ref}\n      className={buttonStyles}\n      aria-label={getButtonAriaLabel(ariaLabel, tooltip)}\n      aria-expanded={isOpen}\n      type=\"button\"\n      {...rest}\n    >\n      {renderIcon(icon, iconSize)}\n      {imgSrc && <img className={styles.img} src={imgSrc} alt={imgAlt ?? ''} />}\n      {children && !iconOnly && <div className={contentStyles}>{children}</div>}\n      {isOpen === false && <Icon name=\"angle-down\" />}\n      {isOpen === true && <Icon name=\"angle-up\" />}\n      {isHighlighted && <div className={styles.highlight} />}\n    </button>\n  );\n\n  return tooltip ? (\n    <Tooltip ref={ref} content={tooltip} placement=\"bottom\">\n      {body}\n    </Tooltip>\n  ) : (\n    body\n  );\n});\n\nToolbarButton.displayName = 'ToolbarButton';\n\nfunction getButtonAriaLabel(ariaLabel: string | undefined, tooltip: string | undefined) {\n  return ariaLabel ? ariaLabel : tooltip ? selectors.components.PageToolbar.item(tooltip) : undefined;\n}\n\nfunction renderIcon(icon: IconName | React.ReactNode, iconSize?: IconSize) {\n  if (!icon) {\n    return null;\n  }\n\n  if (isIconName(icon)) {\n    return <Icon name={icon} size={`${iconSize ? iconSize : 'lg'}`} />;\n  }\n\n  return icon;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  const primaryVariant = getPropertiesForVariant(theme, 'primary', 'solid');\n  const destructiveVariant = getPropertiesForVariant(theme, 'destructive', 'solid');\n\n  const defaultOld = css({\n    color: theme.colors.text.primary,\n    background: theme.colors.secondary.main,\n\n    '&:hover, &:focus': {\n      color: theme.colors.text.primary,\n      background: theme.colors.secondary.shade,\n      border: `1px solid ${theme.colors.border.medium}`,\n    },\n\n    '&:active': {\n      ...getActiveButtonStyles(theme.colors.secondary, 'solid'),\n    },\n  });\n\n  return {\n    button: css({\n      label: 'toolbar-button',\n      position: 'relative',\n      display: 'flex',\n      alignItems: 'center',\n      height: theme.spacing(theme.components.height.md),\n      padding: theme.spacing(0, 1),\n      borderRadius: theme.shape.radius.default,\n      lineHeight: `${theme.components.height.md * theme.spacing.gridSize - 2}px`,\n      fontWeight: theme.typography.fontWeightMedium,\n      border: `1px solid ${theme.colors.secondary.border}`,\n      whiteSpace: 'nowrap',\n      [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n        transition: theme.transitions.create(['background-color', 'border-color', 'color'], {\n          duration: theme.transitions.duration.short,\n        }),\n      },\n\n      [theme.breakpoints.down('md')]: {\n        width: 'auto !important',\n      },\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        background: theme.colors.action.disabledBackground,\n        boxShadow: 'none',\n\n        '&:hover': {\n          color: theme.colors.text.disabled,\n          background: theme.colors.action.disabledBackground,\n          boxShadow: 'none',\n        },\n      },\n    }),\n    default: css({\n      color: theme.colors.text.secondary,\n      background: 'transparent',\n      border: `1px solid transparent`,\n\n      '&:hover': {\n        color: theme.colors.text.primary,\n        background: theme.colors.action.hover,\n      },\n\n      '&:active': {\n        ...getActiveButtonStyles(theme.colors.secondary, 'solid'),\n      },\n    }),\n    canvas: defaultOld,\n    active: cx(\n      defaultOld,\n      css({\n        '&::before': {\n          display: 'block',\n          content: '\" \"',\n          position: 'absolute',\n          left: 0,\n          right: 0,\n          height: '2px',\n          bottom: 0,\n          borderRadius: theme.shape.radius.default,\n          backgroundImage: theme.colors.gradients.brandHorizontal,\n        },\n      })\n    ),\n    primary: css(primaryVariant),\n    destructive: css(destructiveVariant),\n    narrow: css({\n      padding: theme.spacing(0, 0.5),\n    }),\n    img: css({\n      width: '16px',\n      height: '16px',\n      marginRight: theme.spacing(1),\n    }),\n    buttonFullWidth: css({\n      flexGrow: 1,\n    }),\n    content: css({\n      display: 'flex',\n      flexGrow: 1,\n    }),\n    contentWithIcon: css({\n      display: 'none',\n      paddingLeft: theme.spacing(1),\n\n      [`@media ${mediaUp(theme.v1.breakpoints.md)}`]: {\n        display: 'block',\n      },\n    }),\n    contentWithRightIcon: css({\n      paddingRight: theme.spacing(0.5),\n    }),\n    highlight: css({\n      backgroundColor: theme.colors.success.main,\n      borderRadius: theme.shape.radius.circle,\n      width: '6px',\n      height: '6px',\n      position: 'absolute',\n      top: '-3px',\n      right: '-3px',\n      zIndex: 1,\n    }),\n  };\n};\n"],"names":["forwardRef","useStyles2","cx","jsxs","jsx","Icon","Tooltip","selectors","isIconName","getPropertiesForVariant","css","getActiveButtonStyles","getFocusStyles","getMouseFocusStyles","mediaUp"],"mappings":"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"}