@yamada-ui/modal
Version:
Yamada UI modal component
155 lines (153 loc) • 4.61 kB
JavaScript
"use client"
import {
ModalContent
} from "./chunk-FXMVCPK5.mjs";
import {
DrawerContent
} from "./chunk-XYURL3FF.mjs";
import {
DrawerOverlay
} from "./chunk-ZMEZYJLF.mjs";
import {
DialogOverlay
} from "./chunk-V6LGJTK2.mjs";
import {
ModalOverlay
} from "./chunk-XDFGVPCC.mjs";
import {
ModalProvider
} from "./chunk-64A25YOZ.mjs";
// src/modal.tsx
import { omitThemeProps, ui, useComponentMultiStyle } from "@yamada-ui/core";
import { FocusLock } from "@yamada-ui/focus-lock";
import { AnimatePresence, motionForwardRef } from "@yamada-ui/motion";
import { Portal } from "@yamada-ui/portal";
import { useValue } from "@yamada-ui/use-value";
import { findChild, findChildren, getValidChildren } from "@yamada-ui/utils";
import { cloneElement, useCallback, useRef } from "react";
import { RemoveScroll } from "react-remove-scroll";
import { jsx, jsxs } from "react/jsx-runtime";
var Modal = motionForwardRef(
({ size, ...props }, ref) => {
const [styles, mergedProps] = useComponentMultiStyle("Modal", {
size,
...props
});
const {
className,
allowPinchZoom = false,
animation = "scale",
autoFocus,
blockScrollOnMount = true,
children,
closeOnEsc = true,
closeOnOverlay = true,
duration,
finalFocusRef,
initialFocusRef,
isOpen,
lockFocusAcrossFrames = true,
open = isOpen,
outside = "fallback(4, 1rem)",
placement: _placement = "center",
restoreFocus,
scrollBehavior = "inside",
withCloseButton = true,
withOverlay = true,
containerProps,
portalProps,
onClose,
onCloseComplete,
onEsc,
onOverlayClick,
...rest
} = omitThemeProps(mergedProps);
const headerRef = useRef(null);
const bodyRef = useRef(null);
const placement = useValue(_placement);
const validChildren = getValidChildren(children);
const [customModalOverlay, ...cloneChildren] = findChildren(
validChildren,
ModalOverlay,
DialogOverlay,
DrawerOverlay
);
const css = {
alignItems: placement.includes("top") ? "flex-start" : placement.includes("bottom") ? "flex-end" : "center",
display: "flex",
h: "100dvh",
justifyContent: placement.includes("left") ? "flex-start" : placement.includes("right") ? "flex-end" : "center",
left: 0,
p: size !== "full" ? outside : void 0,
position: "fixed",
top: 0,
w: "100vw",
zIndex: "fallback(jeice, 110)"
};
const onKeyDown = useCallback(
(ev) => {
if (ev.key !== "Escape") return;
ev.stopPropagation();
if (closeOnEsc) onClose == null ? void 0 : onClose();
onEsc == null ? void 0 : onEsc();
},
[closeOnEsc, onClose, onEsc]
);
let drawerContent = findChild(validChildren, DrawerContent);
if (drawerContent)
drawerContent = cloneElement(drawerContent, { onKeyDown });
return /* @__PURE__ */ jsx(
ModalProvider,
{
value: {
animation,
bodyRef,
closeOnOverlay,
duration,
headerRef,
open,
scrollBehavior,
styles,
withCloseButton,
onClose,
onOverlayClick
},
children: /* @__PURE__ */ jsx(AnimatePresence, { onExitComplete: onCloseComplete, children: open ? /* @__PURE__ */ jsx(Portal, { ...portalProps, children: /* @__PURE__ */ jsx(
FocusLock,
{
autoFocus,
finalFocusRef,
initialFocusRef,
lockFocusAcrossFrames,
restoreFocus,
children: /* @__PURE__ */ jsx(
RemoveScroll,
{
allowPinchZoom,
enabled: blockScrollOnMount,
forwardProps: true,
children: /* @__PURE__ */ jsxs(ui.div, { __css: css, ...containerProps, children: [
customModalOverlay != null ? customModalOverlay : withOverlay && size !== "full" ? /* @__PURE__ */ jsx(ModalOverlay, {}) : null,
drawerContent != null ? drawerContent : /* @__PURE__ */ jsx(
ModalContent,
{
ref,
className,
onKeyDown,
...rest,
children: cloneChildren
}
)
] })
}
)
}
) }) : null })
}
);
}
);
export {
Modal
};
//# sourceMappingURL=chunk-SA5RYCAR.mjs.map