@grafana/ui/dist/cjs/components/VizTooltip/VizTooltipContainer.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('react');
var reactUse = require('react-use');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var mixins = require('../../themes/mixins.cjs');
var utils = require('./utils.cjs');

"use strict";
const VizTooltipContainer = ({
  position: { x: positionX, y: positionY },
  offset: { x: offsetX, y: offsetY },
  children,
  allowPointerEvents = false,
  className,
  ...otherProps
}) => {
  const tooltipRef = React.useRef(null);
  const [tooltipMeasurement, setTooltipMeasurement] = React.useState({ width: 0, height: 0 });
  const { width, height } = reactUse.useWindowSize();
  const [placement, setPlacement] = React.useState({
    x: positionX + offsetX,
    y: positionY + offsetY
  });
  const resizeObserver = React.useMemo(
    () => (
      // TS has hard time playing games with @types/resize-observer-browser, hence the ignore
      // @ts-ignore
      new ResizeObserver((entries) => {
        for (let entry of entries) {
          const tW = Math.floor(entry.contentRect.width + 2 * 8);
          const tH = Math.floor(entry.contentRect.height + 2 * 8);
          if (tooltipMeasurement.width !== tW || tooltipMeasurement.height !== tH) {
            setTooltipMeasurement({
              width: Math.min(tW, width),
              height: Math.min(tH, height)
            });
          }
        }
      })
    ),
    [tooltipMeasurement, width, height]
  );
  React.useLayoutEffect(() => {
    if (tooltipRef.current) {
      resizeObserver.observe(tooltipRef.current);
    }
    return () => {
      resizeObserver.disconnect();
    };
  }, [resizeObserver]);
  React.useLayoutEffect(() => {
    if (tooltipRef && tooltipRef.current) {
      const { x, y } = utils.calculateTooltipPosition(
        positionX,
        positionY,
        tooltipMeasurement.width,
        tooltipMeasurement.height,
        offsetX,
        offsetY,
        width,
        height
      );
      setPlacement({ x, y });
    }
  }, [width, height, positionX, offsetX, positionY, offsetY, tooltipMeasurement]);
  const styles = ThemeContext.useStyles2(getStyles);
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      ref: tooltipRef,
      style: {
        position: "fixed",
        left: 0,
        // disabling pointer-events is to prevent the tooltip from flickering when moving left to right
        // see e.g. https://github.com/grafana/grafana/pull/33609
        pointerEvents: allowPointerEvents ? "auto" : "none",
        top: 0,
        transform: `translate(${placement.x}px, ${placement.y}px)`,
        transition: "transform ease-out 0.1s"
      },
      "aria-live": "polite",
      "aria-atomic": "true",
      ...otherProps,
      className: css.cx(styles.wrapper, className),
      children
    }
  );
};
VizTooltipContainer.displayName = "VizTooltipContainer";
const getStyles = (theme) => ({
  wrapper: css.css(mixins.getTooltipContainerStyles(theme))
});

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