@payfit/unity-components
Version:
84 lines (83 loc) • 2.77 kB
JavaScript
import { Icon as e } from "../icon/Icon.js";
import { IconButton as t } from "../icon-button/IconButton.js";
import { ToastProvider as n } from "./Toast.context.js";
import { ToastTitle as r } from "./parts/ToastTitle.js";
import { Children as i, Fragment as a, isValidElement as o } from "react";
import { uyTv as s } from "@payfit/unity-themes";
import { jsx as c, jsxs as l } from "react/jsx-runtime";
import { useIntl as u } from "react-intl";
//#region src/components/toast/UnityToast.tsx
var d = s({
slots: {
base: "uy:sm:w-[416px] uy:border uy:border-solid uy:theme-legacy:rounded-150 uy:theme-rebrand:rounded-125 uy:text-content-neutral uy:bg-surface-neutral uy:shadow-300 uy:p-100 uy:flex uy:gap-125 uy:border-border-neutral",
contentWrapper: "uy:flex uy:grow uy:ml-125",
divider: "uy:theme-legacy:border-l-[1px] uy:theme-legacy:border-solid uy:theme-legacy:border-border-neutral uy:theme-legacy:self-stretch uy:theme-rebrand:hidden"
},
variants: {
variant: {
success: "",
error: ""
},
isInline: {
true: { contentWrapper: "uy:flex-col" },
false: { contentWrapper: "uy:flex-row uy:justify-between" }
}
}
}), f = (e) => {
let t = o(e) && e.type === a ? e.props.children : e;
if (i.toArray(t).filter((e) => o(e) && e.type === r).length !== 1) throw Error("UnityToast must have one ToastTitle component");
}, p = ({ children: r, onClose: i, variant: a, inline: o = !0, ...s }) => {
let p = u();
f(r);
let { base: m, contentWrapper: h, divider: g } = d({
variant: a,
isInline: o
});
return /* @__PURE__ */ c(n, {
inline: o,
children: /* @__PURE__ */ l("div", {
"data-dd-privacy": "mask",
...s,
tabIndex: -1,
role: a === "error" ? "alert" : "status",
"aria-atomic": "true",
"aria-live": a === "error" ? "assertive" : "polite",
className: m(),
children: [
/* @__PURE__ */ l("div", {
className: "uy:flex uy:flex-row uy:grow",
children: [/* @__PURE__ */ c(e, {
src: a === "success" ? "CheckCircleFilled" : "WarningCircleFilled",
color: a === "success" ? "content.success" : "content.danger",
className: "uy:mt-100",
alt: p.formatMessage({
id: "unity:component:toast:icon:status",
defaultMessage: "Status"
})
}), /* @__PURE__ */ c("div", {
className: h(),
children: r
})]
}),
/* @__PURE__ */ c("div", {
role: "presentation",
className: g()
}),
/* @__PURE__ */ c(t, {
icon: "CloseOutlined",
iconRole: "presentation",
label: p.formatMessage({
id: "unity:component:common:close:label",
defaultMessage: "Close"
}),
variant: "ghost",
color: "neutral",
onClick: i
})
]
})
});
};
p.displayName = "UnityToast";
//#endregion
export { p as UnityToast };