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

React components library focused on usability, accessibility and developer experience

'use client';
import React, { forwardRef } from 'react';
import { RemoveScroll } from 'react-remove-scroll';
import { getDefaultZIndex } from '../../core/utils/get-default-z-index/get-default-z-index.mjs';
import { getShadow, getSpacing } from '../../core/utils/get-size/get-size.mjs';
import 'clsx';
import '@mantine/hooks';
import '../../core/MantineProvider/Mantine.context.mjs';
import '../../core/MantineProvider/default-theme.mjs';
import '../../core/MantineProvider/MantineProvider.mjs';
import '../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.mjs';
import { Box } from '../../core/Box/Box.mjs';
import '../../core/DirectionProvider/DirectionProvider.mjs';
import '../Portal/Portal.mjs';
import { OptionalPortal } from '../Portal/OptionalPortal.mjs';
import { ModalBaseProvider } from './ModalBase.context.mjs';
import { useModal } from './use-modal.mjs';

const ModalBase = forwardRef(
  ({
    keepMounted,
    opened,
    onClose,
    id,
    transitionProps,
    trapFocus,
    closeOnEscape,
    returnFocus,
    closeOnClickOutside,
    withinPortal,
    portalProps,
    lockScroll,
    children,
    zIndex,
    shadow,
    padding,
    __vars,
    unstyled,
    removeScrollProps,
    ...others
  }, ref) => {
    const { _id, titleMounted, bodyMounted, shouldLockScroll, setTitleMounted, setBodyMounted } = useModal({ id, transitionProps, opened, trapFocus, closeOnEscape, onClose, returnFocus });
    return /* @__PURE__ */ React.createElement(OptionalPortal, { ...portalProps, withinPortal }, /* @__PURE__ */ React.createElement(
      ModalBaseProvider,
      {
        value: {
          opened,
          onClose,
          closeOnClickOutside,
          transitionProps: { ...transitionProps, keepMounted },
          getTitleId: () => `${_id}-title`,
          getBodyId: () => `${_id}-body`,
          titleMounted,
          bodyMounted,
          setTitleMounted,
          setBodyMounted,
          trapFocus,
          closeOnEscape,
          zIndex,
          unstyled
        }
      },
      /* @__PURE__ */ React.createElement(RemoveScroll, { enabled: shouldLockScroll && lockScroll, ...removeScrollProps }, /* @__PURE__ */ React.createElement(
        Box,
        {
          ref,
          ...others,
          __vars: {
            ...__vars,
            "--mb-z-index": (zIndex || getDefaultZIndex("modal")).toString(),
            "--mb-shadow": getShadow(shadow),
            "--mb-padding": getSpacing(padding)
          }
        },
        children
      ))
    ));
  }
);

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