udp-react-enterprise-component-library 25.18.1-beta.3 → 25.18.1-beta.30

package/dist/WorkflowTreeMenu-CLMTRLUg.js

@@ -0,0 +1,346 @@
+import { t as FluentIcon } from "./FluentIcon-DQ6nSDJg.js";
+import { P as TreeViewModeEnums, _ as NodeActionTriggerEnums } from "./unitySystemEnums-DtVX3A-I.js";
+import { t as UnityFluentIcon } from "./UnityFluentIcon-DrASIcTF.js";
+import { S as getIconFromName, V as searchTree, d as findAllParentIds, w as getNodeIdForRightBorder } from "./TreeUtilities-CDlHioSI.js";
+import { t as getUnityIconFromName } from "./UnityIconLibrary-CjIwzfjv.js";
+import { t as AggregateChip } from "./AggregateChip-CyVLcLQh.js";
+import React, { useCallback, useEffect, useState } from "react";
+import { CircularProgress, Tooltip, Typography, darken, lighten, makeStyles, useTheme } from "@material-ui/core";
+import clsx from "clsx";
+import { CaretDownSolid8Icon, CaretUpSolid8Icon } from "@fluentui/react-icons";
+import { cloneDeep } from "lodash";
+import { useDrag, useDrop } from "react-dnd";
+import TreeView from "@material-ui/lab/TreeView";
+import TreeItem from "@material-ui/lab/TreeItem";
+
+//#region src/workflow/menus/WorkflowTreeMenuItem.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	root: {
+		"&.Mui-selected > .MuiTreeItem-content": {
+			backgroundColor: 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?.getThemeData()?.mode !== "dark" && theme.palette.grey[50] },
+		"& .MuiTreeItem-content .MuiTreeItem-iconContainer": { display: (props) => props.sidebarExpanded ? "flex" : "none" }
+	},
+	content: { backgroundColor: (props) => theme?.getThemeData()?.mode !== "dark" && !props.sidebarExpanded && props.conditionalIconName && props.conditionalIconColor ? 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 === 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 === TreeViewModeEnums.Compact ? theme.spacing(1) : "",
+		fontSize: "0.65rem",
+		fontWeight: 400,
+		lineHeight: 1,
+		letterSpacing: .4
+	},
+	labelOverflow: {
+		whiteSpace: "nowrap",
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		marginTop: `-${theme.spacing(.25)}px`
+	},
+	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 === 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) => theme?.getThemeData()?.mode !== "dark" && props.isSelectedNode ? theme.palette.grey[50] : "" }
+	},
+	iconContainer: {
+		display: "flex",
+		justifyContent: "center",
+		marginTop: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? theme.spacing(.25) : theme.spacing(.5),
+		marginBottom: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? theme.spacing(.25) : theme.spacing(.5),
+		marginRight: theme.spacing(1),
+		width: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? theme.spacing(3) : theme.spacing(4),
+		height: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? theme.spacing(3) : theme.spacing(4)
+	}
+}));
+const WorkflowTreeMenuItem = (props) => {
+	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$1(props);
+	const theme = useTheme();
+	const [{ isDragging }, dragRef] = useDrag({
+		type: "BaseTreeMenuItem",
+		item: {
+			...node,
+			sourceNodeMenuIndex: menuIndex
+		},
+		collect: (monitor) => ({ isDragging: monitor.isDragging() })
+	});
+	const handleOnDrop = 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] = useDrop(() => ({
+		accept: ["BaseTreeMenuItem"],
+		drop: (sourceNode, monitor) => {
+			handleOnDrop(sourceNode, monitor);
+		},
+		canDrop: (sourceNode) => checkCanDrop(sourceNode),
+		collect: (monitor) => ({
+			isOver: monitor.isOver(),
+			canDrop: !!monitor.canDrop()
+		})
+	}), [handleOnDrop]);
+	const checkCanDrop = useCallback((sourceNode) => {
+		if (sourceNode) {
+			const onDropActions = node?.properties?.nodeActions?.filter((na) => na?.triggerType === NodeActionTriggerEnums.On_Node_Drop);
+			if (!onDropActions) return false;
+			return (onDropActions?.map((action) => action?.dragEntityName)).includes(sourceNode?.properties?.catalogReturnObject);
+		}
+	}, [node]);
+	const handleOnLabelClick = useCallback((e) => {
+		e.preventDefault();
+		onNodeSelect(e, nodeId);
+	}, [onNodeSelect, nodeId]);
+	return /* @__PURE__ */ React.createElement(TreeItem, {
+		className: classes.group,
+		key: nodeId,
+		nodeId,
+		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
+	});
+};
+
+//#endregion
+//#region src/workflow/menus/WorkflowTreeMenu.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {
+		marginBottom: theme.spacing(1.75),
+		borderTop: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? `1px solid ${theme.palette.grey[200]}` : ""
+	},
+	noChildrenContainer: { borderBottom: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? `1px solid ${theme.palette.grey[200]}` : "" }
+}));
+const WorkflowTreeMenu = (props) => {
+	const { menuItems, onSelectNode, onDropNode, menuIndex, selectedNodeId, selectedNodeParentId, sidebarExpanded, treeViewMode, childrenKey = "children" } = props;
+	const [expanded, setExpanded] = useState(null);
+	const [isCurrentActiveTree, setIsCurrentActiveTree] = useState(false);
+	const [selectedNodeIsHidden, setSelectedNodeIsHidden] = useState(false);
+	const [tree, setTree] = useState(menuItems);
+	const theme = useTheme();
+	const classes = useStyles(props);
+	const handleSelectedNode = useCallback((e, value) => {
+		const selectedNode = searchTree(tree, value);
+		if (onSelectNode) {
+			onSelectNode(selectedNode, menuIndex);
+			setSelectedNodeIsHidden(false);
+		}
+	}, [
+		tree,
+		menuIndex,
+		onSelectNode
+	]);
+	const renderTree = useCallback((node, depth = 1) => {
+		let label = node.properties?.nodeLabel || node.properties?.name;
+		let subLabel = node.properties?.nodeSubLabel;
+		let iconName = node.properties?.defaultIcon?.name;
+		let iconType = node.properties?.defaultIcon?.type;
+		let conditionalIconName = node.properties?.conditionalIcon?.name || "";
+		let conditionalIconType = node.properties?.conditionalIcon?.name ? node.properties.conditionalIcon?.type : "";
+		let conditionalIconColor = node.properties?.conditionalIcon?.name ? node.properties?.conditionalIcon?.color : "";
+		let nodeId = node.id;
+		let iconColor = node.properties?.conditionalIconName ? node.properties?.conditionalIconColor : node.properties?.defaultIcon?.color?.hex;
+		let aggregateThresholdId = node.properties?.aggregateThresholdId || "";
+		if (node.isGroupNode) {
+			label = node.properties?.label;
+			subLabel = node.properties?.subLabel;
+			iconName = node.properties?.icon?.name;
+			iconType = node.properties?.icon?.type;
+			iconColor = node.properties?.icon?.color?.hex;
+		}
+		return /* @__PURE__ */ React.createElement(WorkflowTreeMenuItem, {
+			key: nodeId,
+			nodeId,
+			label,
+			subLabel,
+			iconName,
+			iconType,
+			conditionalIconName,
+			conditionalIconType,
+			conditionalIconColor,
+			parentId: node.parentId,
+			iconColor,
+			onNodeSelect: handleSelectedNode,
+			selectedNodeId,
+			isSelectedNode: selectedNodeId === node.id,
+			showRightBorderColor: selectedNodeIsHidden && isCurrentActiveTree && getNodeIdForRightBorder(expanded, tree, selectedNodeParentId) === node.id,
+			isCurrentActiveTree,
+			sidebarExpanded,
+			depth,
+			hideExpansion: !!!node[childrenKey]?.length,
+			node,
+			onDropNode,
+			treeViewMode,
+			menuIndex,
+			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,
+		selectedNodeIsHidden,
+		isCurrentActiveTree,
+		sidebarExpanded,
+		expanded,
+		tree,
+		selectedNodeParentId,
+		theme,
+		classes,
+		onDropNode,
+		treeViewMode,
+		menuIndex,
+		childrenKey
+	]);
+	const handleNodeExpansion = useCallback(async (evt, nodeIds) => {
+		const treeCopy = cloneDeep(tree);
+		setExpanded(nodeIds);
+		const allParentNodeIds = findAllParentIds(treeCopy, searchTree(treeCopy, selectedNodeParentId), selectedNodeParentId ? [selectedNodeParentId] : []);
+		const selectedNodeShown = allParentNodeIds.every((id) => nodeIds.includes(id));
+		if (isCurrentActiveTree && allParentNodeIds.length && !selectedNodeShown) setSelectedNodeIsHidden(true);
+		else setSelectedNodeIsHidden(false);
+	}, [
+		isCurrentActiveTree,
+		tree,
+		selectedNodeParentId
+	]);
+	const getExpandedRecursively = useCallback((tree$1) => {
+		if (!tree$1) return [];
+		return tree$1.reduce((expandedIds, item) => {
+			if (item?.isExpanded) expandedIds.push(item.id);
+			if (item && item[childrenKey]?.length) expandedIds = expandedIds.concat(getExpandedRecursively(item[childrenKey]));
+			return expandedIds;
+		}, []);
+	}, [childrenKey]);
+	useEffect(() => {
+		setTree(menuItems);
+	}, [menuItems]);
+	useEffect(() => {
+		if (!tree) return;
+		let expanded$1 = [];
+		if (tree?.isExpanded) expanded$1.push(tree.id);
+		expanded$1 = expanded$1.concat(getExpandedRecursively(tree[childrenKey]));
+		setExpanded(expanded$1);
+	}, [
+		getExpandedRecursively,
+		tree,
+		childrenKey
+	]);
+	useEffect(() => {
+		if (!!searchTree(tree, selectedNodeId)) setIsCurrentActiveTree(true);
+		else setIsCurrentActiveTree(false);
+	}, [tree, selectedNodeId]);
+	if (!expanded) return null;
+	return /* @__PURE__ */ React.createElement(TreeView, {
+		key: tree,
+		className: classes.root,
+		defaultCollapseIcon: /* @__PURE__ */ React.createElement(FluentIcon, {
+			size: "small",
+			component: CaretUpSolid8Icon,
+			style: {
+				color: lighten(theme.palette.primary.main, .5),
+				width: theme.spacing(1.5),
+				height: theme.spacing(1.5)
+			}
+		}),
+		expanded: expanded || [],
+		onNodeToggle: handleNodeExpansion,
+		defaultExpandIcon: /* @__PURE__ */ React.createElement(FluentIcon, {
+			size: "small",
+			component: CaretDownSolid8Icon,
+			style: {
+				color: lighten(theme.palette.primary.main, .5),
+				width: theme.spacing(1.5),
+				height: theme.spacing(1.5)
+			}
+		}),
+		selected: selectedNodeId
+	}, tree && renderTree(tree));
+};
+
+//#endregion
+export { WorkflowTreeMenuItem as n, WorkflowTreeMenu as t };
+//# sourceMappingURL=WorkflowTreeMenu-CLMTRLUg.js.map

package/dist/WorkflowTreeMenu-CLMTRLUg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkflowTreeMenu-CLMTRLUg.js","names":["useStyles","other","tree","expanded"],"sources":["../src/workflow/menus/WorkflowTreeMenuItem.jsx","../src/workflow/menus/WorkflowTreeMenu.jsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport {\n  makeStyles,\n  lighten,\n  Typography,\n  CircularProgress,\n  darken,\n  useTheme,\n  Tooltip\n} from '@material-ui/core';\nimport TreeItem from '@material-ui/lab/TreeItem';\nimport { getIconFromName } from '../../utilities/tree/TreeUtilities';\nimport clsx from 'clsx';\nimport { UnityFluentIcon } from '../../utilities/iconLibrary/UnityFluentIcon';\nimport { getUnityIconFromName } from '../../utilities/iconLibrary/UnityIconLibrary';\nimport { useDrag, useDrop } from 'react-dnd';\nimport {\n  NodeActionTriggerEnums,\n  TreeViewModeEnums\n} from '../../enums/unitySystemEnums.ts';\nimport { AggregateChip } from '../../UI/utilityDisplay/AggregateChip';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    '&.Mui-selected > .MuiTreeItem-content': {\n      backgroundColor:\n        theme?.getThemeData()?.mode === 'dark'\n          ? theme.palette.grey[700]\n          : theme.palette.grey[300],\n      borderRight: `4px solid ${theme.palette.primary.main}`\n    },\n    '&.Mui-selected > .MuiTreeItem-content .MuiTreeItem-label': {\n      backgroundColor: 'transparent',\n      paddingLeft: 0\n    },\n    '&.Mui-selected > .MuiTreeItem-content > .MuiCollapse-wrapperInner': {\n      backgroundColor:\n        theme?.getThemeData()?.mode !== 'dark' && theme.palette.grey[50]\n    },\n    '& .MuiTreeItem-content .MuiTreeItem-iconContainer': {\n      display: (props) => (props.sidebarExpanded ? 'flex' : 'none')\n    }\n  },\n  content: {\n    backgroundColor: (props) =>\n      theme?.getThemeData()?.mode !== 'dark' &&\n      !props.sidebarExpanded &&\n      props.conditionalIconName &&\n      props.conditionalIconColor\n        ? lighten(props.conditionalIconColor, 0.92)\n        : ''\n  },\n  labelRoot: {\n    display: 'flex',\n    alignItems: 'center',\n    marginLeft: (props) => (props.sidebarExpanded ? 0 : theme.spacing(1.5)),\n    width: '100%'\n  },\n  labelContainer: {\n    display: (props) => (!props.sidebarExpanded ? 'none' : ''),\n    width: (props) =>\n      props.treeViewMode === TreeViewModeEnums.Compact\n        ? `calc(100% - ${theme.spacing(6.25)}px)`\n        : `calc(100% - ${theme.spacing(7.75)}px)`\n  },\n  conditionalIconContainer: {\n    display: 'inline-flex'\n  },\n  labelText: {\n    fontSize: '0.75rem',\n    fontWeight: 600,\n    lineHeight: '1rem',\n    letterSpacing: 0.1\n  },\n  captionText: {\n    marginLeft: (props) =>\n      props.treeViewMode === TreeViewModeEnums.Compact ? theme.spacing(1) : '',\n    fontSize: '0.65rem',\n    fontWeight: 400,\n    lineHeight: 1,\n    letterSpacing: 0.4\n  },\n  labelOverflow: {\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    marginTop: `-${theme.spacing(0.25)}px`\n  },\n  group: {\n    width: '100%',\n    '& .MuiTreeItem-group': {\n      marginLeft: 0\n    },\n    '& .MuiTreeItem-content': {\n      paddingLeft: (props) =>\n        props.sidebarExpanded ? (props.depth || 1) * theme.spacing(1) : 0,\n      borderRight: (props) =>\n        props.showRightBorderColor\n          ? `4px solid ${theme.palette.primary.main}`\n          : '',\n      borderBottom: (props) =>\n        props.treeViewMode === TreeViewModeEnums.Compact\n          ? `1px solid ${theme.palette.grey[200]}`\n          : ''\n    },\n    '& .MuiTreeItem-content .MuiTreeItem-label': {\n      paddingLeft: 0,\n      width: (props) =>\n        props.sidebarExpanded && `calc(100% - ${theme.spacing(2.5)}px)`\n    },\n    '& .MuiTreeItem-content .MuiTreeItem-iconContainer span': {\n      display: (props) => (props.hideExpansion ? 'none' : '')\n    },\n    '& .MuiCollapse-wrapperInner': {\n      backgroundColor: (props) =>\n        theme?.getThemeData()?.mode !== 'dark' && props.isSelectedNode\n          ? theme.palette.grey[50]\n          : ''\n    }\n  },\n  iconContainer: {\n    display: 'flex',\n    // alignItems: 'center',\n    justifyContent: 'center',\n    // borderRadius: 50,\n    marginTop: (props) =>\n      props.treeViewMode === TreeViewModeEnums.Compact\n        ? theme.spacing(0.25)\n        : theme.spacing(0.5),\n    marginBottom: (props) =>\n      props.treeViewMode === TreeViewModeEnums.Compact\n        ? theme.spacing(0.25)\n        : theme.spacing(0.5),\n    marginRight: theme.spacing(1),\n    width: (props) =>\n      props.treeViewMode === TreeViewModeEnums.Compact\n        ? theme.spacing(3)\n        : theme.spacing(4),\n    height: (props) =>\n      props.treeViewMode === TreeViewModeEnums.Compact\n        ? theme.spacing(3)\n        : theme.spacing(4)\n    // border: (props) =>\n    //   props.iconColor\n    //     ? `1px solid ${darken(props.iconColor, 0.1)}`\n    //     : `1px solid ${theme.palette.secondary.main}`,\n    // backgroundColor: '#ffffff'\n  }\n}));\n\nexport const WorkflowTreeMenuItem = (props) => {\n  const {\n    parentId,\n    nodeId,\n    iconName,\n    iconType,\n    conditionalIconName,\n    conditionalIconType,\n    conditionalIconColor,\n    label,\n    iconColor,\n    onNodeSelect,\n    isSelectedNode,\n    subLabel,\n    sidebarExpanded,\n    isLastNode,\n    loading,\n    node,\n    onDropNode,\n    treeViewMode,\n    menuIndex,\n    aggregateThresholdId,\n    ...other\n  } = props;\n  const classes = useStyles(props);\n  const theme = useTheme();\n\n  const [{ isDragging }, dragRef] = useDrag({\n    type: 'BaseTreeMenuItem',\n    item: { ...node, sourceNodeMenuIndex: menuIndex },\n    collect: (monitor) => ({\n      isDragging: monitor.isDragging()\n    })\n  });\n\n  const handleOnDrop = useCallback(\n    (sourceNode, monitor) => {\n      if (!monitor.didDrop()) {\n        if (onDropNode) {\n          const { sourceNodeMenuIndex, ...other } = sourceNode;\n          onDropNode({ ...other }, node, sourceNodeMenuIndex, menuIndex);\n        }\n      }\n    },\n    [onDropNode, node, menuIndex]\n  );\n\n  const [{ canDrop, isOver }, dropRef] = useDrop(\n    () => ({\n      accept: ['BaseTreeMenuItem'],\n      drop: (sourceNode, monitor) => {\n        // condition to only handle first drop\n        handleOnDrop(sourceNode, monitor);\n      },\n      canDrop: (sourceNode) => checkCanDrop(sourceNode),\n      collect: (monitor) => ({\n        isOver: monitor.isOver(),\n        canDrop: !!monitor.canDrop()\n      })\n    }),\n    [handleOnDrop]\n  );\n\n  const checkCanDrop = useCallback(\n    (sourceNode) => {\n      if (sourceNode) {\n        const onDropActions = node?.properties?.nodeActions?.filter(\n          (na) => na?.triggerType === NodeActionTriggerEnums.On_Node_Drop\n        );\n        if (!onDropActions) {\n          return false;\n        }\n        const nodeDragEntities = onDropActions?.map(\n          (action) => action?.dragEntityName\n        );\n        return nodeDragEntities.includes(\n          sourceNode?.properties?.catalogReturnObject\n        );\n      }\n    },\n    [node]\n  );\n\n  const handleOnLabelClick = useCallback(\n    (e) => {\n      e.preventDefault();\n      onNodeSelect(e, nodeId);\n    },\n    [onNodeSelect, nodeId]\n  );\n\n  return (\n    <TreeItem\n      className={classes.group}\n      key={nodeId}\n      nodeId={nodeId}\n      label={\n        <div ref={dropRef}>\n          <Tooltip title={sidebarExpanded ? '' : label}>\n            <div\n              ref={(node?.properties?.isDraggable && dragRef) || null}\n              style={{ opacity: isDragging ? 0.5 : 1 }}\n            >\n              {loading ? (\n                <CircularProgress size={12} />\n              ) : (\n                <div\n                  id={\n                    'udpRecord-BaseTreeMenuItem-' + label?.replace(/\\s+/g, '')\n                  }\n                  udprecordid={\n                    'udpRecord-BaseTreeMenuItem-' + label?.replace(/\\s+/g, '')\n                  }\n                  className={classes.labelRoot}\n                  style={{\n                    fontWeight: isSelectedNode ? 'bold' : ''\n                  }}\n                >\n                  {iconName && (\n                    <div className={classes.iconContainer}>\n                      <UnityFluentIcon\n                        size={\n                          treeViewMode === TreeViewModeEnums.Compact\n                            ? 'small'\n                            : 'large'\n                        }\n                        color={iconColor}\n                        type={iconType}\n                        icon={\n                          iconType === 'unity'\n                            ? getUnityIconFromName(iconName)\n                            : getIconFromName(iconName)\n                        }\n                        style={{\n                          color: iconColor\n                            ? darken(iconColor, 0.1)\n                            : theme.palette.secondary.main\n                        }}\n                      />\n                    </div>\n                  )}\n                  <div className={classes.labelContainer}>\n                    <Typography\n                      variant='subtitle2'\n                      className={clsx(classes.labelText, classes.labelOverflow)}\n                    >\n                      {label}\n                      {subLabel &&\n                        treeViewMode === TreeViewModeEnums.Compact && (\n                          <Typography\n                            variant='caption'\n                            className={clsx(\n                              classes.captionText,\n                              classes.labelOverflow\n                            )}\n                          >\n                            {subLabel}\n                          </Typography>\n                        )}\n                    </Typography>\n                    {subLabel && treeViewMode === TreeViewModeEnums.Classic && (\n                      <div className={classes.labelOverflow}>\n                        <Typography\n                          variant='caption'\n                          className={clsx(classes.captionText)}\n                        >\n                          {subLabel}\n                        </Typography>\n                      </div>\n                    )}\n                  </div>\n                  <AggregateChip aggregateThresholdId={aggregateThresholdId} />\n                  {conditionalIconName && sidebarExpanded && (\n                    <div className={classes.conditionalIconContainer}>\n                      <UnityFluentIcon\n                        size={\n                          treeViewMode === TreeViewModeEnums.Compact\n                            ? 'small'\n                            : 'default'\n                        }\n                        color={conditionalIconColor}\n                        type={conditionalIconType}\n                        icon={\n                          conditionalIconType === 'unity'\n                            ? getUnityIconFromName(conditionalIconName)\n                            : getIconFromName(conditionalIconName)\n                        }\n                        style={{\n                          color: conditionalIconColor\n                        }}\n                      />\n                    </div>\n                  )}\n                </div>\n              )}\n            </div>\n          </Tooltip>\n        </div>\n      }\n      onLabelClick={handleOnLabelClick}\n      classes={{ root: classes.root, content: classes.content }}\n      {...other}\n    />\n  );\n};\n","import React, { useCallback, useState, useEffect } from 'react';\nimport {\n  makeStyles,\n  useTheme,\n  lighten,\n  CircularProgress,\n  Typography\n} from '@material-ui/core';\nimport TreeView from '@material-ui/lab/TreeView';\nimport { WorkflowTreeMenuItem } from './WorkflowTreeMenuItem';\nimport {\n  searchTree,\n  findAllParentIds,\n  getNodeIdForRightBorder\n} from '../../utilities/tree/TreeUtilities';\nimport { FluentIcon } from '../../utilities/iconLibrary/FluentIcon';\nimport { CaretUpSolid8Icon, CaretDownSolid8Icon } from '@fluentui/react-icons';\nimport { cloneDeep } from 'lodash';\nimport { TreeViewModeEnums } from '../../enums/unitySystemEnums.ts';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    marginBottom: theme.spacing(1.75),\n    borderTop: (props) =>\n      props.treeViewMode === TreeViewModeEnums.Compact\n        ? `1px solid ${theme.palette.grey[200]}`\n        : ''\n  },\n  noChildrenContainer: {\n    borderBottom: (props) =>\n      props.treeViewMode === TreeViewModeEnums.Compact\n        ? `1px solid ${theme.palette.grey[200]}`\n        : ''\n  }\n}));\n\nexport const WorkflowTreeMenu = (props) => {\n  const {\n    menuItems,\n    onSelectNode,\n    onDropNode,\n    menuIndex,\n    selectedNodeId,\n    selectedNodeParentId,\n    sidebarExpanded,\n    treeViewMode,\n    childrenKey = 'children'\n  } = props;\n  const [expanded, setExpanded] = useState(null);\n  const [isCurrentActiveTree, setIsCurrentActiveTree] = useState(false);\n  const [selectedNodeIsHidden, setSelectedNodeIsHidden] = useState(false);\n  const [tree, setTree] = useState(menuItems);\n  const theme = useTheme();\n  const classes = useStyles(props);\n\n  const handleSelectedNode = useCallback(\n    (e, value) => {\n      const selectedNode = searchTree(tree, value);\n      if (onSelectNode) {\n        onSelectNode(selectedNode, menuIndex);\n        setSelectedNodeIsHidden(false);\n      }\n    },\n    [tree, menuIndex, onSelectNode]\n  );\n\n  const renderTree = useCallback(\n    (node, depth = 1) => {\n      let label = node.properties?.nodeLabel || node.properties?.name;\n      let subLabel = node.properties?.nodeSubLabel;\n      let iconName = node.properties?.defaultIcon?.name;\n      let iconType = node.properties?.defaultIcon?.type;\n      let conditionalIconName = node.properties?.conditionalIcon?.name || '';\n      let conditionalIconType = node.properties?.conditionalIcon?.name\n        ? node.properties.conditionalIcon?.type\n        : '';\n      let conditionalIconColor = node.properties?.conditionalIcon?.name\n        ? node.properties?.conditionalIcon?.color\n        : '';\n      let nodeId = node.id;\n      let iconColor = node.properties?.conditionalIconName\n        ? node.properties?.conditionalIconColor\n        : node.properties?.defaultIcon?.color?.hex;\n      let aggregateThresholdId = node.properties?.aggregateThresholdId || '';\n\n      if (node.isGroupNode) {\n        label = node.properties?.label;\n        subLabel = node.properties?.subLabel;\n        iconName = node.properties?.icon?.name;\n        iconType = node.properties?.icon?.type;\n        iconColor = node.properties?.icon?.color?.hex;\n      }\n\n      return (\n        <WorkflowTreeMenuItem\n          key={nodeId}\n          nodeId={nodeId}\n          label={label}\n          subLabel={subLabel}\n          iconName={iconName}\n          iconType={iconType}\n          conditionalIconName={conditionalIconName}\n          conditionalIconType={conditionalIconType}\n          conditionalIconColor={conditionalIconColor}\n          parentId={node.parentId}\n          iconColor={iconColor}\n          onNodeSelect={handleSelectedNode}\n          selectedNodeId={selectedNodeId}\n          isSelectedNode={selectedNodeId === node.id}\n          showRightBorderColor={\n            selectedNodeIsHidden &&\n            isCurrentActiveTree &&\n            getNodeIdForRightBorder(expanded, tree, selectedNodeParentId) ===\n              node.id\n          }\n          isCurrentActiveTree={isCurrentActiveTree}\n          sidebarExpanded={sidebarExpanded}\n          depth={depth}\n          hideExpansion={!!!node[childrenKey]?.length}\n          node={node}\n          onDropNode={onDropNode}\n          treeViewMode={treeViewMode}\n          menuIndex={menuIndex}\n          aggregateThresholdId={aggregateThresholdId}\n        >\n          {node.properties?.lazyLoad &&\n            !!!node[childrenKey]?.length &&\n            !node.completedLoadingChildren && (\n              <CircularProgress\n                size={12}\n                style={{ marginLeft: (depth || 1) * theme.spacing(1) }}\n              />\n            )}\n          {node.properties?.lazyLoad &&\n            !!!node[childrenKey]?.length &&\n            node.completedLoadingChildren &&\n            sidebarExpanded &&\n            !node.errorRetrievingChildren && (\n              <div className={classes.noChildrenContainer}>\n                <Typography\n                  variant='caption'\n                  style={{\n                    marginLeft: (depth || 1) * theme.spacing(3),\n                    fontWeight: 400\n                  }}\n                >\n                  No Children\n                </Typography>\n              </div>\n            )}\n          {node.properties?.lazyLoad &&\n            node.completedLoadingChildren &&\n            sidebarExpanded &&\n            node.errorRetrievingChildren && (\n              <div className={classes.noChildrenContainer}>\n                <Typography\n                  variant='caption'\n                  style={{\n                    marginLeft: (depth || 1) * theme.spacing(3),\n                    fontWeight: 400\n                  }}\n                >\n                  {`Error Retrieving ${\n                    !!node[childrenKey]?.length ? `Additional ` : ''\n                  }Children`}\n                </Typography>\n              </div>\n            )}\n          {Array.isArray(node[childrenKey])\n            ? node[childrenKey].map((n, i) => renderTree(n, depth + 1))\n            : null}\n        </WorkflowTreeMenuItem>\n      );\n    },\n    [\n      handleSelectedNode,\n      selectedNodeId,\n      selectedNodeIsHidden,\n      isCurrentActiveTree,\n      sidebarExpanded,\n      expanded,\n      tree,\n      selectedNodeParentId,\n      theme,\n      classes,\n      onDropNode,\n      treeViewMode,\n      menuIndex,\n      childrenKey\n    ]\n  );\n\n  const handleNodeExpansion = useCallback(\n    async (evt, nodeIds) => {\n      const treeCopy = cloneDeep(tree);\n      setExpanded(nodeIds);\n\n      const parentNode = searchTree(treeCopy, selectedNodeParentId);\n      const initialAllParentNodeIds = selectedNodeParentId\n        ? [selectedNodeParentId]\n        : [];\n      const allParentNodeIds = findAllParentIds(\n        treeCopy,\n        parentNode,\n        initialAllParentNodeIds\n      );\n      const selectedNodeShown = allParentNodeIds.every((id) =>\n        nodeIds.includes(id)\n      );\n      if (\n        isCurrentActiveTree &&\n        allParentNodeIds.length &&\n        !selectedNodeShown\n      ) {\n        setSelectedNodeIsHidden(true);\n      } else {\n        setSelectedNodeIsHidden(false);\n      }\n    },\n    [isCurrentActiveTree, tree, selectedNodeParentId]\n  );\n\n  const getExpandedRecursively = useCallback(\n    (tree) => {\n      if (!tree) return [];\n      return tree.reduce((expandedIds, item) => {\n        if (item?.isExpanded) {\n          expandedIds.push(item.id);\n        }\n        if (item && item[childrenKey]?.length) {\n          expandedIds = expandedIds.concat(\n            getExpandedRecursively(item[childrenKey])\n          );\n        }\n        return expandedIds;\n      }, []);\n    },\n    [childrenKey]\n  );\n\n  useEffect(() => {\n    setTree(menuItems);\n  }, [menuItems]);\n\n  useEffect(() => {\n    if (!tree) {\n      return;\n    }\n    let expanded = [];\n    if (tree?.isExpanded) {\n      expanded.push(tree.id);\n    }\n    expanded = expanded.concat(getExpandedRecursively(tree[childrenKey]));\n    setExpanded(expanded);\n  }, [getExpandedRecursively, tree, childrenKey]);\n\n  useEffect(() => {\n    if (!!searchTree(tree, selectedNodeId)) {\n      setIsCurrentActiveTree(true);\n    } else {\n      setIsCurrentActiveTree(false);\n    }\n  }, [tree, selectedNodeId]);\n\n  if (!expanded) {\n    return null;\n  }\n\n  return (\n    <TreeView\n      key={tree}\n      className={classes.root}\n      defaultCollapseIcon={\n        <FluentIcon\n          size='small'\n          component={CaretUpSolid8Icon}\n          style={{\n            color: lighten(theme.palette.primary.main, 0.5),\n            width: theme.spacing(1.5),\n            height: theme.spacing(1.5)\n          }}\n        />\n      }\n      expanded={expanded || []}\n      onNodeToggle={handleNodeExpansion}\n      defaultExpandIcon={\n        <FluentIcon\n          size='small'\n          component={CaretDownSolid8Icon}\n          style={{\n            color: lighten(theme.palette.primary.main, 0.5),\n            width: theme.spacing(1.5),\n            height: theme.spacing(1.5)\n          }}\n        />\n      }\n      selected={selectedNodeId}\n    >\n      {tree && renderTree(tree)}\n    </TreeView>\n  );\n};\n"],"mappings":"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"}

package/dist/accordion-DQ6VVvdg.js

@@ -0,0 +1,192 @@
+import { t as FluentIcon } from "./FluentIcon-DQ6nSDJg.js";
+import { t as FluentIconButton } from "./FluentIconButton-Dc95mE3v.js";
+import { S as getIconFromName } from "./TreeUtilities-CDlHioSI.js";
+import { t as StatusChip } from "./StatusChip-DZAN88VU.js";
+import { t as IconButtonWithTooltip } from "./IconButtonWithToolTip-DswviiJB.js";
+import React, { useCallback } from "react";
+import { ButtonBase, Collapse, Tooltip, Typography, lighten, makeStyles } from "@material-ui/core";
+import clsx from "clsx";
+import { ChevronUpIcon } from "@fluentui/react-icons";
+
+//#region src/UI/accordion/Accordion.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {
+		width: "100%",
+		height: "100%"
+	},
+	rootBorder: {
+		borderStyle: "solid",
+		borderColor: (props) => theme.palette[props?.color]?.main,
+		borderWidth: "1px 1px 1px 6px"
+	},
+	headerWrapper: {
+		display: "flex",
+		justifyContent: "space-between",
+		alignItems: "center",
+		backgroundColor: (props) => props?.simpleAccordion && props?.color && props?.color !== "default" ? props?.color === "paper" ? theme.palette.background.paper : lighten(theme.palette[props?.color]?.light, .8) : theme.palette.background.default,
+		overflow: "hidden",
+		width: (props) => props?.headerWidth ?? "100%"
+	},
+	secondaryButtonsWrapper: {
+		display: "flex",
+		gap: theme.spacing(2),
+		borderRadius: theme.spacing(2),
+		backgroundColor: "white",
+		padding: `2px ${theme.spacing(1)}px`,
+		width: "fit-content"
+	},
+	primaryButtonWrapper: {
+		minWidth: "68px",
+		maxWidth: (props) => props?.primaryActionMaxWidth,
+		height: "auto",
+		color: "white",
+		backgroundColor: (props) => theme.palette[props?.color]?.main,
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center",
+		alignSelf: "normal"
+	},
+	headerColor: { backgroundColor: (props) => props?.color !== "default" && props?.color !== "paper" && lighten(theme.palette[props?.color]?.light, .85) },
+	buttonWrapper: {
+		display: "flex",
+		gap: theme.spacing(.5)
+	},
+	titleWrapper: {
+		display: "flex",
+		justifyContent: "space-between",
+		alignItems: "center",
+		flexGrow: 2,
+		margin: (props) => props.removeHeaderMargin ? "0px" : theme.spacing(.8),
+		color: theme.palette.text.primary
+	},
+	closeButtonWrapper: {
+		display: "flex",
+		justifyContent: "flex-end",
+		marginTop: theme.spacing(1)
+	},
+	unexpandedIconButton: {
+		width: "68px",
+		height: "40px",
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center",
+		alignSelf: "normal",
+		borderTop: `solid 1px lightgrey`,
+		borderLeft: `solid 1px lightgrey`,
+		overflow: "hidden",
+		border: (props) => props?.removeBorder && "0px"
+	},
+	rightIconButton: {
+		backgroundColor: "white",
+		padding: theme.spacing(1),
+		borderRadius: "50%"
+	},
+	primaryActionLabel: {
+		marginRight: theme.spacing(.5),
+		marginLeft: theme.spacing(.5)
+	},
+	expand: {
+		transform: "rotate(0deg)",
+		marginLeft: "auto",
+		marginRight: theme.spacing(1),
+		transition: theme.transitions.create("transform", { duration: theme.transitions.duration.shortest })
+	},
+	expandOpen: { transform: "rotate(180deg)" },
+	titleStatusWrapper: {
+		display: "flex",
+		alignItems: "center",
+		gap: theme.spacing(1)
+	}
+}));
+const Accordion = (props) => {
+	const { title, subtitle, subtitleVariant, status, statusIcon, statusLabel, secondaryIconButtons, overriddenSecondaryContainer, rightIcon, rightIconAction, rightIconTooltip, disableRightIconButton = false, primaryActionIcon, primaryActionLabel, primaryAction, primaryActionMaxWidth, disablePrimaryActionButton = false, color = "info", children, expand, setExpand, additionalEvent, hideCloseButton = false, hideRightIconButton = false, hidePrimaryAction = false, noWrapTitle = false, simpleAccordion = false, recordId = 0, removeBorder = false, headerWidth, removeHeaderMargin, titleVariant = "subtitle2", chevronIconSize = "medium" } = props;
+	const classes = useStyles({
+		color,
+		primaryActionMaxWidth,
+		simpleAccordion,
+		headerWidth,
+		removeHeaderMargin,
+		removeBorder
+	});
+	const handleOnClickAccordion = useCallback(() => {
+		if (setExpand) setExpand(!expand);
+		if (additionalEvent) additionalEvent();
+	}, [
+		additionalEvent,
+		expand,
+		setExpand
+	]);
+	return /* @__PURE__ */ React.createElement("div", { className: clsx(classes.root, { [classes.rootBorder]: !simpleAccordion & !removeBorder }) }, /* @__PURE__ */ React.createElement("div", {
+		className: clsx(classes.headerWrapper, { [classes.headerColor]: simpleAccordion ? false : expand }),
+		onClick: handleOnClickAccordion
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.titleWrapper }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: classes.titleStatusWrapper }, /* @__PURE__ */ React.createElement(Typography, {
+		variant: titleVariant,
+		noWrap: noWrapTitle
+	}, title), statusLabel && /* @__PURE__ */ React.createElement(StatusChip, {
+		status: status ?? color,
+		label: statusLabel,
+		icon: statusIcon
+	})), subtitle && /* @__PURE__ */ React.createElement(Typography, {
+		variant: subtitleVariant,
+		noWrap: noWrapTitle
+	}, subtitle), overriddenSecondaryContainer ? { overriddenSecondaryContainer } : /* @__PURE__ */ React.createElement("div", null, secondaryIconButtons?.length > 0 && /* @__PURE__ */ React.createElement("div", { className: classes.secondaryButtonsWrapper }, secondaryIconButtons?.map((item) => /* @__PURE__ */ React.createElement("div", { className: classes.buttonWrapper }, /* @__PURE__ */ React.createElement(IconButtonWithTooltip, {
+		...item,
+		title: item?.title,
+		icon: item.icon,
+		onClick: (event) => {
+			event.stopPropagation();
+			item.onClick();
+		},
+		size: "small",
+		id: `udpRecord-Accordion-${item?.title}-${recordId}`,
+		udprecordid: `udpRecord-Accordion-${item?.title}-${recordId}`
+	}), item?.value && /* @__PURE__ */ React.createElement(Typography, null, item?.value)))))), !hideRightIconButton && !simpleAccordion && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(IconButtonWithTooltip, {
+		title: rightIconTooltip,
+		icon: rightIcon,
+		onClick: (event) => {
+			event.stopPropagation();
+			rightIconAction();
+		},
+		className: classes.rightIconButton,
+		size: "small",
+		disabled: disableRightIconButton,
+		id: `udpRecord-Accordion-RightButton-${recordId}`,
+		udprecordid: `udpRecord-Accordion-RightButton-${recordId}`
+	}))), !hidePrimaryAction && !simpleAccordion && /* @__PURE__ */ React.createElement("div", { className: classes.primaryButtonWrapper }, primaryActionIcon ? /* @__PURE__ */ React.createElement(Tooltip, { title: primaryActionLabel }, /* @__PURE__ */ React.createElement(ButtonBase, {
+		onClick: (event) => {
+			event.stopPropagation();
+			primaryAction();
+		},
+		className: classes.primaryButtonWrapper,
+		disabled: disablePrimaryActionButton,
+		id: `udpRecord-Accordion-ButtonBase-${recordId}`,
+		udprecordid: `udpRecord-Accordion-ButtonBase-${recordId}`
+	}, /* @__PURE__ */ React.createElement(FluentIcon, { component: primaryActionIcon }))) : /* @__PURE__ */ React.createElement(ButtonBase, {
+		onClick: primaryAction,
+		className: classes.primaryButtonWrapper,
+		disabled: disablePrimaryActionButton
+	}, /* @__PURE__ */ React.createElement(Typography, { className: classes.primaryActionLabel }, primaryActionLabel))), simpleAccordion && /* @__PURE__ */ React.createElement(FluentIconButton, {
+		icon: getIconFromName("ChevronDownIcon"),
+		onClick: handleOnClickAccordion,
+		className: clsx(classes.expand, { [classes.expandOpen]: expand }),
+		size: chevronIconSize,
+		disabled: disableRightIconButton,
+		id: `udpRecord-Accordion-ExpandButton-${recordId}`,
+		udprecordid: `udpRecord-Accordion-ExpandButton-${recordId}`
+	})), /* @__PURE__ */ React.createElement(Collapse, {
+		in: expand,
+		timeout: "auto",
+		unmountOnExit: true
+	}, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, children), !hideCloseButton && !simpleAccordion && /* @__PURE__ */ React.createElement("div", { className: classes.closeButtonWrapper }, /* @__PURE__ */ React.createElement(ButtonBase, {
+		onClick: () => {
+			if (setExpand) setExpand(false);
+		},
+		className: classes.unexpandedIconButton,
+		id: `udpRecord-Accordion-CloseButton-${recordId}`,
+		udprecordid: `udpRecord-Accordion-CloseButton-${recordId}`
+	}, /* @__PURE__ */ React.createElement(FluentIcon, { component: ChevronUpIcon }))))));
+};
+
+//#endregion
+export { Accordion as t };
+//# sourceMappingURL=accordion-DQ6VVvdg.js.map

