@mantine/core/cjs/components/ModalBase/ModalBaseContent.cjs

React components library focused on usability, accessibility and developer experience

'use client';
'use strict';

var React = require('react');
var cx = require('clsx');
var FocusTrap = require('../FocusTrap/FocusTrap.cjs');
var Paper = require('../Paper/Paper.cjs');
require('../Transition/transitions.cjs');
var Transition = require('../Transition/Transition.cjs');
var ModalBase_context = require('./ModalBase.context.cjs');
var ModalBase_module = require('./ModalBase.module.css.cjs');

const ModalBaseContent = React.forwardRef(
  ({ transitionProps, className, innerProps, onKeyDown, style, ...others }, ref) => {
    const ctx = ModalBase_context.useModalBaseContext();
    const handleKeyDown = (event) => {
      const shouldTrigger = event.target?.getAttribute("data-mantine-stop-propagation") !== "true";
      shouldTrigger && event.key === "Escape" && ctx.closeOnEscape && ctx.onClose();
      onKeyDown?.(event);
    };
    return /* @__PURE__ */ React.createElement(
      Transition.Transition,
      {
        mounted: ctx.opened,
        transition: "pop",
        ...ctx.transitionProps,
        ...transitionProps
      },
      (transitionStyles) => /* @__PURE__ */ React.createElement(
        "div",
        {
          ...innerProps,
          className: cx({ [ModalBase_module.inner]: !ctx.unstyled }, innerProps.className)
        },
        /* @__PURE__ */ React.createElement(FocusTrap.FocusTrap, { active: ctx.opened && ctx.trapFocus }, /* @__PURE__ */ React.createElement(
          Paper.Paper,
          {
            ...others,
            component: "section",
            role: "dialog",
            tabIndex: -1,
            "aria-modal": true,
            "aria-describedby": ctx.bodyMounted ? ctx.getBodyId() : void 0,
            "aria-labelledby": ctx.titleMounted ? ctx.getTitleId() : void 0,
            onKeyDown: handleKeyDown,
            ref,
            style: [style, transitionStyles],
            className: cx({ [ModalBase_module.content]: !ctx.unstyled }, className),
            unstyled: ctx.unstyled
          },
          others.children
        ))
      )
    );
  }
);

exports.ModalBaseContent = ModalBaseContent;
//# sourceMappingURL=ModalBaseContent.cjs.map