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

package/{dist-tsdown/WorkflowContainer-C2W0pr5f.js → dist/WorkflowContainer-DKwRWi1i.js}

@@ -1,10 +1,9 @@
-import { Field, Form, SideSheet, apiMutate as apiMutate$1 } from "./SideSheet-DcEfnfH_.js";
-import { APP_RIBBON_SPACE, FluentIcon, LayoutUnit, NodeActionTriggerEnums, TreeViewModeEnums, UnityFluentIcon, useAxiosGet, useBuildEnvironment, useShellStore, useUser } from "./EnvironmentRibbon-W5AjvnLN.js";
-import { AggregateChip, NodeLoader, UtilitySideBar, findAllParentIds, getIconFromName, getNodeIdForRightBorder, getUnityIconFromName, searchTree } from "./UtilitySideBar-D4Gdx13d.js";
-import { PageContainer, PrimaryActionHeader, useSetLocationState } from "./PageContainer-CWhjU1zS.js";
+import { Field, Form, SideSheet, apiMutate as apiMutate$1 } from "./SideSheet-CPHhyWLB.js";
+import { APP_RIBBON_SPACE, FluentIcon, LayoutUnit, NodeActionTriggerEnums, TreeViewModeEnums, UnityFluentIcon, useAxiosGet, useBuildEnvironment, useShellStore, useUser } from "./EnvironmentRibbon-BMvQEZPZ.js";
+import { AggregateChip, NodeLoader, UtilitySideBar, findAllParentIds, getIconFromName, getNodeIdForRightBorder, getUnityIconFromName, searchTree } from "./UtilitySideBar-B4r2IAv5.js";
+import { PageContainer, PrimaryActionHeader, useSetLocationState } from "./PageContainer-B65gsUfF.js";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Box, Button, Card, CircularProgress, Grow, LinearProgress, Popper, Step, StepConnector, StepLabel, Stepper, TextField, Tooltip, Typography, darken, lighten, makeStyles, useTheme, withStyles } from "@material-ui/core";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ConfigService } from "udp-react-stencil-component-library";
 import { useHistory, useLocation } from "react-router-dom";
 import { DateTime } from "luxon";
