@nex-ui/react/dist/cjs/components/dialog/DialogContent.cjs

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

"use client";
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
var icons = require('@nex-ui/icons');
var DialogRoot = require('./DialogRoot.cjs');
var DialogClose = require('./DialogClose.cjs');
var DialogContext = require('./DialogContext.cjs');
var useDefaultProps = require('../utils/useDefaultProps.cjs');
var useStyles = require('../utils/useStyles.cjs');
var useSlot = require('../utils/useSlot.cjs');
var ModalContent = require('../modal/ModalContent.cjs');
var ButtonBase = require('../buttonBase/ButtonBase.cjs');
var Context = require('../provider/Context.cjs');
var composeClasses = require('../utils/composeClasses.cjs');
var dialog = require('../../theme/recipes/dialog.cjs');
var getUtilityClass = require('../utils/getUtilityClass.cjs');
var Ripple = require('../utils/ripple/Ripple.cjs');

const useSlotClasses = ()=>{
    const { prefix } = Context.useNexUI();
    return react.useMemo(()=>{
        const prefixClassName = `${prefix}-dialog-content`;
        const slots = {
            root: [
                'root'
            ],
            closeButton: [
                'close-button'
            ]
        };
        return composeClasses.composeClasses(slots, getUtilityClass.getUtilityClass(prefixClassName));
    }, [
        prefix
    ]);
};
const DialogContent = (inProps)=>{
    const { hideCloseButton, scroll, fullScreen, closeIcon: defaultCloseIcon, maxWidth: defaultMaxWidth } = DialogContext.useDialog();
    const props = useDefaultProps.useDefaultProps({
        name: 'DialogContent',
        props: inProps
    });
    const { children, slotProps, maxWidth = defaultMaxWidth, closeIcon = defaultCloseIcon, ...remainingProps } = props;
    const ownerState = {
        ...props,
        maxWidth,
        fullScreen
    };
    const styles = useStyles.useStyles({
        ownerState: {
            scroll,
            ...ownerState
        },
        name: 'DialogContent',
        recipe: dialog.dialogContentRecipe
    });
    const classes = useSlotClasses();
    const [DialogContentRoot, getDialogContentRootProps] = useSlot.useSlot({
        ownerState,
        elementType: ModalContent.ModalContent,
        style: styles.content,
        classNames: classes.root,
        externalForwardedProps: remainingProps,
        shouldForwardComponent: false
    });
    const [DialogContentCloseButton, getDialogContentCloseButtonProps] = useSlot.useSlot({
        ownerState,
        elementType: ButtonBase.ButtonBase,
        externalSlotProps: slotProps?.closeButton,
        style: styles.closeButton,
        classNames: classes.closeButton,
        shouldForwardComponent: false
    });
    return /*#__PURE__*/ jsxRuntime.jsx(DialogRoot.DialogRoot, {
        children: /*#__PURE__*/ jsxRuntime.jsxs(DialogContentRoot, {
            ...getDialogContentRootProps(),
            children: [
                !hideCloseButton && /*#__PURE__*/ jsxRuntime.jsx(DialogClose.DialogClose, {
                    children: /*#__PURE__*/ jsxRuntime.jsx(Ripple.Ripple, {
                        children: /*#__PURE__*/ jsxRuntime.jsx(DialogContentCloseButton, {
                            ...getDialogContentCloseButtonProps(),
                            children: closeIcon ?? /*#__PURE__*/ jsxRuntime.jsx(icons.CloseOutlined, {})
                        })
                    })
                }),
                children
            ]
        })
    });
};
DialogContent.displayName = 'DialogContent';

exports.DialogContent = DialogContent;