InternalOverlay = props => {
    const {
        render: ContentComponent,
        isVisible,
        triggerElementRef,
        positionResolver,
        onOpened,
        children,
        keepScrollEnabled,
    } = props;
    const containerRef = useRef();
    const [contentMeta, updateContentMeta] = useState(false);
    const shouldOpen = isVisible && contentMeta;
    useEffect(() => {
        if (shouldOpen) {
            onOpened();
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [shouldOpen]);

    const shouldDisableScroll = shouldOpen && !keepScrollEnabled;
    useDisableScroll(shouldDisableScroll);

    // eslint-disable-next-line react-hooks/exhaustive-deps
    useIsomorphicLayoutEffect(() => {
        if (contentMeta && containerRef.current) {
            const { width, height } = containerRef.current.getBoundingClientRect();
            if (width !== contentMeta.width || height !== contentMeta.height) {
                updateContentMeta({ width, height });
            }
        }
    });

    if (isVisible) {
        const content = children || <ContentComponent />;
        if (contentMeta) {
            const triggerMeta = resolveTriggerMeta(triggerElementRef);
            const viewportMeta = resolveViewportMeta();
            const position = resolvePosition({
                triggerMeta,
                contentMeta,
                viewportMeta,
                positionResolver,
            });
            return createPortal(
                <Container position={position} ref={containerRef}>
                    {content}
                </Container>,
                document.body,
            );
        }
        return (
            <ContentMetaResolver component={ContentComponent} onResolved={updateContentMeta}>
                {children}
            </ContentMetaResolver>
        );
    }
    return null;
}
This component implements the positioning of a component (inserted in the DOM at the body level) based on a trigger DOM element. By the way of example, you can think of the use case of a Menu Options, Tooltip, Popup that should be floating on top of all the elements and it should be correctly positioned based on the component/element that triggers the show/open action.
@category Internal