@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 m = require('motion/react-m');
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 useSlotClasses = require('../utils/useSlotClasses.cjs');
var useSlot = require('../utils/useSlot.cjs');
var ModalPanel = require('../modal/ModalPanel.cjs');
var ModalContent = require('../modal/ModalContent.cjs');
var ButtonBase = require('../buttonBase/ButtonBase.cjs');
var dialog = require('../../theme/recipes/dialog.cjs');
var Ripple = require('../utils/ripple/Ripple.cjs');

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var m__namespace = /*#__PURE__*/_interopNamespace(m);

const slots = [
    'root',
    'paper',
    'closeButton'
];
const useSlotAriaProps = (ownerState)=>{
    const { 'aria-labelledby': defaultAriaLabelledBy, 'aria-describedby': defaultAriaDescribedBy } = ownerState;
    const { paper = {}, closeButton = {} } = ownerState.slotProps ?? {};
    const { 'aria-label': closeButtonAriaLabel = 'Close dialog' } = closeButton;
    const { role = 'dialog', 'aria-modal': modal = true, 'aria-labelledby': ariaLabelledBy = defaultAriaLabelledBy, 'aria-describedby': ariaDescribedBy = defaultAriaDescribedBy } = paper;
    return react.useMemo(()=>({
            paper: {
                role,
                'aria-modal': modal,
                'aria-labelledby': ariaLabelledBy,
                'aria-describedby': ariaDescribedBy
            },
            closeButton: {
                'aria-label': closeButtonAriaLabel
            }
        }), [
        role,
        modal,
        ariaLabelledBy,
        ariaDescribedBy,
        closeButtonAriaLabel
    ]);
};
const DialogContent = (inProps)=>{
    const props = useDefaultProps.useDefaultProps({
        name: 'DialogContent',
        props: inProps
    });
    const { children, slotProps, closeIcon, classNames, motionProps: motionPropsProp, placement = 'top', scroll = 'outside', fullScreen = false, hideCloseButton = false, size = 'md', ...remainingProps } = props;
    const ownerState = {
        ...props,
        placement,
        scroll,
        size,
        fullScreen,
        hideCloseButton
    };
    const styles = useStyles.useStyles({
        ownerState,
        name: 'DialogContent',
        recipe: dialog.dialogContentRecipe
    });
    const slotAriaProps = useSlotAriaProps(ownerState);
    const slotClasses = useSlotClasses.useSlotClasses({
        name: 'DialogContent',
        slots,
        classNames
    });
    const motionProps = react.useMemo(()=>{
        const mProps = typeof motionPropsProp === 'function' ? motionPropsProp(placement) : motionPropsProp;
        return {
            variants: {
                visible: {
                    transform: 'scale(1)'
                },
                hidden: {
                    transform: 'scale(1.04)'
                }
            },
            ...mProps
        };
    }, [
        motionPropsProp,
        placement
    ]);
    const [DialogContentRoot, getDialogContentRootProps] = useSlot.useSlot({
        elementType: ModalPanel.ModalPanel,
        style: styles.root,
        externalForwardedProps: remainingProps,
        shouldForwardComponent: false,
        classNames: slotClasses.root,
        dataAttrs: {
            size,
            placement,
            scroll,
            fullScreen,
            hideCloseButton
        }
    });
    const [DialogContentPaper, getDialogContentPaperProps] = useSlot.useSlot({
        elementType: ModalContent.ModalContent,
        style: styles.paper,
        classNames: slotClasses.paper,
        externalSlotProps: slotProps?.paper,
        shouldForwardComponent: false,
        a11y: slotAriaProps.paper,
        additionalProps: {
            as: m__namespace.section,
            ...motionProps
        }
    });
    const [DialogContentCloseButton, getDialogContentCloseButtonProps] = useSlot.useSlot({
        elementType: ButtonBase.ButtonBase,
        externalSlotProps: slotProps?.closeButton,
        style: styles.closeButton,
        classNames: slotClasses.closeButton,
        shouldForwardComponent: false,
        a11y: slotAriaProps.closeButton
    });
    return /*#__PURE__*/ jsxRuntime.jsx(DialogRoot.DialogRoot, {
        children: /*#__PURE__*/ jsxRuntime.jsx(DialogContentRoot, {
            ...getDialogContentRootProps(),
            children: /*#__PURE__*/ jsxRuntime.jsx(DialogContentPaper, {
                ...getDialogContentPaperProps(),
                children: /*#__PURE__*/ jsxRuntime.jsxs(DialogContext.DialogContentProvider, {
                    value: ownerState,
                    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;