udp-react-enterprise-component-library 25.18.1-beta.36 → 25.18.1-beta.38

package/dist/AvatarAlphabet-C-nQUpJT.js

@@ -0,0 +1,187 @@
+import React from "react";
+import { Avatar, makeStyles } from "@material-ui/core";
+
+//#region src/UI/dataDisplay/AvatarAlphabet.jsx
+const useStyles = makeStyles((theme) => ({
+	small: {
+		width: 20,
+		height: 20,
+		fontSize: 14,
+		marginLeft: 2
+	},
+	medium: {
+		width: 35,
+		height: 35,
+		fontSize: 16,
+		paddingTop: 2
+	}
+}));
+const AvatarAlphabet = (props) => {
+	let letter = "";
+	const { avatarCharacter, size } = props;
+	const classes = useStyles();
+	switch (avatarCharacter) {
+		case "A":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#FFB900" }
+			}, "A");
+			break;
+		case "B":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#E74856" }
+			}, "B");
+			break;
+		case "C":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#0078D7" }
+			}, "C");
+			break;
+		case "D":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#0099BC" }
+			}, "D");
+			break;
+		case "E":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#7A7574" }
+			}, "E");
+			break;
+		case "F":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#767676" }
+			}, "F");
+			break;
+		case "G":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#FF8C00" }
+			}, "G");
+			break;
+		case "H":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#E81123" }
+			}, "H");
+			break;
+		case "I":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#0063B1" }
+			}, "I");
+			break;
+		case "J":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#2D7D9A" }
+			}, "J");
+			break;
+		case "K":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#5D5A58" }
+			}, "K");
+			break;
+		case "L":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#4C4A48" }
+			}, "L");
+			break;
+		case "M":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#F7630C" }
+			}, "M");
+			break;
+		case "N":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#EA005E" }
+			}, "N");
+			break;
+		case "O":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#8E8CD8" }
+			}, "O");
+			break;
+		case "P":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#00B7C3" }
+			}, "P");
+			break;
+		case "Q":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#68768A" }
+			}, "Q");
+			break;
+		case "R":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#69797E" }
+			}, "R");
+			break;
+		case "S":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#CA5010" }
+			}, "S");
+			break;
+		case "T":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#C30052" }
+			}, "T");
+			break;
+		case "U":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "FF4343" }
+			}, "U");
+			break;
+		case "V":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#9A0089" }
+			}, "V");
+			break;
+		case "W":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#10893E" }
+			}, "W");
+			break;
+		case "X":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#567C73" }
+			}, "X");
+			break;
+		case "Y":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#018574" }
+			}, "Y");
+			break;
+		case "Z":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#881798" }
+			}, "Z");
+			break;
+		default:
+	}
+	return letter;
+};
+
+//#endregion
+export { AvatarAlphabet as t };
+//# sourceMappingURL=AvatarAlphabet-C-nQUpJT.js.map

