@zohodesk/components/es/Modal/Portal/Portal.js

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

import React, { useCallback, useMemo } from "react";
import BasePortal from '@zohodesk/dotkit/es/react/components/Portal/Portal';
import { getLibraryConfig } from "../../Provider/Config";
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
export default function Portal({
  children,
  portalId
}) {
  const getPortalContainer = useCallback(() => {
    const getConfigPortalContainer = getLibraryConfig('getPortalContainer');

    if (getConfigPortalContainer && typeof getConfigPortalContainer === 'function') {
      const portal = getConfigPortalContainer();

      if (portal) {
        return portal;
      }
    }

    return null;
  }, []);
  const memoizedPortalId = useMemo(() => {
    const portalPrefix = getLibraryConfig("portalPrefix");
    return `${portalPrefix ? `${portalPrefix}` : ''}${portalId}`;
  }, [portalId]);
  return /*#__PURE__*/React.createElement(BasePortal, {
    portalId: memoizedPortalId,
    getFallbackElement: getPortalContainer
  }, children);
}
Portal.propTypes = propTypes;
Portal.defaultProps = defaultProps;