@frontify/fondue
Version:
Design system of Frontify
95 lines (94 loc) • 3.5 kB
JavaScript
import { jsx as t, jsxs as v } from "react/jsx-runtime";
import { useDialog as M } from "@react-aria/dialog";
import { FocusScope as N } from "@react-aria/focus";
import { OverlayContainer as P, useOverlay as g, usePreventScroll as A, useModal as D } from "@react-aria/overlays";
import { AnimatePresence as b, motion as n } from "framer-motion";
import { memo as F, useRef as L } from "react";
import { merge as O } from "../../utilities/merge.es.js";
import { ModalBody as S } from "./ModalBody.es.js";
import { ModalFooter as I } from "./ModalFooter.es.js";
import { ModalHeader as R } from "./ModalHeader.es.js";
import { ModalVisual as j } from "./ModalVisual.es.js";
import { ModalLayout as T, MODAL_PADDING as d } from "./context/ModalLayout.es.js";
import { ModalTitle as V } from "./context/ModalTitle.es.js";
import { ModalWidth as r } from "./types.es.js";
const _ = {
initial: {
opacity: 0
},
show: {
opacity: 1,
transition: {
duration: 0.15
}
},
exit: {
opacity: 0,
transition: {
duration: 0.15
}
}
}, k = {
initial: { y: -200 },
show: { y: 0, transition: { duration: 0.3 } },
exit: { y: 0 }
}, B = {
[r.Default]: "tw-max-w-[800px]",
[r.Small]: "tw-max-w-[600px]",
[r.Large]: "tw-max-w-[1200px]"
}, s = F((e) => {
const { visual: o, children: m, width: w = r.Default, zIndex: c, compact: l = !1 } = e, a = L(null), {
overlayProps: f,
underlayProps: { onPointerDown: p }
} = g(e, a);
A();
const { modalProps: u } = D(), { dialogProps: x, titleProps: h } = M(e, a), y = l ? d.compact : d.default;
return /* @__PURE__ */ t(
n.div,
{
variants: _,
initial: "initial",
animate: "show",
exit: "exit",
style: {
background: "rgba(0, 0, 0, .5)",
zIndex: c
},
onPointerDown: p,
"data-is-underlay": !0,
className: "tw-fixed tw-top-0 tw-left-0 tw-bottom-0 tw-right-0 tw-flex tw-justify-center tw-items-center tw-p-4",
children: /* @__PURE__ */ t(N, { contain: !0, restoreFocus: !0, autoFocus: !0, children: /* @__PURE__ */ t(
n.div,
{
variants: k,
className: O([B[w], "tw-w-full tw-max-h-full tw-h-contents tw-flex tw-flex-col"]),
children: /* @__PURE__ */ v(
"div",
{
...f,
...x,
...u,
ref: a,
"data-test-id": "modal-container",
className: "tw-flex-initial tw-min-h-0 tw-w-full tw-flex tw-bg-white tw-overflow-hidden tw-border tw-border-solid tw-border-line-strong tw-rounded tw-shadow-2xl",
children: [
(o == null ? void 0 : o.pattern) && /* @__PURE__ */ t("div", { className: "tw-w-[260px] tw-relative tw-flex-shrink-0 tw-overflow-hidden", children: /* @__PURE__ */ t(j, { ...o }) }),
/* @__PURE__ */ t("div", { className: "tw-flex tw-flex-col tw-flex-1 tw-space-y-6 tw-overflow-hidden", children: /* @__PURE__ */ t(T.Provider, { value: { compact: l, padding: y }, children: /* @__PURE__ */ t(V.Provider, { value: h, children: m }) }) })
]
}
)
}
) })
}
);
});
s.displayName = "Modal";
const i = ({ isOpen: e, ...o }) => /* @__PURE__ */ t(P, { children: /* @__PURE__ */ t(b, { children: e && /* @__PURE__ */ t(s, { ...o, isOpen: !0 }) }) });
i.displayName = "FondueModal";
i.Header = R;
i.Body = S;
i.Footer = I;
export {
i as Modal
};
//# sourceMappingURL=Modal.es.js.map