udp-react-enterprise-component-library 25.16.2-beta.1 → 25.16.2-beta.2

package/dist/FluentProfileMenuCard-CZ00DNnC.js

@@ -0,0 +1,771 @@
+import { i as storeTenant, t as clearStoredTenant } from "./UnitySessionStorage-DFfZhXMh.js";
+import { t as useUser } from "./useUser--tP6DN4i.js";
+import { t as apiMutate$1 } from "./useAxiosMutate-C_CLzTKW.js";
+import { t as FluentTextFieldAutoComplete } from "./FluentTextFieldAutoComplete-DiwMTnol.js";
+import { t as FluentIconButton } from "./FluentIconButton-AN9tZKVl.js";
+import { n as useShellStore } from "./shellStore-B_6P0cep.js";
+import { n as useActions } from "./useActions-V6oRdjcy.js";
+import { n as SiteHeaderRightComponentTarget } from "./SiteHeaderRightComponent-C-XOWDYB.js";
+import { t as AmbientPopoverMenuItem } from "./AmbientPopoverMenuItem-xvRiIMUe.js";
+import { t as SidebarCollapseButton } from "./SidebarCollapseButton-RZB7hk6o.js";
+import { n as EnvironmentRibbon, r as useBuildEnvironment, t as APP_RIBBON_SPACE } from "./EnvironmentRibbon-CRhI4qRC.js";
+import { t as AppMenu } from "./AppMenu-DzMsTuWv.js";
+import { t as BreadCrumbMenu } from "./BreadCrumbMenu-BxpMqfvj.js";
+import { n as SupportCaseSideSheet_default } from "./SupportCaseSideSheet-D48N1B5u.js";
+import { t as UserFormSideSheet_default } from "./UserFormSideSheet-DpO8GKQO.js";
+import { n as useDevicePixelRatio, t as useGravatar } from "./useGravatar-D5PYsAWb.js";
+import { t as clearStoredPath } from "./LocalRedirectUrlStorage-BY-L7N4U.js";
+import { t as clearStoredExternalPath } from "./ExternalRedirectUrlStorage-CpypX4nx.js";
+import { n as useUserActions } from "./users-Be55HGkm.js";
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { AppBar, Avatar, Button, CardContent, ClickAwayListener, Dialog, DialogContent, DialogTitle, Drawer, Grow, IconButton, List, ListItem, ListItemIcon, ListItemText, MenuItem, MenuList, Paper, Popover, Popper, TextField, Toolbar, Typography, lighten, makeStyles, useMediaQuery, useTheme } from "@material-ui/core";
+import { ConfigService } from "udp-react-stencil-component-library";
+import { useHistory } from "react-router-dom";
+import clsx from "clsx";
+import { ChevronDownIcon, CollapseMenuIcon, TranslateIcon, WaffleIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { Autocomplete } from "@material-ui/lab";
+import { Chat, Close, HelpOutline } from "@material-ui/icons";
+import i18n from "i18next";
+
+//#region src/shell/ui/MiniCollapsibleSidebar.jsx
+const useStyles$8 = makeStyles((theme) => ({
+	root: {
+		width: theme?.dimensions?.drawerWidth,
+		flexShrink: 0,
+		whiteSpace: "nowrap"
+	},
+	expanded: { "&, & > $paper": {
+		width: theme.spacing(32),
+		transition: theme.transitions.create("width", {
+			easing: theme.transitions.easing.sharp,
+			duration: theme.transitions.duration.enteringScreen
+		})
+	} },
+	collapsed: { "&, & > $paper": {
+		overflowX: "hidden",
+		width: theme.spacing(7) + 1,
+		transition: theme?.transitions?.create("width", {
+			easing: theme?.transitions?.easing?.sharp,
+			duration: theme?.transitions?.duration?.leavingScreen
+		})
+	} },
+	paper: {}
+}), { name: "MiniCollapsibleSidebar" });
+const MiniCollapsibleSidebar = (props) => {
+	const classes = useStyles$8(props);
+	const { expanded = true, className, children,...other } = props;
+	return /* @__PURE__ */ React.createElement(Drawer, {
+		variant: "permanent",
+		open: true,
+		...other,
+		className: clsx(className, classes.root, expanded ? classes.expanded : classes.collapsed),
+		classes: {
+			root: classes.root,
+			paper: classes.paper
+		}
+	}, children);
+};
+var MiniCollapsibleSidebar_default = MiniCollapsibleSidebar;
+
+//#endregion
+//#region src/shell/ui/NavigationSidebar.jsx
+const useStyles$7 = makeStyles((theme) => ({
+	root: { marginTop: 400 },
+	paper: {
+		backgroundColor: theme?.getThemeData()?.mode === "dark" ? "" : lighten(theme?.palette?.primary?.main, .9),
+		overflowX: "hidden"
+	},
+	list: {
+		flex: 1,
+		paddingTop: 0,
+		overflowY: "auto",
+		WebkitOverflowScrolling: "touch"
+	},
+	spacer: {
+		flex: 1,
+		minHeight: theme.spacing(2)
+	},
+	footer: {},
+	toolbar: {
+		padding: 0,
+		minHeight: ({ appRibbonSpace }) => theme.spacing(6) + appRibbonSpace
+	}
+}), { name: "NavigationSidebar" });
+const NavigationSidebar = (props) => {
+	const classes = useStyles$7({ appRibbonSpace: useBuildEnvironment() ? APP_RIBBON_SPACE : 0 });
+	const { data, toggleExpandClick, navMenuHoverOn, user, toggle = true, useGlobalState = false,...other } = props;
+	const [expanded, setExpanded] = useState(true);
+	const { navigationExpanded, setNavigationExpanded } = useShellStore();
+	let navExpanded = useGlobalState ? navigationExpanded : expanded;
+	const [hoverExpand, setHoverExpand] = useState(false);
+	const handleHoverToggle = () => {
+		if (!navExpanded && navMenuHoverOn) setHoverExpand(true);
+	};
+	const handleHoverLeave = () => {
+		if (!navExpanded && navMenuHoverOn) setHoverExpand(false);
+	};
+	const handleToggleClick = useCallback(() => {
+		if (useGlobalState) setNavigationExpanded(!navigationExpanded);
+		else setExpanded((expanded$1) => !expanded$1);
+	}, [
+		setNavigationExpanded,
+		useGlobalState,
+		navigationExpanded
+	]);
+	return /* @__PURE__ */ React.createElement(MiniCollapsibleSidebar_default, {
+		classes: {
+			root: classes.root,
+			paper: classes.paper
+		},
+		expanded: navExpanded || hoverExpand,
+		onMouseEnter: handleHoverToggle,
+		onMouseLeave: handleHoverLeave,
+		PaperProps: {
+			elevation: 0,
+			variant: "outlined"
+		},
+		...other
+	}, /* @__PURE__ */ React.createElement(Toolbar, { className: classes.toolbar }), toggle && /* @__PURE__ */ React.createElement(SidebarCollapseButton, {
+		id: "udpRecord-NavigationSidebar",
+		udprecordid: "udpRecord-NavigationSidebar",
+		expanded: navExpanded,
+		onClick: handleToggleClick
+	}), data && /* @__PURE__ */ React.createElement(AppMenu, {
+		menuItems: data,
+		sidebarExpanded: navExpanded,
+		user
+	}));
+};
+var NavigationSidebar_default = NavigationSidebar;
+
+//#endregion
+//#region src/shell/ui/AmbientProjectSwitcher.jsx
+const useStyles$6 = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		background: (props) => props.backgroundColor ? props.backgroundColor : theme.palette.secondary.main,
+		borderRadius: 50,
+		padding: 6,
+		paddingLeft: 16
+	},
+	popoverRoot: {},
+	icon: {
+		color: theme.palette.primary.main,
+		borderRadius: 50
+	},
+	label: {
+		display: "block",
+		width: (props) => props.width ? props.width : 100,
+		overflow: "hidden",
+		whiteSpace: "nowrap",
+		textOverflow: "ellipsis"
+	},
+	listWrapper: { marginRight: theme.spacing(2) }
+}));
+const AmbientProjectSwitcher = (props) => {
+	const classes = useStyles$6(props);
+	const theme = useTheme();
+	const { data, selectedItem } = props;
+	const [anchorEl, setAnchorEl] = useState(null);
+	const handleClick = (event) => {
+		setAnchorEl(event.currentTarget);
+	};
+	const handleClose = () => {
+		setAnchorEl(null);
+	};
+	const open = Boolean(anchorEl);
+	const id = open ? "open" : void 0;
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.listWrapper }, /* @__PURE__ */ React.createElement(Typography, { className: classes.label }, selectedItem)), /* @__PURE__ */ React.createElement(FluentIconButton, {
+		className: classes.icon,
+		icon: ChevronDownIcon,
+		onClick: handleClick,
+		style: { background: theme.palette.common.white }
+	}), /* @__PURE__ */ React.createElement(Popover, {
+		classes: { root: classes.popoverRoot },
+		square: true,
+		elevation: 6,
+		id,
+		open,
+		anchorEl,
+		onClose: handleClose,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "right"
+		}
+	}, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, data && data.map((item) => {
+		return /* @__PURE__ */ React.createElement(AmbientPopoverMenuItem, {
+			label: item.label,
+			component: ChevronDownIcon,
+			click: () => item.click(item.label)
+		});
+	})))));
+};
+AmbientProjectSwitcher.propTypes = {
+	data: PropTypes.array,
+	selectedItem: PropTypes.string,
+	backgroundColor: PropTypes.string
+};
+
+//#endregion
+//#region src/shell/ui/ShellDropdown.jsx
+const useStyles$5 = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		alignItems: "center"
+	},
+	field: {
+		minWidth: 300,
+		maxWidth: 400,
+		width: "100%",
+		alignSelf: "left",
+		color: "#fff",
+		"& .MuiOutlinedInput-root": {
+			color: "#fff",
+			backgroundColor: "transparent",
+			"& fieldset": { borderColor: "rgba(255,255,255,0.6)" },
+			"&:hover fieldset": { borderColor: "rgba(255,255,255,0.85)" },
+			"&.Mui-focused fieldset": { borderColor: "#fff" },
+			"& input": {
+				paddingTop: 4,
+				paddingBottom: 4,
+				height: 20,
+				boxSizing: "border-box",
+				color: "#fff"
+			},
+			"& .MuiAutocomplete-input": { color: "#fff" }
+		},
+		"& .MuiInputBase-root": { color: "#fff" },
+		"& .MuiAutocomplete-popupIndicator, & .MuiAutocomplete-clearIndicator": {
+			color: "#fff",
+			opacity: .95
+		},
+		"& input::placeholder": { color: "rgba(255,255,255,0.7)" }
+	}
+}));
+function getDisplayName(item) {
+	if (!item && item !== 0) return "";
+	if (typeof item === "string" || typeof item === "number") return String(item);
+	if (typeof item === "object") {
+		const name = item.name ?? item.label ?? item.title ?? item.displayName;
+		return name !== void 0 && name !== null ? String(name) : "";
+	}
+	return String(item);
+}
+const ShellDropdown = (props) => {
+	const classes = useStyles$5();
+	const { componentName = "Item", data = [], value = null, onChange, optionLabelDisplayFunction = getDisplayName, placeholder, className, classProps,...other } = props;
+	const placeholderText = placeholder ?? (!value ? `All ${componentName}s` : void 0);
+	return /* @__PURE__ */ React.createElement("div", { className: `${classes.root} ${className || ""}` }, /* @__PURE__ */ React.createElement(FluentTextFieldAutoComplete, {
+		className: classes.field,
+		classProps: {
+			autocompleteRoot: classes.field,
+			...classProps
+		},
+		options: data,
+		optionLabelDisplayFunction,
+		onChange,
+		value,
+		placeholder: placeholderText,
+		...other
+	}));
+};
+ShellDropdown.propTypes = {
+	componentName: PropTypes.string,
+	data: PropTypes.array,
+	value: PropTypes.any,
+	onChange: PropTypes.func,
+	optionLabelDisplayFunction: PropTypes.func,
+	placeholder: PropTypes.string,
+	className: PropTypes.string,
+	classProps: PropTypes.object
+};
+var ShellDropdown_default = ShellDropdown;
+
+//#endregion
+//#region src/shell/ui/LanguageSwitcher.jsx
+const useStyles$4 = makeStyles((theme) => ({
+	root: { display: "flex" },
+	paper: { marginRight: theme.spacing(2) }
+}));
+const LanguageSwitcher = (props) => {
+	const classes = useStyles$4();
+	const [open, setOpen] = useState(false);
+	const anchorRef = useRef(null);
+	const { languages } = props;
+	const handleToggle = () => {
+		setOpen((prevOpen$1) => !prevOpen$1);
+	};
+	const handleClose = (event) => {
+		if (anchorRef.current && anchorRef.current.contains(event.target)) return;
+		setOpen(false);
+	};
+	function handleListKeyDown(event) {
+		if (event.key === "Tab") {
+			event.preventDefault();
+			setOpen(false);
+		}
+	}
+	const prevOpen = useRef(open);
+	useEffect(() => {
+		if (prevOpen.current === true && open === false) anchorRef.current.focus();
+		prevOpen.current = open;
+	}, [open]);
+	const handleLanguageChange = (event) => {
+		languageSelector(event.languageCode);
+	};
+	const languageSelector = (defaultLang) => {
+		i18n.changeLanguage(defaultLang);
+	};
+	if (languages != null) return /* @__PURE__ */ React.createElement("div", {
+		id: "udpRecord-LanguageSwitcher",
+		className: classes.root
+	}, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(IconButton, {
+		id: "udpRecord-LanguageSwitcher-IconButton",
+		udprecordid: "udpRecord-LanguageSwitcher-IconButton",
+		ref: anchorRef,
+		"aria-controls": open ? "menu-list-grow" : void 0,
+		"aria-haspopup": "true",
+		onClick: handleToggle
+	}, /* @__PURE__ */ React.createElement(TranslateIcon, { style: {
+		color: "white",
+		opacity: .8
+	} })), /* @__PURE__ */ React.createElement(Popper, {
+		open,
+		anchorEl: anchorRef.current,
+		role: void 0,
+		transition: true,
+		disablePortal: true
+	}, ({ TransitionProps, placement }) => /* @__PURE__ */ React.createElement(Grow, {
+		...TransitionProps,
+		style: { transformOrigin: placement === "bottom" ? "center top" : "center bottom" }
+	}, /* @__PURE__ */ React.createElement(Paper, null, /* @__PURE__ */ React.createElement(ClickAwayListener, {
+		id: "udpRecord-LanguageSwitcher-ClickAway",
+		udprecordid: "udpRecord-LanguageSwitcher-ClickAway",
+		onClickAway: handleClose
+	}, /* @__PURE__ */ React.createElement(MenuList, {
+		autoFocusItem: open,
+		id: "menu-list-grow",
+		udprecordid: "udpRecord-LanguageSwitcher-MenuList",
+		onKeyDown: handleListKeyDown,
+		onClick: () => setOpen(false)
+	}, languages.map((data) => /* @__PURE__ */ React.createElement(MenuItem, {
+		id: "udpRecord-LanguageSwitcher-MenuItem-" + data.languageLabel,
+		udprecordid: "udpRecord-LanguageSwitcher-MenuItem-" + data.languageLabel,
+		onClick: () => handleLanguageChange(data),
+		value: data.languageCode,
+		key: data.languageId
+	}, data.languageLabel)))))))));
+	else return null;
+};
+
+//#endregion
+//#region src/shell/ui/HelpCenter.jsx
+const useStyles$3 = makeStyles((theme) => ({
+	root: { display: "flex" },
+	popover: {
+		padding: theme.spacing(2),
+		maxWidth: 300
+	},
+	icon: { minWidth: 40 },
+	closeButton: {
+		position: "absolute",
+		right: theme.spacing(1),
+		top: theme.spacing(1),
+		color: theme.palette.grey[500]
+	},
+	header: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between"
+	},
+	dialog: {
+		minWidth: "80vw",
+		minHeight: "80vh"
+	}
+}));
+const HelpCenter = () => {
+	const classes = useStyles$3();
+	const { t } = useTranslation();
+	const { triggerAction } = useActions();
+	const user = useUser();
+	const productId = Number(ConfigService.config.UNITY_PRODUCT_ID);
+	const udpaiAPI = ConfigService.config.UDPAI_API_BASE;
+	const udpaisearch = ConfigService.config.AI_SEARCH_URL;
+	const udpaisearchkey = ConfigService.config.AI_SEARCH_KEY;
+	const udpaisearchindex = ConfigService.config.AI_SEARCH_INDEX_NAME;
+	const [anchorEl, setAnchorEl] = useState(null);
+	const [isSupportCaseSideSheetOpen, setSupportCaseSideSheetOpen] = useState(false);
+	const [isUserFormOpen, setUserFormOpen] = useState(false);
+	const [supportCaseHealthOk, setSupportCaseHealthOk] = useState(false);
+	const handleOpenPopover = (event) => {
+		setAnchorEl(event.currentTarget);
+	};
+	const handleClosePopover = () => {
+		setAnchorEl(null);
+	};
+	const handleLaunchAction = useCallback(() => {
+		setAnchorEl(null);
+		triggerAction("CEE75B36-01B0-4FAC-9AE7-C1AC8A2A194F");
+	}, [triggerAction]);
+	const handleOpenSupportCaseSideSheet = () => {
+		setSupportCaseSideSheetOpen(true);
+		setAnchorEl(null);
+	};
+	const handleCloseSupportCaseSideSheet = () => {
+		setSupportCaseSideSheetOpen(false);
+	};
+	const handleOpenUserForm = () => {
+		setUserFormOpen(true);
+		setAnchorEl(null);
+	};
+	const handleCloseUserForm = () => {
+		setUserFormOpen(false);
+	};
+	const open = Boolean(anchorEl);
+	const id = open ? "help-center-popover" : void 0;
+	const shouldShowAddUsers = (productId$1) => {
+		const isValidProduct = [41, 53].includes(productId$1);
+		const isSecurityApiConfigured = !!ConfigService.securityV1ApiUrl;
+		const isValidUser = user.can.CAN_MANAGE_ROLES_USERS && user.can.CAN_MANAGE_USERS && user.can.CAN_VIEW_USERS;
+		return isValidProduct && isSecurityApiConfigured && isValidUser;
+	};
+	const getSupportCaseStatus = useCallback(async () => apiMutate$1(ConfigService.productV1ApiUrl, `udpunitysupport/healthCheck`, {
+		method: "get",
+		headers: { currentTenantId: user?.currentTenantId }
+	}), [user?.currentTenantId]);
+	const getSupportCaseStatusUnity = useCallback(async () => apiMutate$1(ConfigService.supportV1ApiUrl, `ServiceHealth/Support`, {
+		method: "get",
+		headers: { currentTenantId: user?.currentTenantId }
+	}), [user?.currentTenantId]);
+	const showAddUsers = shouldShowAddUsers(productId);
+	const shouldShowChatAssistant = [
+		2,
+		41,
+		51,
+		68
+	].includes(productId) && udpaiAPI && udpaisearch && udpaisearchkey && udpaisearchindex;
+	const shouldShowSupportTicket = productId && supportCaseHealthOk;
+	useEffect(() => {
+		const supportCaseStatus = async () => {
+			try {
+				if (ConfigService.config.UNITY_PRODUCT_ID === "1") setSupportCaseHealthOk((await getSupportCaseStatusUnity())?.status === 200);
+				else setSupportCaseHealthOk((await getSupportCaseStatus())?.status === 200);
+			} catch (error) {
+				setSupportCaseHealthOk(false);
+			}
+		};
+		supportCaseStatus();
+	}, [getSupportCaseStatus, getSupportCaseStatusUnity]);
+	if (!showAddUsers && !shouldShowChatAssistant && !shouldShowSupportTicket) return /* @__PURE__ */ React.createElement("div", { id: "udpRecord-HelpCenter" });
+	return /* @__PURE__ */ React.createElement("div", {
+		id: "udpRecord-HelpCenter",
+		className: classes.root
+	}, /* @__PURE__ */ React.createElement(IconButton, {
+		id: "udpRecord-HelpCenter-IconButton",
+		"aria-controls": id,
+		"aria-haspopup": "true",
+		onClick: handleOpenPopover
+	}, /* @__PURE__ */ React.createElement(HelpOutline, { style: {
+		color: "white",
+		opacity: .8
+	} })), /* @__PURE__ */ React.createElement(Popover, {
+		id,
+		open,
+		anchorEl,
+		onClose: handleClosePopover,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "center"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "center"
+		}
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.popover }, /* @__PURE__ */ React.createElement("div", { className: classes.header }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, t("Help")), /* @__PURE__ */ React.createElement(IconButton, {
+		size: "small",
+		className: classes.closeButton,
+		onClick: handleClosePopover
+	}, /* @__PURE__ */ React.createElement(Close, null))), /* @__PURE__ */ React.createElement(List, {
+		component: "nav",
+		"aria-label": "Help options"
+	}, showAddUsers && /* @__PURE__ */ React.createElement(ListItem, {
+		button: true,
+		id: "udpRecord-HelpCenter-AddUsers",
+		onClick: handleOpenUserForm
+	}, /* @__PURE__ */ React.createElement(ListItemIcon, { className: classes.icon }, /* @__PURE__ */ React.createElement(HelpOutline, null)), /* @__PURE__ */ React.createElement(ListItemText, { primary: t("Add User") })), shouldShowChatAssistant && /* @__PURE__ */ React.createElement(ListItem, {
+		button: true,
+		id: "udpRecord-HelpCenter-ChatAssistant",
+		onClick: handleLaunchAction
+	}, /* @__PURE__ */ React.createElement(ListItemIcon, { className: classes.icon }, /* @__PURE__ */ React.createElement(Chat, null)), /* @__PURE__ */ React.createElement(ListItemText, { primary: t("Chat Assistant") })), shouldShowSupportTicket && /* @__PURE__ */ React.createElement(ListItem, {
+		button: true,
+		id: "udpRecord-HelpCenter-SupportTicket",
+		onClick: handleOpenSupportCaseSideSheet
+	}, /* @__PURE__ */ React.createElement(ListItemIcon, { className: classes.icon }, /* @__PURE__ */ React.createElement(HelpOutline, null)), /* @__PURE__ */ React.createElement(ListItemText, { primary: t("Submit Support Ticket") }))))), /* @__PURE__ */ React.createElement(UserFormSideSheet_default, {
+		open: isUserFormOpen,
+		onClose: handleCloseUserForm
+	}), /* @__PURE__ */ React.createElement(SupportCaseSideSheet_default, {
+		open: isSupportCaseSideSheetOpen,
+		onClose: handleCloseSupportCaseSideSheet,
+		handleCloseSupportCaseSideSheet,
+		onSubmit: (values) => {
+			console.log("Form submitted", values);
+		},
+		initialValues: {}
+	}));
+};
+
+//#endregion
+//#region src/shell/ui/SiteHeader.jsx
+const useStyles$2 = makeStyles((theme) => ({
+	root: {
+		color: theme?.palette?.appBar?.contrastText,
+		zIndex: theme?.zIndex?.drawer + 1
+	},
+	spacer: { flex: 1 },
+	headerSpacer: {
+		padding: 0,
+		minHeight: ({ appRibbonSpace }) => 56 + appRibbonSpace
+	},
+	toolbar: {
+		padding: 0,
+		minHeight: theme.spacing(6)
+	},
+	appLaunch: { color: theme?.palette?.getContrastText(theme?.palette?.primary?.main) },
+	avatar: {
+		width: 25,
+		height: 25,
+		backgroundColor: theme?.palette?.secondary?.main
+	},
+	search: {
+		marginLeft: theme.spacing(2),
+		marginTop: theme.spacing(-1.35)
+	},
+	children: {
+		flex: 1,
+		minWidth: 5
+	}
+}), { name: "SiteHeader" });
+/**
+* A spacing component with the same height as the SiteHeader
+*/
+const SiteHeaderSpacer = (props) => {
+	const classes = useStyles$2({ appRibbonSpace: useBuildEnvironment() ? APP_RIBBON_SPACE : 0 });
+	const { className } = props;
+	return /* @__PURE__ */ React.createElement("div", { className: clsx(className, classes.headerSpacer) });
+};
+/**
+* Site header including app bar
+*/
+const SiteHeader = (props) => {
+	const classes = useStyles$2(props);
+	const { className, returnTo, appContent, userAvatar, siteName, breadCrumbRoot = "home", color = "primary", setAppSwitcherOpen, breadCrumbAltLabelList, currentLocation, switcherData, selectedItem, switcherWidth, hideAppLaunch, languages, backgroundColor,...other } = props;
+	const mobile = useMediaQuery(useTheme().breakpoints.up("sm"));
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(AppBar, {
+		elevation: 0,
+		position: "fixed",
+		color,
+		...other,
+		className,
+		classes: { root: classes.root }
+	}, /* @__PURE__ */ React.createElement(EnvironmentRibbon, null), /* @__PURE__ */ React.createElement(Toolbar, { className: classes.toolbar }, mobile && !hideAppLaunch && /* @__PURE__ */ React.createElement(IconButton, {
+		className: classes.appLaunch,
+		"aria-label": "App Launcher Menu",
+		onClick: () => setAppSwitcherOpen("desktop", true)
+	}, /* @__PURE__ */ React.createElement(WaffleIcon, null)), !mobile && /* @__PURE__ */ React.createElement(IconButton, {
+		className: classes.appLaunch,
+		"aria-label": "App Launcher Menu",
+		onClick: () => setAppSwitcherOpen("desktop", true)
+	}, /* @__PURE__ */ React.createElement(CollapseMenuIcon, null)), /* @__PURE__ */ React.createElement(Typography, {
+		component: "h1",
+		variant: "h6",
+		style: { marginLeft: hideAppLaunch && 16 }
+	}, siteName), mobile && /* @__PURE__ */ React.createElement("div", { style: { marginLeft: 70 } }, React.isValidElement(breadCrumbRoot) ? breadCrumbRoot : breadCrumbRoot && typeof breadCrumbRoot === "object" && (breadCrumbRoot.data || breadCrumbRoot.componentName) ? /* @__PURE__ */ React.createElement(ShellDropdown_default, {
+		componentName: breadCrumbRoot.componentName,
+		data: breadCrumbRoot.data,
+		value: breadCrumbRoot.value,
+		onChange: breadCrumbRoot.onChange,
+		optionLabelDisplayFunction: breadCrumbRoot.optionLabelDisplayFunction,
+		placeholder: breadCrumbRoot.placeholder,
+		className: breadCrumbRoot.className,
+		classProps: breadCrumbRoot.classProps
+	}) : /* @__PURE__ */ React.createElement(BreadCrumbMenu, {
+		color: "primary",
+		root: breadCrumbRoot,
+		breadCrumbAltLabelList
+	})), /* @__PURE__ */ React.createElement("div", { className: classes.children }, appContent), switcherData && /* @__PURE__ */ React.createElement(AmbientProjectSwitcher, {
+		data: switcherData,
+		selectedItem,
+		width: switcherWidth,
+		backgroundColor
+	}), !mobile && !hideAppLaunch && /* @__PURE__ */ React.createElement(IconButton, {
+		className: classes.appLaunch,
+		"aria-label": "App Launcher Menu",
+		onClick: () => setAppSwitcherOpen("mobile", true)
+	}, /* @__PURE__ */ React.createElement(WaffleIcon, null)), /* @__PURE__ */ React.createElement("div", { className: classes.additionalRightComponent }, /* @__PURE__ */ React.createElement(SiteHeaderRightComponentTarget, null)), /* @__PURE__ */ React.createElement(HelpCenter, null), /* @__PURE__ */ React.createElement(LanguageSwitcher, { languages }), /* @__PURE__ */ React.createElement("div", null, userAvatar))), /* @__PURE__ */ React.createElement(SiteHeaderSpacer, { className }));
+};
+var SiteHeader_default = SiteHeader;
+SiteHeader.propTypes = {
+	breadCrumbRoot: PropTypes.oneOfType([
+		PropTypes.string,
+		PropTypes.element,
+		PropTypes.node,
+		PropTypes.object
+	]),
+	backgroundColor: PropTypes.string
+};
+
+//#endregion
+//#region src/shell/ui/UserAvatar.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	root: {},
+	default: {},
+	toolbar: {
+		width: 32,
+		height: 32
+	},
+	large: {
+		width: 80,
+		height: 80
+	}
+}), { name: "UserAvatar" });
+/**
+* Inteligent user Avatar element
+*
+* - Loads a Gravatar based on the email if one exists
+* - Falls back to a text avatar while loading and when a Gravatar does not exist
+* - Automatically chooses image size based on size prop and device pixel density (and updates if device pixel density changes)
+*/
+const UserAvatar = (props) => {
+	const classes = useStyles$1(props);
+	const { name, email, size = "default", className,...other } = props;
+	const dppx = useDevicePixelRatio();
+	const avatar = useGravatar(email, { size: ({
+		toolbar: 32,
+		large: 80
+	}[size] || 40) * dppx });
+	return /* @__PURE__ */ React.createElement(Avatar, {
+		alt: name,
+		"aria-label": `${name}'s avatar`,
+		...other,
+		className: clsx(className, classes[size]),
+		src: avatar
+	}, name?.trim()?.charAt(0) || "?");
+};
+var UserAvatar_default = UserAvatar;
+
+//#endregion
+//#region src/shell/ui/FluentProfileMenuCard.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {
+		"& > *": { margin: theme.spacing(1) },
+		"&:last-child": { paddingBottom: theme.spacing(2) }
+	},
+	cardHeader: {
+		display: "flex",
+		marginBottom: theme.spacing(3)
+	},
+	currentTenant: {
+		margin: "auto",
+		width: "85%",
+		marginBottom: theme.spacing(4)
+	},
+	buttonGroup: {
+		display: "flex",
+		flexDirection: "row",
+		alignItems: "center"
+	},
+	basicInfoContainer: { marginLeft: theme.spacing(1) },
+	basicInfo: { paddingLeft: theme.spacing(1) },
+	divider: { height: theme.spacing(3) },
+	avatar: { fontSize: 40 }
+}));
+const FluentProfileMenuCard = forwardRef((props, ref) => {
+	const classes = useStyles();
+	const devUnityUrl = "https://unity-dev.univerus.com/";
+	const { userTenants, currentTenant, user, logout, unityUrl = devUnityUrl, displayProfileButton = true } = props;
+	const [currentTenantValue, setCurrentTenantValue] = useState("");
+	const history = useHistory();
+	const redirectToHome = () => history.push("/");
+	const { t, i18n: i18n$1 } = useTranslation();
+	const { changeTenant } = useUserActions();
+	const handleAutocompleteOnChange = (newValue, reason) => {
+		if (reason !== "select-option") return;
+		setCurrentTenantValue(newValue);
+		storeTenant(newValue.tenantId);
+		changeTenant(newValue.tenantId);
+		redirectToHome();
+	};
+	useEffect(() => {
+		if (userTenants && !currentTenantValue) setCurrentTenantValue(userTenants.find((ut) => ut.tenantId === currentTenant?.tenantId));
+	}, [
+		currentTenant,
+		userTenants,
+		currentTenantValue
+	]);
+	if (!user) return null;
+	return /* @__PURE__ */ React.createElement(CardContent, {
+		ref,
+		className: classes.root
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.cardHeader }, /* @__PURE__ */ React.createElement(UserAvatar_default, {
+		name: user?.name,
+		email: user?.email,
+		size: "large",
+		className: classes.avatar
+	}), /* @__PURE__ */ React.createElement("div", { className: classes.basicInfoContainer }, /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.basicInfo,
+		variant: "subtitle2"
+	}, user?.name), /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.basicInfo,
+		variant: "body2"
+	}, user?.email))), userTenants && user && changeTenant && /* @__PURE__ */ React.createElement(Autocomplete, {
+		className: classes.currentTenant,
+		value: currentTenantValue,
+		getOptionSelected: (option, value) => option?.tenantId === value?.tenantId,
+		disableClearable: true,
+		id: "current-tenant",
+		name: "currentTenant",
+		options: userTenants ? userTenants : [],
+		getOptionLabel: (option) => option?.tenantName ? option?.tenantName : "",
+		onChange: (event, newValue, reason) => handleAutocompleteOnChange(newValue, reason),
+		renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, {
+			...params,
+			inputProps: {
+				...params.inputProps,
+				id: "udpRecord-FluentProfileMenuCard-TextField",
+				udprecordid: "udpRecord-FluentProfileMenuCard-TextField"
+			},
+			label: t("Current Tenant"),
+			variant: "standard"
+		}),
+		renderOption: (option, { selected }) => /* @__PURE__ */ React.createElement("li", {
+			style: {
+				width: "100%",
+				height: "100%"
+			},
+			udprecordid: `udpRecord-FluentProfileMenuCard-${option.tenantName.replace(/\s+/g, "")}`,
+			...option
+		}, option.tenantName)
+	}), /* @__PURE__ */ React.createElement(Button, {
+		id: "udpRecord-FluentProfileMenuCard-SignOut",
+		udprecordid: "udpRecord-FluentProfileMenuCard-SignOut",
+		onClick: () => {
+			clearStoredPath();
+			clearStoredExternalPath();
+			clearStoredTenant();
+			logout();
+		},
+		variant: "outlined",
+		color: "secondary"
+	}, t("Sign out")));
+});
+FluentProfileMenuCard.displayName = "FluentProfileMenuCard";
+
+//#endregion
+export { LanguageSwitcher as a, NavigationSidebar_default as c, HelpCenter as i, SiteHeaderSpacer as n, ShellDropdown as o, SiteHeader_default as r, AmbientProjectSwitcher as s, FluentProfileMenuCard as t };
+//# sourceMappingURL=FluentProfileMenuCard-CZ00DNnC.js.map