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

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

"use client";
'use strict';

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

const recipe = system.defineRecipe({
    base: {
        position: 'fixed',
        inset: 0
    }
});
const style = recipe();
const ModalPanel = (inProps)=>{
    const { closeOnInteractOutside, setOpen } = ModalContext.useModal();
    const props = inProps;
    const handleClick = hooks.useEvent((e)=>{
        if (closeOnInteractOutside && e.target === e.currentTarget) {
            setOpen(false);
        }
    });
    const [ModalPanelRoot, getModalPanelRootProps] = useSlot.useSlot({
        style,
        elementType: 'div',
        externalForwardedProps: props,
        additionalProps: {
            onClick: handleClick
        }
    });
    return /*#__PURE__*/ jsxRuntime.jsx(ModalPanelRoot, {
        ...getModalPanelRootProps()
    });
};
ModalPanel.displayName = 'ModalPanel';

exports.ModalPanel = ModalPanel;