@grafana/ui/dist/cjs/components/VizTooltip/VizTooltipContainer.cjs.map

Grafana Components Library

{"version":3,"file":"VizTooltipContainer.cjs","sources":["../../../../src/components/VizTooltip/VizTooltipContainer.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { useState, type HTMLAttributes, useMemo, useRef, useLayoutEffect } from 'react';\nimport * as React from 'react';\nimport { useWindowSize } from 'react-use';\n\nimport { type Dimensions2D, type GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getTooltipContainerStyles } from '../../themes/mixins';\n\nimport { calculateTooltipPosition } from './utils';\n\n/**\n * @alpha\n */\nexport interface VizTooltipContainerProps extends HTMLAttributes<HTMLDivElement> {\n  position: { x: number; y: number };\n  offset: { x: number; y: number };\n  children?: React.ReactNode;\n  allowPointerEvents?: boolean;\n}\n\n/**\n * @alpha\n */\nexport const VizTooltipContainer = ({\n  position: { x: positionX, y: positionY },\n  offset: { x: offsetX, y: offsetY },\n  children,\n  allowPointerEvents = false,\n  className,\n  ...otherProps\n}: VizTooltipContainerProps) => {\n  const tooltipRef = useRef<HTMLDivElement>(null);\n  const [tooltipMeasurement, setTooltipMeasurement] = useState<Dimensions2D>({ width: 0, height: 0 });\n  const { width, height } = useWindowSize();\n  const [placement, setPlacement] = useState({\n    x: positionX + offsetX,\n    y: positionY + offsetY,\n  });\n\n  const resizeObserver = useMemo(\n    () =>\n      // TS has hard time playing games with @types/resize-observer-browser, hence the ignore\n      // @ts-ignore\n      new ResizeObserver((entries) => {\n        for (let entry of entries) {\n          const tW = Math.floor(entry.contentRect.width + 2 * 8); //  adding padding until Safari supports borderBoxSize\n          const tH = Math.floor(entry.contentRect.height + 2 * 8);\n          if (tooltipMeasurement.width !== tW || tooltipMeasurement.height !== tH) {\n            setTooltipMeasurement({\n              width: Math.min(tW, width),\n              height: Math.min(tH, height),\n            });\n          }\n        }\n      }),\n    [tooltipMeasurement, width, height]\n  );\n\n  useLayoutEffect(() => {\n    if (tooltipRef.current) {\n      resizeObserver.observe(tooltipRef.current);\n    }\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [resizeObserver]);\n\n  // Make sure tooltip does not overflow window\n  useLayoutEffect(() => {\n    if (tooltipRef && tooltipRef.current) {\n      const { x, y } = calculateTooltipPosition(\n        positionX,\n        positionY,\n        tooltipMeasurement.width,\n        tooltipMeasurement.height,\n        offsetX,\n        offsetY,\n        width,\n        height\n      );\n\n      setPlacement({ x, y });\n    }\n  }, [width, height, positionX, offsetX, positionY, offsetY, tooltipMeasurement]);\n\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div\n      ref={tooltipRef}\n      style={{\n        position: 'fixed',\n        left: 0,\n        // disabling pointer-events is to prevent the tooltip from flickering when moving left to right\n        // see e.g. https://github.com/grafana/grafana/pull/33609\n        pointerEvents: allowPointerEvents ? 'auto' : 'none',\n        top: 0,\n        transform: `translate(${placement.x}px, ${placement.y}px)`,\n        transition: 'transform ease-out 0.1s',\n      }}\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n      {...otherProps}\n      className={cx(styles.wrapper, className)}\n    >\n      {children}\n    </div>\n  );\n};\n\nVizTooltipContainer.displayName = 'VizTooltipContainer';\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  wrapper: css(getTooltipContainerStyles(theme)),\n});\n"],"names":["useRef","useState","useWindowSize","useMemo","useLayoutEffect","calculateTooltipPosition","useStyles2","jsx","cx","css","getTooltipContainerStyles"],"mappings":"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"}