@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
81 lines (80 loc) • 3.79 kB
JavaScript
"use client";
require("../../_virtual/_rolldown/runtime.cjs");
const require_get_default_z_index = require("../../core/utils/get-default-z-index/get-default-z-index.cjs");
const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
const require_factory = require("../../core/factory/factory.cjs");
const require_Modal_module = require("./Modal.module.cjs");
const require_ModalBody = require("./ModalBody.cjs");
const require_ModalCloseButton = require("./ModalCloseButton.cjs");
const require_ModalContent = require("./ModalContent.cjs");
const require_ModalHeader = require("./ModalHeader.cjs");
const require_ModalOverlay = require("./ModalOverlay.cjs");
const require_ModalRoot = require("./ModalRoot.cjs");
const require_ModalStack = require("./ModalStack.cjs");
const require_ModalTitle = require("./ModalTitle.cjs");
let react = require("react");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/Modal/Modal.tsx
const defaultProps = {
closeOnClickOutside: true,
withinPortal: true,
lockScroll: true,
trapFocus: true,
returnFocus: true,
closeOnEscape: true,
keepMounted: false,
zIndex: require_get_default_z_index.getDefaultZIndex("modal"),
transitionProps: {
duration: 200,
transition: "fade-down"
},
withOverlay: true,
withCloseButton: true
};
const Modal = require_factory.factory((_props) => {
const { title, withOverlay, overlayProps, withCloseButton, closeButtonProps, children, radius, opened, stackId, zIndex, ...others } = require_use_props.useProps("Modal", defaultProps, _props);
const ctx = (0, react.use)(require_ModalStack.ModalStackContext);
const hasHeader = !!title || withCloseButton;
const stackProps = ctx && stackId ? {
closeOnEscape: ctx.currentId === stackId,
trapFocus: ctx.currentId === stackId,
zIndex: ctx.getZIndex(stackId)
} : {};
const overlayVisible = withOverlay === false ? false : stackId && ctx ? ctx.currentId === stackId : opened;
(0, react.useEffect)(() => {
if (ctx && stackId) opened ? ctx.addModal(stackId, zIndex || require_get_default_z_index.getDefaultZIndex("modal")) : ctx.removeModal(stackId);
}, [
opened,
stackId,
zIndex
]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ModalRoot.ModalRoot, {
radius,
opened,
zIndex: ctx && stackId ? ctx.getZIndex(stackId) : zIndex,
...others,
...stackProps,
children: [withOverlay && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ModalOverlay.ModalOverlay, {
visible: overlayVisible,
transitionProps: ctx && stackId ? { duration: 0 } : void 0,
...overlayProps
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ModalContent.ModalContent, {
radius,
__hidden: ctx && stackId && opened ? stackId !== ctx.currentId : false,
children: [hasHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ModalHeader.ModalHeader, { children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ModalTitle.ModalTitle, { children: title }), withCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ModalCloseButton.ModalCloseButton, { ...closeButtonProps })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ModalBody.ModalBody, { children })]
})]
});
});
Modal.classes = require_Modal_module.default;
Modal.displayName = "@mantine/core/Modal";
Modal.Root = require_ModalRoot.ModalRoot;
Modal.Overlay = require_ModalOverlay.ModalOverlay;
Modal.Content = require_ModalContent.ModalContent;
Modal.Body = require_ModalBody.ModalBody;
Modal.Header = require_ModalHeader.ModalHeader;
Modal.Title = require_ModalTitle.ModalTitle;
Modal.CloseButton = require_ModalCloseButton.ModalCloseButton;
Modal.Stack = require_ModalStack.ModalStack;
//#endregion
exports.Modal = Modal;
//# sourceMappingURL=Modal.cjs.map