@yamada-ui/modal
Version:
Yamada UI modal component
1,105 lines (1,073 loc) • 36.6 kB
JavaScript
"use client"
"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var index_exports = {};
__export(index_exports, {
Dialog: () => Dialog,
DialogBody: () => DialogBody,
DialogCloseButton: () => DialogCloseButton,
DialogFooter: () => DialogFooter,
DialogHeader: () => DialogHeader,
DialogOverlay: () => DialogOverlay,
Drawer: () => Drawer,
DrawerBody: () => DrawerBody,
DrawerCloseButton: () => DrawerCloseButton,
DrawerFooter: () => DrawerFooter,
DrawerHeader: () => DrawerHeader,
DrawerOverlay: () => DrawerOverlay,
Modal: () => Modal,
ModalBody: () => ModalBody,
ModalCloseButton: () => ModalCloseButton,
ModalFooter: () => ModalFooter,
ModalHeader: () => ModalHeader,
ModalOverlay: () => ModalOverlay
});
module.exports = __toCommonJS(index_exports);
// src/dialog.tsx
var import_button = require("@yamada-ui/button");
var import_core13 = require("@yamada-ui/core");
var import_motion7 = require("@yamada-ui/motion");
var import_utils18 = require("@yamada-ui/utils");
// src/dialog-body.tsx
var import_core2 = require("@yamada-ui/core");
var import_utils3 = require("@yamada-ui/utils");
// src/modal-body.tsx
var import_core = require("@yamada-ui/core");
var import_utils2 = require("@yamada-ui/utils");
// src/modal-context.ts
var import_utils = require("@yamada-ui/utils");
var [ModalProvider, useModal] = (0, import_utils.createContext)({
name: `ModalContext`,
errorMessage: `useModal returned is 'undefined'. Seems you forgot to wrap the components in "<Modal />" `
});
var [DialogProvider, useDialog] = (0, import_utils.createContext)({
name: `DialogContext`,
errorMessage: `useDialog returned is 'undefined'. Seems you forgot to wrap the components in "<Dialog />" `
});
var [DrawerProvider, useDrawer] = (0, import_utils.createContext)({
name: `DrawerContext`,
errorMessage: `useDrawer returned is 'undefined'. Seems you forgot to wrap the components in "<Drawer />" `
});
// src/modal-body.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var ModalBody = (0, import_core.forwardRef)(
({ className, __css, ...rest }, ref) => {
const { bodyRef, scrollBehavior, styles } = useModal();
const css = {
alignItems: "flex-start",
display: "flex",
flexDirection: "column",
overflow: scrollBehavior === "inside" ? "auto" : void 0,
...__css ? __css : styles.body
};
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_core.ui.div,
{
ref: (0, import_utils2.mergeRefs)(bodyRef, ref),
className: (0, import_utils2.cx)("ui-modal__body", className),
__css: css,
...rest
}
);
}
);
ModalBody.displayName = "ModalBody";
ModalBody.__ui__ = "ModalBody";
// src/dialog-body.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var DialogBody = (0, import_core2.forwardRef)(
({ className, ...rest }, ref) => {
const styles = useDialog();
const css = { ...styles.body };
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
ModalBody,
{
ref,
className: (0, import_utils3.cx)("ui-dialog__body", className),
__css: css,
...rest
}
);
}
);
DialogBody.displayName = "DialogBody";
DialogBody.__ui__ = "DialogBody";
// src/dialog-close-button.tsx
var import_core4 = require("@yamada-ui/core");
var import_utils5 = require("@yamada-ui/utils");
// src/modal-close-button.tsx
var import_close_button = require("@yamada-ui/close-button");
var import_core3 = require("@yamada-ui/core");
var import_utils4 = require("@yamada-ui/utils");
var import_jsx_runtime3 = require("react/jsx-runtime");
var ModalCloseButton = (0, import_core3.forwardRef)(
({ onClick, __css, ...rest }, ref) => {
const { styles, onClose } = useModal();
const css = {
position: "absolute",
...__css ? __css : styles.closeButton
};
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_close_button.CloseButton,
{
ref,
className: (0, import_utils4.cx)("ui-modal__close-button"),
"aria-label": "Close modal",
onClick: (0, import_utils4.handlerAll)(onClick, (ev) => {
ev.stopPropagation();
onClose == null ? void 0 : onClose();
}),
__css: css,
...rest
}
);
}
);
ModalCloseButton.displayName = "ModalCloseButton";
ModalCloseButton.__ui__ = "ModalCloseButton";
// src/dialog-close-button.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var DialogCloseButton = (0, import_core4.forwardRef)(
({ className, ...rest }, ref) => {
const styles = useDialog();
const css = { ...styles.closeButton };
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
ModalCloseButton,
{
ref,
className: (0, import_utils5.cx)("ui-dialog__close-button", className),
"aria-label": "Close dialog",
__css: css,
...rest
}
);
}
);
DialogCloseButton.displayName = "DialogCloseButton";
DialogCloseButton.__ui__ = "DialogCloseButton";
// src/dialog-footer.tsx
var import_core6 = require("@yamada-ui/core");
var import_utils7 = require("@yamada-ui/utils");
// src/modal-footer.tsx
var import_core5 = require("@yamada-ui/core");
var import_utils6 = require("@yamada-ui/utils");
var import_jsx_runtime5 = require("react/jsx-runtime");
var ModalFooter = (0, import_core5.forwardRef)(
({ className, __css, ...rest }, ref) => {
const { styles } = useModal();
const css = {
alignItems: "center",
display: "flex",
justifyContent: "flex-end",
...__css ? __css : styles.footer
};
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
import_core5.ui.footer,
{
ref,
className: (0, import_utils6.cx)("ui-modal__footer", className),
__css: css,
...rest
}
);
}
);
ModalFooter.displayName = "ModalFooter";
ModalFooter.__ui__ = "ModalFooter";
// src/dialog-footer.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var DialogFooter = (0, import_core6.forwardRef)(
({ className, ...rest }, ref) => {
const styles = useDialog();
const css = { ...styles.footer };
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
ModalFooter,
{
ref,
className: (0, import_utils7.cx)("ui-dialog__footer", className),
__css: css,
...rest
}
);
}
);
DialogFooter.displayName = "DialogFooter";
DialogFooter.__ui__ = "DialogFooter";
// src/dialog-header.tsx
var import_core8 = require("@yamada-ui/core");
var import_utils9 = require("@yamada-ui/utils");
// src/modal-header.tsx
var import_core7 = require("@yamada-ui/core");
var import_utils8 = require("@yamada-ui/utils");
var import_jsx_runtime7 = require("react/jsx-runtime");
var ModalHeader = (0, import_core7.forwardRef)(
({ className, __css, ...rest }, ref) => {
const { headerRef, styles } = useModal();
const css = {
alignItems: "center",
display: "flex",
justifyContent: "flex-start",
...__css ? __css : styles.header
};
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
import_core7.ui.header,
{
ref: (0, import_utils8.mergeRefs)(headerRef, ref),
className: (0, import_utils8.cx)("ui-modal__header", className),
__css: css,
...rest
}
);
}
);
ModalHeader.displayName = "ModalHeader";
ModalHeader.__ui__ = "ModalHeader";
// src/dialog-header.tsx
var import_jsx_runtime8 = require("react/jsx-runtime");
var DialogHeader = (0, import_core8.forwardRef)(
({ className, ...rest }, ref) => {
const styles = useDialog();
const css = { ...styles.header };
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
ModalHeader,
{
ref,
className: (0, import_utils9.cx)("ui-dialog__header", className),
__css: css,
...rest
}
);
}
);
DialogHeader.displayName = "DialogHeader";
DialogHeader.__ui__ = "DialogHeader";
// src/dialog-overlay.tsx
var import_motion2 = require("@yamada-ui/motion");
var import_utils11 = require("@yamada-ui/utils");
// src/modal-overlay.tsx
var import_motion = require("@yamada-ui/motion");
var import_transitions = require("@yamada-ui/transitions");
var import_utils10 = require("@yamada-ui/utils");
var import_jsx_runtime9 = require("react/jsx-runtime");
var ModalOverlay = (0, import_motion.motionForwardRef)(
({ className, onClick, __css, ...rest }, ref) => {
const {
animation,
closeOnOverlay,
duration,
styles,
onClose,
onOverlayClick
} = useModal();
const css = {
h: "100dvh",
left: 0,
position: "fixed",
top: 0,
w: "100vw",
...__css ? __css : styles.overlay
};
const props = animation !== "none" ? import_transitions.fadeProps : {};
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
import_motion.motion.div,
{
ref,
className: (0, import_utils10.cx)("ui-modal__overlay", className),
"aria-hidden": true,
custom: { duration },
onClick: (0, import_utils10.handlerAll)(onClick, onOverlayClick, (ev) => {
ev.stopPropagation();
if (closeOnOverlay) onClose == null ? void 0 : onClose();
}),
__css: css,
...props,
...rest
}
);
}
);
ModalOverlay.displayName = "ModalOverlay";
ModalOverlay.__ui__ = "ModalOverlay";
// src/dialog-overlay.tsx
var import_jsx_runtime10 = require("react/jsx-runtime");
var DialogOverlay = (0, import_motion2.motionForwardRef)(
({ className, ...rest }, ref) => {
const styles = useDialog();
const css = { ...styles.overlay };
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
ModalOverlay,
{
ref,
className: (0, import_utils11.cx)("ui-dialog__overlay", className),
__css: css,
...rest
}
);
}
);
DialogOverlay.displayName = "DialogOverlay";
DialogOverlay.__ui__ = "DialogOverlay";
// src/modal.tsx
var import_core12 = require("@yamada-ui/core");
var import_focus_lock = require("@yamada-ui/focus-lock");
var import_motion6 = require("@yamada-ui/motion");
var import_portal = require("@yamada-ui/portal");
var import_use_value2 = require("@yamada-ui/use-value");
var import_utils17 = require("@yamada-ui/utils");
var import_react2 = require("react");
var import_react_remove_scroll = require("react-remove-scroll");
// src/drawer-content.tsx
var import_core11 = require("@yamada-ui/core");
var import_motion3 = require("@yamada-ui/motion");
var import_transitions2 = require("@yamada-ui/transitions");
var import_use_value = require("@yamada-ui/use-value");
var import_utils14 = require("@yamada-ui/utils");
var import_react = require("react");
// src/drawer-close-button.tsx
var import_core9 = require("@yamada-ui/core");
var import_utils12 = require("@yamada-ui/utils");
var import_jsx_runtime11 = require("react/jsx-runtime");
var DrawerCloseButton = (0, import_core9.forwardRef)(
({ className, ...rest }, ref) => {
const styles = useDrawer();
const css = { ...styles.closeButton };
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
ModalCloseButton,
{
ref,
className: (0, import_utils12.cx)("ui-drawer__close-button", className),
__css: css,
...rest
}
);
}
);
DrawerCloseButton.displayName = "DrawerCloseButton";
DrawerCloseButton.__ui__ = "DrawerCloseButton";
// src/drawer-drag-bar.tsx
var import_core10 = require("@yamada-ui/core");
var import_utils13 = require("@yamada-ui/utils");
var import_jsx_runtime12 = require("react/jsx-runtime");
var DrawerDragBar = (0, import_core10.forwardRef)(
({ className, __css, ...rest }, ref) => {
const styles = useDrawer();
const css = { ...styles.dragBar };
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
import_core10.ui.div,
{
ref,
className: (0, import_utils13.cx)("ui-drawer__drag-bar", className),
__css: css,
...rest
}
);
}
);
DrawerDragBar.displayName = "DrawerDragBar";
DrawerDragBar.__ui__ = "DrawerDragBar";
// src/drawer-content.tsx
var import_jsx_runtime13 = require("react/jsx-runtime");
var DrawerContent = (0, import_motion3.motionForwardRef)(
({
className,
children,
closeOnDrag,
dragConstraints,
dragElastic,
dragOffset,
dragVelocity,
placement: _placement,
withCloseButton,
withDragBar,
blankForDragProps,
...rest
}, ref) => {
var _a, _b;
const { bodyRef, duration, headerRef, open, onClose } = useModal();
const styles = useDrawer();
const placement = (0, import_use_value.useValue)(_placement);
const validChildren = (0, import_utils14.getValidChildren)(children);
const [customDrawerCloseButton, ...cloneChildren] = (0, import_utils14.findChildren)(
validChildren,
DrawerCloseButton
);
const blankForDragBg = (0, import_react.useMemo)(() => {
var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j;
const propBg = (_c = (_b2 = (_a2 = rest.backgroundColor) != null ? _a2 : rest.bgColor) != null ? _b2 : rest.background) != null ? _c : rest.bg;
const styleBg = (_j = (_h = (_f = (_d = styles.container) == null ? void 0 : _d.backgroundColor) != null ? _f : (_e = styles.container) == null ? void 0 : _e.bgColor) != null ? _h : (_g = styles.container) == null ? void 0 : _g.background) != null ? _j : (_i = styles.container) == null ? void 0 : _i.bg;
const computedBg = propBg != null ? propBg : styleBg;
return (0, import_utils14.isArray)(computedBg) ? computedBg : [computedBg];
}, [rest, styles]);
const blankForDrag = (0, import_react.useMemo)(() => {
let position = {};
switch (placement) {
case "top":
position = { left: 0, right: 0, top: "calc(-100dvh + 1px)" };
break;
case "bottom":
position = { bottom: "calc(-100dvh + 1px)", left: 0, right: 0 };
break;
case "left":
position = { bottom: 0, left: "calc(-100% + 1px)", top: 0 };
break;
case "right":
position = { bottom: 0, right: "calc(-100% + 1px)", top: 0 };
break;
}
const [lightBg, darkBg] = blankForDragBg;
return {
_after: {
bg: lightBg,
content: '""',
display: "block",
h: "100dvh",
position: "absolute",
w: "100%",
...position,
...blankForDragProps
},
_dark: {
_after: {
bg: darkBg
}
}
};
}, [placement, blankForDragBg, blankForDragProps]);
const css = (0, import_react.useMemo)(
() => ({
display: "flex",
flexDirection: placement === "top" || placement === "bottom" ? "column" : "row",
outline: 0,
...closeOnDrag ? blankForDrag : {},
...styles.container
}),
[blankForDrag, closeOnDrag, placement, styles]
);
const getDragDirectionRestriction = (0, import_react.useCallback)(
(value) => {
switch (placement) {
case "top":
return { bottom: value };
case "bottom":
return { top: value };
case "left":
return { right: value };
case "right":
return { left: value };
}
},
[placement]
);
const getDragDirection = (0, import_react.useCallback)(() => {
switch (placement) {
case "top":
case "bottom":
return "y";
case "left":
case "right":
return "x";
}
}, [placement]);
const isCloseByDragInfo = (0, import_react.useCallback)(
(info) => {
switch (placement) {
case "top":
return info.velocity.y <= dragVelocity * -1 || info.offset.y <= dragOffset * -1;
case "bottom":
return info.velocity.y >= dragVelocity || info.offset.y >= dragOffset;
case "left":
return info.velocity.x <= dragVelocity * -1 || info.offset.x <= dragOffset * -1;
case "right":
return info.velocity.x >= dragVelocity || info.offset.x >= dragOffset;
}
},
[placement, dragVelocity, dragOffset]
);
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
import_transitions2.Slide,
{
ref,
className: (0, import_utils14.cx)("ui-drawer", className),
"aria-describedby": (_a = bodyRef.current) == null ? void 0 : _a.id,
"aria-labelledby": (_b = headerRef.current) == null ? void 0 : _b.id,
"aria-modal": "true",
drag: closeOnDrag ? getDragDirection() : false,
dragConstraints: getDragDirectionRestriction(dragConstraints),
dragElastic: getDragDirectionRestriction(dragElastic),
dragMomentum: false,
dragSnapToOrigin: true,
duration,
isOpen: open,
placement,
role: "dialog",
tabIndex: -1,
onDragEnd: (_, info) => {
if (isCloseByDragInfo(info)) onClose == null ? void 0 : onClose();
},
__css: css,
...rest,
children: [
customDrawerCloseButton != null ? customDrawerCloseButton : withCloseButton && onClose ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DrawerCloseButton, {}) : null,
withDragBar && closeOnDrag && (placement === "bottom" || placement === "right") ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DrawerDragBar, {}) : null,
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
import_core11.ui.div,
{
className: "ui-drawer__inner",
__css: {
display: "flex",
flexDirection: "column",
w: "100%",
...styles.inner
},
children: cloneChildren
}
),
withDragBar && closeOnDrag && (placement === "top" || placement === "left") ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DrawerDragBar, {}) : null
]
}
);
}
);
DrawerContent.displayName = "DrawerContent";
DrawerContent.__ui__ = "DrawerContent";
// src/drawer-overlay.tsx
var import_motion4 = require("@yamada-ui/motion");
var import_utils15 = require("@yamada-ui/utils");
var import_jsx_runtime14 = require("react/jsx-runtime");
var DrawerOverlay = (0, import_motion4.motionForwardRef)(
({ className, ...rest }, ref) => {
const styles = useDrawer();
const css = { ...styles.overlay };
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
ModalOverlay,
{
ref,
className: (0, import_utils15.cx)("ui-drawer__overlay", className),
__css: css,
...rest
}
);
}
);
DrawerOverlay.displayName = "DrawerOverlay";
DrawerOverlay.__ui__ = "DrawerOverlay";
// src/modal-content.tsx
var import_motion5 = require("@yamada-ui/motion");
var import_transitions3 = require("@yamada-ui/transitions");
var import_utils16 = require("@yamada-ui/utils");
var import_jsx_runtime15 = require("react/jsx-runtime");
var getModalContentProps = (animation = "scale", duration) => {
switch (animation) {
case "scale":
return {
...import_transitions3.scaleFadeProps,
custom: { duration, reverse: true, scale: 0.95 }
};
case "top":
return {
...import_transitions3.slideFadeProps,
custom: { duration, offsetY: -16, reverse: true }
};
case "right":
return {
...import_transitions3.slideFadeProps,
custom: { duration, offsetX: 16, reverse: true }
};
case "left":
return {
...import_transitions3.slideFadeProps,
custom: { duration, offsetX: -16, reverse: true }
};
case "bottom":
return {
...import_transitions3.slideFadeProps,
custom: { duration, offsetY: 16, reverse: true }
};
}
};
var ModalContent = (0, import_motion5.motionForwardRef)(
({ className, children, __css, ...rest }, ref) => {
var _a, _b;
const {
animation,
bodyRef,
duration,
headerRef,
scrollBehavior,
styles,
withCloseButton,
onClose
} = useModal();
const validChildren = (0, import_utils16.getValidChildren)(children);
const [customModalCloseButton, ...cloneChildren] = (0, import_utils16.findChildren)(
validChildren,
ModalCloseButton,
DialogCloseButton
);
const props = animation !== "none" ? getModalContentProps(animation, duration) : {};
const css = {
display: "flex",
flexDirection: "column",
maxH: "100%",
outline: 0,
overflow: scrollBehavior === "inside" ? "hidden" : "auto",
position: "relative",
...__css ? __css : styles.container
};
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
import_motion5.motion.section,
{
ref,
className: (0, import_utils16.cx)("ui-modal", className),
"aria-describedby": (_a = bodyRef.current) == null ? void 0 : _a.id,
"aria-labelledby": (_b = headerRef.current) == null ? void 0 : _b.id,
"aria-modal": "true",
role: "dialog",
tabIndex: -1,
__css: css,
...props,
...rest,
children: [
customModalCloseButton != null ? customModalCloseButton : withCloseButton && onClose ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ModalCloseButton, {}) : null,
cloneChildren
]
}
);
}
);
ModalContent.displayName = "ModalContent";
ModalContent.__ui__ = "ModalContent";
// src/modal.tsx
var import_jsx_runtime16 = require("react/jsx-runtime");
var Modal = (0, import_motion6.motionForwardRef)(
({ size, ...props }, ref) => {
const [styles, mergedProps] = (0, import_core12.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
} = (0, import_core12.omitThemeProps)(mergedProps);
const headerRef = (0, import_react2.useRef)(null);
const bodyRef = (0, import_react2.useRef)(null);
const placement = (0, import_use_value2.useValue)(_placement);
const validChildren = (0, import_utils17.getValidChildren)(children);
const [customModalOverlay, ...cloneChildren] = (0, import_utils17.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 = (0, import_react2.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 = (0, import_utils17.findChild)(validChildren, DrawerContent);
if (drawerContent)
drawerContent = (0, import_react2.cloneElement)(drawerContent, { onKeyDown });
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
ModalProvider,
{
value: {
animation,
bodyRef,
closeOnOverlay,
duration,
headerRef,
open,
scrollBehavior,
styles,
withCloseButton,
onClose,
onOverlayClick
},
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_motion6.AnimatePresence, { onExitComplete: onCloseComplete, children: open ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
import_focus_lock.FocusLock,
{
autoFocus,
finalFocusRef,
initialFocusRef,
lockFocusAcrossFrames,
restoreFocus,
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
import_react_remove_scroll.RemoveScroll,
{
allowPinchZoom,
enabled: blockScrollOnMount,
forwardProps: true,
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_core12.ui.div, { __css: css, ...containerProps, children: [
customModalOverlay != null ? customModalOverlay : withOverlay && size !== "full" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ModalOverlay, {}) : null,
drawerContent != null ? drawerContent : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
ModalContent,
{
ref,
className,
onKeyDown,
...rest,
children: cloneChildren
}
)
] })
}
)
}
) }) : null })
}
);
}
);
// src/dialog.tsx
var import_jsx_runtime17 = require("react/jsx-runtime");
var Dialog = (0, import_motion7.motionForwardRef)(
({ size, ...props }, ref) => {
const [styles, mergedProps] = (0, import_core13.useComponentMultiStyle)("Dialog", {
size,
...props
});
const {
className,
cancel,
children,
footer,
header,
other,
success,
withCloseButton = true,
withOverlay = true,
containerProps,
onCancel,
onClose,
onOther,
onSuccess,
...rest
} = (0, import_core13.omitThemeProps)(mergedProps);
const validChildren = (0, import_utils18.getValidChildren)(children);
const customDialogOverlay = (0, import_utils18.findChild)(validChildren, DialogOverlay);
const customDialogCloseButton = (0, import_utils18.findChild)(validChildren, DialogCloseButton);
const customDialogHeader = (0, import_utils18.findChild)(validChildren, DialogHeader);
const customDialogBody = (0, import_utils18.findChild)(validChildren, DialogBody);
const customDialogFooter = (0, import_utils18.findChild)(validChildren, DialogFooter);
const cloneChildren = !(0, import_utils18.isEmpty)(validChildren) ? (0, import_utils18.omitChildren)(
validChildren,
DialogOverlay,
DialogCloseButton,
DialogHeader,
DialogBody,
DialogFooter
) : children;
const css = { ...styles.container };
const cancelButtonProps = (0, import_utils18.isValidElement)(cancel) || (0, import_utils18.isUndefined)(cancel) ? { children: cancel } : cancel;
const otherButtonProps = (0, import_utils18.isValidElement)(other) || (0, import_utils18.isUndefined)(other) ? { children: other } : other;
const successButtonProps = (0, import_utils18.isValidElement)(success) || (0, import_utils18.isUndefined)(success) ? { children: success } : success;
if (!cancelButtonProps.variant) cancelButtonProps.variant = "ghost";
if (!otherButtonProps.colorScheme)
otherButtonProps.colorScheme = "secondary";
if (!successButtonProps.colorScheme)
successButtonProps.colorScheme = "primary";
const hasCancelButton = !!cancelButtonProps.children;
const hasOtherButton = !!otherButtonProps.children;
const hasSuccessButton = !!successButtonProps.children;
const hasFooter = hasCancelButton || hasOtherButton || hasSuccessButton;
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DialogProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
Modal,
{
ref,
className: (0, import_utils18.cx)("ui-dialog", className),
__css: css,
...{
withCloseButton: false,
withOverlay: false,
containerProps,
onClose,
...rest,
size
},
children: [
customDialogOverlay != null ? customDialogOverlay : withOverlay && size !== "full" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DialogOverlay, {}) : null,
customDialogCloseButton != null ? customDialogCloseButton : withCloseButton && onClose ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DialogCloseButton, {}) : null,
customDialogHeader != null ? customDialogHeader : header ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DialogHeader, { children: header }) : null,
customDialogBody != null ? customDialogBody : cloneChildren ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DialogBody, { children: cloneChildren }) : null,
customDialogFooter != null ? customDialogFooter : footer || hasFooter ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DialogFooter, { children: footer != null ? footer : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
hasCancelButton ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
import_button.Button,
{
onClick: () => onCancel == null ? void 0 : onCancel(onClose),
...cancelButtonProps
}
) : null,
hasOtherButton ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
import_button.Button,
{
onClick: () => onOther == null ? void 0 : onOther(onClose),
...otherButtonProps
}
) : null,
hasSuccessButton ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
import_button.Button,
{
onClick: () => onSuccess == null ? void 0 : onSuccess(onClose),
...successButtonProps
}
) : null
] }) }) : null
]
}
) });
}
);
Dialog.displayName = "Dialog";
Dialog.__ui__ = "Dialog";
// src/drawer.tsx
var import_core14 = require("@yamada-ui/core");
var import_motion8 = require("@yamada-ui/motion");
var import_utils19 = require("@yamada-ui/utils");
var import_jsx_runtime18 = require("react/jsx-runtime");
var Drawer = (0, import_motion8.motionForwardRef)(
({
size,
closeOnDrag = false,
isFullHeight,
fullHeight = isFullHeight,
placement = "right",
...props
}, ref) => {
const [styles, mergedProps] = (0, import_core14.useComponentMultiStyle)("Drawer", {
size,
closeOnDrag,
fullHeight,
placement,
...props
});
const {
allowPinchZoom,
autoFocus,
blockScrollOnMount,
children,
closeOnEsc,
closeOnOverlay,
dragConstraints = 0,
dragElastic = 0.1,
dragOffset = 80,
dragVelocity = 100,
duration = { enter: 0.4, exit: 0.3 },
finalFocusRef,
initialFocusRef,
isOpen,
lockFocusAcrossFrames,
open = isOpen,
restoreFocus,
withCloseButton = !closeOnDrag,
withDragBar = true,
withOverlay = true,
blankForDragProps,
containerProps,
portalProps,
onClose,
onCloseComplete,
onEsc,
onOverlayClick,
...rest
} = (0, import_core14.omitThemeProps)(mergedProps, ["fullHeight"]);
const validChildren = (0, import_utils19.getValidChildren)(children);
const [customDrawerOverlay, ...cloneChildren] = (0, import_utils19.findChildren)(
validChildren,
DrawerOverlay
);
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DrawerProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
Modal,
{
ref,
...{
allowPinchZoom,
autoFocus,
blockScrollOnMount,
closeOnEsc,
closeOnOverlay,
duration,
finalFocusRef,
initialFocusRef,
isOpen,
lockFocusAcrossFrames,
open,
restoreFocus,
withCloseButton: false,
withOverlay: false,
containerProps,
portalProps,
onClose,
onCloseComplete,
onEsc,
onOverlayClick
},
children: [
customDrawerOverlay != null ? customDrawerOverlay : withOverlay ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DrawerOverlay, {}) : null,
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
DrawerContent,
{
...{
dragConstraints,
dragElastic,
dragOffset,
dragVelocity,
withCloseButton,
withDragBar,
blankForDragProps,
...rest,
closeOnDrag,
placement
},
children: cloneChildren
}
)
]
}
) });
}
);
Drawer.displayName = "Drawer";
Drawer.__ui__ = "Drawer";
// src/drawer-body.tsx
var import_core15 = require("@yamada-ui/core");
var import_utils20 = require("@yamada-ui/utils");
var import_jsx_runtime19 = require("react/jsx-runtime");
var DrawerBody = (0, import_core15.forwardRef)(
({ className, ...rest }, ref) => {
const styles = useDrawer();
const css = { ...styles.body };
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
ModalBody,
{
ref,
className: (0, import_utils20.cx)("ui-drawer__body", className),
__css: css,
...rest
}
);
}
);
DrawerBody.displayName = "DrawerBody";
DrawerBody.__ui__ = "DrawerBody";
// src/drawer-footer.tsx
var import_core16 = require("@yamada-ui/core");
var import_utils21 = require("@yamada-ui/utils");
var import_jsx_runtime20 = require("react/jsx-runtime");
var DrawerFooter = (0, import_core16.forwardRef)(
({ className, ...rest }, ref) => {
const styles = useDrawer();
const css = { ...styles.footer };
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
ModalFooter,
{
ref,
className: (0, import_utils21.cx)("ui-drawer__footer", className),
__css: css,
...rest
}
);
}
);
DrawerFooter.displayName = "DrawerFooter";
DrawerFooter.__ui__ = "DrawerFooter";
// src/drawer-header.tsx
var import_core17 = require("@yamada-ui/core");
var import_utils22 = require("@yamada-ui/utils");
var import_jsx_runtime21 = require("react/jsx-runtime");
var DrawerHeader = (0, import_core17.forwardRef)(
({ className, ...rest }, ref) => {
const styles = useDrawer();
const css = { ...styles.header };
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
ModalHeader,
{
ref,
className: (0, import_utils22.cx)("ui-drawer__header", className),
__css: css,
...rest
}
);
}
);
DrawerHeader.displayName = "DrawerHeader";
DrawerHeader.__ui__ = "DrawerHeader";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Dialog,
DialogBody,
DialogCloseButton,
DialogFooter,
DialogHeader,
DialogOverlay,
Drawer,
DrawerBody,
DrawerCloseButton,
DrawerFooter,
DrawerHeader,
DrawerOverlay,
Modal,
ModalBody,
ModalCloseButton,
ModalFooter,
ModalHeader,
ModalOverlay
});
//# sourceMappingURL=index.js.map