@mantine/core/esm/components/ModalBase/ModalBaseContent.mjs

React components library focused on usability, accessibility and developer experience

'use client';
import React, { forwardRef } from 'react';
import cx from 'clsx';
import { FocusTrap } from '../FocusTrap/FocusTrap.mjs';
import { Paper } from '../Paper/Paper.mjs';
import '../Transition/transitions.mjs';
import { Transition } from '../Transition/Transition.mjs';
import { useModalBaseContext } from './ModalBase.context.mjs';
import classes from './ModalBase.module.css.mjs';

const ModalBaseContent = forwardRef(
  ({ transitionProps, className, innerProps, onKeyDown, style, ...others }, ref) => {
    const ctx = 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,
      {
        mounted: ctx.opened,
        transition: "pop",
        ...ctx.transitionProps,
        ...transitionProps
      },
      (transitionStyles) => /* @__PURE__ */ React.createElement(
        "div",
        {
          ...innerProps,
          className: cx({ [classes.inner]: !ctx.unstyled }, innerProps.className)
        },
        /* @__PURE__ */ React.createElement(FocusTrap, { active: ctx.opened && ctx.trapFocus }, /* @__PURE__ */ React.createElement(
          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({ [classes.content]: !ctx.unstyled }, className),
            unstyled: ctx.unstyled
          },
          others.children
        ))
      )
    );
  }
);

export { ModalBaseContent };
//# sourceMappingURL=ModalBaseContent.mjs.map