@grafana/ui/dist/esm/components/Portal/Portal.mjs.map

Grafana Components Library

{"version":3,"file":"Portal.mjs","sources":["../../../../src/components/Portal/Portal.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { PropsWithChildren, useLayoutEffect, useRef } from 'react';\nimport * as React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2, useTheme2 } from '../../themes/ThemeContext';\n\ninterface Props {\n  className?: string;\n  root?: HTMLElement;\n  forwardedRef?: React.ForwardedRef<HTMLDivElement>;\n}\n\nexport function Portal(props: PropsWithChildren<Props>) {\n  const { children, className, root, forwardedRef } = props;\n  const theme = useTheme2();\n  const node = useRef<HTMLDivElement | null>(null);\n  const portalRoot = root ?? getPortalContainer();\n\n  if (!node.current) {\n    node.current = document.createElement('div');\n    if (className) {\n      node.current.className = className;\n    }\n    node.current.style.position = 'relative';\n    node.current.style.zIndex = `${theme.zIndex.portal}`;\n  }\n\n  useLayoutEffect(() => {\n    if (node.current) {\n      portalRoot.appendChild(node.current);\n    }\n\n    return () => {\n      if (node.current) {\n        portalRoot.removeChild(node.current);\n      }\n    };\n  }, [portalRoot]);\n\n  return ReactDOM.createPortal(<div ref={forwardedRef}>{children}</div>, node.current);\n}\n\n/** @internal */\nexport function getPortalContainer() {\n  return window.document.getElementById('grafana-portal-container') ?? document.body;\n}\n\n/** @internal */\nexport function PortalContainer() {\n  const styles = useStyles2(getStyles);\n  return (\n    <div\n      id=\"grafana-portal-container\"\n      data-testid={selectors.components.Portal.container}\n      className={styles.grafanaPortalContainer}\n    />\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    grafanaPortalContainer: css({\n      position: 'fixed',\n      top: 0,\n      width: '100%',\n      zIndex: theme.zIndex.portal,\n    }),\n  };\n};\n\nexport const RefForwardingPortal = React.forwardRef<HTMLDivElement, Props>((props, ref) => {\n  return <Portal {...props} forwardedRef={ref} />;\n});\n\nRefForwardingPortal.displayName = 'RefForwardingPortal';\n"],"names":[],"mappings":";;;;;;;;AAgBO,SAAS,OAAO,KAAiC,EAAA;AACtD,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,IAAA,EAAM,cAAiB,GAAA,KAAA;AACpD,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAM,MAAA,IAAA,GAAO,OAA8B,IAAI,CAAA;AAC/C,EAAM,MAAA,UAAA,GAAa,sBAAQ,kBAAmB,EAAA;AAE9C,EAAI,IAAA,CAAC,KAAK,OAAS,EAAA;AACjB,IAAK,IAAA,CAAA,OAAA,GAAU,QAAS,CAAA,aAAA,CAAc,KAAK,CAAA;AAC3C,IAAA,IAAI,SAAW,EAAA;AACb,MAAA,IAAA,CAAK,QAAQ,SAAY,GAAA,SAAA;AAAA;AAE3B,IAAK,IAAA,CAAA,OAAA,CAAQ,MAAM,QAAW,GAAA,UAAA;AAC9B,IAAA,IAAA,CAAK,QAAQ,KAAM,CAAA,MAAA,GAAS,CAAG,EAAA,KAAA,CAAM,OAAO,MAAM,CAAA,CAAA;AAAA;AAGpD,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,KAAK,OAAS,EAAA;AAChB,MAAW,UAAA,CAAA,WAAA,CAAY,KAAK,OAAO,CAAA;AAAA;AAGrC,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,KAAK,OAAS,EAAA;AAChB,QAAW,UAAA,CAAA,WAAA,CAAY,KAAK,OAAO,CAAA;AAAA;AACrC,KACF;AAAA,GACF,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAO,OAAA,QAAA,CAAS,6BAAc,GAAA,CAAA,KAAA,EAAA,EAAI,KAAK,YAAe,EAAA,QAAA,EAAS,CAAQ,EAAA,IAAA,CAAK,OAAO,CAAA;AACrF;AAGO,SAAS,kBAAqB,GAAA;AA/CrC,EAAA,IAAA,EAAA;AAgDE,EAAA,OAAA,CAAO,YAAO,QAAS,CAAA,cAAA,CAAe,0BAA0B,CAAA,KAAzD,YAA8D,QAAS,CAAA,IAAA;AAChF;AAyBO,MAAM,mBAAsB,GAAA,KAAA,CAAM,UAAkC,CAAA,CAAC,OAAO,GAAQ,KAAA;AACzF,EAAA,uBAAQ,GAAA,CAAA,MAAA,EAAA,EAAQ,GAAG,KAAA,EAAO,cAAc,GAAK,EAAA,CAAA;AAC/C,CAAC;AAED,mBAAA,CAAoB,WAAc,GAAA,qBAAA;;;;"}