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

Grafana Components Library

import { jsx } from 'react/jsx-runtime';
import { css } from '@emotion/css';
import { createContext, useContext, useRef } from 'react';
import ReactDOM from 'react-dom';
import { selectors } from '@grafana/e2e-selectors';
import { useTheme2, useStyles2 } from '../../themes/ThemeContext.mjs';

"use strict";
const PortalContext = createContext(null);
function Portal(props) {
  var _a;
  const { children, className, root, zIndex } = props;
  const theme = useTheme2();
  const parentPortal = useContext(PortalContext);
  const portalRef = useRef(null);
  const portalRoot = (_a = root != null ? root : parentPortal) != null ? _a : getPortalContainer();
  return ReactDOM.createPortal(
    /* @__PURE__ */ jsx(PortalContext.Provider, { value: portalRef.current, children: /* @__PURE__ */ jsx(
      "div",
      {
        className,
        ref: portalRef,
        style: { position: "relative", zIndex: zIndex != null ? zIndex : theme.zIndex.portal },
        children
      }
    ) }),
    portalRoot
  );
}
function getPortalContainer() {
  var _a;
  return (_a = window.document.getElementById("grafana-portal-container")) != null ? _a : document.body;
}
function PortalContainer() {
  const styles = useStyles2(getStyles);
  return /* @__PURE__ */ jsx(
    "div",
    {
      id: "grafana-portal-container",
      "data-testid": selectors.components.Portal.container,
      className: styles.grafanaPortalContainer
    }
  );
}
const getStyles = (theme) => {
  return {
    grafanaPortalContainer: css({
      position: "fixed",
      top: 0,
      width: "100%",
      zIndex: theme.zIndex.portal
    })
  };
};

export { Portal, PortalContainer, getPortalContainer };
//# sourceMappingURL=Portal.mjs.map