@grafana/ui
Version:
Grafana Components Library
1 lines • 4.59 kB
Source Map (JSON)
{"version":3,"file":"Popover.mjs","sources":["../../../../src/components/Tooltip/Popover.tsx"],"sourcesContent":["import {\n FloatingArrow,\n arrow,\n autoUpdate,\n flip,\n offset,\n shift,\n useFloating,\n useTransitionStyles,\n} from '@floating-ui/react';\nimport { useLayoutEffect, useRef } from 'react';\nimport * as React from 'react';\n\nimport { useTheme2 } from '../../themes/ThemeContext';\nimport { getPlacement } from '../../utils/tooltipUtils';\nimport { Portal } from '../Portal/Portal';\n\nimport { PopoverContent, TooltipPlacement } from './types';\n\ninterface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {\n show: boolean;\n placement?: TooltipPlacement;\n content: PopoverContent;\n referenceElement: HTMLElement;\n wrapperClassName?: string;\n renderArrow?: boolean;\n hidePopper?: () => void;\n style?: React.CSSProperties;\n}\n\nexport function Popover({\n content,\n show,\n placement,\n className,\n wrapperClassName,\n referenceElement,\n renderArrow,\n hidePopper,\n style: styleOverrides,\n ...rest\n}: Props) {\n const theme = useTheme2();\n const arrowRef = useRef(null);\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 if (renderArrow) {\n middleware.push(\n arrow({\n element: arrowRef,\n })\n );\n }\n\n const { context, refs, floatingStyles } = useFloating({\n open: show,\n placement: getPlacement(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: () => ({\n opacity: 0,\n }),\n duration: theme.transitions.duration.enteringScreen,\n });\n\n return show ? (\n <Portal>\n <div\n ref={refs.setFloating}\n style={{\n ...floatingStyles,\n ...placementStyles,\n ...styleOverrides,\n }}\n className={wrapperClassName}\n {...rest}\n >\n <div className={className}>\n {renderArrow && <FloatingArrow fill={theme.colors.border.weak} ref={arrowRef} context={context} />}\n {typeof content === 'string' && content}\n {React.isValidElement(content) && React.cloneElement(content)}\n {typeof content === 'function' && content({ hidePopper })}\n </div>\n </div>\n </Portal>\n ) : undefined;\n}\n"],"names":[],"mappings":";;;;;;;;;AA8BO,SAAS,OAAA,CAAQ;AAAA,EACtB,OAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,gBAAA;AAAA,EACA,gBAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA,EAAO,cAAA;AAAA,EACP,GAAG;AACL,CAAA,EAAU;AACR,EAAA,MAAM,QAAQ,SAAA,EAAU;AACxB,EAAA,MAAM,QAAA,GAAW,OAAO,IAAI,CAAA;AAK5B,EAAA,MAAM,UAAA,GAAa;AAAA,IACjB,OAAO,CAAC,CAAA;AAAA,IACR,IAAA,CAAK;AAAA,MACH,yBAAA,EAA2B,KAAA;AAAA;AAAA,MAE3B,SAAA,EAAW,KAAA;AAAA,MACX,UAAU,QAAA,CAAS;AAAA,KACpB,CAAA;AAAA,IACD,KAAA;AAAM,GACR;AAEA,EAAA,IAAI,WAAA,EAAa;AACf,IAAA,UAAA,CAAW,IAAA;AAAA,MACT,KAAA,CAAM;AAAA,QACJ,OAAA,EAAS;AAAA,OACV;AAAA,KACH;AAAA,EACF;AAEA,EAAA,MAAM,EAAE,OAAA,EAAS,IAAA,EAAM,cAAA,KAAmB,WAAA,CAAY;AAAA,IACpD,IAAA,EAAM,IAAA;AAAA,IACN,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,IACjC,UAAA;AAAA,IACA,oBAAA,EAAsB,UAAA;AAAA,IACtB,QAAA,EAAU;AAAA,GACX,CAAA;AAED,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,IAAA,CAAK,aAAa,gBAAgB,CAAA;AAAA,EACpC,CAAA,EAAG,CAAC,gBAAA,EAAkB,IAAI,CAAC,CAAA;AAE3B,EAAA,MAAM,EAAE,MAAA,EAAQ,eAAA,EAAgB,GAAI,oBAAoB,OAAA,EAAS;AAAA,IAC/D,SAAS,OAAO;AAAA,MACd,OAAA,EAAS;AAAA,KACX,CAAA;AAAA,IACA,QAAA,EAAU,KAAA,CAAM,WAAA,CAAY,QAAA,CAAS;AAAA,GACtC,CAAA;AAED,EAAA,OAAO,IAAA,uBACJ,MAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAK,IAAA,CAAK,WAAA;AAAA,MACV,KAAA,EAAO;AAAA,QACL,GAAG,cAAA;AAAA,QACH,GAAG,eAAA;AAAA,QACH,GAAG;AAAA,OACL;AAAA,MACA,SAAA,EAAW,gBAAA;AAAA,MACV,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,IAAA,CAAC,SAAI,SAAA,EACF,QAAA,EAAA;AAAA,QAAA,WAAA,oBAAe,GAAA,CAAC,iBAAc,IAAA,EAAM,KAAA,CAAM,OAAO,MAAA,CAAO,IAAA,EAAM,GAAA,EAAK,QAAA,EAAU,OAAA,EAAkB,CAAA;AAAA,QAC/F,OAAO,YAAY,QAAA,IAAY,OAAA;AAAA,QAC/B,MAAM,cAAA,CAAe,OAAO,CAAA,IAAK,KAAA,CAAM,aAAa,OAAO,CAAA;AAAA,QAC3D,OAAO,OAAA,KAAY,UAAA,IAAc,OAAA,CAAQ,EAAE,YAAY;AAAA,OAAA,EAC1D;AAAA;AAAA,KAEJ,CAAA,GACE,KAAA,CAAA;AACN;;;;"}