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

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

"use client";
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
var system = require('@nex-ui/system');
var ModalContext = require('./ModalContext.cjs');
var ModalManager = require('./ModalManager.cjs');
var useSlot = require('../utils/useSlot.cjs');
var FocusTrap = require('../focusTrap/FocusTrap.cjs');

const recipe = system.defineRecipe({
    base: {
        width: 'full',
        position: 'relative',
        display: 'flex',
        flexDirection: 'column',
        outline: 'none',
        bg: 'content'
    }
});
const style = recipe();
const useAriaProps = (props)=>{
    const { modalContentId, modalHeaderId, modalBodyId } = ModalContext.useModal();
    const { tabIndex = -1, id = modalContentId, 'aria-labelledby': labelledBy = modalHeaderId, 'aria-describedby': describedBy = modalBodyId } = props;
    return react.useMemo(()=>{
        return {
            tabIndex,
            id,
            'aria-labelledby': labelledBy,
            'aria-describedby': describedBy
        };
    }, [
        describedBy,
        id,
        labelledBy,
        tabIndex
    ]);
};
const ModalContent = (inProps)=>{
    const props = inProps;
    const ctx = ModalContext.useModal();
    const [paused, setPaused] = react.useState(false);
    const modalManager = ModalManager.useModalManager();
    const { isTopmostModal } = ctx;
    const ariaProps = useAriaProps(props);
    const [ModalContentRoot, getModalContentRootProps] = useSlot.useSlot({
        style,
        elementType: 'section',
        externalForwardedProps: props,
        a11y: ariaProps
    });
    react.useEffect(()=>{
        const unsubscribe = modalManager.subscribe(()=>{
            setPaused(!isTopmostModal?.());
        });
        return unsubscribe;
    }, [
        isTopmostModal,
        modalManager
    ]);
    return /*#__PURE__*/ jsxRuntime.jsx(FocusTrap.FocusTrap, {
        active: ctx.open,
        restoreFocus: ctx.restoreFocus,
        paused: paused,
        children: /*#__PURE__*/ jsxRuntime.jsx(ModalContentRoot, {
            ...getModalContentRootProps()
        })
    });
};
ModalContent.displayName = 'ModalContent';

exports.ModalContent = ModalContent;