udp-react-enterprise-component-library 25.16.0 → 25.16.1

package/dist/{MenuPage-BZk69VmF.js → BaseTreeMenu-CroItvOA.js}

@@ -1,24 +1,21 @@
-import { APP_RIBBON_SPACE, FluentIcon, NodeActionTriggerEnums, TreeViewModeEnums, UnityFluentIcon, useBuildEnvironment, useShellStore } from "./EnvironmentRibbon-OD01SY9G.js";
-import "./apiHelpers-DZPI1QCL.js";
-import { useAxiosGet, useUser } from "./useAxiosGet-Bi4Z0b8W.js";
-import { AggregateChip, NodeLoader, UtilitySideBar, findAllParentIds, getIconFromName, getNodeIdForRightBorder, getUnityIconFromName, searchTree, transformMenuPageTree } from "./UtilitySideBar-9LDu9AaN.js";
-import "./SearchUtilities-lVLvOpzo.js";
-import { PageContainer, useSetLocationState } from "./PageContainer-BxChq1eP.js";
+import { FluentIcon } from "./FluentIcon-CB-ANF6C.js";
+import { NodeActionTriggerEnums, TreeViewModeEnums } from "./unitySystemEnums-DXk8yS3v.js";
+import { UnityFluentIcon } from "./UnityFluentIcon-fuqAQh0C.js";
+import { findAllParentIds, getIconFromName, getNodeIdForRightBorder, searchTree } from "./TreeUtilities-BxV5PMJ8.js";
+import { getUnityIconFromName } from "./UnityIconLibrary-DnCuEr5M.js";
+import { StatusChip } from "./StatusChip-Bw-0wE_B.js";
+import { AggregateChip } from "./AggregateChip-7tOziH82.js";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { CircularProgress, Tooltip, Typography, darken, lighten, makeStyles, useTheme } from "@material-ui/core";
-import { ConfigService } from "udp-react-stencil-component-library";
-import { Prompt, useHistory, useLocation } from "react-router-dom";
 import clsx from "clsx";
 import { CaretDownSolid8Icon, CaretUpSolid8Icon } from "@fluentui/react-icons";
 import { cloneDeep } from "lodash";
-import { useTranslation } from "react-i18next";
-import { DndProvider, useDrag, useDrop } from "react-dnd";
-import { HTML5Backend } from "react-dnd-html5-backend";
+import { useDrag, useDrop } from "react-dnd";
 import TreeView from "@material-ui/lab/TreeView";
 import TreeItem from "@material-ui/lab/TreeItem";
 
 //#region src/treeMenu/BaseTreeMenuItem.jsx
