@yamada-ui/react/dist/cjs/components/modal/modal.cjs

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_children = require('../../utils/children.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_factory$1 = require('../motion/factory.cjs');
const require_portal = require('../portal/portal.cjs');
const require_popover = require('../popover/popover.cjs');
const require_button = require('../button/button.cjs');
const require_close_button = require('../close-button/close-button.cjs');
const require_modal_style = require('./modal.style.cjs');
const require_fade = require('../fade/fade.cjs');
const require_focus_lock = require('../focus-lock/focus-lock.cjs');
const require_use_modal = require('./use-modal.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
let motion_react = require("motion/react");
motion_react = require_rolldown_runtime.__toESM(motion_react);
let react_remove_scroll = require("react-remove-scroll");
react_remove_scroll = require_rolldown_runtime.__toESM(react_remove_scroll);

//#region src/components/modal/modal.tsx
const { ComponentContext, PropsContext: ModalPropsContext, useComponentContext, usePropsContext: useModalPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("modal", require_modal_style.modalStyle);
/**
* `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.
*
* @see https://yamada-ui.com/docs/components/overlay/modal
*/
const ModalRoot = withProvider(({ allowPinchZoom = false, animationScheme = "scale", autoFocus, blockScrollOnMount = true, body, cancel, children, duration, finalFocusRef, footer, header, initialFocusRef, lockFocusAcrossFrames = true, middle, restoreFocus, success, title, trigger, withCloseButton = true, withOverlay = true, portalProps, onCancel, onCloseComplete, onMiddle, onSuccess,...props }) => {
	const [omittedChildren, openTrigger, customOverlay] = require_children.useSplitChildren(children, ModalOpenTrigger, ModalOverlay);
	const hasChildren = (0, require_utils_index.utils_exports.isArray)(omittedChildren) && !!omittedChildren.length;
	const { open, getRootProps,...rest } = require_use_modal.useModal(props);
	const customOpenTrigger = trigger ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalOpenTrigger, { children: trigger }) : null;
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ComponentContext, {
		value: (0, react.useMemo)(() => ({
			animationScheme,
			duration,
			open,
			withCloseButton,
			...rest
		}), [
			animationScheme,
			duration,
			open,
			withCloseButton,
			rest
		]),
		children: [openTrigger ?? customOpenTrigger, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, {
			onExitComplete: onCloseComplete,
			children: open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_portal.Portal, {
				...portalProps,
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_focus_lock.FocusLock, {
					autoFocus,
					finalFocusRef,
					initialFocusRef,
					lockFocusAcrossFrames,
					restoreFocus,
					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_remove_scroll.RemoveScroll, {
						allowPinchZoom,
						enabled: blockScrollOnMount,
						forwardProps: true,
						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
							...getRootProps(),
							children: [customOverlay ?? (withOverlay ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalOverlay, {}) : null), hasChildren ? omittedChildren : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShorthandModalContent, {
								body,
								cancel,
								footer,
								header,
								middle,
								success,
								title,
								onCancel,
								onMiddle,
								onSuccess
							})]
						})
					})
				})
			}) : null
		})]
	});
}, "root")();
const ModalOpenTrigger = withContext("button", {
	name: "OpenTrigger",
	slot: ["trigger", "open"]
})(void 0, (props) => {
	const { getOpenTriggerProps } = useComponentContext();
	return {
		asChild: true,
		...getOpenTriggerProps(props)
	};
});
const ModalCloseTrigger = withContext("button", {
	name: "CloseTrigger",
	slot: ["trigger", "close"]
})(void 0, (props) => {
	const { getCloseTriggerProps } = useComponentContext();
	return {
		asChild: true,
		...getCloseTriggerProps(props)
	};
});
const ModalCloseButton = withContext(require_close_button.CloseButton, "closeButton")(void 0, (props) => {
	const { getCloseButtonProps } = useComponentContext();
	return { ...getCloseButtonProps(props) };
});
const ModalOverlay = withContext((props) => {
	const { animationScheme, duration, getOverlayProps } = useComponentContext();
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory$1.motion.div, {
		custom: { duration },
		...animationScheme !== "none" ? {
			animate: "enter",
			exit: "exit",
			initial: "exit",
			variants: require_fade.fadeVariants
		} : {},
		...(0, require_utils_index.utils_exports.cast)(getOverlayProps((0, require_utils_index.utils_exports.cast)(props)))
	});
}, "overlay")();
const ModalContent = withContext(({ children,...rest }) => {
	const { animationScheme, duration, withCloseButton, getContentProps } = useComponentContext();
	const [omittedChildren, customCloseButton] = require_children.useSplitChildren(children, ModalCloseButton);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory$1.motion.section, {
		...require_popover.getPopupAnimationProps(animationScheme, duration),
		...(0, require_utils_index.utils_exports.cast)(getContentProps((0, require_utils_index.utils_exports.cast)(rest))),
		children: [customCloseButton ?? (withCloseButton ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalCloseButton, {}) : null), omittedChildren]
	});
}, "content")();
const ShorthandModalContent = ({ body, cancel, footer, header, middle, success, title, onCancel, onMiddle, onSuccess }) => {
	const { onClose } = useComponentContext();
	const customHeader = require_children.wrapOrPassProps(ModalHeader, header);
	const customTitle = require_children.wrapOrPassProps(ModalTitle, title);
	const customBody = require_children.wrapOrPassProps(ModalBody, body);
	const customFooter = require_children.wrapOrPassProps(ModalFooter, footer);
	const customCancel = require_children.wrapOrPassProps(require_button.Button, cancel, {
		colorScheme: "mono",
		variant: "ghost",
		onClick: () => onCancel ? onCancel(onClose) : onClose()
	});
	const customMiddle = require_children.wrapOrPassProps(require_button.Button, middle, {
		colorScheme: "secondary",
		onClick: () => onMiddle ? onMiddle(onClose) : onClose()
	});
	const customSuccess = require_children.wrapOrPassProps(require_button.Button, success, {
		colorScheme: "primary",
		onClick: () => onSuccess ? onSuccess(onClose) : onClose()
	});
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ModalContent, { children: [
		customHeader ?? (customTitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalHeader, { children: customTitle }) : null),
		customBody,
		customFooter ?? (customCancel || customMiddle || customSuccess ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ModalFooter, { children: [
			customCancel,
			customMiddle,
			customSuccess
		] }) : null)
	] });
};
const ModalHeader = withContext("header", "header")(void 0, (props) => {
	const { getHeaderProps } = useComponentContext();
	return { ...getHeaderProps(props) };
});
const ModalTitle = withContext("h2", "title")(void 0, (props) => {
	const { getTitleProps } = useComponentContext();
	return { ...getTitleProps(props) };
});
const ModalBody = withContext("div", "body")(void 0, (props) => {
	const { getBodyProps } = useComponentContext();
	return { ...getBodyProps(props) };
});
const ModalFooter = withContext("footer", "footer")(void 0, (props) => {
	const { getFooterProps } = useComponentContext();
	return { ...getFooterProps(props) };
});

//#endregion
exports.ModalBody = ModalBody;
exports.ModalCloseButton = ModalCloseButton;
exports.ModalCloseTrigger = ModalCloseTrigger;
exports.ModalContent = ModalContent;
exports.ModalFooter = ModalFooter;
exports.ModalHeader = ModalHeader;
exports.ModalOpenTrigger = ModalOpenTrigger;
exports.ModalOverlay = ModalOverlay;
exports.ModalPropsContext = ModalPropsContext;
exports.ModalRoot = ModalRoot;
exports.ModalTitle = ModalTitle;
exports.useModalPropsContext = useModalPropsContext;
//# sourceMappingURL=modal.cjs.map