@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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"}