@payfit/unity-components
Version:
138 lines (137 loc) • 5.92 kB
JavaScript
import { CircularIconButton as e } from "../icon-button/CircularIconButton.js";
import { DialogButton as t } from "../dialog/parts/DialogActions/DialogButton.js";
import { useHasScroll as n } from "../../hooks/use-has-scroll.js";
import { PromoDialogActions as r } from "./parts/PromoDialogActions.js";
import { PromoDialogHero as i } from "./parts/PromoDialogHero.js";
import { PromoDialogTitle as a } from "./parts/PromoDialogTitle.js";
import { Children as o, isValidElement as s, useLayoutEffect as c, useRef as l } from "react";
import { uyTv as u } from "@payfit/unity-themes";
import { jsx as d, jsxs as f } from "react/jsx-runtime";
import { useIntl as p } from "react-intl";
import { useId as m } from "react-aria/useId";
import { Dialog as h, DialogContext as g } from "react-aria-components/Dialog";
import { Modal as _, ModalOverlay as v } from "react-aria-components/Modal";
//#region src/components/promo-dialog/PromoDialog.tsx
var y = u({ 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",
"uy:motion-reduce:data-[entering]:animate-none uy:motion-reduce:data-[exiting]:animate-none"
],
wrapper: [
"uy:w-full uy:relative uy:isolate",
"uy:m-0",
"uy:rounded-t-300 uy:md:rounded-300",
"uy:bg-surface-neutral",
"uy:text-left uy:align-middle uy:shadow-400",
"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",
"uy:motion-reduce:data-[entering]:animate-none uy:motion-reduce:data-[exiting]:animate-none",
"uy:max-h-[95dvh] uy:overflow-y-auto",
"uy:md:h-[82dvh] uy:md:max-h-65 uy:lg:max-h-85 uy:md:overflow-hidden",
"uy:md:w-10/12 uy:md:max-w-[1000px] uy:p-300 uy:pb-0 uy:md:p-200"
],
content: [
"uy:group/promo-dialog uy:outline-none uy:relative",
"uy:h-auto",
"uy:md:h-full"
],
dismissIcon: ["uy:sticky uy:top-0 uy:right-0 uy:flex uy:justify-end", "uy:md:absolute uy:md:right-100 uy:md:top-100 uy:md:z-20"],
layoutWrapper: [
"uy:flex uy:flex-col uy:md:flex-row",
"uy:h-auto",
"uy:md:h-full uy:gap-300 uy:md:gap-0"
],
contentColumn: [
"uy:group/content-column",
"uy:flex uy:flex-col",
"uy:h-auto",
"uy:md:basis-2/3 uy:md:h-full uy:md:max-h-85 uy:md:overflow-y-auto uy:md:pt-600 uy:md:[scrollbar-gutter:stable]"
],
scrollableContent: [
"uy:md:pl-[clamp(var(--uy-spacing-400),11%,var(--uy-spacing-800))] uy:md:pr-1000 uy:[scrollbar-width:thin] uy:md:scroll-mt-1000",
"uy:flex-1",
"uy:md:flex uy:md:flex-col uy:md:justify-center"
],
actionsWrapper: ["uy:py-300 uy:md:py-0 uy:sticky uy:-bottom-px uy:bg-surface-neutral", "uy:group-data-[has-scroll=true]/content-column:shadow-[0_-1px_6px_0_var(--uy-color-utility-shadow-floating)]"]
} }), b = (e) => {
let n = o.toArray(e).find((e) => s(e) && e.type === r);
return s(n) ? o.toArray(n.props.children).some((e) => s(e) && e.type === t && e.props.variant === "danger") : !1;
};
function x({ children: t, isOpen: u, onOpenChange: x, isDismissable: S = !0, ...C }) {
let w = p(), T = m(), E = l(null), { hasAnyScroll: D } = n(E, {
strategy: "both",
watchMutations: !0
}), O = o.toArray(t), k = O.find((e) => s(e) && e.type === i), A = O.find((e) => s(e) && e.type === r), j = O.filter((e) => e !== k && e !== A);
c(() => {
k || console.error("PromoDialog: PromoDialogHero is required. Please add <PromoDialogHero> as a child of your PromoDialog component.");
}, [k]), c(() => {
let e = o.toArray(t).some((e) => s(e) && e.type === a);
!C["aria-label"] && !e && console.error("PromoDialog: Either an aria-label or a PromoDialogTitle is required for accessibility. Provide one to ensure screen reader users can identify the dialog.");
}, [t, C]);
let M = y();
return /* @__PURE__ */ d(v, {
isDismissable: S,
isOpen: u,
onOpenChange: x,
className: M.overlay(),
children: /* @__PURE__ */ d(_, {
className: M.wrapper(),
"data-unity-promo-dialog": !0,
"data-dd-privacy": "allow",
children: /* @__PURE__ */ d(g.Provider, {
value: { "aria-describedby": T },
children: /* @__PURE__ */ f(h, {
role: b(t) ? "alertdialog" : "dialog",
"aria-modal": "true",
className: M.content(),
"aria-label": C["aria-label"],
"aria-describedby": T,
"data-unity-slot": "promo-dialog",
children: [S && /* @__PURE__ */ d("div", {
className: M.dismissIcon(),
children: /* @__PURE__ */ d(e, {
asElement: "button",
icon: "CloseOutlined",
color: "content.neutral.low",
size: "large",
title: w.formatMessage({ id: "unity:component:common:close:label" }),
slot: "close",
className: "uy:relative uy:-top-100 uy:-right-100 uy:md:static"
})
}), /* @__PURE__ */ f("div", {
className: M.layoutWrapper(),
"data-slot": "promo-dialog.layout-wrapper",
children: [k, /* @__PURE__ */ f("div", {
ref: E,
className: M.contentColumn(),
"data-slot": "promo-dialog.content-column",
"data-has-scroll": D,
role: D ? "region" : void 0,
"aria-label": D ? w.formatMessage({ id: "unity:component:common:scrollable-content:label" }) : void 0,
tabIndex: D ? 0 : void 0,
children: [/* @__PURE__ */ d("div", {
id: T,
className: M.scrollableContent(),
"data-slot": "promo-dialog.scrollable-content",
children: j
}), /* @__PURE__ */ d("div", {
className: M.actionsWrapper(),
"data-slot": "promo-dialog.actions-wrapper",
children: A
})]
})]
})]
})
})
})
});
}
x.displayName = "PromoDialog";
//#endregion
export { x as PromoDialog, y as promoDialog };