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

package/dist/PageContainer-SljTiaZr.js

@@ -1,1756 +0,0 @@
-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