package/dist/AvatarAlphabet-C-nQUpJT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarAlphabet-C-nQUpJT.js","names":[],"sources":["../src/UI/dataDisplay/AvatarAlphabet.jsx"],"sourcesContent":["import React from 'react'\nimport { Avatar, makeStyles } from '@material-ui/core'\n\nconst useStyles = makeStyles((theme) => ({\n  small: {\n    width: 20,\n    height: 20,\n    fontSize: 14,\n    marginLeft: 2\n  },\n  medium: {\n    width: 35,\n    height: 35,\n    fontSize: 16,\n    paddingTop: 2\n  }\n}))\n\nexport const AvatarAlphabet = (props) => {\n  let letter = ''\n  const { avatarCharacter, size } = props\n  const classes = useStyles()\n\n  switch (avatarCharacter) {\n    case 'A':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#FFB900' }}\n        >\n          A\n        </Avatar>\n      )\n      break\n    case 'B':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#E74856' }}\n        >\n          B\n        </Avatar>\n      )\n      break\n    case 'C':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#0078D7' }}\n        >\n          C\n        </Avatar>\n      )\n      break\n    case 'D':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#0099BC' }}\n        >\n          D\n        </Avatar>\n      )\n      break\n    case 'E':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#7A7574' }}\n        >\n          E\n        </Avatar>\n      )\n      break\n    case 'F':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#767676' }}\n        >\n          F\n        </Avatar>\n      )\n      break\n    case 'G':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#FF8C00' }}\n        >\n          G\n        </Avatar>\n      )\n      break\n    case 'H':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#E81123' }}\n        >\n          H\n        </Avatar>\n      )\n      break\n    case 'I':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#0063B1' }}\n        >\n          I\n        </Avatar>\n      )\n      break\n    case 'J':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#2D7D9A' }}\n        >\n          J\n        </Avatar>\n      )\n      break\n    case 'K':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#5D5A58' }}\n        >\n          K\n        </Avatar>\n      )\n      break\n    case 'L':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#4C4A48' }}\n        >\n          L\n        </Avatar>\n      )\n      break\n    case 'M':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#F7630C' }}\n        >\n          M\n        </Avatar>\n      )\n      break\n    case 'N':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#EA005E' }}\n        >\n          N\n        </Avatar>\n      )\n      break\n    case 'O':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#8E8CD8' }}\n        >\n          O\n        </Avatar>\n      )\n      break\n    case 'P':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#00B7C3' }}\n        >\n          P\n        </Avatar>\n      )\n      break\n    case 'Q':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#68768A' }}\n        >\n          Q\n        </Avatar>\n      )\n      break\n    case 'R':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#69797E' }}\n        >\n          R\n        </Avatar>\n      )\n      break\n    case 'S':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#CA5010' }}\n        >\n          S\n        </Avatar>\n      )\n      break\n    case 'T':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#C30052' }}\n        >\n          T\n        </Avatar>\n      )\n      break\n    case 'U':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: 'FF4343' }}\n        >\n          U\n        </Avatar>\n      )\n      break\n    case 'V':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#9A0089' }}\n        >\n          V\n        </Avatar>\n      )\n      break\n    case 'W':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#10893E' }}\n        >\n          W\n        </Avatar>\n      )\n      break\n    case 'X':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#567C73' }}\n        >\n          X\n        </Avatar>\n      )\n      break\n    case 'Y':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#018574' }}\n        >\n          Y\n        </Avatar>\n      )\n      break\n    case 'Z':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#881798' }}\n        >\n          Z\n        </Avatar>\n      )\n      break\n    default:\n  }\n\n  return letter\n}\n"],"mappings":"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"}

package/dist/BarChartWidget-CQLrWqGJ.js

@@ -0,0 +1,85 @@
+import { t as __export } from "./chunk-B4enJp2Q.js";
+import { t as WidgetCard_default } from "./WidgetCard-UA87S0id.js";
+import { t as FluentStatsSnippet_default } from "./FluentStatsSnippet-B8EN8poL.js";
+import { t as convertISODate } from "./ConvertISODate-D9eAZ_8q.js";
+import React, { Fragment, forwardRef } from "react";
+import { Box, Grid, Typography } from "@material-ui/core";
+import { MuiVegaLite } from "@material-vega/material-ui";
+
+//#region src/UI/widgets/library/BarChartWidget/BarChartWidget.jsx
+const layout = {
+	w: {
+		default: 2,
+		min: 0,
+		max: 4
+	},
+	h: {
+		default: 2,
+		min: 0,
+		max: 4
+	}
+};
+const params = { mode: { defaultValue: "chart" } };
+const BarChartWidget = (props, ref) => {
+	const { children, params: params$1, setParam, ...other } = props;
+	const { mockData, apiUrl, theme, dateRange } = params$1;
+	return /* @__PURE__ */ React.createElement(WidgetCard_default, {
+		ref,
+		...other,
+		title: mockData?.title,
+		theme: theme && theme
+	}, mockData ? /* @__PURE__ */ React.createElement(React.Fragment, null, dateRange && /* @__PURE__ */ React.createElement(Typography, {
+		gutterBottom: true,
+		variant: "caption",
+		component: "h3"
+	}, "From: ", convertISODate(dateRange.from), " to:", " ", convertISODate(dateRange.to)), mockData?.stats && /* @__PURE__ */ React.createElement(Grid, { container: true }, mockData?.stats.map((stat) => /* @__PURE__ */ React.createElement(Grid, {
+		item: true,
+		xs: 3,
+		key: stat.label
+	}, /* @__PURE__ */ React.createElement(FluentStatsSnippet_default, {
+		label: stat.label,
+		amount: stat.currentValue,
+		prevAmount: stat.previousValue
+	})))), /* @__PURE__ */ React.createElement(Box, {
+		clone: true,
+		flex: 1,
+		mt: 1,
+		overflow: "hidden"
+	}, /* @__PURE__ */ React.createElement(MuiVegaLite, {
+		width: "container",
+		height: "container",
+		autoResize: "true",
+		variant: "verticalBarChart",
+		spec: {
+			$schema: "https://vega.github.io/schema/vega-lite/v4.json",
+			data: { values: mockData?.data },
+			mark: "bar",
+			encoding: {
+				x: {
+					field: "xAxis",
+					type: mockData?.xAxisType,
+					axis: { ticks: false },
+					band: .5
+				},
+				y: {
+					field: "yAxis",
+					type: mockData?.yAxisType,
+					axis: { format: mockData?.yAxisFormat }
+				}
+			}
+		}
+	})), children) : /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, "Could not retrieve widget data. Please contact support."));
+};
+var BarChartWidget_default = forwardRef(BarChartWidget);
+
+//#endregion
+//#region src/UI/widgets/library/BarChartWidget/index.ts
+var BarChartWidget_exports = /* @__PURE__ */ __export({
+	default: () => BarChartWidget_default,
+	layout: () => layout,
+	params: () => params
+});
+
+//#endregion
+export { params as i, BarChartWidget_default as n, layout as r, BarChartWidget_exports as t };
+//# sourceMappingURL=BarChartWidget-CQLrWqGJ.js.map

package/dist/BarChartWidget-CQLrWqGJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChartWidget-CQLrWqGJ.js","names":["params","WidgetCard","FluentStatsSnippet"],"sources":["../src/UI/widgets/library/BarChartWidget/BarChartWidget.jsx","../src/UI/widgets/library/BarChartWidget/index.ts"],"sourcesContent":["import React, { forwardRef, Fragment } from 'react'\nimport { Grid, Box, Typography } from '@material-ui/core'\nimport { MuiVegaLite } from '@material-vega/material-ui'\nimport WidgetCard from '../../WidgetCard'\nimport FluentStatsSnippet from '../../FluentComponents/atoms/FluentStatsSnippet'\nimport { convertISODate } from '../../utils/ConvertISODate'\n\nexport const layout = {\n  w: { default: 2, min: 0, max: 4 },\n  h: { default: 2, min: 0, max: 4 }\n}\n\nexport const params = {\n  mode: {\n    defaultValue: 'chart'\n  }\n}\n\nconst BarChartWidget = (props, ref) => {\n  const { children, params, setParam, ...other } = props\n  const { mockData, apiUrl, theme, dateRange } = params\n\n  return (\n    <WidgetCard\n      ref={ref}\n      {...other}\n      title={mockData?.title}\n      theme={theme && theme}\n    >\n      {mockData ? (\n        <>\n          {dateRange && (\n            <Typography gutterBottom variant='caption' component='h3'>\n              From: {convertISODate(dateRange.from)} to:{' '}\n              {convertISODate(dateRange.to)}\n            </Typography>\n          )}\n          {mockData?.stats && (\n            <Grid container>\n              {mockData?.stats.map((stat) => (\n                <Grid item xs={3} key={stat.label}>\n                  <FluentStatsSnippet\n                    label={stat.label}\n                    amount={stat.currentValue}\n                    prevAmount={stat.previousValue}\n                  />\n                </Grid>\n              ))}\n            </Grid>\n          )}\n          <Box clone flex={1} mt={1} overflow='hidden'>\n            <MuiVegaLite\n              width='container'\n              height='container'\n              autoResize='true'\n              variant='verticalBarChart'\n              spec={{\n                $schema: 'https://vega.github.io/schema/vega-lite/v4.json',\n                data: {\n                  values: mockData?.data\n                },\n                mark: 'bar',\n                encoding: {\n                  x: {\n                    field: 'xAxis',\n                    type: mockData?.xAxisType,\n                    axis: {\n                      ticks: false\n                    },\n                    band: 0.5\n                  },\n                  y: {\n                    field: 'yAxis',\n                    type: mockData?.yAxisType,\n                    axis: {\n                      format: mockData?.yAxisFormat\n                    }\n                  }\n                }\n              }}\n            />\n          </Box>\n          {children}\n        </>\n      ) : (\n        <Typography variant='subtitle2'>\n          Could not retrieve widget data. Please contact support.\n        </Typography>\n      )}\n    </WidgetCard>\n  )\n}\n\nexport default forwardRef(BarChartWidget)\n","export * from './BarChartWidget';\nexport {default} from './BarChartWidget';\n"],"mappings":";;;;;;;;;AAOA,MAAa,SAAS;CACpB,GAAG;EAAE,SAAS;EAAG,KAAK;EAAG,KAAK;EAAG;CACjC,GAAG;EAAE,SAAS;EAAG,KAAK;EAAG,KAAK;EAAG;CAClC;AAED,MAAa,SAAS,EACpB,MAAM,EACJ,cAAc,SACf,EACF;AAED,MAAM,kBAAkB,OAAO,QAAQ;CACrC,MAAM,EAAE,UAAU,kBAAQ,UAAU,GAAG,UAAU;CACjD,MAAM,EAAE,UAAU,QAAQ,OAAO,cAAcA;AAE/C,QACE,oCAACC;EACM;EACL,GAAI;EACJ,OAAO,UAAU;EACjB,OAAO,SAAS;IAEf,WACC,0DACG,aACC,oCAAC;EAAW;EAAa,SAAQ;EAAU,WAAU;IAAK,UACjD,eAAe,UAAU,KAAK,EAAC,QAAK,KAC1C,eAAe,UAAU,GAAG,CAClB,EAEd,UAAU,SACT,oCAAC,QAAK,mBACH,UAAU,MAAM,KAAK,SACpB,oCAAC;EAAK;EAAK,IAAI;EAAG,KAAK,KAAK;IAC1B,oCAACC;EACC,OAAO,KAAK;EACZ,QAAQ,KAAK;EACb,YAAY,KAAK;GACjB,CACG,CACP,CACG,EAET,oCAAC;EAAI;EAAM,MAAM;EAAG,IAAI;EAAG,UAAS;IAClC,oCAAC;EACC,OAAM;EACN,QAAO;EACP,YAAW;EACX,SAAQ;EACR,MAAM;GACJ,SAAS;GACT,MAAM,EACJ,QAAQ,UAAU,MACnB;GACD,MAAM;GACN,UAAU;IACR,GAAG;KACD,OAAO;KACP,MAAM,UAAU;KAChB,MAAM,EACJ,OAAO,OACR;KACD,MAAM;KACP;IACD,GAAG;KACD,OAAO;KACP,MAAM,UAAU;KAChB,MAAM,EACJ,QAAQ,UAAU,aACnB;KACF;IACF;GACF;GACD,CACE,EACL,SACA,GAEH,oCAAC,cAAW,SAAQ,eAAY,0DAEnB,CAEJ;;AAIjB,6BAAe,WAAW,eAAe"}

package/dist/BaseTreeMenu-CbenTnfO.js

@@ -0,0 +1,358 @@
+import { t as FluentIcon } from "./FluentIcon-DQ6nSDJg.js";
+import { I as TreeViewModeEnums, v as NodeActionTriggerEnums } from "./unitySystemEnums-e5F9Jr7m.js";
+import { t as UnityFluentIcon } from "./UnityFluentIcon-DrASIcTF.js";
+import { S as getIconFromName, V as searchTree, d as findAllParentIds, w as getNodeIdForRightBorder } from "./TreeUtilities-kiPupulY.js";
+import { t as getUnityIconFromName } from "./UnityIconLibrary-CjIwzfjv.js";
+import { t as StatusChip } from "./StatusChip-DZAN88VU.js";
+import { t as AggregateChip } from "./AggregateChip-6GSEsL_A.js";
+import React, { useCallback, useEffect, useRef, 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/treeMenu/BaseTreeMenuItem.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.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"
+	},
+	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",
+		alignItems: "center",
+		justifyContent: "center",
+		borderRadius: 50,
+		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),
+		border: (props) => props.iconColor ? `1px solid ${darken(props.iconColor, .1)}` : `1px solid ${theme.palette.secondary.main}`,
+		backgroundColor: "#ffffff"
+	}
+}));
+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$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" : "medium",
+			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))), 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,
+			icon: conditionalIconType === "unity" ? getUnityIconFromName(conditionalIconName) : getIconFromName(conditionalIconName),
+			style: { color: conditionalIconColor }
+		})))))),
+		onLabelClick: handleOnLabelClick,
+		classes: {
+			root: classes.root,
+			content: classes.content
+		},
+		...other
+	});
+};
+
+//#endregion
+//#region src/treeMenu/BaseTreeMenu.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 BaseTreeMenu = (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 firstRender = useRef(true);
+	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?.conditionalIconName || "";
+		let conditionalIconType = node.properties?.conditionalIconName ? node.properties.conditionalIconType : "";
+		let conditionalIconColor = node.properties?.conditionalIconName ? node.properties?.conditionalIconColor : "";
+		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(BaseTreeMenuItem, {
+			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;
+		if (firstRender.current) {
+			let expanded$1 = [];
+			if (tree?.isExpanded) expanded$1.push(tree.id);
+			expanded$1 = expanded$1.concat(getExpandedRecursively(tree[childrenKey]));
+			setExpanded(expanded$1);
+			firstRender.current = false;
+		}
+	}, [
+		getExpandedRecursively,
+		tree,
+		childrenKey
+	]);
+	useEffect(() => {
+		if (!!searchTree(tree, selectedNodeId)) setIsCurrentActiveTree(true);
+		else setIsCurrentActiveTree(false);
+	}, [tree, selectedNodeId]);
+	const treeSelectedId = isCurrentActiveTree && selectedNodeId != null ? String(selectedNodeId) : null;
+	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: treeSelectedId
+	}, tree && renderTree(tree));
+};
+
+//#endregion
+export { BaseTreeMenuItem as n, BaseTreeMenu as t };
+//# sourceMappingURL=BaseTreeMenu-CbenTnfO.js.map