@grafana/ui/dist/esm/components/InlineToast/InlineToast.mjs.map

Grafana Components Library

{"version":3,"file":"InlineToast.mjs","sources":["../../../../src/components/InlineToast/InlineToast.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { autoUpdate, flip, offset, shift, Side, useFloating, useTransitionStyles } from '@floating-ui/react';\nimport { useLayoutEffect } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2, useTheme2 } from '../../themes/ThemeContext';\nimport { IconName } from '../../types/icon';\nimport { Icon } from '../Icon/Icon';\nimport { Portal } from '../Portal/Portal';\n\nexport interface InlineToastProps {\n  children: React.ReactNode;\n  suffixIcon?: IconName;\n  referenceElement: HTMLElement | null;\n  placement: Side;\n  /**\n   * @deprecated\n   * Placement to use if there is not enough space to show the full toast with the original placement\n   * This is now done automatically.\n   */\n  alternativePlacement?: Side;\n}\n\nexport function InlineToast({ referenceElement, children, suffixIcon, placement }: InlineToastProps) {\n  const styles = useStyles2(getStyles);\n  const theme = useTheme2();\n\n  // the order of middleware is important!\n  // `arrow` should almost always be at the end\n  // see https://floating-ui.com/docs/arrow#order\n  const middleware = [\n    offset(8),\n    flip({\n      fallbackAxisSideDirection: 'end',\n      // see https://floating-ui.com/docs/flip#combining-with-shift\n      crossAxis: false,\n      boundary: document.body,\n    }),\n    shift(),\n  ];\n\n  const { context, refs, floatingStyles } = useFloating({\n    open: true,\n    placement,\n    middleware,\n    whileElementsMounted: autoUpdate,\n    strategy: 'fixed',\n  });\n\n  useLayoutEffect(() => {\n    refs.setReference(referenceElement);\n  }, [referenceElement, refs]);\n\n  const { styles: placementStyles } = useTransitionStyles(context, {\n    initial: ({ side }) => {\n      return {\n        opacity: 0,\n        transform: getInitialTransform(side, theme),\n      };\n    },\n    duration: theme.transitions.duration.shortest,\n  });\n\n  return (\n    <Portal>\n      <div style={{ display: 'inline-block', ...floatingStyles }} ref={refs.setFloating} aria-live=\"polite\">\n        <span className={cx(styles.root)} style={placementStyles}>\n          {children && <span>{children}</span>}\n          {suffixIcon && <Icon name={suffixIcon} />}\n        </span>\n      </div>\n    </Portal>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    root: css({\n      ...theme.typography.bodySmall,\n      willChange: 'transform',\n      background: theme.components.tooltip.background,\n      color: theme.components.tooltip.text,\n      padding: theme.spacing(0.5, 1.5), // get's an extra .5 of vertical padding to account for the rounded corners\n      borderRadius: theme.shape.radius.pill,\n      display: 'inline-flex',\n      gap: theme.spacing(0.5),\n      alignItems: 'center',\n    }),\n  };\n};\n\nconst getInitialTransform = (placement: InlineToastProps['placement'], theme: GrafanaTheme2) => {\n  const gap = 1;\n\n  switch (placement) {\n    case 'top':\n      return `translateY(${theme.spacing(gap)})`;\n    case 'bottom':\n      return `translateY(-${theme.spacing(gap)})`;\n    case 'left':\n      return `translateX(${theme.spacing(gap)})`;\n    case 'right':\n      return `translateX(-${theme.spacing(gap)})`;\n  }\n};\n"],"names":[],"mappings":"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"}