@modern-kit/react/dist/components/Portal/index.cjs

modern-kit/react

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var reactDom = require('react-dom');
var hooksUseIsMounted = require('../../hooks/useIsMounted/index.cjs');
var hooksUseIsomorphicLayoutEffect = require('../../hooks/useIsomorphicLayoutEffect/index.cjs');
require('@modern-kit/utils');

const PortalContext = React.createContext({
  parentPortalElement: null
});
const PORTAL_DEFAULT_CLASS = "portal";
function RenderPortal({
  children,
  className = PORTAL_DEFAULT_CLASS,
  containerRef
}) {
  const { parentPortalElement } = React.useContext(PortalContext);
  const createPortalElement = React.useCallback(
    (mountElement2) => {
      const portalElement2 = mountElement2.ownerDocument.createElement("div");
      portalElement2.classList.add(className);
      return portalElement2;
    },
    [className]
  );
  const mountElement = React.useMemo(() => {
    return parentPortalElement || containerRef?.current || document.body;
  }, [parentPortalElement, containerRef]);
  const portalElement = React.useMemo(() => {
    return createPortalElement(mountElement);
  }, [createPortalElement, mountElement]);
  hooksUseIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
    mountElement.appendChild(portalElement);
    return () => {
      if (mountElement.contains(portalElement)) {
        mountElement.removeChild(portalElement);
      }
    };
  }, [portalElement, mountElement]);
  return reactDom.createPortal(
    /* @__PURE__ */ jsxRuntime.jsx(PortalContext.Provider, { value: { parentPortalElement: portalElement }, children }),
    portalElement
  );
}
const Portal = ({ children, ...restProps }) => {
  const isMounted = hooksUseIsMounted.useIsMounted();
  if (!isMounted) {
    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
  }
  return /* @__PURE__ */ jsxRuntime.jsx(RenderPortal, { ...restProps, children });
};

exports.Portal = Portal;
//# sourceMappingURL=index.cjs.map