udp-react-enterprise-component-library 1.0.4 → 1.0.5-beta.2

package/dist/PageContainer-SljTiaZr.js

@@ -0,0 +1,1756 @@
+import { FluentIcon, FluentIconButton, LayoutUnit, PrimaryActionButton, StandardTitle, StatusChip, useAxiosGet, useId, useShellStore } from "./EnvironmentRibbon-DBJftQWQ.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 { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+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__ */ jsx(Tooltip, {
+		title: expanded && label || aria || "",
+		"aria-label": label,
+		placement: "top",
+		enterDelay: !expanded && 5e3,
+		children: /* @__PURE__ */ jsxs(ButtonBase, {
+			classes: { root: classes.root },
+			className: classes.wrapper,
+			onClick: click,
+			disableRipple: true,
+			"aria-label": aria,
+			disabled,
+			children: [icon && /* @__PURE__ */ jsx("div", {
+				className: classes.iconWrapper,
+				children: /* @__PURE__ */ jsx(ToolBarComponent, { className: classes.icon })
+			}), /* @__PURE__ */ jsx(Typography, {
+				variant: "body2",
+				className: classes.label,
+				children: !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) {
+	var _ref, _getWidget;
+	const { w, h } = (_ref = getWidget && ((_getWidget = getWidget(widgetType)) === null || _getWidget === void 0 ? void 0 : _getWidget.layout)) !== null && _ref !== void 0 ? _ref : {};
+	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 === null || props === void 0 ? void 0 : 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__ */ jsx("div", {
+		ref,
+		className: classes.root,
+		children: width ? /* @__PURE__ */ jsx(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 === null || gridProperties === void 0 ? void 0 : gridProperties.isDroppable) || false,
+			isDraggable: (gridProperties === null || gridProperties === void 0 ? void 0 : gridProperties.isDraggable) || false,
+			droppingItem: droppingItemLayout,
+			style: { height: "100%" },
+			children
+		}) : null
+	});
+};
+
+//#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__ */ jsxs("div", {
+		ref,
+		...other,
+		className: clsx(className, classes.root),
+		children: [/* @__PURE__ */ jsx(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__ */ jsx(IconButton, {
+		...props,
+		classes
+	});
+};
+
+//#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__ */ jsx(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__ */ jsx(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__ */ jsx(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__ */ jsx(Button, {
+		ref,
+		size: "small",
+		variant: "contained",
+		disableElevation: true,
+		...other,
+		children
+	});
+};
+FUICardAction = forwardRef(FUICardAction);
+let FUICardHeaderMenu = (props, ref) => {
+	const { children } = props;
+	return /* @__PURE__ */ jsx("div", {
+		button: /* @__PURE__ */ jsx(FUISquareIconButton, { children: /* @__PURE__ */ jsx(FluentIcon, {
+			component: MoreIcon,
+			size: "small"
+		}) }),
+		menu: /* @__PURE__ */ jsx(Menu, { 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__ */ jsxs(FluentCard, {
+		ref,
+		component: "section",
+		"aria-labelledby": titleId,
+		...cardProps,
+		raised,
+		className: clsx(className, raised && classes.raised),
+		...CardProps,
+		classes: { root: classes.root },
+		children: [
+			/* @__PURE__ */ jsx(FUICardHeader_default, {
+				titleId,
+				headerActions,
+				...CardHeaderProps,
+				children: title
+			}),
+			/* @__PURE__ */ jsx(FluentCardContent, {
+				className: classes.contentArea,
+				children
+			}),
+			actions && /* @__PURE__ */ jsx(FluentCardActions, {
+				className: classes.cardActions,
+				children: 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__ */ jsxs(MenuItem, {
+		ref,
+		dense: true,
+		...menuItemProps,
+		children: [/* @__PURE__ */ jsx(ListItemIcon, {
+			className: classes.listItemIcon,
+			children: icon || /* @__PURE__ */ jsx(FluentIcon, { component: fluentIcon })
+		}), /* @__PURE__ */ jsx(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 !== null && className !== void 0 ? className : "");
+	let body = children;
+	if (loading && !body) body = /* @__PURE__ */ jsx("div", {
+		className: classes.loadingContent,
+		children: /* @__PURE__ */ jsx(CircularProgress, { size: 64 })
+	});
+	if (errors && !body) body = /* @__PURE__ */ jsx("div", { children: "Unexpected error" });
+	return /* @__PURE__ */ jsx(FUICard_default, {
+		...other,
+		className: clsx(className, theme === "dark" ? classes.darkRoot : classes.root, classes.anyRoot),
+		raised,
+		CardHeaderProps: {
+			className: classes.handle,
+			"data-handle": true
+		},
+		headerActions: /* @__PURE__ */ jsxs(Fragment$1, { children: [headerActions, /* @__PURE__ */ jsx(FUICardHeaderMenu, { children: /* @__PURE__ */ jsx(FUIMenuItem_default, {
+			onClick: onDelete,
+			fluentIcon: DeleteIcon,
+			primary: "Delete"
+		}) })] }),
+		children: /* @__PURE__ */ jsx("div", {
+			className: classes.innerWidgetContentContainer,
+			children: 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__ */ jsx(WidgetCard, {
+		...other,
+		title: "Error",
+		children: "isValidWidget or getWidget functions are not defined"
+	});
+	if (!Widget) return /* @__PURE__ */ jsxs(WidgetCard, {
+		...other,
+		title: "Error",
+		children: [
+			"Unknown widget type \"",
+			widgetType,
+			"\"."
+		]
+	});
+	else return /* @__PURE__ */ jsx(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__ */ jsx(DashboardWidget_default, { ...widget }, widget.id)), [widgets]);
+	if (!layouts) return null;
+	return /* @__PURE__ */ jsx(DashboardCardGrid, {
+		layouts,
+		gridProperties,
+		disableMargin,
+		children: cards
+	});
+};
+
+//#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__ */ jsxs("div", {
+		className: classes.root,
+		children: [
+			/* @__PURE__ */ jsx(LayoutUnit, { unit: "nudge" }),
+			/* @__PURE__ */ jsx(ToolBarButton, {
+				label,
+				component,
+				click,
+				icon: false
+			}),
+			/* @__PURE__ */ jsx(LayoutUnit, { unit: "nudge" }),
+			/* @__PURE__ */ jsx(Divider, {})
+		]
+	});
+};
+
+//#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__ */ jsxs("div", {
+		className: classes.root,
+		children: [/* @__PURE__ */ jsx(FluentIconButton, {
+			className: classes.icon,
+			icon: ArrowUpRightIcon,
+			onClick: handleClick
+		}), /* @__PURE__ */ jsx(Popover, {
+			classes: { root: classes.popoverRoot },
+			square: true,
+			elevation: 1,
+			id,
+			open,
+			anchorEl,
+			onClose: handleClose,
+			anchorOrigin: {
+				vertical: "bottom",
+				horizontal: "left"
+			},
+			transformOrigin: {
+				vertical: "top",
+				horizontal: "left"
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				style: { width: 140 },
+				children: /* @__PURE__ */ jsx("div", { children: gridControlsExport.map((item) => {
+					return /* @__PURE__ */ jsx(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 === null || props === void 0 ? void 0 : 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 === null || props === void 0 ? void 0 : props.variant) === "block" ? null : `2px solid ${theme.palette.secondary.main}`,
+		backgroundColor: (props) => (props === null || props === void 0 ? void 0 : props.variant) === "block" ? theme.palette.secondary.light : null,
+		color: (props) => (props === null || props === void 0 ? void 0 : 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 === null || props === void 0 ? void 0 : props.menuWidth) ? props === null || props === void 0 ? void 0 : props.menuWidth : "170px"
+	},
+	popoverWrapper: { maxHeight: (props) => (props === null || props === void 0 ? void 0 : props.menuMaxHeight) ? props === null || props === void 0 ? void 0 : 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 === null || tabList === void 0 ? void 0 : 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 === null || menuTabList === void 0 ? void 0 : menuTabList.find((tab) => (tab === null || tab === void 0 ? void 0 : tab.id) === value));
+	}, [value, menuTabList]);
+	const getInitialTabWidth = useCallback((tabsElements, currentTabList$1) => {
+		let totalTabWidth = 0;
+		let tabWidth = [];
+		if ((tabsElements === null || tabsElements === void 0 ? void 0 : tabsElements.length) === (currentTabList$1 === null || currentTabList$1 === void 0 ? void 0 : 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 === null || tabWidth === void 0 ? void 0 : 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__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", {
+		className: clsx(classes.root, className),
+		ref: tabContainerRef,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: classes.tabsWrapper,
+			ref: innerTabContainerRef,
+			style: variant === "spread" ? { justifyContent: "space-between" } : null,
+			children: [visibleTabList === null || visibleTabList === void 0 ? void 0 : visibleTabList.map((item, index) => {
+				var _item$label, _item$label2;
+				return /* @__PURE__ */ jsx(ButtonBase, {
+					style: {
+						flex: variant === "spread" && 1,
+						width: !!buttonWidth && buttonWidth
+					},
+					id: "udpRecord-UdpTabs-MenuItem-" + (item === null || item === void 0 || (_item$label = item.label) === null || _item$label === void 0 ? void 0 : _item$label.replace(/ /g, "-")),
+					udprecordid: "udpRecord-UdpTabs-MenuItem-" + (item === null || item === void 0 || (_item$label2 = item.label) === null || _item$label2 === void 0 ? void 0 : _item$label2.replace(/ /g, "-")),
+					children: /* @__PURE__ */ jsx("div", {
+						className: clsx(classes.tab, {
+							[classes.blockTab]: variant === "block",
+							[classes.activeTab]: value === (item === null || item === void 0 ? void 0 : item.id)
+						}),
+						onClick: (e) => {
+							onChange(e, item === null || item === void 0 ? void 0 : item.id);
+							if (item === null || item === void 0 ? void 0 : item.onClick) item.onClick();
+							setAnchorEl(null);
+						},
+						children: /* @__PURE__ */ jsx(Typography, {
+							noWrap: true,
+							style: { fontWeight: variant === "spread" ? "bold" : "normal" },
+							children: item === null || item === void 0 ? void 0 : item.label
+						})
+					})
+				}, index);
+			}), (menuTabList === null || menuTabList === void 0 ? void 0 : menuTabList.length) > 0 && /* @__PURE__ */ jsx(IconButton, {
+				onClick: handlePopoverClick,
+				className: classes.moreButton,
+				color: "primary",
+				id: "udpRecord-UdpTabs-MoreActions",
+				udprecordid: "udpRecord-UdpTabs-MoreActions",
+				children: /* @__PURE__ */ jsx(Badge, {
+					color: "secondary",
+					variant: "dot",
+					invisible: menuItemSelected === false,
+					children: /* @__PURE__ */ jsx(FluentIcon, {
+						component: MoreVerticalIcon,
+						size: "medium"
+					})
+				})
+			})]
+		}), !!(menuTabList === null || menuTabList === void 0 ? void 0 : menuTabList.length) && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Popover, {
+			id: "menuTabList",
+			open,
+			anchorEl,
+			onClose: handlePopoverClose,
+			anchorOrigin: {
+				vertical: "bottom",
+				horizontal: "left"
+			},
+			transformOrigin: {
+				vertical: "top",
+				horizontal: "left"
+			},
+			className: classes.popoverWrapper,
+			children: menuTabList === null || menuTabList === void 0 ? void 0 : menuTabList.map((tab) => {
+				var _tab$label, _tab$label2;
+				return /* @__PURE__ */ jsx(MenuItem, {
+					id: "udpRecord-UdpTabs-MenuItem-" + (tab === null || tab === void 0 || (_tab$label = tab.label) === null || _tab$label === void 0 ? void 0 : _tab$label.replace(/ /g, "-")),
+					udprecordid: "udpRecord-UdpTabs-MenuItem-" + (tab === null || tab === void 0 || (_tab$label2 = tab.label) === null || _tab$label2 === void 0 ? void 0 : _tab$label2.replace(/ /g, "-")),
+					onClick: (e) => {
+						if (tab === null || tab === void 0 ? void 0 : tab.onClick) tab.onClick();
+						if (onChange) onChange(e, tab === null || tab === void 0 ? void 0 : tab.id);
+						setAnchorEl(null);
+					},
+					className: clsx(classes.menuItem, className),
+					selected: (tab === null || tab === void 0 ? void 0 : tab.id) === value,
+					...menuItemProps,
+					children: /* @__PURE__ */ jsx(Typography, { children: tab === null || tab === void 0 ? void 0 : tab.label })
+				}, tab === null || tab === void 0 ? void 0 : tab.id);
+			})
+		}) })]
+	}) });
+};
+
+//#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__ */ jsx("div", { children: /* @__PURE__ */ jsx(PAHExport, {
+		exportCSV: exportCSV || (() => gridApi === null || gridApi === void 0 ? void 0 : gridApi.exportDataAsCsv()),
+		exportExcel: exportExcel || (() => gridApi === null || gridApi === void 0 ? void 0 : gridApi.exportDataAsExcel()),
+		exportPDF
+	}) });
+	const gridControlExpand = gridControlsExpand && /* @__PURE__ */ jsx("div", { children: gridControlsExpand.map((item) => {
+		return /* @__PURE__ */ jsx(ToolBarButton, {
+			label: item.label,
+			title: item.label,
+			expanded: true,
+			component: item.component,
+			click: item.click,
+			aria: item.aria
+		}, item.id);
+	}) });
+	const gridControlResize = gridControlsResize && /* @__PURE__ */ jsx("div", { children: gridControlsResize.map((item) => {
+		return /* @__PURE__ */ jsx(ToolBarButton, {
+			label: item.label,
+			title: item.label,
+			expanded: true,
+			component: item.component,
+			click: item.click,
+			aria: item.aria
+		}, item.id);
+	}) });
+	const gridControlCollapse = gridControlsCollapse && /* @__PURE__ */ jsx("div", { children: gridControlsCollapse.map((item) => {
+		return /* @__PURE__ */ jsx(ToolBarButton, {
+			label: item.label,
+			title: item.label,
+			expanded: true,
+			component: item.component,
+			click: item.click,
+			aria: item.aria
+		}, item.id);
+	}) });
+	const gridControlSave = gridControlsSave && /* @__PURE__ */ jsx("div", { children: gridControlsSave.map((item) => {
+		return /* @__PURE__ */ jsx(ToolBarButton, {
+			label: item.label,
+			title: item.label,
+			expanded: true,
+			component: item.component,
+			click: item.click,
+			aria: item.aria
+		}, item.id);
+	}) });
+	const gridControlDelete = gridControlsDelete && /* @__PURE__ */ jsx("div", { children: gridControlsDelete.map((item) => {
+		return /* @__PURE__ */ jsx(ToolBarButton, {
+			label: item.label,
+			title: item.label,
+			expanded: true,
+			component: item.component,
+			click: item.click,
+			aria: item.aria
+		}, item.id);
+	}) });
+	const gridControlClear = gridControlsClear && /* @__PURE__ */ jsx("div", { children: gridControlsClear.map((item) => {
+		return /* @__PURE__ */ jsx(ToolBarButton, {
+			label: item.label,
+			title: item.label,
+			expanded: true,
+			component: item.component,
+			click: item.click,
+			aria: item.aria
+		}, item.id);
+	}) });
+	const searchToggle = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		style: { display: "flex" },
+		children: searchExpanded && /* @__PURE__ */ jsx(FluentIconButton, {
+			click: expandSearch,
+			"aria-label": "close search",
+			className: classes.close,
+			icon: ChevronRightIcon,
+			onClick: expandSearch,
+			size: "small"
+		})
+	}), /* @__PURE__ */ jsx("div", {
+		className: classes.search,
+		style: { flex: 1 },
+		children: /* @__PURE__ */ jsx("div", { children: searchExpanded && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Slide, {
+			direction: "left",
+			in: expandSearch,
+			mountOnEnter: true,
+			unmountOnExit: true,
+			children: /* @__PURE__ */ jsx("div", {
+				className: classes.searchWrapper,
+				children: searchField
+			})
+		}) }) })
+	})] });
+	const LowerTrayShell = ({ children }) => {
+		return /* @__PURE__ */ jsx("div", {
+			className: classes.containerStyle,
+			children
+		});
+	};
+	const GridControlLineUp = () => {
+		return /* @__PURE__ */ jsxs("div", {
+			className: classes.gridControlLineUp,
+			children: [
+				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__ */ jsx("div", {
+				className: "teleport-target",
+				children: /* @__PURE__ */ jsx(Target, {})
+			}, targetId));
+		});
+		return components;
+	}, [additionalComponentId, allTeleporters]);
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: single && classes.single,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: classes.titleWrapperBack,
+					children: [
+						clickBack && /* @__PURE__ */ jsx("div", {
+							className: classes.iconButton,
+							children: /* @__PURE__ */ jsx(FluentIconButton, {
+								icon: ArrowBackIcon,
+								onClick: clickBack
+							})
+						}),
+						title && /* @__PURE__ */ jsx("div", {
+							className: classes.root,
+							children: /* @__PURE__ */ jsxs("div", {
+								className: classes.titleWrapper,
+								children: [
+									/* @__PURE__ */ jsx(StandardTitle, {
+										removeMarginTop: single,
+										children: title
+									}),
+									single && subheader && /* @__PURE__ */ jsx(Typography, {
+										className: classes.denseSubtitle,
+										variant: "subtitle1",
+										component: "h2",
+										children: subheader
+									}),
+									allowAdditionalTitleComponent && /* @__PURE__ */ jsx("div", {
+										className: classes.additionalTitleComponent,
+										children: additionalTitleTeleportedComponents.map((value$1) => {
+											return value$1;
+										})
+									})
+								]
+							})
+						}),
+						!title && allowAdditionalTitleComponent && /* @__PURE__ */ jsx("div", {
+							className: classes.additionalTitleComponent,
+							children: additionalTitleTeleportedComponents.map((value$1) => {
+								return value$1;
+							})
+						}),
+						StatusChipProps && /* @__PURE__ */ jsx("div", {
+							className: classes.root,
+							children: /* @__PURE__ */ jsx("div", {
+								className: classes.titleWrapper,
+								children: /* @__PURE__ */ jsx(StatusChip, {
+									label: StatusChipProps === null || StatusChipProps === void 0 ? void 0 : StatusChipProps.label,
+									status: StatusChipProps === null || StatusChipProps === void 0 ? void 0 : StatusChipProps.status
+								})
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: classes.subHeaderWrapper,
+					children: [stepper, !hideActionRow && /* @__PURE__ */ jsxs("div", {
+						className: classes.actionRow,
+						children: [
+							!single && subheader && /* @__PURE__ */ jsx(Typography, {
+								className: classes.denseSubtitle,
+								variant: "subtitle1",
+								component: "h2",
+								children: subheader
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: grid ? classes.tabRow : classes.fullTabs,
+								children: (tabList === null || tabList === void 0 ? void 0 : tabList.length) > 0 && /* @__PURE__ */ jsx(UdpTabs, {
+									value,
+									onChange: handleChange,
+									tabList,
+									variant: tabVariant
+								})
+							}),
+							search && searchToggle,
+							/* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
+							/* @__PURE__ */ jsxs("div", {
+								className: classes.secondaryButtons,
+								children: [
+									!searchExpanded && search && /* @__PURE__ */ jsx(ToolBarButton, {
+										label: "Search",
+										component: SearchIcon,
+										click: expandSearch
+									}),
+									search && /* @__PURE__ */ jsx(Divider, {
+										orientation: "vertical",
+										className: classes.divider
+									}),
+									(expandGrid || resizeGrid || collapseGrid || exportGrid || saveGridConfig || deleteGridConfig || clearGridConfig) && upperTrayGrid && /* @__PURE__ */ jsx(GridControlLineUp, { expand }),
+									grid && openFilter && gridControlsFilter.map((item) => {
+										return /* @__PURE__ */ jsx(ToolBarButton, {
+											label: item.label,
+											title: item.label,
+											expanded: true,
+											component: item.component,
+											click: item.click,
+											aria: item.aria
+										}, item.id);
+									}),
+									grid && openGroups && gridControlsGroup.map((item) => {
+										return /* @__PURE__ */ jsx(ToolBarButton, {
+											label: item.label,
+											title: item.label,
+											expanded: true,
+											component: item.component,
+											click: item.click,
+											aria: item.aria
+										}, item.id);
+									}),
+									grid && searchExpanded && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(FluentIconButton, {
+										id: "udpRecord-PrimaryActionHeader-ClosePanel",
+										udprecordid: "udpRecord-PrimaryActionHeader-ClosePanel",
+										icon: MoreVerticalIcon,
+										"aria-label": "Close Panel"
+									}) }),
+									secondaryButtons && !tabs && secondaryButtons.map((item, index) => {
+										var _item$id;
+										return /* @__PURE__ */ jsx(ToolBarButton, {
+											label: item.label,
+											expanded: searchExpanded,
+											component: item.component,
+											click: item.click,
+											aria: item.label,
+											disabled: item.disabled
+										}, (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : index);
+									})
+								]
+							}),
+							/* @__PURE__ */ jsx("div", { children: allowAdditionalRightComponent && allTeleporters.map(([targetId, location, teleporter]) => {
+								const Target = teleporter.Target;
+								if (targetId === additionalComponentId && location === "right") return /* @__PURE__ */ jsx("div", {
+									className: "teleport-target",
+									children: /* @__PURE__ */ jsx(Target, {})
+								}, targetId);
+								else return null;
+							}) }),
+							!hidePAB && /* @__PURE__ */ jsxs("div", {
+								className: classes.pab,
+								children: [topRowSecondary && topRowSecondary.map((item, index) => {
+									var _item$id2;
+									return /* @__PURE__ */ jsx(ToolBarButton, {
+										label: item.label,
+										expanded: searchExpanded,
+										component: item.component,
+										click: item.click,
+										aria: item.label
+									}, (_item$id2 = item.id) !== null && _item$id2 !== void 0 ? _item$id2 : index);
+								}), /* @__PURE__ */ jsx(PrimaryActionButton, {
+									disabled: pabDisabled,
+									onClick: handleClick,
+									...otherProps,
+									children: buttonLabel
+								})]
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: clsx(classes.secondaryButtons, (altInputs || bottomRowSecondary) && classes.tabPageButtons),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: classes.buttomButtonRow,
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: classes.bottomButtonsLeft,
+								children: bottomRowSecondary && bottomRowSecondary.map((item, index) => {
+									var _item$id3;
+									return /* @__PURE__ */ jsx(ToolBarButton, {
+										label: item.label,
+										expanded: !tabs && searchExpanded,
+										component: item.component,
+										click: item.click
+									}, (_item$id3 = item.id) !== null && _item$id3 !== void 0 ? _item$id3 : index);
+								})
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: classes.bottomButtonsRigth,
+								children: bottomRowSecondaryRight && bottomRowSecondaryRight.map((item, index) => {
+									var _item$id4;
+									return /* @__PURE__ */ jsx(ToolBarButton, {
+										label: item.label,
+										expanded: !tabs && searchExpanded,
+										component: item.component,
+										click: item.click
+									}, (_item$id4 = item.id) !== null && _item$id4 !== void 0 ? _item$id4 : index);
+								})
+							}),
+							altInputs
+						]
+					}), /* @__PURE__ */ jsxs("div", { children: [showGroups && /* @__PURE__ */ jsx(Divider, {}), showGroups && groups] })]
+				}),
+				/* @__PURE__ */ jsx(Collapse, {
+					in: expandOptions,
+					timeout: "auto",
+					children: /* @__PURE__ */ jsx("div", {
+						onMouseLeave: handleMouseLeave,
+						children: /* @__PURE__ */ jsx("div", {
+							className: classes.advancedOptions,
+							children: expandedContent
+						})
+					})
+				}),
+				loading && /* @__PURE__ */ jsx(LinearProgress, { value: loadingVal })
+			]
+		}),
+		lowerTray && /* @__PURE__ */ jsx(LowerTrayShell, { children: /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				justifyContent: "flex-end"
+			},
+			children: [/* @__PURE__ */ jsxs("div", {
+				style: { display: "flex" },
+				children: [!searchExpanded && lowerTraySearch && /* @__PURE__ */ jsx(ToolBarButton, {
+					label: "Search",
+					component: SearchIcon,
+					click: expandSearch
+				}), searchToggle]
+			}), lowerTrayGrid && /* @__PURE__ */ jsx(GridControlLineUp, {})]
+		}) }),
+		/* @__PURE__ */ jsx("div", {
+			className: classes.secondaryButtonsMobile,
+			children: secondaryButtons && !tabs && secondaryButtons.map((item, index) => {
+				var _item$id5;
+				return /* @__PURE__ */ jsx(ToolBarButton, {
+					label: item.label,
+					expanded: searchExpanded,
+					component: item.component,
+					click: item.click,
+					aria: item.label,
+					disabled: item.disabled
+				}, (_item$id5 = item.id) !== null && _item$id5 !== void 0 ? _item$id5 : index);
+			})
+		})
+	] }, currentContainerId);
+};
+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__ */ jsx(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 === null || location === void 0 ? void 0 : 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) => {
+			var _props$height;
+			return (_props$height = props.height) !== null && _props$height !== void 0 ? _props$height : "100%";
+		},
+		overflow: (props) => props.height && "auto"
+	},
+	staticRoot: {
+		marginTop: 0,
+		marginRight: 0,
+		marginLeft: 0,
+		height: (props) => {
+			var _props$height2;
+			return (_props$height2 = props.height) !== null && _props$height2 !== void 0 ? _props$height2 : "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) => {
+	var _location$state, _location$pathname;
+	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 === null || location === void 0 || (_location$state = location.state) === null || _location$state === void 0 ? void 0 : _location$state.params;
+	const pathPageId = location === null || location === void 0 || (_location$pathname = location.pathname) === null || _location$pathname === void 0 ? void 0 : _location$pathname.replace("/page/", "");
+	const pageId = (pathPageId === "/" ? null : pathPageId) || (params === null || params === void 0 ? void 0 : 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 === null || user === void 0 ? void 0 : 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 === null || widgetParams$1 === void 0 ? void 0 : widgetParams$1.requiredFieldsMap) || {};
+		const nodeObj = (widgetParams$1 === null || widgetParams$1 === void 0 ? void 0 : widgetParams$1.nodeObj) || {};
+		const fields = fieldsStr.split(",").map((str) => str.trim());
+		const missingRequiredFieldNames = [];
+		fields.forEach((fieldName) => {
+			const requiredField = requiredFieldsMap[fieldName];
+			if (!(requiredField === null || requiredField === void 0 ? void 0 : 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 === null || page === void 0 ? void 0 : 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 === null || widget === void 0 ? void 0 : widget.length) widget.forEach((w) => {
+			if (pageId) w.params = {
+				entityName: params === null || params === void 0 ? void 0 : params.entityName,
+				pbiReportCode: params === null || params === void 0 ? void 0 : params.pbiReportCode,
+				queryId: params === null || params === void 0 ? void 0 : params.queryId,
+				inquiryTreeId: params === null || params === void 0 ? void 0 : params.InquiryTreeId,
+				udpTagId: params === null || params === void 0 ? void 0 : params.udpTagId,
+				requiredFieldsMap: params === null || params === void 0 ? void 0 : params.requiredFieldMapping,
+				...w.params
+			};
+			if (widgetParams) w.params = {
+				...w.params,
+				...widgetParams
+			};
+		});
+		return /* @__PURE__ */ jsx(DndProvider, {
+			backend: HTML5Backend,
+			children: /* @__PURE__ */ jsx(Page, {
+				user,
+				gridConfig: JSON.parse(page.gridProperties)[key],
+				widgetConfig: widget,
+				disableMargin
+			})
+		}, pageId ? `${key}-${params === null || params === void 0 ? void 0 : params.entityName}` : key);
+	}), [
+		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 === null || page === void 0 ? void 0 : 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 === null || widget === void 0 ? void 0 : widget.length) widget.forEach((w) => {
+					if (pageId) w.params = {
+						entityName: params === null || params === void 0 ? void 0 : params.entityName,
+						pbiReportCode: params === null || params === void 0 ? void 0 : params.pbiReportCode,
+						queryId: params === null || params === void 0 ? void 0 : params.queryId,
+						inquiryTreeId: params === null || params === void 0 ? void 0 : params.InquiryTreeId,
+						udpTagId: params === null || params === void 0 ? void 0 : params.udpTagId,
+						requiredFieldsMap: params === null || params === void 0 ? void 0 : params.requiredFieldMapping,
+						...w.params
+					};
+					if (widgetParams) w.params = {
+						...w.params,
+						...widgetParams
+					};
+					if (fromMenu || (page === null || page === void 0 ? void 0 : page.pageId) === (widgetParams === null || widgetParams === void 0 ? void 0 : widgetParams.pageId)) warnings = getRequiredFieldWarnings(w.requiredParameters, w.params);
+				});
+			});
+			setAlertWarnings(warnings);
+		}
+	}, [
+		page,
+		widgetParams,
+		pageId,
+		params,
+		fromMenu,
+		getRequiredFieldWarnings
+	]);
+	useEffect(() => {
+		if (page) setLocationState({ label: t(page === null || page === void 0 ? void 0 : page.name) });
+	}, [
+		setLocationState,
+		t,
+		page
+	]);
+	if (redirectSlug && !pageData) return /* @__PURE__ */ jsx(Redirect, { to: redirectSlug });
+	if (pageInfoLoading || pageLoading) return /* @__PURE__ */ jsx("div", {
+		className: classes.loadingContent,
+		children: /* @__PURE__ */ jsx(CircularProgress, { size: loadingHeight || 64 })
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [(page === null || page === void 0 ? void 0 : page.showPageName) && /* @__PURE__ */ jsx(Card, {
+		variant: "outlined",
+		children: /* @__PURE__ */ jsx(PrimaryActionHeader, {
+			title: page.name,
+			hidePAB: true,
+			single: true
+		})
+	}), /* @__PURE__ */ jsxs("div", {
+		className: (page === null || page === void 0 ? void 0 : page.pageTypeId) === 1 ? classes.staticRoot : classes.root,
+		children: [(alertWarnings === null || alertWarnings === void 0 ? void 0 : alertWarnings.length) > 0 && alertWarnings.map((warning) => /* @__PURE__ */ jsx(Alert, {
+			onClose: () => removeWarning(warning.id),
+			severity: "warning",
+			children: warning.message || ""
+		}, warning.id)), /* @__PURE__ */ jsx(PageContextProvider, { children: pages })]
+	})] });
+};
+
+//#endregion
+export { AmbientPopoverMenuItem, FUICardHeaderMenu, FUICard_default, FUIMenuItem_default, FluentCard, FluentCardActions, FluentCardContent, PAHExport, PageContainer, PrimaryActionHeader, ToolBarButton, UdpTabs, WidgetCard, pageContext, useAllTeleporters, useSetLocationState, useTeleporterStore };
+//# sourceMappingURL=PageContainer-SljTiaZr.js.map