@nex-ui/react/dist/cjs/components/modal/Modal.cjs

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

"use client";
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
var hooks = require('@nex-ui/hooks');
var ModalContext = require('./ModalContext.cjs');
var constants = require('./constants.cjs');

/**
 * Modal is a lower-level construct that is leveraged by the following components:
 *
 * - Dialog
 * - Drawer
 */ const Modal = (props)=>{
    const id = react.useId();
    const modalContentId = `${constants.MODAL_INTERNAL_ID_PREFIX}${id}-content`;
    const modalHeaderId = `${constants.MODAL_INTERNAL_ID_PREFIX}${id}-header`;
    const modalBodyId = `${constants.MODAL_INTERNAL_ID_PREFIX}${id}-body`;
    const { children, container, onClose, onOpenChange, open: openProp, restoreFocus = true, closeOnEscape = true, preventScroll = false, defaultOpen = false, keepMounted = false, closeOnInteractOutside = true } = props;
    const [open, setOpen] = hooks.useControlledState(openProp, defaultOpen, onOpenChange);
    const prevOpenRef = react.useRef(open);
    const rootProps = react.useMemo(()=>({
            setOpen,
            restoreFocus,
            closeOnEscape,
            open,
            keepMounted,
            defaultOpen,
            closeOnInteractOutside,
            onOpenChange,
            preventScroll,
            container,
            modalContentId,
            modalHeaderId,
            modalBodyId
        }), [
        setOpen,
        restoreFocus,
        closeOnEscape,
        open,
        keepMounted,
        defaultOpen,
        closeOnInteractOutside,
        onOpenChange,
        preventScroll,
        container,
        modalContentId,
        modalHeaderId,
        modalBodyId
    ]);
    react.useEffect(()=>{
        if (prevOpenRef.current && !open) {
            onClose?.();
        }
        prevOpenRef.current = open;
    }, [
        onClose,
        open
    ]);
    return /*#__PURE__*/ jsxRuntime.jsx(ModalContext.ModalProvider, {
        value: rootProps,
        children: children
    });
};
Modal.displayName = 'Modal';

exports.Modal = Modal;