@shopify/polaris/dist/esm/components/Portal/Portal.js

Shopify’s product component library

import React$1, { useContext, useEffect } from 'react';
import { globalIdGeneratorFactory } from '../../utilities/unique-id/unique-id-factory.js';
import { PortalsManagerContext } from '../../utilities/portals/context.js';
import { createPortal } from 'react-dom';
import { useIsMountedRef as useIsMountedRef$1 } from '../../utilities/use-is-mounted-ref.js';

var getUniqueID = globalIdGeneratorFactory('portal-');
function Portal({
  children,
  idPrefix = '',
  onPortalCreated = noop
}) {
  var isMounted = useIsMountedRef$1();
  var portalsContext = useContext(PortalsManagerContext);
  var portalId = idPrefix !== '' ? "".concat(idPrefix, "-").concat(getUniqueID()) : getUniqueID();
  useEffect(() => {
    if (isMounted) {
      onPortalCreated();
    }
  }, [onPortalCreated, isMounted]);
  return portalsContext && portalsContext.portalsContainerRef ? /*#__PURE__*/createPortal( /*#__PURE__*/React$1.createElement("div", {
    "data-portal-id": portalId
  }, children), portalsContext.portalsContainerRef) : null;
}

function noop() {}

export { Portal };