@grafana/ui/dist/cjs/components/InlineToast/InlineToast.cjs.map

Grafana Components Library

{"version":3,"file":"InlineToast.cjs","sources":["../../../../src/components/InlineToast/InlineToast.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { autoUpdate, offset, type Side, useFloating, useTransitionStyles } from '@floating-ui/react';\nimport { useLayoutEffect } from 'react';\nimport * as React from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2, useTheme2 } from '../../themes/ThemeContext';\nimport { type IconName } from '../../types/icon';\nimport { getPositioningMiddleware } from '../../utils/floating';\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\n/**\n * Used to indicate temporal status near fields/components, such as a *Saved* indicator next to a field, or a little *Copied!* indicator above a button.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-inlinetoast--docs\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 = [offset(8), ...getPositioningMiddleware(placement)];\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 role=\"alert\" style={{ display: 'inline-block', ...floatingStyles }} ref={refs.setFloating}>\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":["useStyles2","useTheme2","offset","getPositioningMiddleware","useFloating","autoUpdate","useLayoutEffect","useTransitionStyles","jsx","Portal","jsxs","cx","Icon","css"],"mappings":"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"}