-const useStyles$2 = makeStyles((theme) => ({
+const useStyles$1 = makeStyles((theme) => ({
 	root: {
 		"&.Mui-selected > .MuiTreeItem-content": {
 			backgroundColor: theme?.getThemeData()?.mode === "dark" ? theme.palette.grey[700] : theme.palette.grey[300],
@@ -92,7 +89,7 @@ const useStyles$2 = makeStyles((theme) => ({
 }));
 const BaseTreeMenuItem = (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$2(props);
+	const classes = useStyles$1(props);
 	const theme = useTheme();
 	const [{ isDragging }, dragRef] = useDrag({
 		type: "BaseTreeMenuItem",
@@ -163,7 +160,10 @@ const BaseTreeMenuItem = (props) => {
 		}, 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, {
+		}, subLabel))), node?.properties?.itemCount !== void 0 && node?.properties?.itemCount !== null && sidebarExpanded && /* @__PURE__ */ React.createElement(StatusChip, {
+			label: String(node.properties.itemCount),
+			useSmallChip: true
+		}), /* @__PURE__ */ React.createElement(AggregateChip, { aggregateThresholdId }), conditionalIconName && sidebarExpanded && /* @__PURE__ */ React.createElement("div", { className: classes.conditionalIconContainer }, /* @__PURE__ */ React.createElement(UnityFluentIcon, {
 			size: treeViewMode === TreeViewModeEnums.Compact ? "small" : "medium",
 			color: conditionalIconColor,
 			type: conditionalIconType,
@@ -181,7 +181,7 @@ const BaseTreeMenuItem = (props) => {
 
 //#endregion
 //#region src/treeMenu/BaseTreeMenu.jsx
-const useStyles$1 = makeStyles((theme) => ({
+const useStyles = makeStyles((theme) => ({
 	root: {
 		marginBottom: theme.spacing(1.75),
 		borderTop: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? `1px solid ${theme.palette.grey[200]}` : ""
@@ -195,7 +195,7 @@ const BaseTreeMenu = (props) => {
 	const [selectedNodeIsHidden, setSelectedNodeIsHidden] = useState(false);
 	const [tree, setTree] = useState(menuItems);
 	const theme = useTheme();
-	const classes = useStyles$1(props);
+	const classes = useStyles(props);
 	const firstRender = useRef(true);
 	const handleSelectedNode = useCallback((e, value) => {
 		const selectedNode = searchTree(tree, value);
@@ -353,206 +353,5 @@ const BaseTreeMenu = (props) => {
 };
 
 //#endregion
-//#region src/menuPage/MenuPage.jsx
-const useStyles = 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) => {
-	const buildEnv = useBuildEnvironment();
-	const classes = useStyles({
-		...props,
-		appRibbonSpace: buildEnv ? APP_RIBBON_SPACE : 0
-	});
-	const history = useHistory();
-	const location = useLocation();
-	const user = useUser();
-	const { t } = useTranslation();
-	const setLocationState = useSetLocationState();
-	const [menuItemsList, setMenuItemsList] = useState([]);
-	const [selectedNode, setSelectedNode] = useState(null);
-	const [sidebarExpanded, setSidebarExpanded] = useState(true);
-	const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
-	const innerMenuId = location.pathname.replace("/menupage/", "");
-	const prevInnerMenuId = useRef(innerMenuId);
-	const [{ data: innerMenu, loading: menuLoading }] = useAxiosGet(ConfigService.tenantV1ApiUrl, `menus/${innerMenuId}`, {}, !innerMenuId, false);
-	const { setSubHeaderActionHasChildren, setNavigationExpanded } = useShellStore();
-	const [{ data: pageData, loading: pageLoading, error: pageError }] = useAxiosGet(ConfigService.tenantV1ApiUrl, `page/${selectedNode?.properties?.page?.id}`, {}, !selectedNode?.properties?.page?.id, false);
-	const handleSelectedNode = useCallback((node, menuIndex) => {
-		const searchParams = new URLSearchParams(location.search);
-		searchParams.set("page", node.id);
-		history.push({
-			pathname: location.pathname,
-			search: searchParams.toString()
-		});
-		setSelectedNode(node);
-		setHasUnsavedChanges(false);
-	}, [history, location]);
-	const handleDropNode = useCallback((sourceNode, targetNode, sourceNodeMenuIndex, targetNodeMenuIndex) => {}, []);
-	const handleSidebarExpandClick = useCallback(() => {
-		setSidebarExpanded((expanded) => !expanded);
-	}, []);
-	const findNodeById = useCallback((node, id) => {
-		if (!node) return null;
-		if (node.id.toString() === id) return node;
-		if (node.children) for (const child of node.children) {
-			const found = findNodeById(child, id);
-			if (found) return found;
-		}
-		return null;
-	}, []);
-	useEffect(() => {
-		const pageId = new URLSearchParams(location.search).get("page");
-		if (pageId && menuItemsList.length > 0) {
-			let node = null;
-			for (const tree of menuItemsList) {
-				node = findNodeById(tree, pageId);
-				if (node) break;
-			}
-			if (node && node.id !== selectedNode?.id) {
-				setSelectedNode(node);
-				setHasUnsavedChanges(false);
-			}
-		}
-	}, [
-		location.search,
-		menuItemsList,
-		findNodeById,
-		selectedNode
-	]);
-	useEffect(() => {
-		prevInnerMenuId.current;
-		if (innerMenu) {
-			const list = [];
-			innerMenu.menuItemInstanceStructureViews.forEach((menuInstance) => {
-				const updatedMenu = transformMenuPageTree(menuInstance);
-				if (updatedMenu) list.push(updatedMenu);
-			});
-			setMenuItemsList(list);
-			const searchParams = new URLSearchParams(location.search);
-			const pageId = searchParams.get("page");
-			let nodeToSelect = null;
-			if (pageId && list.length > 0) for (const tree of list) {
-				nodeToSelect = findNodeById(tree, pageId);
-				if (nodeToSelect) break;
-			}
-			if (nodeToSelect) {
-				setSelectedNode(nodeToSelect);
-				setHasUnsavedChanges(false);
-				setNavigationExpanded(false);
-			} else if (list.length > 0) {
-				const firstNode = list[0];
-				searchParams.set("page", firstNode.id);
-				history.replace({
-					pathname: location.pathname,
-					search: searchParams.toString()
-				});
-				setSelectedNode(firstNode);
-				setHasUnsavedChanges(false);
-				setNavigationExpanded(false);
-			}
-		}
-		prevInnerMenuId.current = innerMenuId;
-	}, [
-		innerMenu,
-		setNavigationExpanded,
-		history,
-		location,
-		innerMenuId,
-		findNodeById
-	]);
-	useEffect(() => {
-		setSubHeaderActionHasChildren(false);
-	}, [setSubHeaderActionHasChildren]);
-	useEffect(() => {
-		if (innerMenu) setLocationState({ label: t(innerMenu?.name) });
-	}, [
-		setLocationState,
-		t,
-		innerMenu
-	]);
-	return /* @__PURE__ */ React.createElement(DndProvider, { backend: HTML5Backend }, /* @__PURE__ */ React.createElement(Prompt, {
-		when: hasUnsavedChanges,
-		message: "You have unsaved changes. Are you sure you want to leave this page?"
-	}), /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.sidebar }, /* @__PURE__ */ React.createElement(UtilitySideBar, {
-		title: innerMenu?.name,
-		isUsingChildren: true,
-		resizable: true,
-		removePadding: true,
-		removeTopLayoutUnit: true,
-		onUtilitySidebarToggleExpandClick: handleSidebarExpandClick,
-		collapsedWidth: 64
-	}, /* @__PURE__ */ React.createElement("div", {
-		className: classes.menuContent,
-		key: innerMenuId
-	}, menuItemsList?.length > 0 && !menuLoading && menuItemsList.map((menuItems, index) => /* @__PURE__ */ React.createElement("div", {
-		key: menuItems.id,
-		className: classes.nodeContainer
-	}, /* @__PURE__ */ React.createElement(BaseTreeMenu, {
-		menuItems,
-		onSelectNode: handleSelectedNode,
-		onDropNode: handleDropNode,
-		menuIndex: index,
-		selectedNodeId: selectedNode?.id,
-		selectedNodeParentId: selectedNode?.parentId,
-		sidebarExpanded,
-		treeViewMode: TreeViewModeEnums.Classic
-	}))), menuLoading && /* @__PURE__ */ React.createElement("div", { className: classes.loader }, /* @__PURE__ */ React.createElement(NodeLoader, { loading: menuLoading }))))), /* @__PURE__ */ React.createElement("div", { className: classes.content }, selectedNode?.properties?.page?.id && /* @__PURE__ */ React.createElement(PageContainer, {
-		user,
-		key: selectedNode?.id,
-		pageData,
-		pageLoading,
-		widgetParams: {
-			pageId: pageData?.pageId,
-			entityName: selectedNode?.properties?.page?.entity?.entityName,
-			pbiReportCode: selectedNode?.properties?.page?.pbiReportCode,
-			requiredFieldsMap: selectedNode?.properties?.page?.requiredFieldMapping,
-			udpTagId: selectedNode?.properties?.page?.udpTagId,
-			queryId: selectedNode?.properties?.page?.queryId,
-			inquiryTreeId: selectedNode?.properties?.page?.inquiryTreeId,
-			setHasUnsavedChanges
-		},
-		disableMargins: true,
-		fromMenu: true
-	}))));
-};
-var MenuPage_default = MenuPage;
-
-//#endregion
-export { MenuPage_default as default };
-//# sourceMappingURL=MenuPage-BZk69VmF.js.map
+export { BaseTreeMenu, BaseTreeMenuItem };
+//# sourceMappingURL=BaseTreeMenu-CroItvOA.js.map

package/dist/BaseTreeMenu-CroItvOA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseTreeMenu-CroItvOA.js","names":["useStyles","other","tree","expanded"],"sources":["../src/treeMenu/BaseTreeMenuItem.jsx","../src/treeMenu/BaseTreeMenu.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';\nimport { StatusChip } from '../UI/dataDisplay/StatusChip';\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.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  },\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 BaseTreeMenuItem = (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={'udpRecord-BaseTreeMenuItem-'+label.replace(/\\s+/g, '')}\n                  udprecordid={'udpRecord-BaseTreeMenuItem-'+label.replace(/\\s+/g, '')}\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                            : 'medium'\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                  {node?.properties?.itemCount !== undefined &&\n                    node?.properties?.itemCount !== null &&\n                    sidebarExpanded && (\n                      <StatusChip\n                        label={String(node.properties.itemCount)}\n                        useSmallChip={true}\n                      />\n                    )}\n                  <AggregateChip aggregateThresholdId={aggregateThresholdId} />\n                  {conditionalIconName && sidebarExpanded && (\n                    <div className={classes.conditionalIconContainer}>\n                      <UnityFluentIcon\n                        size={\n                          treeViewMode === TreeViewModeEnums.Compact\n                            ? 'small'\n                            : 'medium'\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, useRef } 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 { BaseTreeMenuItem } from './BaseTreeMenuItem';\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 BaseTreeMenu = (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  const firstRender = useRef(true);\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?.conditionalIconName || '';\n      let conditionalIconType = node.properties?.conditionalIconName\n        ? node.properties.conditionalIconType\n        : '';\n      let conditionalIconColor = node.properties?.conditionalIconName\n        ? node.properties?.conditionalIconColor\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        <BaseTreeMenuItem\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        </BaseTreeMenuItem>\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) return;\n    if (firstRender.current) {\n      let expanded = [];\n      if (tree?.isExpanded) {\n        expanded.push(tree.id);\n      }\n      expanded = expanded.concat(getExpandedRecursively(tree[childrenKey]));\n      setExpanded(expanded);\n      firstRender.current = false;\n    }\n    // Do not reset expanded on subsequent updates\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/BioCard-DWXySB2s.js

@@ -0,0 +1,60 @@
+import { FluentCard } from "./FluentCard-CjR2Ft0S.js";
+import React, { useEffect, useState } from "react";
+import { Avatar, CardContent, Chip, Divider, Typography, lighten, makeStyles } from "@material-ui/core";
+import clsx from "clsx";
+import { CheckMarkIcon, CopyIcon } from "@fluentui/react-icons";
+
+//#region src/UI/surfaces/cards/BioCard.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {
+		width: "100%",
+		height: "100%"
+	},
+	large: {
+		width: theme.spacing(12),
+		height: theme.spacing(12),
+		border: `3px solid ${theme.palette.primary.main}`
+	},
+	info: {
+		display: "flex",
+		marginTop: theme.spacing(3)
+	},
+	header: { display: "flex" },
+	addressContainer: {
+		maxWidth: theme.spacing(16),
+		alignContent: "center",
+		marginLeft: theme.spacing(3),
+		marginBottom: theme.spacing(3)
+	},
+	lastName: { marginTop: theme.spacing(-1) },
+	name: { flex: 1 },
+	chip: { background: lighten(theme.palette.success.light, .7) }
+}));
+const BioCard = ({ children, avatar, alt, firstName, lastName, address, copy, className }) => {
+	const classes = useStyles();
+	const [state, setState] = useState({
+		value: "",
+		copied: false
+	});
+	useEffect(() => {
+		setState({ value: copy });
+	}, [copy]);
+	return /* @__PURE__ */ React.createElement(FluentCard, { className: clsx(classes.root, className) }, /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement("div", { className: classes.header }, /* @__PURE__ */ React.createElement("div", { className: classes.name }, /* @__PURE__ */ React.createElement(Typography, { variant: "h4" }, firstName, " "), /* @__PURE__ */ React.createElement("div", { className: classes.lastName }, /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.overline,
+		variant: "overline"
+	}, lastName))), state.copied && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Chip, {
+		label: "Copied",
+		avatar: /* @__PURE__ */ React.createElement(CheckMarkIcon, null),
+		variant: "outlined",
+		className: classes.chip,
+		size: "small"
+	}))), /* @__PURE__ */ React.createElement("div", { className: classes.info }, /* @__PURE__ */ React.createElement("div", { className: classes.avatarWrapper }, /* @__PURE__ */ React.createElement(Avatar, {
+		className: classes.large,
+		alt,
+		src: avatar
+	})), /* @__PURE__ */ React.createElement("div", { className: classes.addressContainer }, address))), children && /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(CardContent, null, children));
+};
+
+//#endregion
+export { BioCard };
+//# sourceMappingURL=BioCard-DWXySB2s.js.map

package/dist/BioCard-DWXySB2s.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BioCard-DWXySB2s.js","names":[],"sources":["../src/UI/surfaces/cards/BioCard.jsx"],"sourcesContent":["import React, { useState, useEffect } from 'react'\nimport {\n  makeStyles,\n  CardContent,\n  Typography,\n  Avatar,\n  Chip,\n  Divider,\n  lighten\n} from '@material-ui/core'\nimport { FluentCard } from './FluentCard'\nimport { CopyIcon, CheckMarkIcon } from '@fluentui/react-icons'\nimport clsx from 'clsx'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    width: '100%',\n    height: '100%'\n  },\n  large: {\n    width: theme.spacing(12),\n    height: theme.spacing(12),\n    border: `3px solid ${theme.palette.primary.main}`\n  },\n  info: {\n    display: 'flex',\n    marginTop: theme.spacing(3)\n  },\n  header: {\n    display: 'flex'\n  },\n  addressContainer: {\n    maxWidth: theme.spacing(16),\n    alignContent: 'center',\n    marginLeft: theme.spacing(3),\n    marginBottom: theme.spacing(3)\n  },\n  lastName: {\n    marginTop: theme.spacing(-1)\n  },\n  name: {\n    flex: 1\n  },\n  chip: {\n    background: lighten(theme.palette.success.light, 0.7)\n  }\n}))\n\nexport const BioCard = ({\n  children,\n  avatar,\n  alt,\n  firstName,\n  lastName,\n  address,\n  copy,\n  className\n}) => {\n  const classes = useStyles()\n\n  const [state, setState] = useState({\n    value: '',\n    copied: false\n  })\n\n  useEffect(() => {\n    setState({ value: copy })\n  }, [copy])\n\n  return (\n    <FluentCard className={clsx(classes.root, className)}>\n      <CardContent>\n        <div className={classes.header}>\n          <div className={classes.name}>\n            <Typography variant='h4'>{firstName} </Typography>\n            <div className={classes.lastName}>\n              <Typography className={classes.overline} variant='overline'>\n                {lastName}\n              </Typography>\n            </div>\n          </div>\n          {/* {copy && !state.copied && (\n            <div>\n              <CopyToClipboard\n                text={state.value}\n                onCopy={() => setState({ ...state, copied: true })}\n              >\n                <FluentIconButton color='primary' icon={CopyIcon} />\n              </CopyToClipboard>\n            </div>\n          )} */}\n          {state.copied && (\n            <div>\n              <Chip\n                label='Copied'\n                avatar={<CheckMarkIcon />}\n                variant='outlined'\n                className={classes.chip}\n                size='small'\n              />\n            </div>\n          )}\n        </div>\n\n        <div className={classes.info}>\n          <div className={classes.avatarWrapper}>\n            <Avatar className={classes.large} alt={alt} src={avatar} />\n          </div>\n          <div className={classes.addressContainer}>{address}</div>\n        </div>\n      </CardContent>\n      {children && <Divider />}\n      <CardContent>{children}</CardContent>\n    </FluentCard>\n  )\n}\n"],"mappings":";;;;;;;AAcA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM;EACJ,OAAO;EACP,QAAQ;EACT;CACD,OAAO;EACL,OAAO,MAAM,QAAQ,GAAG;EACxB,QAAQ,MAAM,QAAQ,GAAG;EACzB,QAAQ,aAAa,MAAM,QAAQ,QAAQ;EAC5C;CACD,MAAM;EACJ,SAAS;EACT,WAAW,MAAM,QAAQ,EAAE;EAC5B;CACD,QAAQ,EACN,SAAS,QACV;CACD,kBAAkB;EAChB,UAAU,MAAM,QAAQ,GAAG;EAC3B,cAAc;EACd,YAAY,MAAM,QAAQ,EAAE;EAC5B,cAAc,MAAM,QAAQ,EAAE;EAC/B;CACD,UAAU,EACR,WAAW,MAAM,QAAQ,GAAG,EAC7B;CACD,MAAM,EACJ,MAAM,GACP;CACD,MAAM,EACJ,YAAY,QAAQ,MAAM,QAAQ,QAAQ,OAAO,GAAI,EACtD;CACF,EAAE;AAEH,MAAa,WAAW,EACtB,UACA,QACA,KACA,WACA,UACA,SACA,MACA,gBACI;CACJ,MAAM,UAAU,WAAW;CAE3B,MAAM,CAAC,OAAO,YAAY,SAAS;EACjC,OAAO;EACP,QAAQ;EACT,CAAC;AAEF,iBAAgB;AACd,WAAS,EAAE,OAAO,MAAM,CAAC;IACxB,CAAC,KAAK,CAAC;AAEV,QACE,oCAAC,cAAW,WAAW,KAAK,QAAQ,MAAM,UAAU,IAClD,oCAAC,mBACC,oCAAC,SAAI,WAAW,QAAQ,UACtB,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC,cAAW,SAAQ,QAAM,WAAU,IAAc,EAClD,oCAAC,SAAI,WAAW,QAAQ,YACtB,oCAAC;EAAW,WAAW,QAAQ;EAAU,SAAQ;IAC9C,SACU,CACT,CACF,EAWL,MAAM,UACL,oCAAC,aACC,oCAAC;EACC,OAAM;EACN,QAAQ,oCAAC,oBAAgB;EACzB,SAAQ;EACR,WAAW,QAAQ;EACnB,MAAK;GACL,CACE,CAEJ,EAEN,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC,SAAI,WAAW,QAAQ,iBACtB,oCAAC;EAAO,WAAW,QAAQ;EAAY;EAAK,KAAK;GAAU,CACvD,EACN,oCAAC,SAAI,WAAW,QAAQ,oBAAmB,QAAc,CACrD,CACM,EACb,YAAY,oCAAC,cAAU,EACxB,oCAAC,mBAAa,SAAuB,CAC1B"}