udp-react-enterprise-component-library 1.0.5 → 1.0.6

package/dist/PageContainer-B65gsUfF.js

@@ -0,0 +1,1541 @@
+import { FluentIcon, FluentIconButton, LayoutUnit, PrimaryActionButton, StandardTitle, StatusChip, useAxiosGet, useId, useShellStore } from "./EnvironmentRibbon-BMvQEZPZ.js";
+import React, { Fragment, createContext, createRef, forwardRef, memo, useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
+import { Badge, Button, ButtonBase, Card, CardActions, CardContent, CircularProgress, Collapse, Divider, IconButton, LinearProgress, ListItemIcon, ListItemText, Menu, MenuItem, Popover, Slide, Tooltip, Typography, lighten, makeStyles, useTheme } from "@material-ui/core";
+import { ConfigService } from "udp-react-stencil-component-library";
+import { Redirect, useHistory, useLocation } from "react-router-dom";
+import clsx from "clsx";
+import { ArrowUpRightIcon, ChevronFold10Icon, ChevronRightIcon, ChevronUnfold10Icon, ClearIcon, DeleteIcon, ExcelDocumentIcon, FilterIcon, GroupListIcon, MaximumValueIcon, MoreIcon, MoreVerticalIcon, PDFIcon, SaveIcon, SearchIcon, TextDocumentIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { create } from "zustand";
+import { v4 } from "uuid";
+import { createTeleporter } from "react-teleporter";
+import { Alert } from "@material-ui/lab";
+import { DndProvider, useDragLayer } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { Responsive } from "react-grid-layout";
+import { useMeasure } from "react-use";
+import "react-grid-layout/css/styles.css";
+import "react-resizable/css/styles.css";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
+
+//#region src/stores/teleporterStore.ts
+const useTeleporterStore = create((set, get) => ({
+	teleporterMap: /* @__PURE__ */ new Map(),
+	getTeleporter: (targetId = "", location) => {
+		const mapCopy = new Map(get().teleporterMap);
+		let locationMap = mapCopy.get(targetId);
+		if (!locationMap) {
+			locationMap = /* @__PURE__ */ new Map();
+			mapCopy.set(targetId, locationMap);
+		}
+		if (!locationMap.has(location)) locationMap.set(location, { teleporter: createTeleporter() });
+		const teleporter = locationMap.get(location).teleporter;
+		set({ teleporterMap: mapCopy });
+		return teleporter;
+	},
+	getAllTeleporters: () => {
+		const result = [];
+		const map = get().teleporterMap;
+		for (const [targetId, locationMap] of map.entries()) for (const [location, entry] of locationMap.entries()) result.push([
+			targetId,
+			location,
+			entry.teleporter
+		]);
+		return result;
+	}
+}));
+
+//#endregion
+//#region src/UI/inputs/buttons/ToolBarButton.jsx
+const useStyles$12 = makeStyles((theme) => ({
+	root: { borderBottom: (props) => props.selected && `2px solid ${theme.palette.secondary.main}` },
+	wrapper: {
+		display: "flex",
+		flexDirection: "row",
+		marginRight: theme.spacing(2)
+	},
+	icon: {
+		fontSize: 16,
+		width: 16,
+		height: 16,
+		color: theme.palette.secondary.main
+	},
+	iconWrapper: {
+		background: theme.palette.common.white,
+		borderRadius: 100,
+		padding: theme.spacing(1)
+	},
+	label: {
+		marginLeft: theme.spacing(1),
+		fontSize: "0.875rem",
+		"&:hover": { color: theme.palette.secondary.main }
+	}
+}), { name: "ToolBarButton" });
+const ToolBarButton = (props) => {
+	const classes = useStyles$12(props);
+	const { component: ToolBarComponent, click, label, expanded, aria, icon = true, disabled = false } = props;
+	return /* @__PURE__ */ React.createElement(Tooltip, {
+		title: expanded && label || aria || "",
+		"aria-label": label,
+		placement: "top",
+		enterDelay: !expanded && 5e3
+	}, /* @__PURE__ */ React.createElement(ButtonBase, {
+		classes: { root: classes.root },
+		className: classes.wrapper,
+		onClick: click,
+		disableRipple: true,
+		"aria-label": aria,
+		disabled
+	}, icon && /* @__PURE__ */ React.createElement("div", { className: classes.iconWrapper }, /* @__PURE__ */ React.createElement(ToolBarComponent, { className: classes.icon })), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "body2",
+		className: classes.label
+	}, !expanded && label)));
+};
+ToolBarButton.propTypes = {
+	component: PropTypes.func,
+	click: PropTypes.func,
+	label: PropTypes.string,
+	expanded: PropTypes.bool,
+	aria: PropTypes.string,
+	icon: PropTypes.bool
+};
+
+//#endregion
+//#region src/dashboard/getWidgetLayout.ts
+const getW = (w) => {
+	if (typeof w === "object") return {
+		w: w.default,
+		minW: w.min,
+		maxW: w.max
+	};
+	if (typeof w === "number") return { w };
+	return { w: 2 };
+};
+const getH = (h) => {
+	if (typeof h === "object") return {
+		h: h.default,
+		minH: h.min,
+		maxH: h.max
+	};
+	if (typeof h === "number") return { h };
+	return { h: 2 };
+};
+/**
+* Get a default layout for widgets of a type
+*/
+function getWidgetLayout(getWidget, widgetType) {
+	const { w, h } = (getWidget && getWidget(widgetType)?.layout) ?? {};
+	const layout = {
+		...getW(w),
+		...getH(h)
+	};
+	const wResizable = "minW" in layout || "maxW" in layout;
+	const hResizable = "minH" in layout || "maxH" in layout;
+	layout.isResizable = wResizable || hResizable;
+	return layout;
+}
+
+//#endregion
+//#region src/dashboard/DashboardCardGrid.jsx
+const useStyle = makeStyles((theme) => ({ root: {
+	display: "flex",
+	flexDirection: "column",
+	width: "100%",
+	height: "100%",
+	marginBottom: (props) => props?.disableMargin ? "" : theme.spacing(3)
+} }), { name: "DashboardCardGrid" });
+const DASHBOARD_WIDGET = Symbol("DASHBOARD_WIDGET");
+const breakpoints = {
+	xs: 0,
+	xl: 1150
+};
+const breakpointCols = {
+	xs: 4,
+	xl: 4
+};
+/**
+* Grid layout for dashboard cards
+*/
+const DashboardCardGrid = (props) => {
+	const classes = useStyle(props);
+	const { children, onCreateCard, gridProperties,...other } = props;
+	const { getWidget } = useShellStore();
+	const rglRef = useRef();
+	const [ref, { width }] = useMeasure();
+	const theme = useTheme();
+	const { droppingWidgetType } = useDragLayer((monitor) => {
+		if (monitor.getItemType() === DASHBOARD_WIDGET) {
+			const { id: wigetType } = monitor.getItem();
+			return { droppingWidgetType: wigetType };
+		}
+		return { droppingWidgetType: null };
+	});
+	const droppingItemLayout = useMemo(() => {
+		if (droppingWidgetType) return {
+			i: v4(),
+			...getWidgetLayout(getWidget, droppingWidgetType)
+		};
+	}, [getWidget, droppingWidgetType]);
+	const drag = useCallback((layout, oldLayoutItem, layoutItem, placeholder) => {}, []);
+	const resize = useCallback((layout, oldLayoutItem, layoutItem, placeholder) => {
+		if (layoutItem.w >= 6 && layoutItem.w < 8) {
+			layoutItem.w = 4;
+			placeholder.w = 4;
+		}
+	}, []);
+	const drop = useCallback((layout, item) => {
+		if (droppingWidgetType) {
+			const { x, y, w, h } = item;
+			const { breakpoint } = rglRef.current.state;
+			if (onCreateCard) onCreateCard({
+				widgetType: droppingWidgetType,
+				id: v4(),
+				layout: { [breakpoint]: {
+					x,
+					y,
+					w,
+					h
+				} },
+				params: []
+			});
+		}
+	}, [droppingWidgetType, onCreateCard]);
+	return /* @__PURE__ */ React.createElement("div", {
+		ref,
+		className: classes.root
+	}, width ? /* @__PURE__ */ React.createElement(Responsive, {
+		ref: rglRef,
+		...other,
+		width,
+		breakpoints,
+		cols: breakpointCols,
+		rowHeight: 128,
+		margin: [theme.spacing(3), theme.spacing(3)],
+		containerPadding: [0, 0],
+		draggableHandle: "[data-handle]",
+		onDrag: drag,
+		onResize: resize,
+		onDrop: drop,
+		isDroppable: gridProperties?.isDroppable || false,
+		isDraggable: gridProperties?.isDraggable || false,
+		droppingItem: droppingItemLayout,
+		style: { height: "100%" }
+	}, children) : null);
+};
+var DashboardCardGrid_default = DashboardCardGrid;
+
+//#endregion
+//#region src/UI/surfaces/cards/FUICardHeader.jsx
+const useStyles$11 = makeStyles((theme) => ({
+	root: {
+		minHeight: 40,
+		paddingLeft: theme.spacing(2),
+		display: "flex",
+		flexDirection: "row",
+		alignItems: "center",
+		borderBottom: `1px solid ${theme.palette.divider}`
+	},
+	title: { flexGrow: 1 }
+}));
+const FUICardHeader = (props, ref) => {
+	const classes = useStyles$11(props);
+	const { className, children, headerActions, titleId,...other } = props;
+	return /* @__PURE__ */ React.createElement("div", {
+		ref,
+		...other,
+		className: clsx(className, classes.root)
+	}, /* @__PURE__ */ React.createElement(Typography, {
+		id: titleId,
+		className: classes.title
+	}, children), headerActions);
+};
+var FUICardHeader_default = forwardRef(FUICardHeader);
+
+//#endregion
+//#region src/UI/inputs/buttons/FUISquareIconButton.jsx
+const useStyles$10 = makeStyles((theme) => ({ root: { borderRadius: 0 } }), { name: "FUISquareIconButton" });
+/**
+* <IconButton> but with a square highlight
+*/
+const FUISquareIconButton = (props) => {
+	const classes = useStyles$10(props);
+	return /* @__PURE__ */ React.createElement(IconButton, {
+		...props,
+		classes
+	});
+};
+var FUISquareIconButton_default = FUISquareIconButton;
+
+//#endregion
+//#region src/UI/surfaces/cards/FluentCard.jsx
+const useStyles$9 = makeStyles({ root: {} }, { name: "FluentCard" });
+/**
+* A variant of <Card> that uses a square Fluent UI card style
+*/
+const FluentCard = forwardRef((props, ref) => {
+	const classes = useStyles$9(props);
+	const { children,...other } = props;
+	return /* @__PURE__ */ React.createElement(Card, {
+		ref,
+		square: true,
+		...other,
+		classes
+	}, children);
+});
+FluentCard.displayName = "FluentCard";
+
+//#endregion
+//#region src/UI/surfaces/cards/FluentCardContent.jsx
+const useStyles$8 = makeStyles({ root: {} }, { name: "FluentCardContent" });
+/**
+* A variant of <CardContent> that uses a Fluent UI card style
+*/
+const FluentCardContent = forwardRef((props, ref) => {
+	const classes = useStyles$8(props);
+	const { children,...other } = props;
+	return /* @__PURE__ */ React.createElement(CardContent, {
+		ref,
+		...other,
+		classes
+	}, children);
+});
+FluentCardContent.displayName = "FluentCardContent";
+
+//#endregion
+//#region src/UI/surfaces/cards/FluentCardActions.jsx
+const useStyles$7 = makeStyles({
+	root: {},
+	spacing: {}
+}, { name: "FluentCardActions" });
+/**
+* A variant of <CardActions> that uses a Fluent UI card style
+*/
+const FluentCardActions = forwardRef((props, ref) => {
+	const classes = useStyles$7(props);
+	const { children,...other } = props;
+	return /* @__PURE__ */ React.createElement(CardActions, {
+		ref,
+		...other,
+		classes
+	}, children);
+});
+FluentCardActions.displayName = "FluentCardActions";
+
+//#endregion
+//#region src/UI/surfaces/cards/FUICard.jsx
+const useStyles$6 = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		flexDirection: "column"
+	},
+	raised: { zIndex: 1 },
+	contentArea: {
+		flex: "1 1 auto",
+		minHeight: 0,
+		display: "flex",
+		flexDirection: "column"
+	},
+	cardActions: {
+		display: "flex",
+		flexDirection: "row",
+		justifyContent: "flex-start",
+		paddingTop: theme.spacing(1),
+		padding: theme.spacing(2)
+	}
+}), { name: "FUICard" });
+let FUICardAction = (props, ref) => {
+	const { children,...other } = props;
+	return /* @__PURE__ */ React.createElement(Button, {
+		ref,
+		size: "small",
+		variant: "contained",
+		disableElevation: true,
+		...other
+	}, children);
+};
+FUICardAction = forwardRef(FUICardAction);
+let FUICardHeaderMenu = (props, ref) => {
+	const { children } = props;
+	return /* @__PURE__ */ React.createElement("div", {
+		button: /* @__PURE__ */ React.createElement(FUISquareIconButton_default, null, /* @__PURE__ */ React.createElement(FluentIcon, {
+			component: MoreIcon,
+			size: "small"
+		})),
+		menu: /* @__PURE__ */ React.createElement(Menu, null, children)
+	});
+};
+FUICardHeaderMenu = forwardRef(FUICardHeaderMenu);
+const FUICard = (props, ref) => {
+	const classes = useStyles$6();
+	const { className, children, actions, title, headerActions, CardHeaderProps, CardProps, raised, name,...cardProps } = props;
+	const id = useId(name, cardProps.id);
+	const titleId = `${id}-title`;
+	return /* @__PURE__ */ React.createElement(FluentCard, {
+		ref,
+		component: "section",
+		"aria-labelledby": titleId,
+		...cardProps,
+		raised,
+		className: clsx(className, raised && classes.raised),
+		...CardProps,
+		classes: { root: classes.root }
+	}, /* @__PURE__ */ React.createElement(FUICardHeader_default, {
+		titleId,
+		headerActions,
+		...CardHeaderProps
+	}, title), /* @__PURE__ */ React.createElement(FluentCardContent, { className: classes.contentArea }, children), actions && /* @__PURE__ */ React.createElement(FluentCardActions, { className: classes.cardActions }, actions));
+};
+var FUICard_default = forwardRef(FUICard);
+
+//#endregion
+//#region src/UI/widgets/FluentComponents/FUIMenuItem.jsx
+const useStyles$5 = makeStyles({ listItemIcon: { minWidth: 32 } }, { name: "FUIMenuItem" });
+/**
+* <MenuItem> with icon support
+*/
+const FUIMenuItem = (props, ref) => {
+	const classes = useStyles$5();
+	const { icon, fluentIcon, primary, secondary,...menuItemProps } = props;
+	return /* @__PURE__ */ React.createElement(MenuItem, {
+		ref,
+		dense: true,
+		...menuItemProps
+	}, /* @__PURE__ */ React.createElement(ListItemIcon, { className: classes.listItemIcon }, icon || /* @__PURE__ */ React.createElement(FluentIcon, { component: fluentIcon })), /* @__PURE__ */ React.createElement(ListItemText, {
+		primary,
+		secondary
+	}));
+};
+var FUIMenuItem_default = forwardRef(FUIMenuItem);
+
+//#endregion
+//#region src/dashboard/WidgetCard.jsx
+/**
+* Core component for dashboard widget cards
+*/
+const WidgetCard = (props) => {
+	const { children, headerActions, className, widgetType, id, layout, params, setParam, onDelete, loading, errors, theme, hideWidgetName, innerPadding, contentHeight, contentMaxHeight,...other } = props;
+	const useStyles$13 = makeStyles((theme$1) => ({
+		root: { "&.react-resizable-hide .react-resizable-handle": { display: "none" } },
+		darkRoot: {
+			"&.react-resizable-hide .react-resizable-handle": { display: "none" },
+			background: "#424242",
+			color: "white"
+		},
+		anyRoot: { "& .MuiCardContent-root": {
+			justifyContent: "space-between",
+			overflow: "auto",
+			padding: 0
+		} },
+		handle: {
+			cursor: "move",
+			"&:hover": { backgroundColor: theme$1.palette.action.hover },
+			display: hideWidgetName && "none"
+		},
+		loadingContent: {
+			flex: 1,
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		innerWidgetContentContainer: {
+			height: widgetType === "TransformerLoadWidget" ? "auto" : contentHeight ? contentHeight : "100%",
+			maxHeight: contentMaxHeight ? contentMaxHeight : "",
+			minWidth: widgetType === "ProgressBarWidget" ? 0 : 270,
+			display: "flex",
+			flexDirection: "column",
+			justifyContent: "space-between",
+			padding: innerPadding || (widgetType === "VEERegisterRead" ? 0 : theme$1.spacing(2))
+		}
+	}));
+	const classes = useStyles$13();
+	const raised = /(^|\s)react-draggable-dragging(\s|$)/.test(className ?? "");
+	let body = children;
+	if (loading && !body) body = /* @__PURE__ */ React.createElement("div", { className: classes.loadingContent }, /* @__PURE__ */ React.createElement(CircularProgress, { size: 64 }));
+	if (errors && !body) body = /* @__PURE__ */ React.createElement("div", null, "Unexpected error");
+	return /* @__PURE__ */ React.createElement(FUICard_default, {
+		...other,
+		className: clsx(className, theme === "dark" ? classes.darkRoot : classes.root, classes.anyRoot),
+		raised,
+		CardHeaderProps: {
+			className: classes.handle,
+			"data-handle": true
+		},
+		headerActions: /* @__PURE__ */ React.createElement(React.Fragment, null, headerActions, /* @__PURE__ */ React.createElement(FUICardHeaderMenu, null, /* @__PURE__ */ React.createElement(FUIMenuItem_default, {
+			onClick: onDelete,
+			fluentIcon: DeleteIcon,
+			primary: "Delete"
+		})))
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.innerWidgetContentContainer }, body));
+};
+
+//#endregion
+//#region src/dashboard/DashboardWidget.jsx
+/**
+* Widget implementation for dashboards
+*/
+let DashboardWidget = (props) => {
+	const { widgetType, id, deleteCard, children, params: paramValues, setParams,...other } = props;
+	const { getWidget, isValidWidget } = useShellStore();
+	const onDelete = useCallback(() => {
+		deleteCard(id);
+	}, [deleteCard, id]);
+	const { Widget, params: paramDefs } = useMemo(() => {
+		if (!isValidWidget || !getWidget) return {};
+		if (isValidWidget(widgetType) && getWidget) return getWidget(widgetType);
+		return {};
+	}, [
+		widgetType,
+		getWidget,
+		isValidWidget
+	]);
+	const params = useMemo(() => {
+		const params$1 = {};
+		if (paramDefs) {
+			for (const name in paramDefs) params$1[name] = paramDefs[name].defaultValue;
+			for (const param in paramValues) params$1[param] = paramValues[param];
+		}
+		return params$1;
+	}, [paramDefs, paramValues]);
+	const setParam = useCallback((name, value) => setParams(id, { [name]: value }), [id, setParams]);
+	if (!isValidWidget || !getWidget) return /* @__PURE__ */ React.createElement(WidgetCard, {
+		...other,
+		title: "Error"
+	}, "isValidWidget or getWidget functions are not defined");
+	if (!Widget) return /* @__PURE__ */ React.createElement(WidgetCard, {
+		...other,
+		title: "Error"
+	}, "Unknown widget type \"", widgetType, "\".");
+	else return /* @__PURE__ */ React.createElement(Widget, {
+		...other,
+		id,
+		params,
+		setParam,
+		onDelete
+	}, children);
+};
+var DashboardWidget_default = memo(DashboardWidget);
+
+//#endregion
+//#region src/page/Page.jsx
+const Page = (props) => {
+	const { gridConfig, widgetConfig, disableMargin } = props;
+	const { getWidget, isValidWidget } = useShellStore();
+	const gridProperties = gridConfig ? JSON.parse(gridConfig) : null;
+	let widgets = widgetConfig || null;
+	if (typeof widgetConfig === "string") widgets = JSON.parse(widgetConfig);
+	const calculateLayouts = () => {
+		if (!widgets) return null;
+		const layouts$1 = {};
+		for (const widget of widgets) for (const breakpoint in widget.layout) {
+			if (breakpoint === "__typename" || !widget.layout[breakpoint]) continue;
+			layouts$1[breakpoint] = layouts$1[breakpoint] || [];
+			const { __typename,...layout } = widget.layout[breakpoint];
+			layouts$1[breakpoint].push({
+				...getWidgetLayout(getWidget, widget.widgetType),
+				isResizable: widget.params.isResizable || false,
+				...layout,
+				i: widget.id
+			});
+		}
+		return layouts$1;
+	};
+	const layouts = useMemo(() => calculateLayouts(), [calculateLayouts, widgetConfig]);
+	const cards = useMemo(() => widgets && widgets.map(({ __typename,...widget }) => /* @__PURE__ */ React.createElement(DashboardWidget_default, {
+		key: widget.id,
+		...widget
+	})), [widgets]);
+	if (!layouts) return null;
+	return /* @__PURE__ */ React.createElement(DashboardCardGrid_default, {
+		layouts,
+		gridProperties,
+		disableMargin
+	}, cards);
+};
+var Page_default = Page;
+
+//#endregion
+//#region src/UI/inputs/buttons/AmbientPopoverMenuItem.jsx
+const useStyles$4 = makeStyles((theme) => ({ root: { paddingLeft: theme.spacing(1) } }));
+const AmbientPopoverMenuItem = ({ label, component, click }) => {
+	const classes = useStyles$4();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" }), /* @__PURE__ */ React.createElement(ToolBarButton, {
+		label,
+		component,
+		click,
+		icon: false
+	}), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" }), /* @__PURE__ */ React.createElement(Divider, null));
+};
+
+//#endregion
+//#region src/UI/utilityDisplay/utilityHeader/ui/PAHExport.jsx
+const useStyles$3 = makeStyles((theme) => ({
+	root: {},
+	popoverRoot: {},
+	icon: { color: theme.palette.secondary.main }
+}));
+const PAHExport = ({ exportCSV, exportExcel, exportPDF }) => {
+	const classes = useStyles$3();
+	const [anchorEl, setAnchorEl] = useState(null);
+	const handleClick = (event) => {
+		setAnchorEl(event.currentTarget);
+	};
+	const handleClose = () => {
+		setAnchorEl(null);
+	};
+	const open = Boolean(anchorEl);
+	const id = open ? "simple-popover" : void 0;
+	const gridControlsExport = [{
+		label: "Export CSV",
+		component: TextDocumentIcon,
+		click: exportCSV,
+		key: 1
+	}, {
+		label: "Export Excel",
+		component: ExcelDocumentIcon,
+		click: exportExcel,
+		key: 2
+	}];
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		className: classes.icon,
+		icon: ArrowUpRightIcon,
+		onClick: handleClick
+	}), /* @__PURE__ */ React.createElement(Popover, {
+		classes: { root: classes.popoverRoot },
+		square: true,
+		elevation: 1,
+		id,
+		open,
+		anchorEl,
+		onClose: handleClose,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "left"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "left"
+		}
+	}, /* @__PURE__ */ React.createElement("div", { style: { width: 140 } }, /* @__PURE__ */ React.createElement("div", null, gridControlsExport.map((item) => {
+		return /* @__PURE__ */ React.createElement(AmbientPopoverMenuItem, {
+			label: item.label,
+			component: item.component,
+			click: item.click
+		});
+	})))));
+};
+
+//#endregion
+//#region src/UI/navigation/tabs/UdpTabs.jsx
+const useStyles$2 = makeStyles((theme) => ({
+	root: {
+		flexSkrink: 0,
+		overflow: "hidden"
+	},
+	tabsWrapper: {
+		display: "flex",
+		gap: (props) => props?.variant === "block" ? theme.spacing(1) : null,
+		flexGrow: 1
+	},
+	tab: {
+		padding: `8px 18px`,
+		flex: 1
+	},
+	blockTab: { backgroundColor: theme.palette.background.paper },
+	activeTab: {
+		borderBottom: (props) => props?.variant === "block" ? null : `2px solid ${theme.palette.secondary.main}`,
+		backgroundColor: (props) => props?.variant === "block" ? theme.palette.secondary.light : null,
+		color: (props) => props?.variant === "block" ? theme.palette.getContrastText(theme.palette.secondary.light) : null
+	},
+	moreButton: {
+		marginTop: theme.spacing(1),
+		width: theme.spacing(1),
+		height: theme.spacing(1),
+		borderRadius: 2
+	},
+	menuItem: {
+		whiteSpace: "normal",
+		width: (props) => props?.menuWidth ? props?.menuWidth : "170px"
+	},
+	popoverWrapper: { maxHeight: (props) => props?.menuMaxHeight ? props?.menuMaxHeight : "250px" }
+}));
+const UdpTabs = (props) => {
+	const { value, onChange, className, menuItemProps, tabList, variant, buttonWidth } = props;
+	const classes = useStyles$2(props);
+	const tabContainerRef = useRef(null);
+	const innerTabContainerRef = useRef(null);
+	const [anchorEl, setAnchorEl] = useState(null);
+	const [visibleTabList, setVisibleTabList] = useState(null);
+	const [menuTabList, setMenuTabList] = useState(null);
+	const [initialTotalTabWidth, setInitialTotalTabWidth] = useState(null);
+	const [initialTabWidth, setInitialTabWidth] = useState();
+	const gapWidth = 8;
+	const open = Boolean(anchorEl);
+	const currentTabList = useMemo(() => {
+		return tabList?.map((tab, index) => ({
+			id: index,
+			...tab,
+			ref: createRef()
+		}));
+	}, [tabList]);
+	const handlePopoverClick = useCallback((event, index) => {
+		setAnchorEl(event.currentTarget);
+	}, []);
+	const handlePopoverClose = () => {
+		setAnchorEl(null);
+	};
+	const menuItemSelected = useMemo(() => {
+		return !!menuTabList?.find((tab) => tab?.id === value);
+	}, [value, menuTabList]);
+	const getInitialTabWidth = useCallback((tabsElements, currentTabList$1) => {
+		let totalTabWidth = 0;
+		let tabWidth = [];
+		if (tabsElements?.length === currentTabList$1?.length && !initialTotalTabWidth) {
+			for (let i = 0; i < tabsElements.length; i++) {
+				totalTabWidth += tabsElements[i].clientWidth;
+				if (variant === "block") totalTabWidth += gapWidth;
+				tabWidth[i] = tabsElements[i].clientWidth;
+			}
+			setInitialTotalTabWidth(totalTabWidth);
+			setInitialTabWidth(tabWidth);
+			return {
+				totalTabWidth,
+				tabWidth
+			};
+		}
+		return {
+			totalTabWidth: initialTotalTabWidth,
+			tabWidth: initialTabWidth
+		};
+	}, [
+		initialTabWidth,
+		initialTotalTabWidth,
+		variant
+	]);
+	const calculateHiddenTabs = useCallback(() => {
+		if (innerTabContainerRef.current) {
+			const containerWidth = innerTabContainerRef.current.clientWidth;
+			const tabsElements = Array.from(innerTabContainerRef.current.children);
+			const moreBtnWidth = 24;
+			let hiddenTabsArray = [];
+			let visibleTabsArray = Array.from(currentTabList);
+			const { totalTabWidth, tabWidth } = getInitialTabWidth(tabsElements, currentTabList);
+			if (totalTabWidth > containerWidth) {
+				let accumulatedWidth = 0;
+				for (let i = 0; i < tabWidth?.length; i++) {
+					accumulatedWidth += tabWidth[i];
+					if (variant === "block") accumulatedWidth += gapWidth;
+					if (accumulatedWidth > containerWidth - moreBtnWidth) {
+						hiddenTabsArray = Array.from(currentTabList).slice(i);
+						visibleTabsArray = Array.from(currentTabList).slice(0, i);
+						break;
+					}
+				}
+			}
+			setVisibleTabList(visibleTabsArray);
+			setMenuTabList(hiddenTabsArray);
+		}
+	}, [
+		currentTabList,
+		getInitialTabWidth,
+		variant
+	]);
+	useEffect(() => {
+		setVisibleTabList(currentTabList);
+	}, [currentTabList]);
+	useEffect(() => {
+		calculateHiddenTabs();
+		const observer = new ResizeObserver((entries) => {
+			handlePopoverClose();
+			calculateHiddenTabs();
+		});
+		if (tabContainerRef.current) observer.observe(tabContainerRef.current);
+		return () => {
+			observer.disconnect();
+		};
+	}, [calculateHiddenTabs]);
+	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", {
+		className: clsx(classes.root, className),
+		ref: tabContainerRef
+	}, /* @__PURE__ */ React.createElement("div", {
+		className: classes.tabsWrapper,
+		ref: innerTabContainerRef,
+		style: variant === "spread" ? { justifyContent: "space-between" } : null
+	}, visibleTabList?.map((item, index) => /* @__PURE__ */ React.createElement(ButtonBase, {
+		style: {
+			flex: variant === "spread" && 1,
+			width: !!buttonWidth && buttonWidth
+		},
+		key: index,
+		id: "udpRecord-UdpTabs-MenuItem-" + item?.label?.replace(/ /g, "-"),
+		udprecordid: "udpRecord-UdpTabs-MenuItem-" + item?.label?.replace(/ /g, "-")
+	}, /* @__PURE__ */ React.createElement("div", {
+		className: clsx(classes.tab, {
+			[classes.blockTab]: variant === "block",
+			[classes.activeTab]: value === item?.id
+		}),
+		onClick: (e) => {
+			onChange(e, item?.id);
+			if (item?.onClick) item.onClick();
+			setAnchorEl(null);
+		}
+	}, /* @__PURE__ */ React.createElement(Typography, {
+		noWrap: true,
+		style: { fontWeight: variant === "spread" ? "bold" : "normal" }
+	}, item?.label)))), menuTabList?.length > 0 && /* @__PURE__ */ React.createElement(IconButton, {
+		onClick: handlePopoverClick,
+		className: classes.moreButton,
+		color: "primary",
+		id: "udpRecord-UdpTabs-MoreActions",
+		udprecordid: "udpRecord-UdpTabs-MoreActions"
+	}, /* @__PURE__ */ React.createElement(Badge, {
+		color: "secondary",
+		variant: "dot",
+		invisible: menuItemSelected === false
+	}, /* @__PURE__ */ React.createElement(FluentIcon, {
+		component: MoreVerticalIcon,
+		size: "medium"
+	})))), !!menuTabList?.length && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Popover, {
+		id: "menuTabList",
+		open,
+		anchorEl,
+		onClose: handlePopoverClose,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "left"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "left"
+		},
+		className: classes.popoverWrapper
+	}, menuTabList?.map((tab) => {
+		return /* @__PURE__ */ React.createElement(MenuItem, {
+			key: tab?.id,
+			id: "udpRecord-UdpTabs-MenuItem-" + tab?.label?.replace(/ /g, "-"),
+			udprecordid: "udpRecord-UdpTabs-MenuItem-" + tab?.label?.replace(/ /g, "-"),
+			onClick: (e) => {
+				if (tab?.onClick) tab.onClick();
+				if (onChange) onChange(e, tab?.id);
+				setAnchorEl(null);
+			},
+			className: clsx(classes.menuItem, className),
+			selected: tab?.id === value,
+			...menuItemProps
+		}, /* @__PURE__ */ React.createElement(Typography, null, tab?.label));
+	})))));
+};
+
+//#endregion
+//#region src/UI/utilityDisplay/utilityHeader/ui/teleporter.ts
+const useAllTeleporters = () => {
+	const teleporterMap = useTeleporterStore((state) => state.teleporterMap);
+	const allTeleporters = useMemo(() => {
+		const result = [];
+		for (const [targetId, locationMap] of teleporterMap.entries()) for (const [location, entry] of locationMap.entries()) result.push([
+			targetId,
+			location,
+			entry.teleporter
+		]);
+		return result;
+	}, [teleporterMap]);
+	return allTeleporters;
+};
+
+//#endregion
+//#region src/UI/utilityDisplay/utilityHeader/PrimaryActionHeader.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		[theme.breakpoints.between("xs", "sm")]: { height: 50 }
+	},
+	title: { margin: theme.spacing(2) },
+	titleWrapper: {
+		paddingLeft: theme.spacing(2),
+		paddingRight: (props) => props.single ? theme.spacing(2) : 0,
+		display: "flex",
+		alignItems: "center"
+	},
+	subHeaderWrapper: {
+		width: "100%",
+		marginTop: 0,
+		[theme.breakpoints.down("xs")]: { justifyContent: "flex-start" }
+	},
+	subHeader: {
+		minWidth: (props) => props.subheader && 320,
+		marginLeft: theme.spacing(2),
+		[theme.breakpoints.between("sm", "lg")]: { display: "none" },
+		[theme.breakpoints.down("xs")]: { display: "none" }
+	},
+	denseSubtitle: {
+		marginTop: theme.spacing(1.2),
+		marginLeft: theme.spacing(2)
+	},
+	actionRow: {
+		display: "flex",
+		flex: 1,
+		alignItems: "center"
+	},
+	secondaryButtons: {
+		display: "flex",
+		[theme.breakpoints.down("sm")]: { display: "none" },
+		alignItems: "center"
+	},
+	secondaryButtonsMobile: {
+		display: "flex",
+		padding: theme.spacing(1),
+		background: theme.palette.divider,
+		[theme.breakpoints.up("sm")]: { display: "none" }
+	},
+	search: {
+		marginRight: theme.spacing(2),
+		marginTop: theme.spacing(3),
+		flex: 1
+	},
+	close: { marginRight: theme.spacing(2) },
+	pab: {
+		display: "flex",
+		[theme.breakpoints.between("xs", "sm")]: {
+			position: "fixed",
+			bottom: theme.spacing(2),
+			right: theme.spacing(2),
+			zIndex: theme.zIndex.appBar
+		}
+	},
+	titleOnly: { paddingBottom: theme.spacing(1) },
+	advancedOptions: {
+		backgroundColor: "#EEEEEE",
+		width: "100%"
+	},
+	tabPageButtons: {
+		height: 50,
+		borderTop: `1px solid ${theme.palette.divider}`,
+		paddingLeft: theme.spacing(2),
+		backgroundColor: "#EEEEEE"
+	},
+	divider: {
+		height: 25,
+		marginLeft: theme.spacing(1),
+		marginRight: theme.spacing(2)
+	},
+	functionIcons: {
+		fontSize: 18,
+		color: theme.palette.secondary.main
+	},
+	tabRow: {
+		maxWidth: 500,
+		[theme.breakpoints.down("sm")]: { width: 300 },
+		minHeight: "48px"
+	},
+	fullTabs: {
+		[theme.breakpoints.down("xl")]: { maxWidth: 700 },
+		[theme.breakpoints.down("lg")]: { maxWidth: 500 },
+		[theme.breakpoints.down("sm")]: { maxWidth: "100vw" },
+		minHeight: "48px"
+	},
+	iconButton: {
+		marginTop: 9,
+		marginLeft: 4
+	},
+	titleWrapperBack: {
+		display: "flex",
+		flex: (props) => props.title && 1
+	},
+	buttomButtonRow: {
+		display: "flex",
+		width: "100%"
+	},
+	bottomButtonsLeft: {
+		display: "flex",
+		flex: 1,
+		justifyContent: "flex-start"
+	},
+	bottomButtonsRigth: {
+		display: "flex",
+		justifyContent: "flex-end"
+	},
+	single: { display: "flex" },
+	containerStyle: {
+		background: lighten(theme.palette.secondary.light, .9),
+		padding: theme.spacing(1),
+		paddingLeft: theme.spacing(2),
+		borderTop: `1px solid ${theme.palette.divider} `
+	},
+	gridControlLineUp: {
+		display: "flex",
+		alignItems: "center",
+		marginRight: theme.spacing(2)
+	},
+	additionalTitleComponent: { marginLeft: theme.spacing(2) }
+}));
+const PrimaryActionHeader = (props) => {
+	const classes = useStyles$1(props);
+	const { buttonLabel, title, subheader, handleClick, secondaryButtons, hidePAB = false, search, searchField, expandOptions, handleMouseLeave, expandedContent, handleChange, value, tabList, tabs, resizeGrid, collapse, expandAllItems, groups, showGroups, grid, clickBack, topRowSecondary, bottomRowSecondary, bottomRowSecondaryRight, loading, openGroups, openFilter, altInputs, loadingVal, exportGrid, openSearch = false, styleSearch, stepper, pabDisabled, switcher, single, lowerTray, lowerTraySearch, lowerTrayGrid, upperTrayGrid, exportCSV, exportExcel, exportPDF, expand, expandGrid, collapseGrid, resize, gridApi, saveGridConfig, deleteGridConfig, clearGridConfig, hideActionRow = false, allowAdditionalTitleComponent = false, allowAdditionalRightComponent = true, StatusChipProps = null, tabProps, tabVariant, additionalComponentId = "",...otherProps } = props;
+	const [searchExpanded, setSearchExpanded] = useState(openSearch);
+	const currentContainerId = useShellStore((state) => state.currentContainerId);
+	const allTeleporters = useAllTeleporters();
+	const expandSearch = () => {
+		setSearchExpanded(!searchExpanded);
+	};
+	const gridControlsExpand = [{
+		label: "",
+		aria: "expand",
+		component: ChevronUnfold10Icon,
+		click: expandGrid,
+		id: 1
+	}];
+	const gridControlsResize = [{
+		label: "",
+		aria: "resize",
+		component: MaximumValueIcon,
+		click: resizeGrid,
+		id: 2
+	}];
+	const gridControlsCollapse = [{
+		label: "",
+		aria: "collapse",
+		component: ChevronFold10Icon,
+		click: collapseGrid,
+		id: 3
+	}];
+	const gridControlsGroup = [{
+		label: "Group",
+		component: GroupListIcon,
+		click: openGroups,
+		id: 4
+	}];
+	const gridControlsFilter = [{
+		label: "Filter",
+		component: FilterIcon,
+		click: openFilter,
+		id: 5
+	}];
+	const gridControlsSave = [{
+		label: "Save Grid Configuration",
+		component: SaveIcon,
+		click: saveGridConfig,
+		id: 6
+	}];
+	const gridControlsDelete = [{
+		label: "Delete Grid Configuration",
+		component: DeleteIcon,
+		click: deleteGridConfig,
+		id: 7
+	}];
+	const gridControlsClear = [{
+		label: "Clear Grid Configuration",
+		component: ClearIcon,
+		click: clearGridConfig,
+		id: 8
+	}];
+	const gridControlsExport = /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(PAHExport, {
+		exportCSV: exportCSV || (() => gridApi?.exportDataAsCsv()),
+		exportExcel: exportExcel || (() => gridApi?.exportDataAsExcel()),
+		exportPDF
+	}));
+	const gridControlExpand = gridControlsExpand && /* @__PURE__ */ React.createElement("div", null, gridControlsExpand.map((item) => {
+		return /* @__PURE__ */ React.createElement(ToolBarButton, {
+			label: item.label,
+			title: item.label,
+			expanded: true,
+			component: item.component,
+			click: item.click,
+			aria: item.aria,
+			key: item.id
+		});
+	}));
+	const gridControlResize = gridControlsResize && /* @__PURE__ */ React.createElement("div", null, gridControlsResize.map((item) => {
+		return /* @__PURE__ */ React.createElement(ToolBarButton, {
+			label: item.label,
+			title: item.label,
+			expanded: true,
+			component: item.component,
+			click: item.click,
+			aria: item.aria,
+			key: item.id
+		});
+	}));
+	const gridControlCollapse = gridControlsCollapse && /* @__PURE__ */ React.createElement("div", null, gridControlsCollapse.map((item) => {
+		return /* @__PURE__ */ React.createElement(ToolBarButton, {
+			label: item.label,
+			title: item.label,
+			expanded: true,
+			component: item.component,
+			click: item.click,
+			aria: item.aria,
+			key: item.id
+		});
+	}));
+	const gridControlSave = gridControlsSave && /* @__PURE__ */ React.createElement("div", null, gridControlsSave.map((item) => {
+		return /* @__PURE__ */ React.createElement(ToolBarButton, {
+			label: item.label,
+			title: item.label,
+			expanded: true,
+			component: item.component,
+			click: item.click,
+			aria: item.aria,
+			key: item.id
+		});
+	}));
+	const gridControlDelete = gridControlsDelete && /* @__PURE__ */ React.createElement("div", null, gridControlsDelete.map((item) => {
+		return /* @__PURE__ */ React.createElement(ToolBarButton, {
+			label: item.label,
+			title: item.label,
+			expanded: true,
+			component: item.component,
+			click: item.click,
+			aria: item.aria,
+			key: item.id
+		});
+	}));
+	const gridControlClear = gridControlsClear && /* @__PURE__ */ React.createElement("div", null, gridControlsClear.map((item) => {
+		return /* @__PURE__ */ React.createElement(ToolBarButton, {
+			label: item.label,
+			title: item.label,
+			expanded: true,
+			component: item.component,
+			click: item.click,
+			aria: item.aria,
+			key: item.id
+		});
+	}));
+	const searchToggle = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { style: { display: "flex" } }, searchExpanded && /* @__PURE__ */ React.createElement(FluentIconButton, {
+		click: expandSearch,
+		"aria-label": "close search",
+		className: classes.close,
+		icon: ChevronRightIcon,
+		onClick: expandSearch,
+		size: "small"
+	})), /* @__PURE__ */ React.createElement("div", {
+		className: classes.search,
+		style: { flex: 1 }
+	}, /* @__PURE__ */ React.createElement("div", null, searchExpanded && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Slide, {
+		direction: "left",
+		in: expandSearch,
+		mountOnEnter: true,
+		unmountOnExit: true
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.searchWrapper }, searchField))))));
+	const LowerTrayShell = ({ children }) => {
+		return /* @__PURE__ */ React.createElement("div", { className: classes.containerStyle }, children);
+	};
+	const GridControlLineUp = () => {
+		return /* @__PURE__ */ React.createElement("div", { className: classes.gridControlLineUp }, saveGridConfig && gridControlSave, deleteGridConfig && gridControlDelete, clearGridConfig && gridControlClear, expandGrid && gridControlExpand, resizeGrid && gridControlResize, collapseGrid && gridControlCollapse, exportGrid && gridControlsExport);
+	};
+	const additionalTitleTeleportedComponents = useMemo(() => {
+		const components = [];
+		allTeleporters.forEach(([targetId, location, teleporter]) => {
+			const Target = teleporter.Target;
+			if (targetId === additionalComponentId && location === "title") components.push(/* @__PURE__ */ React.createElement("div", {
+				key: targetId,
+				className: "teleport-target"
+			}, /* @__PURE__ */ React.createElement(Target, null)));
+		});
+		return components;
+	}, [additionalComponentId, allTeleporters]);
+	return /* @__PURE__ */ React.createElement("div", { key: currentContainerId }, /* @__PURE__ */ React.createElement("div", { className: single && classes.single }, /* @__PURE__ */ React.createElement("div", { className: classes.titleWrapperBack }, clickBack && /* @__PURE__ */ React.createElement("div", { className: classes.iconButton }, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		icon: ArrowBackIcon,
+		onClick: clickBack
+	})), title && /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.titleWrapper }, /* @__PURE__ */ React.createElement(StandardTitle, { removeMarginTop: single }, title), single && subheader && /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.denseSubtitle,
+		variant: "subtitle1",
+		component: "h2"
+	}, subheader), allowAdditionalTitleComponent && /* @__PURE__ */ React.createElement("div", { className: classes.additionalTitleComponent }, additionalTitleTeleportedComponents.map((value$1) => {
+		return value$1;
+	})))), !title && allowAdditionalTitleComponent && /* @__PURE__ */ React.createElement("div", { className: classes.additionalTitleComponent }, additionalTitleTeleportedComponents.map((value$1) => {
+		return value$1;
+	})), StatusChipProps && /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.titleWrapper }, /* @__PURE__ */ React.createElement(StatusChip, {
+		label: StatusChipProps?.label,
+		status: StatusChipProps?.status
+	})))), /* @__PURE__ */ React.createElement("div", { className: classes.subHeaderWrapper }, stepper, !hideActionRow && /* @__PURE__ */ React.createElement("div", { className: classes.actionRow }, !single && subheader && /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.denseSubtitle,
+		variant: "subtitle1",
+		component: "h2"
+	}, subheader), /* @__PURE__ */ React.createElement("div", { className: grid ? classes.tabRow : classes.fullTabs }, tabList?.length > 0 && /* @__PURE__ */ React.createElement(UdpTabs, {
+		value,
+		onChange: handleChange,
+		tabList,
+		variant: tabVariant
+	})), search && searchToggle, /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React.createElement("div", { className: classes.secondaryButtons }, !searchExpanded && search && /* @__PURE__ */ React.createElement(ToolBarButton, {
+		label: "Search",
+		component: SearchIcon,
+		click: expandSearch
+	}), search && /* @__PURE__ */ React.createElement(Divider, {
+		orientation: "vertical",
+		className: classes.divider
+	}), (expandGrid || resizeGrid || collapseGrid || exportGrid || saveGridConfig || deleteGridConfig || clearGridConfig) && upperTrayGrid && /* @__PURE__ */ React.createElement(GridControlLineUp, { expand }), grid && openFilter && gridControlsFilter.map((item) => {
+		return /* @__PURE__ */ React.createElement(ToolBarButton, {
+			label: item.label,
+			title: item.label,
+			expanded: true,
+			component: item.component,
+			click: item.click,
+			aria: item.aria,
+			key: item.id
+		});
+	}), grid && openGroups && gridControlsGroup.map((item) => {
+		return /* @__PURE__ */ React.createElement(ToolBarButton, {
+			label: item.label,
+			title: item.label,
+			expanded: true,
+			component: item.component,
+			click: item.click,
+			aria: item.aria,
+			key: item.id
+		});
+	}), grid && searchExpanded && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		id: "udpRecord-PrimaryActionHeader-ClosePanel",
+		udprecordid: "udpRecord-PrimaryActionHeader-ClosePanel",
+		icon: MoreVerticalIcon,
+		"aria-label": "Close Panel"
+	})), secondaryButtons && !tabs && secondaryButtons.map((item, index) => {
+		return /* @__PURE__ */ React.createElement(ToolBarButton, {
+			label: item.label,
+			expanded: searchExpanded,
+			component: item.component,
+			click: item.click,
+			key: item.id ?? index,
+			aria: item.label,
+			disabled: item.disabled
+		});
+	})), /* @__PURE__ */ React.createElement("div", null, allowAdditionalRightComponent && allTeleporters.map(([targetId, location, teleporter]) => {
+		const Target = teleporter.Target;
+		if (targetId === additionalComponentId && location === "right") return /* @__PURE__ */ React.createElement("div", {
+			key: targetId,
+			className: "teleport-target"
+		}, /* @__PURE__ */ React.createElement(Target, null));
+		else return null;
+	})), !hidePAB && /* @__PURE__ */ React.createElement("div", { className: classes.pab }, topRowSecondary && topRowSecondary.map((item, index) => {
+		return /* @__PURE__ */ React.createElement(ToolBarButton, {
+			label: item.label,
+			expanded: searchExpanded,
+			component: item.component,
+			click: item.click,
+			key: item.id ?? index,
+			aria: item.label
+		});
+	}), /* @__PURE__ */ React.createElement(PrimaryActionButton, {
+		disabled: pabDisabled,
+		onClick: handleClick,
+		...otherProps
+	}, buttonLabel)))), /* @__PURE__ */ React.createElement("div", { className: clsx(classes.secondaryButtons, (altInputs || bottomRowSecondary) && classes.tabPageButtons) }, /* @__PURE__ */ React.createElement("div", { className: classes.buttomButtonRow }, /* @__PURE__ */ React.createElement("div", { className: classes.bottomButtonsLeft }, bottomRowSecondary && bottomRowSecondary.map((item, index) => {
+		return /* @__PURE__ */ React.createElement(ToolBarButton, {
+			label: item.label,
+			expanded: !tabs && searchExpanded,
+			component: item.component,
+			click: item.click,
+			key: item.id ?? index
+		});
+	})), /* @__PURE__ */ React.createElement("div", { className: classes.bottomButtonsRigth }, bottomRowSecondaryRight && bottomRowSecondaryRight.map((item, index) => {
+		return /* @__PURE__ */ React.createElement(ToolBarButton, {
+			label: item.label,
+			expanded: !tabs && searchExpanded,
+			component: item.component,
+			click: item.click,
+			key: item.id ?? index
+		});
+	})), altInputs), /* @__PURE__ */ React.createElement("div", null, showGroups && /* @__PURE__ */ React.createElement(Divider, null), showGroups && groups)), /* @__PURE__ */ React.createElement(Collapse, {
+		in: expandOptions,
+		timeout: "auto"
+	}, /* @__PURE__ */ React.createElement("div", { onMouseLeave: handleMouseLeave }, /* @__PURE__ */ React.createElement("div", { className: classes.advancedOptions }, expandedContent))), loading && /* @__PURE__ */ React.createElement(LinearProgress, { value: loadingVal })), lowerTray && /* @__PURE__ */ React.createElement(LowerTrayShell, null, /* @__PURE__ */ React.createElement("div", { style: {
+		display: "flex",
+		justifyContent: "flex-end"
+	} }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex" } }, !searchExpanded && lowerTraySearch && /* @__PURE__ */ React.createElement(ToolBarButton, {
+		label: "Search",
+		component: SearchIcon,
+		click: expandSearch
+	}), searchToggle), lowerTrayGrid && /* @__PURE__ */ React.createElement(GridControlLineUp, null))), /* @__PURE__ */ React.createElement("div", { className: classes.secondaryButtonsMobile }, secondaryButtons && !tabs && secondaryButtons.map((item, index) => {
+		return /* @__PURE__ */ React.createElement(ToolBarButton, {
+			label: item.label,
+			expanded: searchExpanded,
+			component: item.component,
+			click: item.click,
+			key: item.id ?? index,
+			aria: item.label,
+			disabled: item.disabled
+		});
+	})));
+};
+PrimaryActionHeader.propTypes = {
+	buttonLabel: PropTypes.string,
+	title: PropTypes.string.isRequired,
+	subheader: PropTypes.string,
+	handleClick: PropTypes.func,
+	secondaryButtons: PropTypes.arrayOf(PropTypes.shape({
+		label: PropTypes.string,
+		component: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+		click: PropTypes.func,
+		key: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+	})),
+	hidePAB: PropTypes.bool,
+	search: PropTypes.bool,
+	searchField: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+	expandOptions: PropTypes.func,
+	handleMouseLeave: PropTypes.string,
+	expandedContent: PropTypes.node,
+	handleChange: PropTypes.string,
+	value: PropTypes.oneOfType([PropTypes.node, false]),
+	tabList: PropTypes.node,
+	tabs: PropTypes.bool,
+	resizeGrid: PropTypes.func,
+	collapse: PropTypes.func,
+	expandAllItems: PropTypes.func,
+	saveGridConfig: PropTypes.func,
+	deleteGridConfig: PropTypes.func,
+	clearGridConfig: PropTypes.func,
+	groups: PropTypes.node,
+	grid: PropTypes.bool,
+	otherProps: PropTypes.any,
+	bottomRowSecondary: PropTypes.array,
+	topRowSecondary: PropTypes.array,
+	clickBack: PropTypes.func,
+	loading: PropTypes.bool,
+	loadingVal: PropTypes.number,
+	openGroups: PropTypes.func,
+	openFilter: PropTypes.func,
+	altInputs: PropTypes.node,
+	hideActionRow: PropTypes.bool,
+	tabProps: PropTypes.object,
+	single: PropTypes.bool
+};
+PrimaryActionHeader.defaultProps = { hidePAB: false };
+
+//#endregion
+//#region src/contexts/PageContext.tsx
+const initialState = {};
+/**
+* The Page context, shared amongst the Page
+* and all children. Generally used to share state between
+* Widgets. Call dispatch() to update the state. Currently
+* only supports dispatch types of "set <state_property>".
+* Example: dispatch({ type: "set mySharedProperty", value: oldSharedProperty + 1 });
+*/
+const pageContext = createContext({});
+const { Provider } = pageContext;
+/**
+* Sets shared state based on an action type and a value.
+* action.type is in the format: <operator> <prop>
+* Currently the only supported action type is "set <prop>",
+* which will set state.prop to action.value.
+* @param state The current state
+* @param action A type and value to alter the current state
+* @returns The new state
+*/
+const reducer = (state, action) => {
+	const operator = action.type.substr(0, action.type.indexOf(" "));
+	const prop = action.type.substr(action.type.indexOf(" ") + 1);
+	switch (operator) {
+		case "set":
+			const newState = {
+				...state,
+				[prop]: action.value
+			};
+			return newState;
+		default: throw new Error("Unknown operator");
+	}
+};
+/**
+* A Context component to wrap around a Page. Allows
+* sharing of state amongst sibling Widgets.
+* @returns
+*/
+const PageContextProvider = ({ children }) => {
+	const [state, dispatch] = useReducer(reducer, initialState);
+	return /* @__PURE__ */ React.createElement(Provider, { value: {
+		state,
+		dispatch
+	} }, children);
+};
+
+//#endregion
+//#region src/hooks/useSetLocationState.js
+const useSetLocationState = () => {
+	const history = useHistory();
+	const location = useLocation();
+	const setLocationState = (newState) => {
+		const currentState = location.state || {};
+		const hasChanged = Object.entries(newState).some(([key, value]) => currentState[key] !== value);
+		if (!hasChanged || !!location?.state) return;
+		history.replace({
+			pathname: location.pathname,
+			search: location.search,
+			hash: location.hash,
+			state: {
+				...currentState,
+				...newState
+			}
+		});
+	};
+	return setLocationState;
+};
+
+//#endregion
+//#region src/page/PageContainer.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {
+		marginTop: (props) => props.disableMargins ? 0 : theme.spacing(3),
+		marginRight: (props) => props.disableMargins ? 0 : theme.spacing(3),
+		marginLeft: (props) => props.disableMargins ? 0 : theme.spacing(3),
+		height: (props) => props.height ?? "100%",
+		overflow: (props) => props.height && "auto"
+	},
+	staticRoot: {
+		marginTop: 0,
+		marginRight: 0,
+		marginLeft: 0,
+		height: (props) => props.height ?? "100%",
+		overflow: (props) => props.height && "auto"
+	},
+	title: {
+		flex: 1,
+		marginBottom: theme.spacing(1)
+	},
+	icon: { marginTop: theme.spacing(-2.5) },
+	loadingContent: {
+		flex: 1,
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		height: (props) => props.loadingHeight ? props.loadingHeight : "calc(100vh - 160px)"
+	}
+}));
+const PageContainer = (props) => {
+	const { user, widgetParams, redirectSlug, pageData, pageLoading = false, disableMargin = true, location, fromMenu = false, loadingHeight, isHomePage = false } = props;
+	const classes = useStyles(props);
+	const [page, setPage] = useState(null);
+	const [alertWarnings, setAlertWarnings] = useState([]);
+	const params = location?.state?.params;
+	const pathPageId = location?.pathname?.replace("/page/", "");
+	const pageId = (pathPageId === "/" ? null : pathPageId) || params?.PageId;
+	const { t } = useTranslation();
+	const setLocationState = useSetLocationState();
+	const [{ data: pageInfo, loading: pageInfoLoading }] = useAxiosGet(ConfigService.tenantV1ApiUrl, `page/${pageId}`, {}, !!!pageId, false);
+	const [{ data: homePage, loading: homePageLoading, error: homePageError }, refetchHomePage] = useAxiosGet(ConfigService.tenantV1ApiUrl, `page/homePage?tenantId=${user?.currentTenantId}&productId=${ConfigService.config.UNITY_PRODUCT_ID}`, {}, !isHomePage, false);
+	const removeWarning = useCallback((id) => {
+		setAlertWarnings((prevWarnings) => prevWarnings.filter((warning) => warning.id !== id));
+	}, []);
+	const getRequiredFieldWarnings = useCallback((requiredFields = "", widgetParams$1) => {
+		const fieldsStr = requiredFields || "";
+		if (!fieldsStr.trim()) return;
+		const warnings = [];
+		const requiredFieldsMap = widgetParams$1?.requiredFieldsMap || {};
+		const nodeObj = widgetParams$1?.nodeObj || {};
+		const fields = fieldsStr.split(",").map((str) => str.trim());
+		const missingRequiredFieldNames = [];
+		fields.forEach((fieldName) => {
+			const requiredField = requiredFieldsMap[fieldName];
+			if (!requiredField?.value) missingRequiredFieldNames.push(fieldName);
+			else if (requiredField.type === "entity" && (nodeObj[requiredField.value] === void 0 || nodeObj[requiredField.value] === null)) missingRequiredFieldNames.push(fieldName);
+		});
+		missingRequiredFieldNames.forEach((name) => {
+			warnings.push({
+				id: v4(),
+				message: `${name} ${t("field is missing a value")}`
+			});
+		});
+		return warnings;
+	}, [t]);
+	const pages = useMemo(() => page?.widgets && Object.keys(JSON.parse(page.widgets)).map((key) => {
+		const widgetStr = JSON.parse(page.widgets)[key];
+		const widget = widgetStr ? JSON.parse(widgetStr) : null;
+		if (widget?.length) widget.forEach((w) => {
+			if (pageId) w.params = {
+				entityName: params?.entityName,
+				pbiReportCode: params?.pbiReportCode,
+				queryId: params?.queryId,
+				inquiryTreeId: params?.InquiryTreeId,
+				udpTagId: params?.udpTagId,
+				requiredFieldsMap: params?.requiredFieldMapping,
+				...w.params
+			};
+			if (widgetParams) w.params = {
+				...w.params,
+				...widgetParams
+			};
+		});
+		return /* @__PURE__ */ React.createElement(DndProvider, {
+			backend: HTML5Backend,
+			key: pageId ? `${key}-${params?.entityName}` : key
+		}, /* @__PURE__ */ React.createElement(Page_default, {
+			user,
+			gridConfig: JSON.parse(page.gridProperties)[key],
+			widgetConfig: widget,
+			disableMargin
+		}));
+	}), [
+		page,
+		user,
+		widgetParams,
+		disableMargin,
+		pageId,
+		params
+	]);
+	useEffect(() => {
+		if (pageId) {
+			if (pageInfo) setPage(pageInfo);
+		} else if (homePage) setPage(homePage);
+		else setPage(pageData);
+		setAlertWarnings([]);
+	}, [
+		pageId,
+		pageInfo,
+		pageData,
+		homePage
+	]);
+	useEffect(() => {
+		if (page?.widgets) {
+			let warnings = [];
+			Object.keys(JSON.parse(page.widgets)).forEach((key) => {
+				const widgetStr = JSON.parse(page.widgets)[key];
+				const widget = widgetStr ? JSON.parse(widgetStr) : null;
+				if (widget?.length) widget.forEach((w) => {
+					if (pageId) w.params = {
+						entityName: params?.entityName,
+						pbiReportCode: params?.pbiReportCode,
+						queryId: params?.queryId,
+						inquiryTreeId: params?.InquiryTreeId,
+						udpTagId: params?.udpTagId,
+						requiredFieldsMap: params?.requiredFieldMapping,
+						...w.params
+					};
+					if (widgetParams) w.params = {
+						...w.params,
+						...widgetParams
+					};
+					if (fromMenu || page?.pageId === widgetParams?.pageId) warnings = getRequiredFieldWarnings(w.requiredParameters, w.params);
+				});
+			});
+			setAlertWarnings(warnings);
+		}
+	}, [
+		page,
+		widgetParams,
+		pageId,
+		params,
+		fromMenu,
+		getRequiredFieldWarnings
+	]);
+	useEffect(() => {
+		if (page) setLocationState({ label: t(page?.name) });
+	}, [
+		setLocationState,
+		t,
+		page
+	]);
+	if (redirectSlug && !pageData) return /* @__PURE__ */ React.createElement(Redirect, { to: redirectSlug });
+	if (pageInfoLoading || pageLoading) return /* @__PURE__ */ React.createElement("div", { className: classes.loadingContent }, /* @__PURE__ */ React.createElement(CircularProgress, { size: loadingHeight || 64 }));
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, page?.showPageName && /* @__PURE__ */ React.createElement(Card, { variant: "outlined" }, /* @__PURE__ */ React.createElement(PrimaryActionHeader, {
+		title: page.name,
+		hidePAB: true,
+		single: true
+	})), /* @__PURE__ */ React.createElement("div", { className: page?.pageTypeId === 1 ? classes.staticRoot : classes.root }, alertWarnings?.length > 0 && alertWarnings.map((warning) => /* @__PURE__ */ React.createElement(Alert, {
+		key: warning.id,
+		onClose: () => removeWarning(warning.id),
+		severity: "warning"
+	}, warning.message || "")), /* @__PURE__ */ React.createElement(PageContextProvider, null, pages)));
+};
+
+//#endregion
+export { AmbientPopoverMenuItem, FUICardHeaderMenu, FUICard_default, FUIMenuItem_default, FluentCard, FluentCardActions, FluentCardContent, PAHExport, PageContainer, PrimaryActionHeader, ToolBarButton, UdpTabs, WidgetCard, pageContext, useAllTeleporters, useSetLocationState, useTeleporterStore };
+//# sourceMappingURL=PageContainer-B65gsUfF.js.map