{"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  // the zIndex of the node; defaults to theme.zIndex.portal\n  zIndex?: number;\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 = `${props.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":";;;;;;;;;AAkBO,SAAS,OAAO,KAAA,EAAiC;AAlBxD,EAAA,IAAA,EAAA;AAmBE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,IAAA,EAAM,cAAa,GAAI,KAAA;AACpD,EAAA,MAAM,QAAQ,SAAA,EAAU;AACxB,EAAA,MAAM,IAAA,GAAO,OAA8B,IAAI,CAAA;AAC/C,EAAA,MAAM,UAAA,GAAa,sBAAQ,kBAAA,EAAmB;AAE9C,EAAA,IAAI,CAAC,KAAK,OAAA,EAAS;AACjB,IAAA,IAAA,CAAK,OAAA,GAAU,QAAA,CAAS,aAAA,CAAc,KAAK,CAAA;AAC3C,IAAA,IAAI,SAAA,EAAW;AACb,MAAA,IAAA,CAAK,QAAQ,SAAA,GAAY,SAAA;AAAA,IAC3B;AACA,IAAA,IAAA,CAAK,OAAA,CAAQ,MAAM,QAAA,GAAW,UAAA;AAC9B,IAAA,IAAA,CAAK,OAAA,CAAQ,MAAM,MAAA,GAAS,CAAA,EAAA,CAAG,WAAM,MAAA,KAAN,IAAA,GAAA,EAAA,GAAgB,KAAA,CAAM,MAAA,CAAO,MAAM,CAAA,CAAA;AAAA,EACpE;AAEA,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,KAAK,OAAA,EAAS;AAChB,MAAA,UAAA,CAAW,WAAA,CAAY,KAAK,OAAO,CAAA;AAAA,IACrC;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,KAAK,OAAA,EAAS;AAChB,QAAA,UAAA,CAAW,WAAA,CAAY,KAAK,OAAO,CAAA;AAAA,MACrC;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAA,OAAO,QAAA,CAAS,6BAAa,GAAA,CAAC,KAAA,EAAA,EAAI,KAAK,YAAA,EAAe,QAAA,EAAS,CAAA,EAAQ,IAAA,CAAK,OAAO,CAAA;AACrF;AAGO,SAAS,kBAAA,GAAqB;AAjDrC,EAAA,IAAA,EAAA;AAkDE,EAAA,OAAA,CAAO,YAAO,QAAA,CAAS,cAAA,CAAe,0BAA0B,CAAA,KAAzD,YAA8D,QAAA,CAAS,IAAA;AAChF;AAGO,SAAS,eAAA,GAAkB;AAChC,EAAA,MAAM,MAAA,GAAS,WAAW,SAAS,CAAA;AACnC,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAG,0BAAA;AAAA,MACH,aAAA,EAAa,SAAA,CAAU,UAAA,CAAW,MAAA,CAAO,SAAA;AAAA,MACzC,WAAW,MAAA,CAAO;AAAA;AAAA,GACpB;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,EAAA,OAAO;AAAA,IACL,wBAAwB,GAAA,CAAI;AAAA,MAC1B,QAAA,EAAU,OAAA;AAAA,MACV,GAAA,EAAK,CAAA;AAAA,MACL,KAAA,EAAO,MAAA;AAAA,MACP,MAAA,EAAQ,MAAM,MAAA,CAAO;AAAA,KACtB;AAAA,GACH;AACF,CAAA;AAEO,MAAM,mBAAA,GAAsB,KAAA,CAAM,UAAA,CAAkC,CAAC,OAAO,GAAA,KAAQ;AACzF,EAAA,uBAAO,GAAA,CAAC,MAAA,EAAA,EAAQ,GAAG,KAAA,EAAO,cAAc,GAAA,EAAK,CAAA;AAC/C,CAAC;AAED,mBAAA,CAAoB,WAAA,GAAc,qBAAA;;;;"}