@@ -32,7 +31,7 @@ const useStyles$10 = makeStyles((theme) => ({
 	labelRoot: { fontSize: 14 }
 }));
 const AutoCompletePopper = (props) => {
-	return /* @__PURE__ */ jsx(Popper, {
+	return /* @__PURE__ */ React.createElement(Popper, {
 		...props,
 		placement: "bottom-start"
 	});
@@ -45,7 +44,7 @@ const FluentTextFieldAutoComplete = (props) => {
 		if (additionalOnChangeAction) additionalOnChangeAction(value$1);
 		return onChangeProp?.(value$1);
 	}, [onChangeProp, additionalOnChangeAction]);
-	return /* @__PURE__ */ jsx(Autocomplete, {
+	return /* @__PURE__ */ React.createElement(Autocomplete, {
 		id: "autocomplete",
 		multiple: isMultiple,
 		limitTags,
@@ -62,7 +61,7 @@ const FluentTextFieldAutoComplete = (props) => {
 		disableClearable,
 		defaultValue,
 		size,
-		renderInput: (params) => /* @__PURE__ */ jsx(TextField, {
+		renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, {
 			...textFieldProps,
 			...params,
 			...other,
@@ -219,74 +218,47 @@ const WorkflowTreeMenuItem = (props) => {
 		e.preventDefault();
 		onNodeSelect(e, nodeId);
 	}, [onNodeSelect, nodeId]);
-	return /* @__PURE__ */ jsx(TreeItem, {
+	return /* @__PURE__ */ React.createElement(TreeItem, {
 		className: classes.group,
+		key: nodeId,
 		nodeId,
-		label: /* @__PURE__ */ jsx("div", {
-			ref: dropRef,
-			children: /* @__PURE__ */ jsx(Tooltip, {
-				title: sidebarExpanded ? "" : label,
-				children: /* @__PURE__ */ jsx("div", {
-					ref: node?.properties?.isDraggable && dragRef || null,
-					style: { opacity: isDragging ? .5 : 1 },
-					children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 12 }) : /* @__PURE__ */ jsxs("div", {
-						id: "udpRecord-BaseTreeMenuItem-" + label?.replace(/\s+/g, ""),
-						udprecordid: "udpRecord-BaseTreeMenuItem-" + label?.replace(/\s+/g, ""),
-						className: classes.labelRoot,
-						style: { fontWeight: isSelectedNode ? "bold" : "" },
-						children: [
-							iconName && /* @__PURE__ */ jsx("div", {
-								className: classes.iconContainer,
-								children: /* @__PURE__ */ jsx(UnityFluentIcon, {
-									size: treeViewMode === TreeViewModeEnums.Compact ? "small" : "large",
-									color: iconColor,
-									type: iconType,
-									icon: iconType === "unity" ? getUnityIconFromName(iconName) : getIconFromName(iconName),
-									style: { color: iconColor ? darken(iconColor, .1) : theme.palette.secondary.main }
-								})
-							}),
-							/* @__PURE__ */ jsxs("div", {
-								className: classes.labelContainer,
-								children: [/* @__PURE__ */ jsxs(Typography, {
-									variant: "subtitle2",
-									className: clsx(classes.labelText, classes.labelOverflow),
-									children: [label, subLabel && treeViewMode === TreeViewModeEnums.Compact && /* @__PURE__ */ jsx(Typography, {
-										variant: "caption",
-										className: clsx(classes.captionText, classes.labelOverflow),
-										children: subLabel
-									})]
-								}), subLabel && treeViewMode === TreeViewModeEnums.Classic && /* @__PURE__ */ jsx("div", {
-									className: classes.labelOverflow,
-									children: /* @__PURE__ */ jsx(Typography, {
-										variant: "caption",
-										className: clsx(classes.captionText),
-										children: subLabel
-									})
-								})]
-							}),
-							/* @__PURE__ */ jsx(AggregateChip, { aggregateThresholdId }),
-							conditionalIconName && sidebarExpanded && /* @__PURE__ */ jsx("div", {
-								className: classes.conditionalIconContainer,
-								children: /* @__PURE__ */ jsx(UnityFluentIcon, {
-									size: treeViewMode === TreeViewModeEnums.Compact ? "small" : "default",
-									color: conditionalIconColor,
-									type: conditionalIconType,
-									icon: conditionalIconType === "unity" ? getUnityIconFromName(conditionalIconName) : getIconFromName(conditionalIconName),
-									style: { color: conditionalIconColor }
-								})
-							})
-						]
-					})
-				})
-			})
-		}),
+		label: /* @__PURE__ */ React.createElement("div", { ref: dropRef }, /* @__PURE__ */ React.createElement(Tooltip, { title: sidebarExpanded ? "" : label }, /* @__PURE__ */ React.createElement("div", {
+			ref: node?.properties?.isDraggable && dragRef || null,
+			style: { opacity: isDragging ? .5 : 1 }
+		}, loading ? /* @__PURE__ */ React.createElement(CircularProgress, { size: 12 }) : /* @__PURE__ */ React.createElement("div", {
+			id: "udpRecord-BaseTreeMenuItem-" + label?.replace(/\s+/g, ""),
+			udprecordid: "udpRecord-BaseTreeMenuItem-" + label?.replace(/\s+/g, ""),
+			className: classes.labelRoot,
+			style: { fontWeight: isSelectedNode ? "bold" : "" }
+		}, iconName && /* @__PURE__ */ React.createElement("div", { className: classes.iconContainer }, /* @__PURE__ */ React.createElement(UnityFluentIcon, {
+			size: treeViewMode === TreeViewModeEnums.Compact ? "small" : "large",
+			color: iconColor,
+			type: iconType,
+			icon: iconType === "unity" ? getUnityIconFromName(iconName) : getIconFromName(iconName),
+			style: { color: iconColor ? darken(iconColor, .1) : theme.palette.secondary.main }
+		})), /* @__PURE__ */ React.createElement("div", { className: classes.labelContainer }, /* @__PURE__ */ React.createElement(Typography, {
+			variant: "subtitle2",
+			className: clsx(classes.labelText, classes.labelOverflow)
+		}, label, subLabel && treeViewMode === TreeViewModeEnums.Compact && /* @__PURE__ */ React.createElement(Typography, {
+			variant: "caption",
+			className: clsx(classes.captionText, classes.labelOverflow)
+		}, subLabel)), subLabel && treeViewMode === TreeViewModeEnums.Classic && /* @__PURE__ */ React.createElement("div", { className: classes.labelOverflow }, /* @__PURE__ */ React.createElement(Typography, {
+			variant: "caption",
+			className: clsx(classes.captionText)
+		}, subLabel))), /* @__PURE__ */ React.createElement(AggregateChip, { aggregateThresholdId }), conditionalIconName && sidebarExpanded && /* @__PURE__ */ React.createElement("div", { className: classes.conditionalIconContainer }, /* @__PURE__ */ React.createElement(UnityFluentIcon, {
+			size: treeViewMode === TreeViewModeEnums.Compact ? "small" : "default",
+			color: conditionalIconColor,
+			type: conditionalIconType,
+			icon: conditionalIconType === "unity" ? getUnityIconFromName(conditionalIconName) : getIconFromName(conditionalIconName),
+			style: { color: conditionalIconColor }
+		})))))),
 		onLabelClick: handleOnLabelClick,
 		classes: {
 			root: classes.root,
 			content: classes.content
 		},
 		...other
-	}, nodeId);
+	});
 };
 
 //#endregion
@@ -335,7 +307,8 @@ const WorkflowTreeMenu = (props) => {
 			iconType = node.properties?.icon?.type;
 			iconColor = node.properties?.icon?.color?.hex;
 		}
-		return /* @__PURE__ */ jsxs(WorkflowTreeMenuItem, {
+		return /* @__PURE__ */ React.createElement(WorkflowTreeMenuItem, {
+			key: nodeId,
 			nodeId,
 			label,
 			subLabel,
@@ -358,37 +331,23 @@ const WorkflowTreeMenu = (props) => {
 			onDropNode,
 			treeViewMode,
 			menuIndex,
-			aggregateThresholdId,
-			children: [
-				node.properties?.lazyLoad && !!!node[childrenKey]?.length && !node.completedLoadingChildren && /* @__PURE__ */ jsx(CircularProgress, {
-					size: 12,
-					style: { marginLeft: (depth || 1) * theme.spacing(1) }
-				}),
-				node.properties?.lazyLoad && !!!node[childrenKey]?.length && node.completedLoadingChildren && sidebarExpanded && !node.errorRetrievingChildren && /* @__PURE__ */ jsx("div", {
-					className: classes.noChildrenContainer,
-					children: /* @__PURE__ */ jsx(Typography, {
-						variant: "caption",
-						style: {
-							marginLeft: (depth || 1) * theme.spacing(3),
-							fontWeight: 400
-						},
-						children: "No Children"
-					})
-				}),
-				node.properties?.lazyLoad && node.completedLoadingChildren && sidebarExpanded && node.errorRetrievingChildren && /* @__PURE__ */ jsx("div", {
-					className: classes.noChildrenContainer,
-					children: /* @__PURE__ */ jsx(Typography, {
-						variant: "caption",
-						style: {
-							marginLeft: (depth || 1) * theme.spacing(3),
-							fontWeight: 400
-						},
-						children: `Error Retrieving ${!!node[childrenKey]?.length ? `Additional ` : ""}Children`
-					})
-				}),
-				Array.isArray(node[childrenKey]) ? node[childrenKey].map((n, i) => renderTree(n, depth + 1)) : null
-			]
-		}, nodeId);
+			aggregateThresholdId
+		}, node.properties?.lazyLoad && !!!node[childrenKey]?.length && !node.completedLoadingChildren && /* @__PURE__ */ React.createElement(CircularProgress, {
+			size: 12,
+			style: { marginLeft: (depth || 1) * theme.spacing(1) }
+		}), node.properties?.lazyLoad && !!!node[childrenKey]?.length && node.completedLoadingChildren && sidebarExpanded && !node.errorRetrievingChildren && /* @__PURE__ */ React.createElement("div", { className: classes.noChildrenContainer }, /* @__PURE__ */ React.createElement(Typography, {
+			variant: "caption",
+			style: {
+				marginLeft: (depth || 1) * theme.spacing(3),
+				fontWeight: 400
+			}
+		}, "No Children")), node.properties?.lazyLoad && node.completedLoadingChildren && sidebarExpanded && node.errorRetrievingChildren && /* @__PURE__ */ React.createElement("div", { className: classes.noChildrenContainer }, /* @__PURE__ */ React.createElement(Typography, {
+			variant: "caption",
+			style: {
+				marginLeft: (depth || 1) * theme.spacing(3),
+				fontWeight: 400
+			}
+		}, `Error Retrieving ${!!node[childrenKey]?.length ? `Additional ` : ""}Children`)), Array.isArray(node[childrenKey]) ? node[childrenKey].map((n, i) => renderTree(n, depth + 1)) : null);
 	}, [
 		handleSelectedNode,
 		selectedNodeId,
@@ -446,9 +405,10 @@ const WorkflowTreeMenu = (props) => {
 		else setIsCurrentActiveTree(false);
 	}, [tree, selectedNodeId]);
 	if (!expanded) return null;
-	return /* @__PURE__ */ jsx(TreeView, {
+	return /* @__PURE__ */ React.createElement(TreeView, {
+		key: tree,
 		className: classes.root,
-		defaultCollapseIcon: /* @__PURE__ */ jsx(FluentIcon, {
+		defaultCollapseIcon: /* @__PURE__ */ React.createElement(FluentIcon, {
 			size: "small",
 			component: CaretUpSolid8Icon,
 			style: {
@@ -459,7 +419,7 @@ const WorkflowTreeMenu = (props) => {
 		}),
 		expanded: expanded || [],
 		onNodeToggle: handleNodeExpansion,
-		defaultExpandIcon: /* @__PURE__ */ jsx(FluentIcon, {
+		defaultExpandIcon: /* @__PURE__ */ React.createElement(FluentIcon, {
 			size: "small",
 			component: CaretDownSolid8Icon,
 			style: {
@@ -468,9 +428,8 @@ const WorkflowTreeMenu = (props) => {
 				height: theme.spacing(1.5)
 			}
 		}),
-		selected: selectedNodeId,
-		children: tree && renderTree(tree)
-	}, tree);
+		selected: selectedNodeId
+	}, tree && renderTree(tree));
 };
 
 //#endregion
@@ -733,10 +692,7 @@ const ColorlibStepIcon = (props) => {
 	const { active, completed } = props;
 	const classes = useStyles$7();
 	const rootClass = `${classes.stepIconRoot} ${active ? "active" : ""} ${completed ? "completed" : ""}`;
-	return /* @__PURE__ */ jsx("div", {
-		className: rootClass,
-		children: completed ? /* @__PURE__ */ jsx(CheckCircleIcon, {}) : active ? /* @__PURE__ */ jsx(RadioButtonCheckedIcon, {}) : /* @__PURE__ */ jsx(RadioButtonUncheckedIcon, {})
-	});
+	return /* @__PURE__ */ React.createElement("div", { className: rootClass }, completed ? /* @__PURE__ */ React.createElement(CheckCircleIcon, null) : active ? /* @__PURE__ */ React.createElement(RadioButtonCheckedIcon, null) : /* @__PURE__ */ React.createElement(RadioButtonUncheckedIcon, null));
 };
 const WorkflowTaskFlow = (props) => {
 	const { steps = [], handleClick = () => {}, task } = props;
@@ -769,55 +725,27 @@ const WorkflowTaskFlow = (props) => {
 		const shortDate = formatDateToLocaleString(date, DateTime.DATE_SHORT);
 		return `Due ${shortDate}`;
 	}, []);
-	return /* @__PURE__ */ jsxs("div", {
-		className: classes.root,
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: classes.taskInfoBlock,
-				children: [/* @__PURE__ */ jsx("div", {
-					className: classes.description,
-					children: /* @__PURE__ */ jsx(Typography, {
-						variant: "caption",
-						children: task?.properties?.nodeLabel || ""
-					})
-				}), /* @__PURE__ */ jsx("div", {
-					className: classes.description,
-					children: /* @__PURE__ */ jsx(Typography, {
-						variant: "caption",
-						style: { fontWeight: 500 },
-						children: getFormattedDueDate(task?.properties?.dueDate)
-					})
-				})]
-			}),
-			/* @__PURE__ */ jsx(Button, {
-				className: classes.button,
-				onClick: handleOnLeftButtonClick,
-				children: /* @__PURE__ */ jsx(FluentIcon, { component: ChevronLeftIcon })
-			}),
-			/* @__PURE__ */ jsx(Stepper, {
-				alternativeLabel: true,
-				activeStep,
-				connector: /* @__PURE__ */ jsx(ColorLibConnector, {}),
-				className: classes.stepperContainer,
-				children: steps.map((step, index) => /* @__PURE__ */ jsx(Step, {
-					onClick: () => handleStepClick(index),
-					children: /* @__PURE__ */ jsx(StepLabel, {
-						classes: { labelContainer: classes.stepLabel },
-						StepIconComponent: ColorlibStepIcon,
-						children: /* @__PURE__ */ jsx(Typography, {
-							variant: "caption",
-							children: step.label
-						})
-					})
-				}, step.label))
-			}),
-			/* @__PURE__ */ jsx(Button, {
-				className: classes.button,
-				onClick: handleOnRightButtonClick,
-				children: /* @__PURE__ */ jsx(FluentIcon, { component: ChevronRightIcon })
-			})
-		]
-	});
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.taskInfoBlock }, /* @__PURE__ */ React.createElement("div", { className: classes.description }, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, task?.properties?.nodeLabel || "")), /* @__PURE__ */ React.createElement("div", { className: classes.description }, /* @__PURE__ */ React.createElement(Typography, {
+		variant: "caption",
+		style: { fontWeight: 500 }
+	}, getFormattedDueDate(task?.properties?.dueDate)))), /* @__PURE__ */ React.createElement(Button, {
+		className: classes.button,
+		onClick: handleOnLeftButtonClick
+	}, /* @__PURE__ */ React.createElement(FluentIcon, { component: ChevronLeftIcon })), /* @__PURE__ */ React.createElement(Stepper, {
+		alternativeLabel: true,
+		activeStep,
+		connector: /* @__PURE__ */ React.createElement(ColorLibConnector, null),
+		className: classes.stepperContainer
+	}, steps.map((step, index) => /* @__PURE__ */ React.createElement(Step, {
+		key: step.label,
+		onClick: () => handleStepClick(index)
+	}, /* @__PURE__ */ React.createElement(StepLabel, {
+		classes: { labelContainer: classes.stepLabel },
+		StepIconComponent: ColorlibStepIcon
+	}, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, step.label))))), /* @__PURE__ */ React.createElement(Button, {
+		className: classes.button,
+		onClick: handleOnRightButtonClick
+	}, /* @__PURE__ */ React.createElement(FluentIcon, { component: ChevronRightIcon })));
 };
 
 //#endregion
@@ -843,7 +771,7 @@ const LinearProgress$1 = (props) => {
 		"info"
 	].includes(color);
 	const classes = useStyles$6({ color });
-	return /* @__PURE__ */ jsx(LinearProgress, {
+	return /* @__PURE__ */ React.createElement(LinearProgress, {
 		...otherProps,
 		variant,
 		value,
@@ -884,7 +812,7 @@ const CircularProgress$1 = (props) => {
 		"info"
 	].includes(color);
 	const classes = useStyles$5({ color });
-	return /* @__PURE__ */ jsx(CircularProgress, {
+	return /* @__PURE__ */ React.createElement(CircularProgress, {
 		...otherProps,
 		variant,
 		value,
@@ -1189,65 +1117,55 @@ const WorkflowUiInterruptContent = (props) => {
 		workflowTaskSteps,
 		selectedNode
 	]);
-	return /* @__PURE__ */ jsxs("div", { children: [
-		/* @__PURE__ */ jsxs(Card, {
-			variant: "outlined",
-			style: {
-				border: "none",
-				paddingBottom: workflowTaskSteps?.length > 1 ? 10 : 0
-			},
-			children: [/* @__PURE__ */ jsx(PrimaryActionHeader, {
-				single: true,
-				title: workflow?.name,
-				buttonLabel: "Submit",
-				handleClick: handleTaskSubmit,
-				pabDisabled: selectedNode?.properties?.state !== UnitStateType.Started,
-				secondaryButtons
-			}), loading && /* @__PURE__ */ jsx(LinearProgress$1, {})]
-		}),
-		workflowTaskSteps?.length > 1 && /* @__PURE__ */ jsx(WorkflowTaskFlow, {
-			steps: workflowTaskSteps,
-			handleClick: handleTaskChange,
-			task: selectedNode
-		}),
-		selectedPageId && workflowPageData ? /* @__PURE__ */ jsx(PageContainer, {
-			user,
-			pageData,
-			pageLoading,
-			widgetParams: pageWidgetParams,
-			disableMargins: true,
-			fromMenu: true,
-			height: pageHeight
-		}, selectedPageId) : /* @__PURE__ */ jsx("div", {
-			className: classes.loadingContent,
-			children: /* @__PURE__ */ jsx(CircularProgress$1, { size: 64 })
-		}),
-		/* @__PURE__ */ jsx(SideSheet, {
-			open: reassignSidesheetOpen,
-			buttonLabel: t("Reassign"),
-			onClose: closeReassignmentSheet,
-			onSubmit: handleReassignment,
-			title: t("Reassign Task"),
-			width: "25%",
-			progress: reassigningAssignee,
-			variant: "indeterminate",
-			children: /* @__PURE__ */ jsx(Form, {
-				onSubmit: reassignTask,
-				ref: formRef,
-				children: /* @__PURE__ */ jsx(Field, {
-					component: FluentTextFieldAutoComplete,
-					name: "assignee",
-					id: "assignee",
-					label: t("Assignee"),
-					initialValue: currentAssignee || "",
-					options: assigneeOptions || [],
-					optionKey: "name",
-					variant: "outlined",
-					margin: "dense"
-				})
-			})
-		})
-	] });
+	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Card, {
+		variant: "outlined",
+		style: {
+			border: "none",
+			paddingBottom: workflowTaskSteps?.length > 1 ? 10 : 0
+		}
+	}, /* @__PURE__ */ React.createElement(PrimaryActionHeader, {
+		single: true,
+		title: workflow?.name,
+		buttonLabel: "Submit",
+		handleClick: handleTaskSubmit,
+		pabDisabled: selectedNode?.properties?.state !== UnitStateType.Started,
+		secondaryButtons
+	}), loading && /* @__PURE__ */ React.createElement(LinearProgress$1, null)), workflowTaskSteps?.length > 1 && /* @__PURE__ */ React.createElement(WorkflowTaskFlow, {
+		steps: workflowTaskSteps,
+		handleClick: handleTaskChange,
+		task: selectedNode
+	}), selectedPageId && workflowPageData ? /* @__PURE__ */ React.createElement(PageContainer, {
+		user,
+		key: selectedPageId,
+		pageData,
+		pageLoading,
+		widgetParams: pageWidgetParams,
+		disableMargins: true,
+		fromMenu: true,
+		height: pageHeight
+	}) : /* @__PURE__ */ React.createElement("div", { className: classes.loadingContent }, /* @__PURE__ */ React.createElement(CircularProgress$1, { size: 64 })), /* @__PURE__ */ React.createElement(SideSheet, {
+		open: reassignSidesheetOpen,
+		buttonLabel: t("Reassign"),
+		onClose: closeReassignmentSheet,
+		onSubmit: handleReassignment,
+		title: t("Reassign Task"),
+		width: "25%",
+		progress: reassigningAssignee,
+		variant: "indeterminate"
+	}, /* @__PURE__ */ React.createElement(Form, {
+		onSubmit: reassignTask,
+		ref: formRef
+	}, /* @__PURE__ */ React.createElement(Field, {
+		component: FluentTextFieldAutoComplete,
+		name: "assignee",
+		id: "assignee",
+		label: t("Assignee"),
+		initialValue: currentAssignee || "",
+		options: assigneeOptions || [],
+		optionKey: "name",
+		variant: "outlined",
+		margin: "dense"
+	}))));
 };
 
 //#endregion
@@ -1310,32 +1228,22 @@ const SmsDisplay = (props) => {
 	useEffect(() => {
 		if (messagesBoxRef.current) messagesBoxRef.current.scrollTop = messagesBoxRef.current.scrollHeight;
 	}, [messagesList]);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Card, {
-		square: true,
-		children: /* @__PURE__ */ jsx(PrimaryActionHeader, {
-			hidePAB: true,
-			title,
-			subheader: `To: ${to} . From: ${from}`,
-			secondaryButtons
-		})
-	}), /* @__PURE__ */ jsx(Box, {
-		className: classes.messages,
-		children: /* @__PURE__ */ jsx(Box, {
-			className: classes.messageSection,
-			children: /* @__PURE__ */ jsx(Box, {
-				className: classes.messagesBox,
-				ref: messagesBoxRef,
-				children: messagesList.map((message, index) => /* @__PURE__ */ jsx(Grow, {
-					in: true,
-					timeout: 800,
-					children: /* @__PURE__ */ jsx(Box, {
-						className: classes.message,
-						dangerouslySetInnerHTML: { __html: message }
-					})
-				}, index))
-			})
-		})
-	})] });
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Card, { square: true }, /* @__PURE__ */ React.createElement(PrimaryActionHeader, {
+		hidePAB: true,
+		title,
+		subheader: `To: ${to} . From: ${from}`,
+		secondaryButtons
+	})), /* @__PURE__ */ React.createElement(Box, { className: classes.messages }, /* @__PURE__ */ React.createElement(Box, { className: classes.messageSection }, /* @__PURE__ */ React.createElement(Box, {
+		className: classes.messagesBox,
+		ref: messagesBoxRef
+	}, messagesList.map((message, index) => /* @__PURE__ */ React.createElement(Grow, {
+		key: index,
+		in: true,
+		timeout: 800
+	}, /* @__PURE__ */ React.createElement(Box, {
+		className: classes.message,
+		dangerouslySetInnerHTML: { __html: message }
+	})))))));
 };
 
 //#endregion
@@ -1357,22 +1265,12 @@ const EmailDisplay = (props) => {
 		});
 		return buttons;
 	}, [t, handleClose]);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		/* @__PURE__ */ jsx(Card, {
-			square: true,
-			children: /* @__PURE__ */ jsx(PrimaryActionHeader, {
-				hidePAB: true,
-				title,
-				subheader: `To: ${to} . From: ${from}`,
-				secondaryButtons
-			})
-		}),
-		/* @__PURE__ */ jsx(LayoutUnit, { unit: "sm" }),
-		/* @__PURE__ */ jsx("div", {
-			className: classes.htmlContainer,
-			children: ReactHtmlParser(html)
-		})
-	] });
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Card, { square: true }, /* @__PURE__ */ React.createElement(PrimaryActionHeader, {
+		hidePAB: true,
+		title,
+		subheader: `To: ${to} . From: ${from}`,
+		secondaryButtons
+	})), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "sm" }), /* @__PURE__ */ React.createElement("div", { className: classes.htmlContainer }, ReactHtmlParser(html)));
 };
 
 //#endregion
