@grafana/ui/dist/cjs/components/Portal/Portal.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var ReactDOM = require('react-dom');
var e2eSelectors = require('@grafana/e2e-selectors');
var ThemeContext = require('../../themes/ThemeContext.cjs');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var ReactDOM__default = /*#__PURE__*/_interopDefaultCompat(ReactDOM);

"use strict";
const PortalContext = React.createContext(null);
function Portal(props) {
  var _a;
  const { children, className, root, zIndex } = props;
  const theme = ThemeContext.useTheme2();
  const parentPortal = React.useContext(PortalContext);
  const portalRef = React.useRef(null);
  const portalRoot = (_a = root != null ? root : parentPortal) != null ? _a : getPortalContainer();
  return ReactDOM__default.default.createPortal(
    /* @__PURE__ */ jsxRuntime.jsx(PortalContext.Provider, { value: portalRef.current, children: /* @__PURE__ */ jsxRuntime.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 = ThemeContext.useStyles2(getStyles);
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      id: "grafana-portal-container",
      "data-testid": e2eSelectors.selectors.components.Portal.container,
      className: styles.grafanaPortalContainer
    }
  );
}
const getStyles = (theme) => {
  return {
    grafanaPortalContainer: css.css({
      position: "fixed",
      top: 0,
      width: "100%",
      zIndex: theme.zIndex.portal
    })
  };
};

exports.Portal = Portal;
exports.PortalContainer = PortalContainer;
exports.getPortalContainer = getPortalContainer;
//# sourceMappingURL=Portal.cjs.map