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

package/dist/MenuPage-DNywMmn2.cjs

@@ -0,0 +1,562 @@
+const require_chunk = require('./chunk-DoeelZqw.cjs');
+const require_EnvironmentRibbon = require('./EnvironmentRibbon-CgKsTmQ7.cjs');
+require('./apiHelpers-Dyq5plHt.cjs');
+const require_UtilitySideBar = require('./UtilitySideBar-CoLVUjcV.cjs');
+require('./SearchUtilities-BYR03EFr.cjs');
+const require_PageContainer = require('./PageContainer-DFKnbhBN.cjs');
+const react = require_chunk.__toESM(require("react"));
+const __material_ui_core = require_chunk.__toESM(require("@material-ui/core"));
+const react_jsx_runtime = require_chunk.__toESM(require("react/jsx-runtime"));
+const udp_react_stencil_component_library = require_chunk.__toESM(require("udp-react-stencil-component-library"));
+const react_router_dom = require_chunk.__toESM(require("react-router-dom"));
+const clsx = require_chunk.__toESM(require("clsx"));
+const __fluentui_react_icons = require_chunk.__toESM(require("@fluentui/react-icons"));
+const lodash = require_chunk.__toESM(require("lodash"));
+const react_i18next = require_chunk.__toESM(require("react-i18next"));
+const react_dnd = require_chunk.__toESM(require("react-dnd"));
+const react_dnd_html5_backend = require_chunk.__toESM(require("react-dnd-html5-backend"));
+const __material_ui_lab_TreeView = require_chunk.__toESM(require("@material-ui/lab/TreeView"));
+const __material_ui_lab_TreeItem = require_chunk.__toESM(require("@material-ui/lab/TreeItem"));
+
+//#region src/treeMenu/BaseTreeMenuItem.jsx
+const useStyles$2 = (0, __material_ui_core.makeStyles)((theme) => {
+	var _theme$getThemeData, _theme$getThemeData2;
+	return {
+		root: {
+			"&.Mui-selected > .MuiTreeItem-content": {
+				backgroundColor: (theme === null || theme === void 0 || (_theme$getThemeData = theme.getThemeData()) === null || _theme$getThemeData === void 0 ? void 0 : _theme$getThemeData.mode) === "dark" ? theme.palette.grey[700] : theme.palette.grey[300],
+				borderRight: `4px solid ${theme.palette.primary.main}`
+			},
+			"&.Mui-selected > .MuiTreeItem-content .MuiTreeItem-label": {
+				backgroundColor: "transparent",
+				paddingLeft: 0
+			},
+			"&.Mui-selected > .MuiTreeItem-content > .MuiCollapse-wrapperInner": { backgroundColor: (theme === null || theme === void 0 || (_theme$getThemeData2 = theme.getThemeData()) === null || _theme$getThemeData2 === void 0 ? void 0 : _theme$getThemeData2.mode) !== "dark" && theme.palette.grey[50] },
+			"& .MuiTreeItem-content .MuiTreeItem-iconContainer": { display: (props) => props.sidebarExpanded ? "flex" : "none" }
+		},
+		content: { backgroundColor: (props) => {
+			var _theme$getThemeData3;
+			return (theme === null || theme === void 0 || (_theme$getThemeData3 = theme.getThemeData()) === null || _theme$getThemeData3 === void 0 ? void 0 : _theme$getThemeData3.mode) !== "dark" && props.conditionalIconName && props.conditionalIconColor ? (0, __material_ui_core.lighten)(props.conditionalIconColor, .92) : "";
+		} },
+		labelRoot: {
+			display: "flex",
+			alignItems: "center",
+			marginLeft: (props) => props.sidebarExpanded ? 0 : theme.spacing(1.5),
+			width: "100%"
+		},
+		labelContainer: {
+			display: (props) => !props.sidebarExpanded ? "none" : "",
+			width: (props) => props.treeViewMode === require_EnvironmentRibbon.TreeViewModeEnums.Compact ? `calc(100% - ${theme.spacing(6.25)}px)` : `calc(100% - ${theme.spacing(7.75)}px)`
+		},
+		conditionalIconContainer: { display: "inline-flex" },
+		labelText: {
+			fontSize: "0.75rem",
+			fontWeight: 600,
+			lineHeight: "1rem",
+			letterSpacing: .1
+		},
+		captionText: {
+			marginLeft: (props) => props.treeViewMode === require_EnvironmentRibbon.TreeViewModeEnums.Compact ? theme.spacing(1) : "",
+			fontSize: "0.65rem",
+			fontWeight: 400,
+			lineHeight: 1,
+			letterSpacing: .4
+		},
+		labelOverflow: {
+			whiteSpace: "nowrap",
+			overflow: "hidden",
+			textOverflow: "ellipsis"
+		},
+		group: {
+			width: "100%",
+			"& .MuiTreeItem-group": { marginLeft: 0 },
+			"& .MuiTreeItem-content": {
+				paddingLeft: (props) => props.sidebarExpanded ? (props.depth || 1) * theme.spacing(1) : 0,
+				borderRight: (props) => props.showRightBorderColor ? `4px solid ${theme.palette.primary.main}` : "",
+				borderBottom: (props) => props.treeViewMode === require_EnvironmentRibbon.TreeViewModeEnums.Compact ? `1px solid ${theme.palette.grey[200]}` : ""
+			},
+			"& .MuiTreeItem-content .MuiTreeItem-label": {
+				paddingLeft: 0,
+				width: (props) => props.sidebarExpanded && `calc(100% - ${theme.spacing(2.5)}px)`
+			},
+			"& .MuiTreeItem-content .MuiTreeItem-iconContainer span": { display: (props) => props.hideExpansion ? "none" : "" },
+			"& .MuiCollapse-wrapperInner": { backgroundColor: (props) => {
+				var _theme$getThemeData4;
+				return (theme === null || theme === void 0 || (_theme$getThemeData4 = theme.getThemeData()) === null || _theme$getThemeData4 === void 0 ? void 0 : _theme$getThemeData4.mode) !== "dark" && props.isSelectedNode ? theme.palette.grey[50] : "";
+			} }
+		},
+		iconContainer: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			borderRadius: 50,
+			marginTop: (props) => props.treeViewMode === require_EnvironmentRibbon.TreeViewModeEnums.Compact ? theme.spacing(.25) : theme.spacing(.5),
+			marginBottom: (props) => props.treeViewMode === require_EnvironmentRibbon.TreeViewModeEnums.Compact ? theme.spacing(.25) : theme.spacing(.5),
+			marginRight: theme.spacing(1),
+			width: (props) => props.treeViewMode === require_EnvironmentRibbon.TreeViewModeEnums.Compact ? theme.spacing(3) : theme.spacing(4),
+			height: (props) => props.treeViewMode === require_EnvironmentRibbon.TreeViewModeEnums.Compact ? theme.spacing(3) : theme.spacing(4),
+			border: (props) => props.iconColor ? `1px solid ${(0, __material_ui_core.darken)(props.iconColor, .1)}` : `1px solid ${theme.palette.secondary.main}`,
+			backgroundColor: "#ffffff"
+		}
+	};
+});
+const BaseTreeMenuItem = (props) => {
+	var _node$properties2;
+	const { parentId, nodeId, iconName, iconType, conditionalIconName, conditionalIconType, conditionalIconColor, label, iconColor, onNodeSelect, isSelectedNode, subLabel, sidebarExpanded, isLastNode, loading, node, onDropNode, treeViewMode, menuIndex, aggregateThresholdId,...other } = props;
+	const classes = useStyles$2(props);
+	const theme = (0, __material_ui_core.useTheme)();
+	const [{ isDragging }, dragRef] = (0, react_dnd.useDrag)({
+		type: "BaseTreeMenuItem",
+		item: {
+			...node,
+			sourceNodeMenuIndex: menuIndex
+		},
+		collect: (monitor) => ({ isDragging: monitor.isDragging() })
+	});
+	const handleOnDrop = (0, react.useCallback)((sourceNode, monitor) => {
+		if (!monitor.didDrop()) {
+			if (onDropNode) {
+				const { sourceNodeMenuIndex,...other$1 } = sourceNode;
+				onDropNode({ ...other$1 }, node, sourceNodeMenuIndex, menuIndex);
+			}
+		}
+	}, [
+		onDropNode,
+		node,
+		menuIndex
+	]);
+	const [{ canDrop, isOver }, dropRef] = (0, react_dnd.useDrop)(() => ({
+		accept: ["BaseTreeMenuItem"],
+		drop: (sourceNode, monitor) => {
+			handleOnDrop(sourceNode, monitor);
+		},
+		canDrop: (sourceNode) => checkCanDrop(sourceNode),
+		collect: (monitor) => ({
+			isOver: monitor.isOver(),
+			canDrop: !!monitor.canDrop()
+		})
+	}), [handleOnDrop]);
+	const checkCanDrop = (0, react.useCallback)((sourceNode) => {
+		if (sourceNode) {
+			var _node$properties, _sourceNode$propertie;
+			const onDropActions = node === null || node === void 0 || (_node$properties = node.properties) === null || _node$properties === void 0 || (_node$properties = _node$properties.nodeActions) === null || _node$properties === void 0 ? void 0 : _node$properties.filter((na) => (na === null || na === void 0 ? void 0 : na.triggerType) === require_EnvironmentRibbon.NodeActionTriggerEnums.On_Node_Drop);
+			if (!onDropActions) return false;
+			const nodeDragEntities = onDropActions === null || onDropActions === void 0 ? void 0 : onDropActions.map((action) => action === null || action === void 0 ? void 0 : action.dragEntityName);
+			return nodeDragEntities.includes(sourceNode === null || sourceNode === void 0 || (_sourceNode$propertie = sourceNode.properties) === null || _sourceNode$propertie === void 0 ? void 0 : _sourceNode$propertie.catalogReturnObject);
+		}
+	}, [node]);
+	const handleOnLabelClick = (0, react.useCallback)((e) => {
+		e.preventDefault();
+		onNodeSelect(e, nodeId);
+	}, [onNodeSelect, nodeId]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_lab_TreeItem.default, {
+		className: classes.group,
+		nodeId,
+		label: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: dropRef,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Tooltip, {
+				title: sidebarExpanded ? "" : label,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					ref: (node === null || node === void 0 || (_node$properties2 = node.properties) === null || _node$properties2 === void 0 ? void 0 : _node$properties2.isDraggable) && dragRef || null,
+					style: { opacity: isDragging ? .5 : 1 },
+					children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.CircularProgress, { size: 12 }) : /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: classes.iconContainer,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EnvironmentRibbon.UnityFluentIcon, {
+									size: treeViewMode === require_EnvironmentRibbon.TreeViewModeEnums.Compact ? "small" : "medium",
+									color: iconColor,
+									type: iconType,
+									icon: iconType === "unity" ? require_UtilitySideBar.getUnityIconFromName(iconName) : require_UtilitySideBar.getIconFromName(iconName),
+									style: { color: iconColor ? (0, __material_ui_core.darken)(iconColor, .1) : theme.palette.secondary.main }
+								})
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: classes.labelContainer,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__material_ui_core.Typography, {
+									variant: "subtitle2",
+									className: (0, clsx.default)(classes.labelText, classes.labelOverflow),
+									children: [label, subLabel && treeViewMode === require_EnvironmentRibbon.TreeViewModeEnums.Compact && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Typography, {
+										variant: "caption",
+										className: (0, clsx.default)(classes.captionText, classes.labelOverflow),
+										children: subLabel
+									})]
+								}), subLabel && treeViewMode === require_EnvironmentRibbon.TreeViewModeEnums.Classic && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: classes.labelOverflow,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Typography, {
+										variant: "caption",
+										className: (0, clsx.default)(classes.captionText),
+										children: subLabel
+									})
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_UtilitySideBar.AggregateChip, { aggregateThresholdId }),
+							conditionalIconName && sidebarExpanded && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: classes.conditionalIconContainer,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EnvironmentRibbon.UnityFluentIcon, {
+									size: treeViewMode === require_EnvironmentRibbon.TreeViewModeEnums.Compact ? "small" : "medium",
+									color: conditionalIconColor,
+									type: conditionalIconType,
+									icon: conditionalIconType === "unity" ? require_UtilitySideBar.getUnityIconFromName(conditionalIconName) : require_UtilitySideBar.getIconFromName(conditionalIconName),
+									style: { color: conditionalIconColor }
+								})
+							})
+						]
+					})
+				})
+			})
+		}),
+		onLabelClick: handleOnLabelClick,
+		classes: {
+			root: classes.root,
+			content: classes.content
+		},
+		...other
+	}, nodeId);
+};
+
+//#endregion
+//#region src/treeMenu/BaseTreeMenu.jsx
+const useStyles$1 = (0, __material_ui_core.makeStyles)((theme) => ({
+	root: {
+		marginBottom: theme.spacing(1.75),
+		borderTop: (props) => props.treeViewMode === require_EnvironmentRibbon.TreeViewModeEnums.Compact ? `1px solid ${theme.palette.grey[200]}` : ""
+	},
+	noChildrenContainer: { borderBottom: (props) => props.treeViewMode === require_EnvironmentRibbon.TreeViewModeEnums.Compact ? `1px solid ${theme.palette.grey[200]}` : "" }
+}));
+const BaseTreeMenu = (props) => {
+	const { menuItems, onSelectNode, onDropNode, menuIndex, selectedNodeId, selectedNodeParentId, sidebarExpanded, treeViewMode, childrenKey = "children" } = props;
+	const [expanded, setExpanded] = (0, react.useState)(null);
+	const [isCurrentActiveTree, setIsCurrentActiveTree] = (0, react.useState)(false);
+	const [selectedNodeIsHidden, setSelectedNodeIsHidden] = (0, react.useState)(false);
+	const [tree, setTree] = (0, react.useState)(menuItems);
+	const theme = (0, __material_ui_core.useTheme)();
+	const classes = useStyles$1(props);
+	const handleSelectedNode = (0, react.useCallback)((e, value) => {
+		const selectedNode = require_UtilitySideBar.searchTree(tree, value);
+		if (onSelectNode) {
+			onSelectNode(selectedNode, menuIndex);
+			setSelectedNodeIsHidden(false);
+		}
+	}, [
+		tree,
+		menuIndex,
+		onSelectNode
+	]);
+	const renderTree = (0, react.useCallback)((node, depth = 1) => {
+		var _node$properties, _node$properties2, _node$properties3, _node$properties4, _node$properties5, _node$properties6, _node$properties7, _node$properties8, _node$properties9, _node$properties10, _node$properties11, _node$properties12, _node$properties13, _node$childrenKey, _node$properties19, _node$childrenKey2, _node$properties20, _node$childrenKey3, _node$properties21, _node$childrenKey4;
+		let label = ((_node$properties = node.properties) === null || _node$properties === void 0 ? void 0 : _node$properties.nodeLabel) || ((_node$properties2 = node.properties) === null || _node$properties2 === void 0 ? void 0 : _node$properties2.name);
+		let subLabel = (_node$properties3 = node.properties) === null || _node$properties3 === void 0 ? void 0 : _node$properties3.nodeSubLabel;
+		let iconName = (_node$properties4 = node.properties) === null || _node$properties4 === void 0 || (_node$properties4 = _node$properties4.defaultIcon) === null || _node$properties4 === void 0 ? void 0 : _node$properties4.name;
+		let iconType = (_node$properties5 = node.properties) === null || _node$properties5 === void 0 || (_node$properties5 = _node$properties5.defaultIcon) === null || _node$properties5 === void 0 ? void 0 : _node$properties5.type;
+		let conditionalIconName = ((_node$properties6 = node.properties) === null || _node$properties6 === void 0 ? void 0 : _node$properties6.conditionalIconName) || "";
+		let conditionalIconType = ((_node$properties7 = node.properties) === null || _node$properties7 === void 0 ? void 0 : _node$properties7.conditionalIconName) ? node.properties.conditionalIconType : "";
+		let conditionalIconColor = ((_node$properties8 = node.properties) === null || _node$properties8 === void 0 ? void 0 : _node$properties8.conditionalIconName) ? (_node$properties9 = node.properties) === null || _node$properties9 === void 0 ? void 0 : _node$properties9.conditionalIconColor : "";
+		let nodeId = node.id;
+		let iconColor = ((_node$properties10 = node.properties) === null || _node$properties10 === void 0 ? void 0 : _node$properties10.conditionalIconName) ? (_node$properties11 = node.properties) === null || _node$properties11 === void 0 ? void 0 : _node$properties11.conditionalIconColor : (_node$properties12 = node.properties) === null || _node$properties12 === void 0 || (_node$properties12 = _node$properties12.defaultIcon) === null || _node$properties12 === void 0 || (_node$properties12 = _node$properties12.color) === null || _node$properties12 === void 0 ? void 0 : _node$properties12.hex;
+		let aggregateThresholdId = ((_node$properties13 = node.properties) === null || _node$properties13 === void 0 ? void 0 : _node$properties13.aggregateThresholdId) || "";
+		if (node.isGroupNode) {
+			var _node$properties14, _node$properties15, _node$properties16, _node$properties17, _node$properties18;
+			label = (_node$properties14 = node.properties) === null || _node$properties14 === void 0 ? void 0 : _node$properties14.label;
+			subLabel = (_node$properties15 = node.properties) === null || _node$properties15 === void 0 ? void 0 : _node$properties15.subLabel;
+			iconName = (_node$properties16 = node.properties) === null || _node$properties16 === void 0 || (_node$properties16 = _node$properties16.icon) === null || _node$properties16 === void 0 ? void 0 : _node$properties16.name;
+			iconType = (_node$properties17 = node.properties) === null || _node$properties17 === void 0 || (_node$properties17 = _node$properties17.icon) === null || _node$properties17 === void 0 ? void 0 : _node$properties17.type;
+			iconColor = (_node$properties18 = node.properties) === null || _node$properties18 === void 0 || (_node$properties18 = _node$properties18.icon) === null || _node$properties18 === void 0 || (_node$properties18 = _node$properties18.color) === null || _node$properties18 === void 0 ? void 0 : _node$properties18.hex;
+		}
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(BaseTreeMenuItem, {
+			nodeId,
+			label,
+			subLabel,
+			iconName,
+			iconType,
+			conditionalIconName,
+			conditionalIconType,
+			conditionalIconColor,
+			parentId: node.parentId,
+			iconColor,
+			onNodeSelect: handleSelectedNode,
+			selectedNodeId,
+			isSelectedNode: selectedNodeId === node.id,
+			showRightBorderColor: selectedNodeIsHidden && isCurrentActiveTree && require_UtilitySideBar.getNodeIdForRightBorder(expanded, tree, selectedNodeParentId) === node.id,
+			isCurrentActiveTree,
+			sidebarExpanded,
+			depth,
+			hideExpansion: !!!((_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 ? void 0 : _node$childrenKey.length),
+			node,
+			onDropNode,
+			treeViewMode,
+			menuIndex,
+			aggregateThresholdId,
+			children: [
+				((_node$properties19 = node.properties) === null || _node$properties19 === void 0 ? void 0 : _node$properties19.lazyLoad) && !!!((_node$childrenKey2 = node[childrenKey]) === null || _node$childrenKey2 === void 0 ? void 0 : _node$childrenKey2.length) && !node.completedLoadingChildren && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.CircularProgress, {
+					size: 12,
+					style: { marginLeft: (depth || 1) * theme.spacing(1) }
+				}),
+				((_node$properties20 = node.properties) === null || _node$properties20 === void 0 ? void 0 : _node$properties20.lazyLoad) && !!!((_node$childrenKey3 = node[childrenKey]) === null || _node$childrenKey3 === void 0 ? void 0 : _node$childrenKey3.length) && node.completedLoadingChildren && sidebarExpanded && !node.errorRetrievingChildren && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: classes.noChildrenContainer,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Typography, {
+						variant: "caption",
+						style: {
+							marginLeft: (depth || 1) * theme.spacing(3),
+							fontWeight: 400
+						},
+						children: "No Children"
+					})
+				}),
+				((_node$properties21 = node.properties) === null || _node$properties21 === void 0 ? void 0 : _node$properties21.lazyLoad) && node.completedLoadingChildren && sidebarExpanded && node.errorRetrievingChildren && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: classes.noChildrenContainer,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Typography, {
+						variant: "caption",
+						style: {
+							marginLeft: (depth || 1) * theme.spacing(3),
+							fontWeight: 400
+						},
+						children: `Error Retrieving ${!!((_node$childrenKey4 = node[childrenKey]) === null || _node$childrenKey4 === void 0 ? void 0 : _node$childrenKey4.length) ? `Additional ` : ""}Children`
+					})
+				}),
+				Array.isArray(node[childrenKey]) ? node[childrenKey].map((n, i) => renderTree(n, depth + 1)) : null
+			]
+		}, nodeId);
+	}, [
+		handleSelectedNode,
+		selectedNodeId,
+		selectedNodeIsHidden,
+		isCurrentActiveTree,
+		sidebarExpanded,
+		expanded,
+		tree,
+		selectedNodeParentId,
+		theme,
+		classes,
+		onDropNode,
+		treeViewMode,
+		menuIndex,
+		childrenKey
+	]);
+	const handleNodeExpansion = (0, react.useCallback)(async (evt, nodeIds) => {
+		const treeCopy = (0, lodash.cloneDeep)(tree);
+		setExpanded(nodeIds);
+		const parentNode = require_UtilitySideBar.searchTree(treeCopy, selectedNodeParentId);
+		const initialAllParentNodeIds = selectedNodeParentId ? [selectedNodeParentId] : [];
+		const allParentNodeIds = require_UtilitySideBar.findAllParentIds(treeCopy, parentNode, initialAllParentNodeIds);
+		const selectedNodeShown = allParentNodeIds.every((id) => nodeIds.includes(id));
+		if (isCurrentActiveTree && allParentNodeIds.length && !selectedNodeShown) setSelectedNodeIsHidden(true);
+		else setSelectedNodeIsHidden(false);
+	}, [
+		isCurrentActiveTree,
+		tree,
+		selectedNodeParentId
+	]);
+	const getExpandedRecursively = (0, react.useCallback)((tree$1) => {
+		if (!tree$1) return [];
+		return tree$1.reduce((expandedIds, item) => {
+			var _item$childrenKey;
+			if (item === null || item === void 0 ? void 0 : item.isExpanded) expandedIds.push(item.id);
+			if (item && ((_item$childrenKey = item[childrenKey]) === null || _item$childrenKey === void 0 ? void 0 : _item$childrenKey.length)) expandedIds = expandedIds.concat(getExpandedRecursively(item[childrenKey]));
+			return expandedIds;
+		}, []);
+	}, [childrenKey]);
+	(0, react.useEffect)(() => {
+		setTree(menuItems);
+	}, [menuItems]);
+	(0, react.useEffect)(() => {
+		if (!tree) return;
+		let expanded$1 = [];
+		if (tree === null || tree === void 0 ? void 0 : tree.isExpanded) expanded$1.push(tree.id);
+		expanded$1 = expanded$1.concat(getExpandedRecursively(tree[childrenKey]));
+		setExpanded(expanded$1);
+	}, [
+		getExpandedRecursively,
+		tree,
+		childrenKey
+	]);
+	(0, react.useEffect)(() => {
+		if (!!require_UtilitySideBar.searchTree(tree, selectedNodeId)) setIsCurrentActiveTree(true);
+		else setIsCurrentActiveTree(false);
+	}, [tree, selectedNodeId]);
+	if (!expanded) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_lab_TreeView.default, {
+		className: classes.root,
+		defaultCollapseIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EnvironmentRibbon.FluentIcon, {
+			size: "small",
+			component: __fluentui_react_icons.CaretUpSolid8Icon,
+			style: {
+				color: (0, __material_ui_core.lighten)(theme.palette.primary.main, .5),
+				width: theme.spacing(1.5),
+				height: theme.spacing(1.5)
+			}
+		}),
+		expanded: expanded || [],
+		onNodeToggle: handleNodeExpansion,
+		defaultExpandIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EnvironmentRibbon.FluentIcon, {
+			size: "small",
+			component: __fluentui_react_icons.CaretDownSolid8Icon,
+			style: {
+				color: (0, __material_ui_core.lighten)(theme.palette.primary.main, .5),
+				width: theme.spacing(1.5),
+				height: theme.spacing(1.5)
+			}
+		}),
+		selected: selectedNodeId,
+		children: tree && renderTree(tree)
+	}, tree);
+};
+
+//#endregion
+//#region src/menuPage/MenuPage.jsx
+const useStyles = (0, __material_ui_core.makeStyles)((theme) => ({
+	root: {
+		flex: 1,
+		minHeight: ({ appRibbonSpace }) => `calc(100vh - ${appRibbonSpace + 56}px)`,
+		display: "grid",
+		gridTemplateAreas: ["sidebar content"].map((line) => `"${line}"`).join(" "),
+		gridTemplateColumns: "auto 1fr",
+		gridTemplateRows: "auto 1fr"
+	},
+	sidebar: {
+		gridArea: "sidebar",
+		marginRight: theme.spacing(1)
+	},
+	content: {
+		gridArea: "content",
+		display: "flex",
+		flexDirection: "column",
+		position: "relative",
+		zIndex: 1,
+		height: ({ appRibbonSpace }) => `calc(100vh - ${appRibbonSpace + 56}px)`,
+		overflowY: "auto"
+	},
+	menuContent: {
+		marginTop: theme.spacing(1),
+		height: ({ appRibbonSpace }) => `calc(100vh - ${appRibbonSpace + 116}px)`,
+		overflowX: "hidden"
+	},
+	loader: {
+		marginRight: theme.spacing(1),
+		marginLeft: theme.spacing(1)
+	},
+	loadingContent: {
+		flex: 1,
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center"
+	}
+}));
+const MenuPage = (props) => {
+	var _selectedNode$propert, _selectedNode$propert2, _selectedNode$propert3, _selectedNode$propert4, _selectedNode$propert5, _selectedNode$propert6, _selectedNode$propert7, _selectedNode$propert8, _selectedNode$propert9;
+	const buildEnv = require_EnvironmentRibbon.useBuildEnvironment();
+	const classes = useStyles({
+		...props,
+		appRibbonSpace: buildEnv ? require_EnvironmentRibbon.APP_RIBBON_SPACE : 0
+	});
+	const location = (0, react_router_dom.useLocation)();
+	const user = require_EnvironmentRibbon.useUser();
+	const { t } = (0, react_i18next.useTranslation)();
+	const setLocationState = require_PageContainer.useSetLocationState();
+	const [menuItemsList, setMenuItemsList] = (0, react.useState)([]);
+	const [selectedNode, setSelectedNode] = (0, react.useState)(null);
+	const [sidebarExpanded, setSidebarExpanded] = (0, react.useState)(true);
+	const innerMenuId = location.pathname.replace("/menupage/", "");
+	const [{ data: innerMenu, loading: menuLoading }] = require_EnvironmentRibbon.useAxiosGet(udp_react_stencil_component_library.ConfigService.tenantV1ApiUrl, `menus/${innerMenuId}`, {}, !!!innerMenuId, false);
+	const { setSubHeaderActionHasChildren, setNavigationExpanded } = require_EnvironmentRibbon.useShellStore();
+	const [{ data: pageData, loading: pageLoading, error: pageError }] = require_EnvironmentRibbon.useAxiosGet(udp_react_stencil_component_library.ConfigService.tenantV1ApiUrl, `page/${selectedNode === null || selectedNode === void 0 || (_selectedNode$propert = selectedNode.properties) === null || _selectedNode$propert === void 0 || (_selectedNode$propert = _selectedNode$propert.page) === null || _selectedNode$propert === void 0 ? void 0 : _selectedNode$propert.id}`, {}, !!!(selectedNode === null || selectedNode === void 0 || (_selectedNode$propert2 = selectedNode.properties) === null || _selectedNode$propert2 === void 0 || (_selectedNode$propert2 = _selectedNode$propert2.page) === null || _selectedNode$propert2 === void 0 ? void 0 : _selectedNode$propert2.id), false);
+	const handleSelectedNode = (0, react.useCallback)((node, menuIndex) => {
+		setSelectedNode(node);
+	}, []);
+	const handleDropNode = (0, react.useCallback)((sourceNode, targetNode, sourceNodeMenuIndex, targetNodeMenuIndex) => {}, []);
+	const handleSidebarExpandClick = (0, react.useCallback)(() => {
+		setSidebarExpanded((expanded) => !expanded);
+	}, []);
+	(0, react.useEffect)(() => {
+		if (innerMenu) {
+			const list = [];
+			let nodeSelected = false;
+			innerMenu.menuItemInstanceStructureViews.forEach((menuInstance) => {
+				const updatedMenu = require_UtilitySideBar.transformMenuPageTree(menuInstance);
+				if (updatedMenu) {
+					list.push(updatedMenu);
+					if (!nodeSelected) {
+						setSelectedNode(updatedMenu);
+						nodeSelected = true;
+						setNavigationExpanded(false);
+					}
+				}
+			});
+			setMenuItemsList(list);
+		}
+	}, [innerMenu, setNavigationExpanded]);
+	(0, react.useEffect)(() => {
+		setSubHeaderActionHasChildren(false);
+	}, [setSubHeaderActionHasChildren]);
+	(0, react.useEffect)(() => {
+		if (innerMenu) setLocationState({ label: t(innerMenu === null || innerMenu === void 0 ? void 0 : innerMenu.name) });
+	}, [
+		setLocationState,
+		t,
+		innerMenu
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_dnd.DndProvider, {
+		backend: react_dnd_html5_backend.HTML5Backend,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: classes.root,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: classes.sidebar,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_UtilitySideBar.UtilitySideBar, {
+					title: innerMenu === null || innerMenu === void 0 ? void 0 : innerMenu.name,
+					isUsingChildren: true,
+					resizable: true,
+					removePadding: true,
+					removeTopLayoutUnit: true,
+					onUtilitySidebarToggleExpandClick: handleSidebarExpandClick,
+					collapsedWidth: 64,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: classes.menuContent,
+						children: [(menuItemsList === null || menuItemsList === void 0 ? void 0 : menuItemsList.length) > 0 && !menuLoading && menuItemsList.map((menuItems, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: classes.nodeContainer,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BaseTreeMenu, {
+								menuItems,
+								onSelectNode: handleSelectedNode,
+								onDropNode: handleDropNode,
+								menuIndex: index,
+								selectedNodeId: selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.id,
+								selectedNodeParentId: selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.parentId,
+								sidebarExpanded,
+								treeViewMode: require_EnvironmentRibbon.TreeViewModeEnums.Classic
+							})
+						}, menuItems.id)), menuLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: classes.loader,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_UtilitySideBar.NodeLoader, { loading: menuLoading })
+						})]
+					}, innerMenuId)
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: classes.content,
+				children: (selectedNode === null || selectedNode === void 0 || (_selectedNode$propert3 = selectedNode.properties) === null || _selectedNode$propert3 === void 0 || (_selectedNode$propert3 = _selectedNode$propert3.page) === null || _selectedNode$propert3 === void 0 ? void 0 : _selectedNode$propert3.id) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageContainer.PageContainer, {
+					user,
+					pageData,
+					pageLoading,
+					widgetParams: {
+						pageId: pageData === null || pageData === void 0 ? void 0 : pageData.pageId,
+						entityName: selectedNode === null || selectedNode === void 0 || (_selectedNode$propert4 = selectedNode.properties) === null || _selectedNode$propert4 === void 0 || (_selectedNode$propert4 = _selectedNode$propert4.page) === null || _selectedNode$propert4 === void 0 || (_selectedNode$propert4 = _selectedNode$propert4.entity) === null || _selectedNode$propert4 === void 0 ? void 0 : _selectedNode$propert4.entityName,
+						pbiReportCode: selectedNode === null || selectedNode === void 0 || (_selectedNode$propert5 = selectedNode.properties) === null || _selectedNode$propert5 === void 0 || (_selectedNode$propert5 = _selectedNode$propert5.page) === null || _selectedNode$propert5 === void 0 ? void 0 : _selectedNode$propert5.pbiReportCode,
+						requiredFieldsMap: selectedNode === null || selectedNode === void 0 || (_selectedNode$propert6 = selectedNode.properties) === null || _selectedNode$propert6 === void 0 || (_selectedNode$propert6 = _selectedNode$propert6.page) === null || _selectedNode$propert6 === void 0 ? void 0 : _selectedNode$propert6.requiredFieldMapping,
+						udpTagId: selectedNode === null || selectedNode === void 0 || (_selectedNode$propert7 = selectedNode.properties) === null || _selectedNode$propert7 === void 0 || (_selectedNode$propert7 = _selectedNode$propert7.page) === null || _selectedNode$propert7 === void 0 ? void 0 : _selectedNode$propert7.udpTagId,
+						queryId: selectedNode === null || selectedNode === void 0 || (_selectedNode$propert8 = selectedNode.properties) === null || _selectedNode$propert8 === void 0 || (_selectedNode$propert8 = _selectedNode$propert8.page) === null || _selectedNode$propert8 === void 0 ? void 0 : _selectedNode$propert8.queryId,
+						inquiryTreeId: selectedNode === null || selectedNode === void 0 || (_selectedNode$propert9 = selectedNode.properties) === null || _selectedNode$propert9 === void 0 || (_selectedNode$propert9 = _selectedNode$propert9.page) === null || _selectedNode$propert9 === void 0 ? void 0 : _selectedNode$propert9.inquiryTreeId
+					},
+					disableMargins: true,
+					fromMenu: true
+				}, selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.id)
+			})]
+		})
+	});
+};
+
+//#endregion
+exports.MenuPage = MenuPage;
+//# sourceMappingURL=MenuPage-DNywMmn2.cjs.map