@@ -1389,7 +1287,8 @@ const WorkflowContent = (props) => {
 	const [{ data: pageData, loading: pageLoading, error: pageError }] = useAxiosGet(ConfigService.tenantV1ApiUrl, `page/${selectedNode?.properties?.page?.id}`, {}, !!!selectedNode?.properties?.page?.id, false);
 	const content = useMemo(() => {
 		let res = null;
-		if (selectedNode?.properties?.type === UnitTypeEnums.Scene) res = /* @__PURE__ */ jsx(WorkflowUiInterruptContent, {
+		if (selectedNode?.properties?.type === UnitTypeEnums.Scene) res = /* @__PURE__ */ React.createElement(WorkflowUiInterruptContent, {
+			key: selectedNode.id,
 			selectedNode,
 			workflow,
 			reloadWorkflow,
@@ -1397,23 +1296,24 @@ const WorkflowContent = (props) => {
 			groups,
 			handleClose,
 			inquiryPageParams
-		}, selectedNode.id);
-		else if (selectedNode?.properties?.type === UnitTypeEnums.Sms) res = /* @__PURE__ */ jsx(SmsDisplay, {
+		});
+		else if (selectedNode?.properties?.type === UnitTypeEnums.Sms) res = /* @__PURE__ */ React.createElement(SmsDisplay, {
 			messages: [selectedNode?.properties?.sms?.body || ""],
 			to: selectedNode?.properties?.sms?.to || "",
 			from: selectedNode?.properties?.sms?.from || "",
 			title: selectedNode?.properties?.nodeLabel || "",
 			handleClose
 		});
-		else if (selectedNode?.properties?.type === UnitTypeEnums.Mail) res = /* @__PURE__ */ jsx(EmailDisplay, {
+		else if (selectedNode?.properties?.type === UnitTypeEnums.Mail) res = /* @__PURE__ */ React.createElement(EmailDisplay, {
 			html: selectedNode?.properties?.email?.html || selectedNode?.properties?.email?.text || "",
 			to: selectedNode?.properties?.email?.to || "",
 			from: selectedNode?.properties?.email?.from || "",
 			title: selectedNode?.properties?.nodeLabel || "",
 			handleClose
 		});
-		else if (selectedNode?.properties?.page?.id) res = /* @__PURE__ */ jsx(PageContainer, {
+		else if (selectedNode?.properties?.page?.id) res = /* @__PURE__ */ React.createElement(PageContainer, {
 			user,
+			key: selectedNode?.id,
 			pageData,
 			pageLoading,
 			widgetParams: {
@@ -1427,7 +1327,7 @@ const WorkflowContent = (props) => {
 			},
 			disableMargins: true,
 			fromMenu: true
-		}, selectedNode?.id);
+		});
 		return res;
 	}, [
 		groups,
@@ -1440,10 +1340,7 @@ const WorkflowContent = (props) => {
 		workflow,
 		handleClose
 	]);
-	return /* @__PURE__ */ jsx("div", {
-		className: classes.root,
-		children: content
-	});
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, content);
 };
 
 //#endregion
@@ -1599,54 +1496,38 @@ const WorkflowContainer = (props) => {
 	useEffect(() => {
 		setSubHeaderActionHasChildren(false);
 	}, [setSubHeaderActionHasChildren]);
-	return /* @__PURE__ */ jsx(DndProvider, {
-		backend: HTML5Backend,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: classes.root,
-			children: [/* @__PURE__ */ jsx("div", {
-				className: classes.sidebar,
-				children: /* @__PURE__ */ jsx(UtilitySideBar, {
-					title: "Workflow",
-					isUsingChildren: true,
-					resizable: true,
-					removePadding: true,
-					removeTopLayoutUnit: true,
-					onUtilitySidebarToggleExpandClick: handleSidebarExpandClick,
-					collapsedWidth: 64,
-					children: /* @__PURE__ */ jsxs("div", {
-						className: classes.menuContent,
-						children: [menuItemsList?.length > 0 && (!workflowPlayLoading || reloadFromPage) && menuItemsList.map((menuItems, index) => /* @__PURE__ */ jsx("div", {
-							className: classes.nodeContainer,
-							children: /* @__PURE__ */ jsx(WorkflowTreeMenu, {
-								menuItems,
-								onSelectNode: handleSelectedNode,
-								onDropNode: handleDropNode,
-								menuIndex: index,
-								selectedNodeId: selectedNode?.id,
-								selectedNodeParentId: selectedNode?.parentId,
-								sidebarExpanded,
-								treeViewMode: TreeViewModeEnums.Classic
-							})
-						}, menuItems.id)), workflowPlayLoading && !reloadFromPage && /* @__PURE__ */ jsx("div", {
-							className: classes.loader,
-							children: /* @__PURE__ */ jsx(NodeLoader, { loading: workflowPlayLoading })
-						})]
-					}, playId)
-				})
-			}), /* @__PURE__ */ jsx("div", {
-				className: classes.content,
-				children: /* @__PURE__ */ jsx(WorkflowContent, {
-					selectedNode,
-					workflow,
-					reloadWorkflow: handleReloadWorkflow,
-					users,
-					groups
-				})
-			})]
-		})
-	});
+	return /* @__PURE__ */ React.createElement(DndProvider, { backend: HTML5Backend }, /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.sidebar }, /* @__PURE__ */ React.createElement(UtilitySideBar, {
+		title: "Workflow",
+		isUsingChildren: true,
+		resizable: true,
+		removePadding: true,
+		removeTopLayoutUnit: true,
+		onUtilitySidebarToggleExpandClick: handleSidebarExpandClick,
+		collapsedWidth: 64
+	}, /* @__PURE__ */ React.createElement("div", {
+		className: classes.menuContent,
+		key: playId
+	}, menuItemsList?.length > 0 && (!workflowPlayLoading || reloadFromPage) && menuItemsList.map((menuItems, index) => /* @__PURE__ */ React.createElement("div", {
+		key: menuItems.id,
+		className: classes.nodeContainer
+	}, /* @__PURE__ */ React.createElement(WorkflowTreeMenu, {
+		menuItems,
+		onSelectNode: handleSelectedNode,
+		onDropNode: handleDropNode,
+		menuIndex: index,
+		selectedNodeId: selectedNode?.id,
+		selectedNodeParentId: selectedNode?.parentId,
+		sidebarExpanded,
+		treeViewMode: TreeViewModeEnums.Classic
+	}))), workflowPlayLoading && !reloadFromPage && /* @__PURE__ */ React.createElement("div", { className: classes.loader }, /* @__PURE__ */ React.createElement(NodeLoader, { loading: workflowPlayLoading }))))), /* @__PURE__ */ React.createElement("div", { className: classes.content }, /* @__PURE__ */ React.createElement(WorkflowContent, {
+		selectedNode,
+		workflow,
+		reloadWorkflow: handleReloadWorkflow,
+		users,
+		groups
+	}))));
 };
 
 //#endregion
 export { CircularProgress$1 as CircularProgress, FluentTextFieldAutoComplete, LinearProgress$1 as LinearProgress, UnitStateType, WorkflowContainer, WorkflowContent, WorkflowTreeMenu, formatDateToLocaleString, toUtcDate, transformWorkflowPlayTree, useWorkflowStore };
-//# sourceMappingURL=WorkflowContainer-C2W0pr5f.js.map
+//# sourceMappingURL=WorkflowContainer-DKwRWi1i.js.map