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

A wrapper for rendering components in React portals.

import React, { useEffect, useMemo } from 'react';
import { createPortal } from 'react-dom';
import { ThemeProvider, useColorMode } from '@atlaskit/app-provider';
import { fg } from '@atlaskit/platform-feature-flags';
import { appendPortalContainerIfNotAppended, createContainer, removePortalContainer } from '../utils/portal-dom-utils';
export default function InternalPortal(props) {
  const {
    zIndex,
    children,
    isClosed = false
  } = props;
  const container = useMemo(() => createContainer(zIndex), [zIndex]);
  const colorMode = useColorMode();

  // 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.
  appendPortalContainerIfNotAppended(container);
  useEffect(() => {
    if (fg('import_into_jsm_in_template_gallery_killswitch')) {
      if (isClosed) {
        removePortalContainer(container);
      }
    }
  }, [isClosed, container]);
  useEffect(() => {
    return () => {
      removePortalContainer(container);
    };
  }, [container]);
  return /*#__PURE__*/createPortal(colorMode ? /*#__PURE__*/React.createElement(ThemeProvider, {
    defaultColorMode: colorMode
  }, children) : children, container);
}