@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 styled = require('@nex-ui/styled');
var react = require('react');
var ModalContext = require('./ModalContext.cjs');
var modal = require('../../theme/recipes/modal.cjs');
var useSlotProps = require('../utils/useSlotProps.cjs');
var FocusTrap = require('../focusTrap/FocusTrap.cjs');

const style = modal.modalContentRecipe();
const useAriaProps = (props)=>{
    const { role = 'dialog', tabIndex = -1 } = props;
    const labelledBy = props['aria-labelledby'];
    const describedBy = props['aria-describedby'];
    return react.useMemo(()=>{
        return {
            role,
            tabIndex,
            'aria-modal': true,
            'aria-labelledby': labelledBy,
            'aria-describedby': describedBy
        };
    }, [
        describedBy,
        labelledBy,
        role,
        tabIndex
    ]);
};
const ModalContent = (inProps)=>{
    const props = inProps;
    const labelId = react.useId();
    const describtionId = react.useId();
    const modalState = ModalContext.useModal();
    const labelledBy = props['aria-labelledby'] ?? modalState['aria-labelledby'] ?? labelId;
    const describedBy = props['aria-describedby'] ?? modalState['aria-describedby'] ?? describtionId;
    const ariaProps = useAriaProps({
        ...props,
        'aria-labelledby': labelledBy,
        'aria-describedby': describedBy
    });
    const rootProps = useSlotProps.useSlotProps({
        style,
        externalForwardedProps: props,
        a11y: ariaProps
    });
    const ctx = react.useMemo(()=>({
            ...modalState,
            'aria-labelledby': labelledBy,
            'aria-describedby': describedBy
        }), [
        describedBy,
        labelledBy,
        modalState
    ]);
    return /*#__PURE__*/ jsxRuntime.jsx(ModalContext.ModalProvider, {
        value: ctx,
        children: /*#__PURE__*/ jsxRuntime.jsx(FocusTrap.FocusTrap, {
            active: modalState.open,
            restoreFocus: modalState.restoreFocus,
            children: /*#__PURE__*/ jsxRuntime.jsx(styled.nex.section, {
                ...rootProps
            })
        })
    });
};
ModalContent.displayName = 'ModalContent';

exports.ModalContent = ModalContent;