@nex-ui/react
Version:
🎉 A beautiful, modern, and reliable React component library.
67 lines (64 loc) • 2.01 kB
JavaScript
"use client";
import { jsx } from 'react/jsx-runtime';
import { useId, useRef, useMemo, useEffect } from 'react';
import { useControlledState } from '@nex-ui/hooks';
import { ModalProvider } from './ModalContext.mjs';
import { MODAL_INTERNAL_ID_PREFIX } from './constants.mjs';
/**
* Modal is a lower-level construct that is leveraged by the following components:
*
* - Dialog
* - Drawer
*/ const Modal = (props)=>{
const id = useId();
const modalContentId = `${MODAL_INTERNAL_ID_PREFIX}${id}-content`;
const modalHeaderId = `${MODAL_INTERNAL_ID_PREFIX}${id}-header`;
const modalBodyId = `${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] = useControlledState(openProp, defaultOpen, onOpenChange);
const prevOpenRef = useRef(open);
const rootProps = 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
]);
useEffect(()=>{
if (prevOpenRef.current && !open) {
onClose?.();
}
prevOpenRef.current = open;
}, [
onClose,
open
]);
return /*#__PURE__*/ jsx(ModalProvider, {
value: rootProps,
children: children
});
};
Modal.displayName = 'Modal';
export { Modal };