@frontify/fondue
Version:
Design system of Frontify
76 lines (75 loc) • 2.76 kB
JavaScript
import { jsx as e, jsxs as o } from "react/jsx-runtime";
import { forwardRef as k, Children as P, createElement as D } from "react";
import { useDialog as O } from "@react-aria/dialog";
import { useOverlay as j, useModal as B, DismissButton as $ } from "@react-aria/overlays";
import { mergeProps as C } from "@react-aria/utils";
import { Badge as E } from "../Badge/Badge.es.js";
import { FieldsetHeader as F } from "../FieldsetHeader/FieldsetHeader.es.js";
import { merge as l } from "../../utilities/merge.es.js";
const H = ({
title: w,
decorator: n,
badges: m = [],
onClose: d,
children: c,
isOpen: p,
positionProps: f,
overlayTriggerProps: v,
scrollRef: x,
fixedHeader: a,
fixedFooter: s,
fitContent: u,
contentMinHeight: h
}, t) => {
const { overlayProps: g } = j({ onClose: d, isOpen: p, isDismissable: !0 }, t), { modalProps: y } = B(), { dialogProps: b, titleProps: N } = O({}, t);
return /* @__PURE__ */ e(
"div",
{
...C(g, b, y, f, v),
ref: t,
className: l([
"tw-rounded tw-flex tw-outline-none tw-relative",
u ? "tw-min-w-0" : "tw-min-w-[400px]"
]),
children: /* @__PURE__ */ o(
"div",
{
className: l([
"tw-flex tw-flex-col tw-flex-auto tw-min-h-0 tw-rounded tw-shadow-mid tw-border tw-border-line-x-strong"
]),
children: [
a,
/* @__PURE__ */ o(
"div",
{
ref: x,
className: l([
"tw-flex tw-overflow-y-auto tw-overflow-x-hidden tw-flex-col tw-divide-y tw-divide tw-divide-black-10 tw-bg-white tw-text-black dark:tw-text-white dark:tw-bg-black-95",
!a && "tw-rounded-t",
!s && "tw-rounded-b"
]),
style: {
minHeight: `${h}px`
},
children: [
w && /* @__PURE__ */ o("div", { className: "tw-flex tw-justify-between tw-flex-wrap tw-gap-3 tw-p-8", children: [
/* @__PURE__ */ e("div", { ...N, className: "tw-inline-flex", children: /* @__PURE__ */ e(F, { decorator: n, children: w }) }),
/* @__PURE__ */ e("div", { className: "tw-inline-flex tw-gap-2 tw-flex-wrap", children: m.map((r, i) => /* @__PURE__ */ D(E, { ...r, key: `flyout-badge-${i}` })) })
] }),
P.map(c, (r, i) => /* @__PURE__ */ e("div", { children: r }, i)),
/* @__PURE__ */ e($, { onDismiss: d })
]
}
),
s
]
}
)
}
);
}, M = k(H);
M.displayName = "FondueOverlay";
export {
M as Overlay
};
//# sourceMappingURL=Overlay.es.js.map