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

React components library focused on usability, accessibility and developer experience

'use client';
import React, { forwardRef } from 'react';
import { Overlay } from '../Overlay/Overlay.mjs';
import '../Transition/transitions.mjs';
import { Transition } from '../Transition/Transition.mjs';
import { useModalBaseContext } from './ModalBase.context.mjs';
import { useModalTransition } from './use-modal-transition.mjs';

const ModalBaseOverlay = forwardRef(
  ({ onClick, transitionProps, style, ...others }, ref) => {
    const ctx = useModalBaseContext();
    const transition = useModalTransition(transitionProps);
    return /* @__PURE__ */ React.createElement(Transition, { mounted: ctx.opened, ...transition, transition: "fade" }, (transitionStyles) => /* @__PURE__ */ React.createElement(
      Overlay,
      {
        ref,
        fixed: true,
        style: [style, transitionStyles],
        zIndex: ctx.zIndex,
        unstyled: ctx.unstyled,
        onClick: (event) => {
          onClick?.(event);
          ctx.closeOnClickOutside && ctx.onClose();
        },
        ...others
      }
    ));
  }
);
ModalBaseOverlay.displayName = "@mantine/core/ModalBaseOverlay";

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