package/dist/accordion-DQ6VVvdg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-DQ6VVvdg.js","names":[],"sources":["../src/UI/accordion/Accordion.jsx"],"sourcesContent":["import {\n  ButtonBase,\n  Collapse,\n  Tooltip,\n  Typography,\n  lighten,\n  makeStyles\n} from '@material-ui/core';\nimport clsx from 'clsx';\nimport React, { useCallback } from 'react';\nimport { FluentIcon } from '../../utilities/iconLibrary/FluentIcon';\nimport { IconButtonWithTooltip } from '../inputs/buttons/IconButtonWithToolTip';\nimport { ChevronUpIcon } from '@fluentui/react-icons';\nimport { FluentIconButton } from '../inputs/buttons/FluentIconButton';\nimport { getIconFromName } from '../../utilities/tree/TreeUtilities';\nimport { StatusChip } from '../dataDisplay/status/StatusChip';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    width: '100%',\n    height: '100%'\n  },\n  rootBorder: {\n    borderStyle: 'solid',\n    borderColor: (props) => theme.palette[props?.color]?.main,\n    borderWidth: '1px 1px 1px 6px'\n  },\n  headerWrapper: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    backgroundColor: (props) =>\n      props?.simpleAccordion && props?.color && props?.color !== 'default'\n        ? props?.color === 'paper'\n          ? theme.palette.background.paper\n          : lighten(theme.palette[props?.color]?.light, 0.8)\n        : theme.palette.background.default,\n    overflow: 'hidden',\n    width: (props) => props?.headerWidth ?? '100%'\n  },\n  secondaryButtonsWrapper: {\n    display: 'flex',\n    gap: theme.spacing(2),\n    borderRadius: theme.spacing(2),\n    backgroundColor: 'white',\n    padding: `2px ${theme.spacing(1)}px`,\n    width: 'fit-content'\n  },\n  primaryButtonWrapper: {\n    minWidth: '68px',\n    maxWidth: (props) => props?.primaryActionMaxWidth,\n    height: 'auto',\n    color: 'white',\n    backgroundColor: (props) => theme.palette[props?.color]?.main,\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    alignSelf: 'normal'\n  },\n  headerColor: {\n    backgroundColor: (props) =>\n      props?.color !== 'default' &&\n      props?.color !== 'paper' &&\n      lighten(theme.palette[props?.color]?.light, 0.85)\n  },\n  buttonWrapper: {\n    display: 'flex',\n    gap: theme.spacing(0.5)\n  },\n  titleWrapper: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    flexGrow: 2,\n    margin: (props) => (props.removeHeaderMargin ? '0px' : theme.spacing(0.8)),\n    color: theme.palette.text.primary\n  },\n  closeButtonWrapper: {\n    display: 'flex',\n    justifyContent: 'flex-end',\n    marginTop: theme.spacing(1)\n  },\n  unexpandedIconButton: {\n    width: '68px',\n    height: '40px',\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    alignSelf: 'normal',\n    borderTop: `solid 1px lightgrey`,\n    borderLeft: `solid 1px lightgrey`,\n    overflow: 'hidden',\n    border: (props) => props?.removeBorder && '0px'\n  },\n  rightIconButton: {\n    backgroundColor: 'white',\n    padding: theme.spacing(1),\n    borderRadius: '50%'\n  },\n  primaryActionLabel: {\n    marginRight: theme.spacing(0.5),\n    marginLeft: theme.spacing(0.5)\n  },\n  expand: {\n    transform: 'rotate(0deg)',\n    marginLeft: 'auto',\n    marginRight: theme.spacing(1),\n    transition: theme.transitions.create('transform', {\n      duration: theme.transitions.duration.shortest\n    })\n  },\n  expandOpen: {\n    transform: 'rotate(180deg)'\n  },\n  titleStatusWrapper: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n  }\n}));\n\nexport const Accordion = (props) => {\n  const {\n    title,\n    subtitle,\n    subtitleVariant,\n    status,\n    statusIcon,\n    statusLabel,\n    secondaryIconButtons,\n    overriddenSecondaryContainer,\n    rightIcon,\n    rightIconAction,\n    rightIconTooltip,\n    disableRightIconButton = false,\n    primaryActionIcon,\n    primaryActionLabel,\n    primaryAction,\n    primaryActionMaxWidth,\n    disablePrimaryActionButton = false,\n    color = 'info',\n    children,\n    expand,\n    setExpand,\n    additionalEvent,\n    hideCloseButton = false,\n    hideRightIconButton = false,\n    hidePrimaryAction = false,\n    noWrapTitle = false,\n    simpleAccordion = false,\n    recordId = 0,\n    removeBorder = false,\n    headerWidth,\n    removeHeaderMargin,\n    titleVariant = 'subtitle2',\n    chevronIconSize = 'medium'\n  } = props;\n  const classes = useStyles({\n    color,\n    primaryActionMaxWidth,\n    simpleAccordion,\n    headerWidth,\n    removeHeaderMargin,\n    removeBorder,\n  });\n\n  const handleOnClickAccordion = useCallback(() => {\n    if (setExpand) {\n      setExpand(!expand);\n    }\n\n    if (additionalEvent) {\n      additionalEvent();\n    }\n  }, [additionalEvent, expand, setExpand]);\n\n  return (\n    <div\n      className={clsx(classes.root, {\n        [classes.rootBorder]: !simpleAccordion & !removeBorder\n      })}\n    >\n      <div\n        className={clsx(classes.headerWrapper, {\n          [classes.headerColor]: simpleAccordion ? false : expand\n        })}\n        onClick={handleOnClickAccordion}\n      >\n        <div className={classes.titleWrapper}>\n          <div>\n            <div className={classes.titleStatusWrapper}>\n              <Typography variant={titleVariant} noWrap={noWrapTitle}>\n                {title}\n              </Typography>\n              {statusLabel && <StatusChip\n                status={status ?? color}\n                label={statusLabel}\n                icon={statusIcon}\n              />}\n            </div>\n\n            {subtitle && (\n              <Typography variant={subtitleVariant} noWrap={noWrapTitle}>\n                {subtitle}\n              </Typography>\n            )}\n\n            {overriddenSecondaryContainer ? (\n              { overriddenSecondaryContainer }\n            ) : (\n              <div>\n                {secondaryIconButtons?.length > 0 && (\n                  <div className={classes.secondaryButtonsWrapper}>\n                    {secondaryIconButtons?.map((item) => (\n                      <div className={classes.buttonWrapper}>\n                        <IconButtonWithTooltip\n                          {...item}\n                          title={item?.title}\n                          icon={item.icon}\n                          onClick={(event) => {\n                            event.stopPropagation();\n                            item.onClick();\n                          }}\n                          size='small'\n                          id={`udpRecord-Accordion-${item?.title}-${recordId}`}\n                          udprecordid={`udpRecord-Accordion-${item?.title}-${recordId}`}\n                        />\n                        {item?.value && <Typography>{item?.value}</Typography>}\n                      </div>\n                    ))}\n                  </div>\n                )}\n              </div>\n            )}\n          </div>\n          {!hideRightIconButton && !simpleAccordion && (\n            <div>\n              <IconButtonWithTooltip\n                title={rightIconTooltip}\n                icon={rightIcon}\n                onClick={(event) => {\n                  event.stopPropagation();\n                  rightIconAction();\n                }}\n                className={classes.rightIconButton}\n                size='small'\n                disabled={disableRightIconButton}\n                id={`udpRecord-Accordion-RightButton-${recordId}`}\n                udprecordid={`udpRecord-Accordion-RightButton-${recordId}`}\n              />\n            </div>\n          )}\n        </div>\n        {!hidePrimaryAction && !simpleAccordion && (\n          <div className={classes.primaryButtonWrapper}>\n            {primaryActionIcon ? (\n              <Tooltip title={primaryActionLabel}>\n                <ButtonBase\n                  onClick={(event) => {\n                    event.stopPropagation();\n                    primaryAction();\n                  }}\n                  className={classes.primaryButtonWrapper}\n                  disabled={disablePrimaryActionButton}\n                  id={`udpRecord-Accordion-ButtonBase-${recordId}`}\n                  udprecordid={`udpRecord-Accordion-ButtonBase-${recordId}`}\n                >\n                  <FluentIcon component={primaryActionIcon} />\n                </ButtonBase>\n              </Tooltip>\n            ) : (\n              <ButtonBase\n                onClick={primaryAction}\n                className={classes.primaryButtonWrapper}\n                disabled={disablePrimaryActionButton}\n              >\n                <Typography className={classes.primaryActionLabel}>\n                  {primaryActionLabel}\n                </Typography>\n              </ButtonBase>\n            )}\n          </div>\n        )}\n        {simpleAccordion && (\n          <FluentIconButton\n            icon={getIconFromName('ChevronDownIcon')}\n            onClick={handleOnClickAccordion}\n            className={clsx(classes.expand, {\n              [classes.expandOpen]: expand\n            })}\n            size={chevronIconSize}\n            disabled={disableRightIconButton}\n            id={`udpRecord-Accordion-ExpandButton-${recordId}`}\n            udprecordid={`udpRecord-Accordion-ExpandButton-${recordId}`}\n          />\n        )}\n      </div>\n      <Collapse in={expand} timeout='auto' unmountOnExit>\n        <div>\n          <div>{children}</div>\n          {!hideCloseButton && !simpleAccordion && (\n            <div className={classes.closeButtonWrapper}>\n              <ButtonBase\n                onClick={() => {\n                  if (setExpand) {\n                    setExpand(false);\n                  }\n                }}\n                className={classes.unexpandedIconButton}\n                id={`udpRecord-Accordion-CloseButton-${recordId}`}\n                udprecordid={`udpRecord-Accordion-CloseButton-${recordId}`}\n              >\n                <FluentIcon component={ChevronUpIcon} />\n              </ButtonBase>\n            </div>\n          )}\n        </div>\n      </Collapse>\n    </div>\n  );\n};\n"],"mappings":"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"}