@payfit/unity-components
Version:
86 lines (85 loc) • 3.39 kB
JavaScript
import { CircularIconButton as e } from "../icon-button/CircularIconButton.js";
import { DialogActions as t } from "./parts/DialogActions.js";
import { DialogButton as n } from "./parts/DialogActions/DialogButton.js";
import { Children as r, isValidElement as i } from "react";
import { uyTv as a } from "@payfit/unity-themes";
import { jsx as o, jsxs as s } from "react/jsx-runtime";
import { useIntl as c } from "react-intl";
import { useId as l } from "react-aria/useId";
import { Dialog as u, DialogContext as d, DialogTrigger as f } from "react-aria-components/Dialog";
import { Modal as p, ModalOverlay as m } from "react-aria-components/Modal";
//#region src/components/dialog/Dialog.tsx
var h = a({
slots: {
overlay: [
"uy:@container",
"uy:fixed uy:inset-0 uy:z-30 uy:overflow-y-auto",
"uy:min-h-full",
"uy:flex uy:items-end uy:md:items-center uy:md:justify-center uy:md:text-center",
"uy:bg-utility-backdrop",
"uy:data-[entering]:animate-fade-in uy:data-[exiting]:animate-fade-out"
],
wrapper: [
"uy:w-full uy:max-h-[95dvh] uy:md:max-h-[82dvh] uy:relative uy:isolate",
"uy:m-0",
"uy:rounded-t-300 uy:md:rounded-200",
"uy:overflow-hidden uy:bg-white uy:p-300 uy:pt-400 uy:md:p-400",
"uy:text-left uy:align-middle uy:shadow-400",
"uy:bg-surface-neutral",
"uy:data-[entering]:animate-slide-up-fade-in uy:data-[exiting]:animate-slide-down-fade-out",
"uy:md:[animation-delay:100ms] uy:md:data-[entering]:animate-zoom-in uy:md:data-[exiting]:animate-zoom-out"
],
content: [
"uy:group/dialog",
"uy:grid uy:min-h-0 uy:max-h-[calc(95dvh-var(--uy-spacing-400)-var(--uy-spacing-300))] uy:grid-rows-[auto_minmax(0,1fr)_auto] uy:md:max-h-[calc(82dvh-var(--uy-spacing-400)-var(--uy-spacing-400))]",
"uy:outline-none"
],
dismissIcon: ["uy:absolute uy:right-200 uy:top-200 uy:z-20"]
},
variants: { size: {
sm: { wrapper: "uy:md:w-4/12 uy:md:max-w-62.5" },
md: { wrapper: "uy:md:w-5/12 uy:md:max-w-80" }
} },
defaultVariants: { size: "md" }
}), g = (e) => {
let a = r.toArray(e).find((e) => i(e) && e.type === t);
return i(a) ? r.toArray(a.props.children).some((e) => i(e) && e.type === n && e.props.variant === "danger") : !1;
};
function _({ children: t, isOpen: n, onOpenChange: r, isDismissable: i = !0, size: a = "md", ...f }) {
let _ = c(), v = l(), { overlay: y, wrapper: b, content: x, dismissIcon: S } = h({ size: a });
return /* @__PURE__ */ o(m, {
isDismissable: i,
isOpen: n,
onOpenChange: r,
className: y(),
children: /* @__PURE__ */ o(p, {
className: b(),
"data-unity-dialog": !0,
"data-dd-privacy": "allow",
children: /* @__PURE__ */ o(d.Provider, {
value: { "aria-describedby": v },
children: /* @__PURE__ */ s(u, {
role: g(t) ? "alertdialog" : "dialog",
"aria-modal": "true",
className: x(),
"aria-label": f["aria-label"],
"aria-describedby": v,
"data-unity-slot": "dialog",
"data-unity-size": a,
children: [i && /* @__PURE__ */ o(e, {
icon: "CloseOutlined",
color: "content.neutral.low",
title: _.formatMessage({ id: "unity:component:common:close:label" }),
className: S(),
slot: "close",
size: "large",
asElement: "button"
}), t]
})
})
})
});
}
_.displayName = "Dialog", f.displayName = "DialogTrigger";
//#endregion
export { _ as Dialog, f as DialogTrigger, h as dialog };