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

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var react = require('@floating-ui/react');
var React = require('react');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var floating = require('../../utils/floating.cjs');
var Icon = require('../Icon/Icon.cjs');
var Portal = require('../Portal/Portal.cjs');

"use strict";
function InlineToast({ referenceElement, children, suffixIcon, placement }) {
  const styles = ThemeContext.useStyles2(getStyles);
  const theme = ThemeContext.useTheme2();
  const middleware = [react.offset(8), ...floating.getPositioningMiddleware(placement)];
  const { context, refs, floatingStyles } = react.useFloating({
    open: true,
    placement,
    middleware,
    whileElementsMounted: react.autoUpdate,
    strategy: "fixed"
  });
  React.useLayoutEffect(() => {
    refs.setReference(referenceElement);
  }, [referenceElement, refs]);
  const { styles: placementStyles } = react.useTransitionStyles(context, {
    initial: ({ side }) => {
      return {
        opacity: 0,
        transform: getInitialTransform(side, theme)
      };
    },
    duration: theme.transitions.duration.shortest
  });
  return /* @__PURE__ */ jsxRuntime.jsx(Portal.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { role: "alert", style: { display: "inline-block", ...floatingStyles }, ref: refs.setFloating, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: css.cx(styles.root), style: placementStyles, children: [
    children && /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
    suffixIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: suffixIcon })
  ] }) }) });
}
const getStyles = (theme) => {
  return {
    root: css.css({
      ...theme.typography.bodySmall,
      willChange: "transform",
      background: theme.components.tooltip.background,
      color: theme.components.tooltip.text,
      padding: theme.spacing(0.5, 1.5),
      // get's an extra .5 of vertical padding to account for the rounded corners
      borderRadius: theme.shape.radius.pill,
      display: "inline-flex",
      gap: theme.spacing(0.5),
      alignItems: "center"
    })
  };
};
const getInitialTransform = (placement, theme) => {
  const gap = 1;
  switch (placement) {
    case "top":
      return `translateY(${theme.spacing(gap)})`;
    case "bottom":
      return `translateY(-${theme.spacing(gap)})`;
    case "left":
      return `translateX(${theme.spacing(gap)})`;
    case "right":
      return `translateX(-${theme.spacing(gap)})`;
  }
};

exports.InlineToast = InlineToast;
//# sourceMappingURL=InlineToast.cjs.map