{"version":3,"file":"IconButton.mjs","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport * as React from 'react';\n\nimport { GrafanaTheme2, colorManipulator, deprecationWarning } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes';\nimport { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';\nimport { ComponentSize } from '../../types';\nimport { IconName, IconSize, IconType } from '../../types/icon';\nimport { IconRenderer } from '../Button';\nimport { getSvgSize } from '../Icon/utils';\nimport { TooltipPlacement, PopoverContent, Tooltip } from '../Tooltip';\n\nexport type IconButtonVariant = 'primary' | 'secondary' | 'destructive';\n\ntype LimitedIconSize = ComponentSize | 'xl';\n\ninterface BaseProps extends Omit, 'aria-label'> {\n /** Name of the icon **/\n name: IconName;\n /** Icon size - sizes xxl and xxxl are deprecated and when used being decreased to xl*/\n size?: IconSize;\n /** Type of the icon - mono or default */\n iconType?: IconType;\n /** Variant to change the color of the Icon */\n variant?: IconButtonVariant;\n}\n\nexport interface BasePropsWithTooltip extends BaseProps {\n /** Tooltip content to display on hover and as the aria-label */\n tooltip: PopoverContent;\n /** Position of the tooltip */\n tooltipPlacement?: TooltipPlacement;\n}\n\ninterface BasePropsWithAriaLabel extends BaseProps {\n /** @deprecated use aria-label instead*/\n ariaLabel?: string;\n /** Text available only for screen readers. No tooltip will be set in this case. */\n ['aria-label']: string;\n}\n\nexport type Props = BasePropsWithTooltip | BasePropsWithAriaLabel;\n\nexport const IconButton = React.forwardRef((props, ref) => {\n const { size = 'md', variant = 'secondary' } = props;\n let limitedIconSize: LimitedIconSize;\n\n // very large icons (xl to xxxl) are unified to size xl\n if (size === 'xxl' || size === 'xxxl') {\n deprecationWarning('IconButton', 'size=\"xxl\" and size=\"xxxl\"', 'size=\"xl\"');\n limitedIconSize = 'xl';\n } else {\n limitedIconSize = size;\n }\n\n const styles = useStyles2(getStyles, limitedIconSize, variant);\n\n let ariaLabel: string | undefined;\n let buttonRef: typeof ref | undefined;\n\n if ('tooltip' in props) {\n const { tooltip } = props;\n ariaLabel = typeof tooltip === 'string' ? tooltip : undefined;\n } else if ('ariaLabel' in props || 'aria-label' in props) {\n const { ariaLabel: deprecatedAriaLabel, ['aria-label']: ariaLabelProp } = props;\n ariaLabel = ariaLabelProp || deprecatedAriaLabel;\n buttonRef = ref;\n }\n\n // When using tooltip, ref is forwarded to Tooltip component instead for https://github.com/grafana/grafana/issues/65632\n if ('tooltip' in props) {\n const { name, iconType, className, tooltip, tooltipPlacement, ...restProps } = props;\n return (\n \n \n \n \n \n );\n } else {\n const { name, iconType, className, ...restProps } = props;\n return (\n \n \n \n );\n }\n});\n\nIconButton.displayName = 'IconButton';\n\nconst getStyles = (theme: GrafanaTheme2, size: IconSize, variant: IconButtonVariant) => {\n // overall size of the IconButton on hover\n // theme.spacing.gridSize originates from 2*4px for padding and letting the IconSize generally decide on the hoverSize\n const hoverSize = getSvgSize(size) + theme.spacing.gridSize;\n\n let iconColor = theme.colors.text.primary;\n\n if (variant === 'primary') {\n iconColor = theme.colors.primary.text;\n } else if (variant === 'destructive') {\n iconColor = theme.colors.error.text;\n }\n\n return {\n button: css({\n zIndex: 0,\n position: 'relative',\n margin: `0 ${theme.spacing.x0_5} 0 0`,\n boxShadow: 'none',\n border: 'none',\n display: 'inline-flex',\n background: 'transparent',\n justifyContent: 'center',\n alignItems: 'center',\n padding: 0,\n color: iconColor,\n\n '&[disabled], &:disabled': {\n cursor: 'not-allowed',\n color: theme.colors.action.disabledText,\n opacity: 0.65,\n },\n\n '&:before': {\n zIndex: -1,\n position: 'absolute',\n opacity: 0,\n width: `${hoverSize}px`,\n height: `${hoverSize}px`,\n borderRadius: theme.shape.radius.default,\n content: '\"\"',\n [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n transitionDuration: '0.2s',\n transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',\n transitionProperty: 'opacity',\n },\n },\n\n '&:focus, &:focus-visible': getFocusStyles(theme),\n\n '&:focus:not(:focus-visible)': getMouseFocusStyles(theme),\n\n '&:hover': {\n '&:before': {\n backgroundColor:\n variant === 'secondary' ? theme.colors.action.hover : colorManipulator.alpha(iconColor, 0.12),\n opacity: 1,\n },\n },\n }),\n icon: css({\n verticalAlign: 'baseline',\n }),\n };\n};\n"],"names":[],"mappings":"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"}