@nex-ui/react/dist/esm/components/modal/ModalRoot.mjs

🎉 A beautiful, modern, and reliable React component library.

"use client";
import { jsx } from 'react/jsx-runtime';
import { nex } from '@nex-ui/styled';
import { addEventListener } from '@nex-ui/utils';
import { useEffect } from 'react';
import { Motion } from './Motion.mjs';
import { useModal } from './ModalContext.mjs';
import { modalRootRecipe } from '../../theme/recipes/modal.mjs';
import { useSlotProps } from '../utils/useSlotProps.mjs';
import { Portal } from '../utils/portal/Portal.mjs';

const style = modalRootRecipe();
const ModalRoot = (inProps)=>{
    const props = inProps;
    const { container, open, keepMounted, setOpen, preventScroll, closeOnEscape } = useModal();
    const rootProps = useSlotProps({
        style,
        externalForwardedProps: props
    });
    useEffect(()=>{
        if (!open || !closeOnEscape) {
            return;
        }
        const removeListener = addEventListener(document.body, 'keyup', (e)=>{
            if (e.key === 'Escape' && open) {
                setOpen(false);
                e.stopPropagation();
            }
        });
        return removeListener;
    }, [
        closeOnEscape,
        open,
        setOpen
    ]);
    useEffect(()=>{
        if (preventScroll && open) {
            const body = document.querySelector('body');
            if (body) {
                body.style.overflow = 'hidden';
                return ()=>{
                    body.style.overflow = '';
                };
            }
        }
    }, [
        open,
        preventScroll
    ]);
    return /*#__PURE__*/ jsx(Portal, {
        container: container,
        children: /*#__PURE__*/ jsx(Motion, {
            open: open,
            keepMounted: keepMounted,
            children: /*#__PURE__*/ jsx(nex.div, {
                ...rootProps
            })
        })
    });
};
ModalRoot.displayName = 'ModalRoot';

export { ModalRoot };