@atlaskit/portal/dist/cjs/internal/components/internal-portal.js

A wrapper for rendering components in React portals.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = InternalPortal;
var _react = require("react");
var _reactDom = require("react-dom");
var _portalDomUtils = require("../utils/portal-dom-utils");
function InternalPortal(props) {
  var zIndex = props.zIndex,
    children = props.children;
  var container = (0, _react.useMemo)(function () {
    return (0, _portalDomUtils.createContainer)(zIndex);
  }, [zIndex]);

  // This is in the render method instead of useEffect so that
  // the portal will be added to the DOM before the children render.
  // For any further changes, ensure that the container does not have a
  // parent besides the portal parent.
  (0, _portalDomUtils.appendPortalContainerIfNotAppended)(container);
  (0, _react.useEffect)(function () {
    return function () {
      (0, _portalDomUtils.removePortalContainer)(container);
    };
  }, [container]);
  return /*#__PURE__*/(0, _reactDom.createPortal)(children, container);
}