@payfit/unity-components/dist/esm/components/app-menu/parts/AppMenuFooter.js

import { Actionable as e } from "../../actionable/Actionable.js";
import { Icon as t } from "../../icon/Icon.js";
import { Menu as n } from "../../menu/Menu.js";
import { MenuContent as r } from "../../menu/parts/MenuContent.js";
import { MenuTrigger as i } from "../../menu/parts/MenuTrigger.js";
import { useAppMenuContext as a } from "./AppMenu.context.js";
import { Avatar as o } from "../../avatar/Avatar.js";
import { AvatarFallback as s } from "../../avatar/parts/AvatarFallback.js";
import { AvatarImage as c } from "../../avatar/parts/AvatarImage.js";
import { Badge as l } from "../../badge/Badge.js";
import { MenuHeader as u } from "../../menu/parts/MenuHeader.js";
import { cloneElement as d, isValidElement as f, useRef as p, useState as m } from "react";
import { uyMerge as h } from "@payfit/unity-themes";
import { jsx as g, jsxs as _ } from "react/jsx-runtime";
import { FormattedMessage as v, useIntl as y } from "react-intl";
//#region src/components/app-menu/parts/AppMenuFooter.tsx
var b = (e) => /* @__PURE__ */ _(o, {
	"aria-label": `${e.title} avatar`,
	size: "md",
	variant: "square",
	"aria-labelledby": "profile-button-label",
	children: [
		/* @__PURE__ */ g(c, {
			src: e.avatar,
			alt: e.title ?? ""
		}),
		/* @__PURE__ */ g(s, {
			variant: "initials",
			delayMs: 100,
			children: e.title
		}),
		e.avatarPair && f(e.avatarPair) && d(e.avatarPair, { isHidden: !e.isPairAvatarVisible })
	]
}), x = ({ avatar: n, avatarPair: r, title: i, uploadAvatarCallback: a, uploadAvatarLabel: o, uploadAvatarDescription: s }) => {
	let [c, l] = m(!0), u = y(), d = () => {
		r && l((e) => !e);
	}, f = h("uy:group/avatar uy:cursor-pointer uy:relative uy:leading-[0] uy:rounded-75 uy:focus-visible:outline-none uy:focus-visible:ring-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:ring-offset-2");
	return /* @__PURE__ */ _(e, {
		"aria-describedby": "profile-picture-change-desc",
		"aria-label": o || u.formatMessage({
			id: "unity:component:app-menu:footer:profile-button:avatar:change",
			defaultMessage: "Change profile picture"
		}),
		className: f,
		onHoverStart: d,
		onHoverEnd: d,
		onFocus: d,
		onBlur: d,
		onPress: () => {
			a?.();
		},
		children: [/* @__PURE__ */ g(b, {
			avatar: n,
			avatarPair: r,
			title: i,
			isPairAvatarVisible: c
		}), /* @__PURE__ */ _("div", {
			className: "uy:flex uy:pointer-events-none uy:opacity-0 uy:group-hover/avatar:opacity-90 uy:group-hover/avatar:pointer-events-auto uy:group-focus-visible/avatar:opacity-90 uy:group-focus-visible/avatar:pointer-events-auto uy:bg-utility-backdrop uy:rounded-75 uy:absolute uy:top-0 uy:left-0 uy:w-full uy:h-full uy:transition-all uy:duration-200 uy:items-center uy:justify-center",
			children: [/* @__PURE__ */ g(t, {
				alt: "Camera",
				color: "content.inverted",
				size: 24,
				src: "CameraOutlined"
			}), /* @__PURE__ */ g("span", {
				className: "uy:sr-only",
				id: "profile-picture-change-desc",
				children: s || /* @__PURE__ */ g(v, {
					id: "unity:component:app-menu:footer:profile-button:avatar:change-description",
					defaultMessage: "Press enter to change profile picture"
				})
			})]
		})]
	});
}, S = ({ asMenuHeader: e = !1, avatar: n, avatarPair: r, badgeLabel: i, description: a, menuTriggerDescription: o, title: s, uploadAvatarCallback: c, uploadAvatarLabel: u, uploadAvatarDescription: d }) => /* @__PURE__ */ _("div", {
	className: "uy:min-w-[240px] uy:w-full uy:flex uy:items-center",
	children: [
		/* @__PURE__ */ g("div", {
			className: "uy:mr-150 uy:flex uy:items-center",
			children: c ? /* @__PURE__ */ g(x, {
				avatar: n,
				avatarPair: r,
				title: s,
				uploadAvatarLabel: u,
				uploadAvatarDescription: d,
				uploadAvatarCallback: c
			}) : /* @__PURE__ */ g(b, {
				avatar: n,
				avatarPair: r,
				title: s,
				isPairAvatarVisible: !0
			})
		}),
		/* @__PURE__ */ _("div", {
			className: "uy:flex uy:flex-col uy:text-left uy:leading-[1.25] uy:min-w-[50%] uy:flex-grow",
			children: [
				/* @__PURE__ */ g("span", {
					id: "profile-button-label",
					className: "uy:typography-body-strong uy:text-content-neutral uy:text-wrap",
					"data-dd-privacy": "mask",
					children: s
				}),
				/* @__PURE__ */ g("span", {
					className: "uy:typography-body-small uy:text-content-neutral-low",
					"data-dd-privacy": "allow",
					children: a
				}),
				!e && /* @__PURE__ */ g("span", {
					id: "profile-button-description",
					className: "uy:sr-only",
					children: o || /* @__PURE__ */ g(v, {
						id: "unity:component:app-menu:footer:profile-button:description",
						defaultMessage: "Press this button to open the profile menu."
					})
				})
			]
		}),
		/* @__PURE__ */ g("div", {
			className: "uy:p-100",
			children: e ? /* @__PURE__ */ g(l, {
				className: "uy:capitalize",
				variant: "neutral",
				children: i
			}) : /* @__PURE__ */ g(t, {
				src: "CaretUpDownOutlined",
				alt: "open",
				size: 20,
				color: "content.neutral.low"
			})
		})
	]
}), C = ({ avatar: t, avatarPair: o, badgeLabel: s, children: c, computeSlot: l, description: d, title: f, menuTriggerDescription: v, uploadAvatarCallback: y, uploadAvatarLabel: b, uploadAvatarDescription: x, updateNotificationSlot: C }) => {
	let { isMobileMenuOpen: w } = a(), [T, E] = m(!1), D = p(null);
	return /* @__PURE__ */ _("aside", {
		className: h("uy:fixed uy:bottom-0 uy:left-0 uy:right-0 uy:z-10 uy:bg-canvas", "uy:p-150", "uy:md:static uy:md:mt-auto uy:md:p-0 uy:md:bg-[transparent]", "uy:data-[mobile-open=false]:hidden uy:md:data-[mobile-open=false]:block uy:data-[mobile-open=true]:block"),
		"data-mobile-open": w,
		id: "app-menu-profile-button",
		children: [
			l,
			C,
			/* @__PURE__ */ _(n, {
				isOpen: T,
				onOpenChange: E,
				placement: "top left",
				triggerRef: D,
				children: [/* @__PURE__ */ g(i, {
					asChild: !0,
					children: /* @__PURE__ */ g(e, {
						ref: D,
						className: "uy:transition-colors uy:rounded-75 uy:px-150 uy:py-100 uy:w-full uy:theme-legacy:not-aria-disabled:hover:bg-surface-neutral-low-hover uy:theme-rebrand:not-aria-disabled:hover:bg-surface-neutral-lowest-hover uy:theme-legacy:not-aria-disabled:active:bg-surface-neutral-low-active uy:theme-rebrand:not-aria-disabled:active:bg-surface-neutral-lowest-active uy:theme-legacy:not-aria-disabled:data-[pressed=true]:bg-surface-neutral-low-pressed uy:theme-rebrand:not-aria-disabled:data-[pressed=true]:bg-surface-neutral-lowest-pressed uy:not-aria-disabled:focus-visible:outline-none uy:not-aria-disabled:focus-visible:ring-2 uy:not-aria-disabled:focus-visible:ring-utility-focus-ring uy:not-aria-disabled:focus-visible:ring-offset-2",
						"aria-labelledby": "profile-button-label",
						"aria-describedby": "profile-button-description",
						onPress: () => {
							E(!0);
						},
						children: /* @__PURE__ */ g(S, {
							avatar: t,
							avatarPair: o,
							badgeLabel: s,
							description: d,
							menuTriggerDescription: v,
							title: f,
							uploadAvatarCallback: y,
							uploadAvatarLabel: b,
							uploadAvatarDescription: x
						})
					})
				}), /* @__PURE__ */ _(r, {
					width: 312,
					children: [/* @__PURE__ */ g(u, {
						className: "uy:rounded-75",
						children: /* @__PURE__ */ g(S, {
							asMenuHeader: !0,
							avatar: t,
							avatarPair: o,
							badgeLabel: s,
							description: d,
							menuTriggerDescription: v,
							title: f,
							uploadAvatarCallback: y,
							uploadAvatarLabel: b,
							uploadAvatarDescription: x
						})
					}), c]
				})]
			})
		]
	});
};
//#endregion
export { C as AppMenuFooter };