udp-react-enterprise-component-library 25.16.2-beta.1 → 25.16.2

package/dist/mttFunctions-BwD8i0ZG.js

@@ -0,0 +1,248 @@
+import { t as __export } from "./chunk-Bp6m_JJh.js";
+
+//#region src/componentSystems/multiThreadTimeline/functions/mttFunctions.js
+var mttFunctions_exports = /* @__PURE__ */ __export({
+	formatDataWithTimelineCategoryName: () => formatDataWithTimelineCategoryName,
+	formatDataWithTimelineCategoryNameOrderedByDate: () => formatDataWithTimelineCategoryNameOrderedByDate,
+	plotCategoryBar: () => plotCategoryBar,
+	plotX: () => plotX,
+	plotY: () => plotY
+});
+const plotY = (item, data, nodeWidth) => {
+	const plotDate = [item];
+	let dates = [];
+	data && data.map((item$1) => {
+		dates.push(item$1.date);
+	});
+	let unique = [...new Set(dates)];
+	const mappedToObjects = unique.map(function(value) {
+		return { date: value };
+	});
+	const plots = [];
+	for (let i = 1; i <= unique.length; i++) plots.push(i);
+	return mappedToObjects.map((o, i) => ({
+		...o,
+		plots: plots[i] || null
+	})).filter(({ date }) => plotDate.includes(date)).map(({ plots: plots$1 }) => plots$1).map((item$1) => {
+		return item$1;
+	}) * nodeWidth - nodeWidth;
+};
+const plotX = (timeline, subThread, data, threadHeight) => {
+	const xLine = data && data.map((item) => {
+		return item.timeline.toString() + "." + item.subThread.toString();
+	});
+	const rowIndex = [...new Set(xLine)].reduce(function(s, a) {
+		s.push({ thread: a });
+		return s;
+	}, []);
+	const concatIndex = timeline + "." + subThread;
+	const results = rowIndex.map((v, index) => ({
+		...v,
+		rowIndex: index
+	})).filter(function(entry) {
+		return entry.thread === concatIndex;
+	});
+	return results[0] && results[0].rowIndex * threadHeight;
+};
+function formatDate(date) {
+	return new Date(date).toLocaleDateString("en-US");
+}
+function getChildObject(childObj) {
+	const date = formatDate(childObj.date);
+	return {
+		date,
+		details: {
+			id: childObj.id,
+			eventTypeID: childObj.eventTypeID,
+			primaryContextID: childObj.primaryContextID,
+			secondaryContextID: childObj.secondaryContextID,
+			date,
+			transactionType: childObj.transactionType,
+			description: childObj.description,
+			shortDescription: childObj.shortDescription,
+			data2: childObj.data2,
+			data1: childObj.data1,
+			data3: childObj.data3,
+			serializeFields: childObj.serializeFields,
+			mttEventsNewEventType: childObj.mttEventsNewEventType,
+			threadId: childObj.threadId,
+			timelineCategory: childObj.timelineCategory,
+			color: childObj.color,
+			icon: childObj.icon
+		}
+	};
+}
+function getEventsObjects(object, timeline) {
+	return object.map((obj) => {
+		const date = formatDate(obj.date);
+		return {
+			date,
+			details: {
+				id: obj.id,
+				eventTypeID: obj.eventTypeID,
+				primaryContextID: obj.primaryContextID,
+				secondaryContextID: obj.secondaryContextID,
+				date,
+				transactionType: obj.transactionType,
+				description: obj.description,
+				shortDescription: obj.shortDescription,
+				data2: obj.data2,
+				data1: obj.data1,
+				data3: obj.data3,
+				serializeFields: obj.serializeFields,
+				mttEventsNewEventType: obj.mttEventsNewEventType,
+				threadId: obj.threadId,
+				timelineCategory: obj.timelineCategory,
+				timeline,
+				color: obj.color,
+				icon: obj.icon
+			}
+		};
+	});
+}
+const formatDataWithTimelineCategoryName = (object) => {
+	let tempObject = [];
+	object.forEach((obj) => {
+		obj.events.forEach((event) => {
+			const foundThreadEvent = (obj.mttThreadMttThreadEvents || obj.udpMttThreadUdpMttThreadEvents || []).find((threadEvent) => event.transactionType?.toString() === threadEvent.transactionType?.toString());
+			if (foundThreadEvent) {
+				event.color = foundThreadEvent.color === null || foundThreadEvent.color === void 0 || foundThreadEvent.color === "" || foundThreadEvent.color === " " ? obj.color : foundThreadEvent.color;
+				event.icon = foundThreadEvent.icon;
+			} else {
+				event.color = obj.color;
+				event.icon = obj.iconID;
+			}
+		});
+	});
+	object.forEach((obj) => {
+		let existsTimelineFlag = false;
+		const mttThreadMttConfig = obj.mttThreadMttConfig || obj.udpMttThreadUdpMttConfig;
+		tempObject.forEach((tmpObj) => {
+			if (mttThreadMttConfig?.sequence === tmpObj.timeline) {
+				tmpObj.dates.push(...getEventsObjects(obj.events, mttThreadMttConfig?.sequence));
+				existsTimelineFlag = true;
+			}
+		});
+		if (!existsTimelineFlag) tempObject.push({
+			timeline: mttThreadMttConfig?.sequence,
+			timelineCategoryName: mttThreadMttConfig?.name,
+			color: obj.color,
+			iconID: obj.iconID,
+			dates: getEventsObjects(obj.events, mttThreadMttConfig?.sequence)
+		});
+	});
+	let cleanObjects = [];
+	tempObject.forEach((obj) => {
+		let subThreadCount = 1;
+		obj.dates.forEach((dateObj) => {
+			let existsSubThreadFlag = false;
+			const foundIndex = cleanObjects.findIndex((searchObj) => {
+				return searchObj.timeline === dateObj.details.timeline && searchObj.dates[0].details.secondaryContextID === dateObj.details.secondaryContextID && formatDate(searchObj.date) === formatDate(dateObj.details.date);
+			});
+			if (foundIndex > -1) {
+				cleanObjects[foundIndex].dates.push(getChildObject(dateObj.details));
+				existsSubThreadFlag = true;
+			} else {
+				const foundIndex2 = cleanObjects.findIndex((searchObj) => searchObj.timeline === dateObj.details.timeline && searchObj.dates[0].details.secondaryContextID === dateObj.details.secondaryContextID && formatDate(searchObj.date) !== formatDate(dateObj.details.date));
+				if (foundIndex2 > -1) {
+					cleanObjects.push({
+						timeline: cleanObjects[foundIndex2].timeline,
+						subThread: cleanObjects[foundIndex2].subThread,
+						timelineCategoryName: cleanObjects[foundIndex2].timelineCategoryName,
+						color: dateObj?.details?.color ? dateObj.details.color : cleanObjects[foundIndex2].color,
+						iconID: dateObj?.details?.icon ? dateObj.details.icon : cleanObjects[foundIndex2].iconID,
+						date: formatDate(dateObj.details.date),
+						dates: [getChildObject(dateObj.details)]
+					});
+					existsSubThreadFlag = true;
+				}
+			}
+			if (!existsSubThreadFlag) cleanObjects.push({
+				timeline: obj.timeline,
+				subThread: subThreadCount++,
+				timelineCategoryName: obj.timelineCategoryName,
+				color: dateObj?.details?.color ? dateObj.details.color : obj.color,
+				iconID: dateObj?.details?.icon ? dateObj.details.icon : obj.iconID,
+				date: formatDate(dateObj.details.date),
+				dates: [getChildObject(dateObj.details)]
+			});
+		});
+	});
+	return cleanObjects;
+};
+const plotCategoryBar = (timelineNumber, subThread, data, timeline, threadHeight) => {
+	const xLine = data && formatDataWithTimelineCategoryName(timeline).map((item) => {
+		return item.timeline.toString() + "." + item.subThread.toString();
+	});
+	const rowIndex = [...new Set(xLine)].reduce(function(s, a) {
+		s.push({ thread: a });
+		return s;
+	}, []);
+	const concatIndex = timelineNumber + "." + subThread;
+	const results = rowIndex.map((v, index) => ({
+		...v,
+		rowIndex: index + 1
+	})).filter(function(entry) {
+		return entry.thread === concatIndex;
+	});
+	return (results[0] && results[0].rowIndex * threadHeight) - threadHeight;
+};
+function orderByDate(a, b) {
+	if (new Date(a.date) < new Date(b.date)) return -1;
+	if (new Date(a.date) > new Date(b.date)) return 1;
+	return 0;
+}
+function orderByDateTimeline(a, b) {
+	if (!a?.length || !b?.length) return 0;
+	if (new Date(a[0].date) < new Date(b[0].date)) return -1;
+	if (new Date(a[0].date) > new Date(b[0].date)) return 1;
+	return 0;
+}
+function orderByDateSubThread(a, b) {
+	if (!a?.length || !b?.length) return 0;
+	if (new Date(a[0].date) < new Date(b[0].date)) return -1;
+	if (new Date(a[0].date) > new Date(b[0].date)) return 1;
+	return 0;
+}
+const formatDataWithTimelineCategoryNameOrderedByDate = (inputData) => {
+	let data = formatDataWithTimelineCategoryName(inputData).sort(orderByDate);
+	let maxElement = 1;
+	data.forEach((obj) => {
+		if (maxElement < obj.timeline) maxElement = obj.timeline;
+	});
+	let objArr = [...Array(maxElement)].map((e) => e = []);
+	data.forEach((obj) => {
+		objArr.forEach((val, index) => {
+			if (obj.timeline === index + 1) objArr[index].push(obj);
+		});
+	});
+	objArr.sort(orderByDateTimeline);
+	let objArr2 = [...Array(maxElement)].map((e) => e = []);
+	let maxElements;
+	objArr.forEach((objs, i) => {
+		maxElements = 1;
+		objs.forEach((obj) => {
+			if (maxElements < obj.subThread) maxElements = obj.subThread;
+		});
+		objArr2[i] = maxElements;
+	});
+	let objArr3 = [...Array(maxElement)].map((e) => e = []);
+	objArr2.forEach((obj, index) => objArr3[index] = [...Array(obj)].map((e) => e = []));
+	objArr.forEach((ob) => {
+		ob.forEach((o) => {
+			objArr3.forEach((objs, j) => {
+				objs.forEach((obj, k) => {
+					if (o.timeline === j + 1 && o.subThread === k + 1) obj.push(o);
+				});
+			});
+		});
+	});
+	objArr3.forEach((objs) => {
+		objs.sort(orderByDateSubThread).forEach((obj, index) => obj.forEach((obj$1) => obj$1.subThread = index + 1));
+	});
+	return objArr3.flat(2);
+};
+
+//#endregion
+export { plotX as a, plotCategoryBar as i, formatDataWithTimelineCategoryNameOrderedByDate as n, plotY as o, mttFunctions_exports as r, formatDataWithTimelineCategoryName as t };
+//# sourceMappingURL=mttFunctions-BwD8i0ZG.js.map

package/dist/mttFunctions-BwD8i0ZG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mttFunctions-BwD8i0ZG.js","names":["item","plots"],"sources":["../src/componentSystems/multiThreadTimeline/functions/mttFunctions.js"],"sourcesContent":["// Plot Y\nexport const plotY = (item, data, nodeWidth) => {\n  const plotDate = [item];\n\n  //let demoDates = [\"5/6/2022\",\"5/6/2022\",\"5/7/2022\",\"5/8/2022\",]\n  let dates = [];\n  data &&\n    data.map((item) => {\n      dates.push(item.date);\n    });\n\n  let unique = [...new Set(dates)];\n\n  const mappedToObjects = unique.map(function (value) {\n    return { date: value };\n  });\n\n  const plots = [];\n  for (let i = 1; i <= unique.length; i++) {\n    plots.push(i);\n  }\n\n  let mergePlots = mappedToObjects.map((o, i) => ({\n    ...o,\n    plots: plots[i] || null\n  }));\n\n  const res = mergePlots\n    .filter(({ date }) => plotDate.includes(date))\n    .map(({ plots }) => plots);\n\n  //console.log('res', mergePlots.slice(-1).pop().plots);\n  //const width = mergePlots.slice(-1).pop().plots;\n\n  const order = res.map((item) => {\n    return item;\n  });\n  const plot = order * nodeWidth - nodeWidth;\n\n  return plot;\n};\n\n// Plot X\nexport const plotX = (timeline, subThread, data, threadHeight) => {\n  const xLine =\n    data &&\n    data.map((item) => {\n      return item.timeline.toString() + '.' + item.subThread.toString();\n    });\n\n  let unique = [...new Set(xLine)];\n\n  const rowIndex = unique.reduce(function (s, a) {\n    s.push({ thread: a });\n    return s;\n  }, []);\n\n  const concatIndex = timeline + '.' + subThread;\n  const result = rowIndex.map((v, index) => ({ ...v, rowIndex: index }));\n  const results = result.filter(function (entry) {\n    return entry.thread === concatIndex;\n  });\n  const xplot = results[0] && results[0].rowIndex * threadHeight;\n  return xplot;\n};\n\nfunction formatDate(date) {\n  return new Date(date).toLocaleDateString('en-US');\n}\n\n// function getChildObject(childObj) {\n//   const date = formatDate(childObj.date);\n//   return {\n//     date: date,\n//     details: {\n//       id: childObj.id,\n//       eventTypeID: childObj.eventTypeID,\n//       contextKey: childObj.contextKey,\n//       secondaryContextID: childObj.secondaryContextID,\n//       date: date,\n//       transactionType: childObj.transactionType,\n//       description: childObj.description,\n//       shortDescription: childObj.shortDescription,\n//       status: childObj.status,\n//       data: childObj.data,\n//       user: childObj.user,\n//       serializeFields: childObj.serializeFields,\n//       mttEventsNewEventType: childObj.mttEventsNewEventType,\n//       threadId: childObj.threadId,\n//       timelineCategory: childObj.timelineCategory,\n//     },\n//   };\n// }\n\nfunction getChildObject(childObj) {\n  const date = formatDate(childObj.date);\n  return {\n    date: date,\n    details: {\n      id: childObj.id,\n      eventTypeID: childObj.eventTypeID,\n      primaryContextID: childObj.primaryContextID,\n      secondaryContextID: childObj.secondaryContextID,\n      date: date,\n      transactionType: childObj.transactionType,\n      description: childObj.description,\n      shortDescription: childObj.shortDescription,\n      data2: childObj.data2,\n      data1: childObj.data1,\n      data3: childObj.data3,\n      serializeFields: childObj.serializeFields,\n      mttEventsNewEventType: childObj.mttEventsNewEventType,\n      threadId: childObj.threadId,\n      timelineCategory: childObj.timelineCategory,\n      color: childObj.color,\n      icon: childObj.icon\n    }\n  };\n}\n\n// function getEventsObjects(object, timeline) {\n//   return object.map(obj => {\n//     const date = formatDate(obj.date);\n//     return {\n//       date: date,\n//       details: {\n//         id: obj.id,\n//         eventTypeID: obj.eventTypeID,\n//         contextKey: obj.contextKey,\n//         secondaryContextID: obj.secondaryContextID,\n//         date: date,\n//         transactionType: obj.transactionType,\n//         description: obj.description,\n//         shortDescription: obj.shortDescription,\n//         status: obj.status,\n//         data: obj.data,\n//         user: obj.user,\n//         serializeFields: obj.serializeFields,\n//         mttEventsNewEventType: obj.mttEventsNewEventType,\n//         threadId: obj.threadId,\n//         timelineCategory: obj.timelineCategory,\n//         timeline: timeline,\n//       },\n//     };\n//   });\n// }\n\nfunction getEventsObjects(object, timeline) {\n  return object.map((obj) => {\n    const date = formatDate(obj.date);\n    return {\n      date: date,\n      details: {\n        id: obj.id,\n        eventTypeID: obj.eventTypeID,\n        primaryContextID: obj.primaryContextID,\n        secondaryContextID: obj.secondaryContextID,\n        date: date,\n        transactionType: obj.transactionType,\n        description: obj.description,\n        shortDescription: obj.shortDescription,\n        data2: obj.data2,\n        data1: obj.data1,\n        data3: obj.data3,\n        serializeFields: obj.serializeFields,\n        mttEventsNewEventType: obj.mttEventsNewEventType,\n        threadId: obj.threadId,\n        timelineCategory: obj.timelineCategory,\n        timeline: timeline,\n        color: obj.color,\n        icon: obj.icon\n      }\n    };\n  });\n}\n\nexport const formatDataWithTimelineCategoryName = (object) => {\n  let tempObject = [];\n\n  object.forEach((obj) => {\n    obj.events.forEach((event) => {\n      const threadEvents =\n        obj.mttThreadMttThreadEvents ||\n        obj.udpMttThreadUdpMttThreadEvents ||\n        [];\n      const foundThreadEvent = threadEvents.find(\n        (threadEvent) =>\n          event.transactionType?.toString() ===\n          threadEvent.transactionType?.toString()\n      );\n      if (foundThreadEvent) {\n        event.color =\n          foundThreadEvent.color === null ||\n          foundThreadEvent.color === undefined ||\n          foundThreadEvent.color === '' ||\n          foundThreadEvent.color === ' '\n            ? obj.color\n            : foundThreadEvent.color;\n        event.icon = foundThreadEvent.icon;\n      } else {\n        event.color = obj.color;\n        event.icon = obj.iconID;\n      }\n    });\n  });\n\n  object.forEach((obj) => {\n    let existsTimelineFlag = false;\n    const mttThreadMttConfig =\n      obj.mttThreadMttConfig || obj.udpMttThreadUdpMttConfig;\n    tempObject.forEach((tmpObj) => {\n      if (mttThreadMttConfig?.sequence === tmpObj.timeline) {\n        tmpObj.dates.push(\n          ...getEventsObjects(obj.events, mttThreadMttConfig?.sequence)\n        );\n        existsTimelineFlag = true;\n      }\n    });\n    if (!existsTimelineFlag) {\n      tempObject.push({\n        timeline: mttThreadMttConfig?.sequence,\n        timelineCategoryName: mttThreadMttConfig?.name,\n        color: obj.color,\n        iconID: obj.iconID,\n        dates: getEventsObjects(obj.events, mttThreadMttConfig?.sequence)\n      });\n    }\n  });\n\n  let cleanObjects = [];\n  tempObject.forEach((obj) => {\n    let subThreadCount = 1;\n    obj.dates.forEach((dateObj) => {\n      let existsSubThreadFlag = false;\n      const foundIndex = cleanObjects.findIndex((searchObj) => {\n        return (\n          searchObj.timeline === dateObj.details.timeline &&\n          searchObj.dates[0].details.secondaryContextID ===\n            dateObj.details.secondaryContextID &&\n          formatDate(searchObj.date) === formatDate(dateObj.details.date)\n        );\n      });\n      if (foundIndex > -1) {\n        cleanObjects[foundIndex].dates.push(getChildObject(dateObj.details));\n        existsSubThreadFlag = true;\n      } else {\n        const foundIndex2 = cleanObjects.findIndex(\n          (searchObj) =>\n            searchObj.timeline === dateObj.details.timeline &&\n            searchObj.dates[0].details.secondaryContextID ===\n              dateObj.details.secondaryContextID &&\n            formatDate(searchObj.date) !== formatDate(dateObj.details.date)\n        );\n        if (foundIndex2 > -1) {\n          cleanObjects.push({\n            timeline: cleanObjects[foundIndex2].timeline,\n            subThread: cleanObjects[foundIndex2].subThread,\n            timelineCategoryName:\n              cleanObjects[foundIndex2].timelineCategoryName,\n            color: dateObj?.details?.color\n              ? dateObj.details.color\n              : cleanObjects[foundIndex2].color,\n            iconID: dateObj?.details?.icon\n              ? dateObj.details.icon\n              : cleanObjects[foundIndex2].iconID,\n            date: formatDate(dateObj.details.date),\n            dates: [getChildObject(dateObj.details)]\n          });\n          existsSubThreadFlag = true;\n        }\n      }\n      if (!existsSubThreadFlag) {\n        cleanObjects.push({\n          timeline: obj.timeline,\n          subThread: subThreadCount++,\n          timelineCategoryName: obj.timelineCategoryName,\n          color: dateObj?.details?.color ? dateObj.details.color : obj.color,\n          iconID: dateObj?.details?.icon ? dateObj.details.icon : obj.iconID,\n          date: formatDate(dateObj.details.date),\n          dates: [getChildObject(dateObj.details)]\n        });\n      }\n    });\n  });\n  return cleanObjects;\n};\n\n// Plot category bar\nexport const plotCategoryBar = (\n  timelineNumber,\n  subThread,\n  data,\n  timeline,\n  threadHeight\n) => {\n  const xLine =\n    data &&\n    formatDataWithTimelineCategoryName(timeline).map((item) => {\n      return item.timeline.toString() + '.' + item.subThread.toString();\n    });\n\n  let unique = [...new Set(xLine)];\n\n  const rowIndex = unique.reduce(function (s, a) {\n    s.push({ thread: a });\n    return s;\n  }, []);\n\n  const concatIndex = timelineNumber + '.' + subThread;\n  const result = rowIndex.map((v, index) => ({ ...v, rowIndex: index + 1 }));\n  const results = result.filter(function (entry) {\n    return entry.thread === concatIndex;\n  });\n  const xplot =\n    (results[0] && results[0].rowIndex * threadHeight) - threadHeight;\n  return xplot;\n};\n\nfunction orderByDate(a, b) {\n  if (new Date(a.date) < new Date(b.date)) {\n    return -1;\n  }\n  if (new Date(a.date) > new Date(b.date)) {\n    return 1;\n  }\n  return 0;\n}\n\nfunction orderByDateTimeline(a, b) {\n  if (!a?.length || !b?.length) {\n    return 0;\n  }\n  if (new Date(a[0].date) < new Date(b[0].date)) {\n    return -1;\n  }\n  if (new Date(a[0].date) > new Date(b[0].date)) {\n    return 1;\n  }\n  return 0;\n}\n\nfunction orderByDateSubThread(a, b) {\n  if (!a?.length || !b?.length) {\n    return 0;\n  }\n  if (new Date(a[0].date) < new Date(b[0].date)) {\n    return -1;\n  }\n  if (new Date(a[0].date) > new Date(b[0].date)) {\n    return 1;\n  }\n  return 0;\n}\n\nexport const formatDataWithTimelineCategoryNameOrderedByDate = (inputData) => {\n  let data = formatDataWithTimelineCategoryName(inputData).sort(orderByDate);\n  let maxElement = 1;\n  data.forEach((obj) => {\n    if (maxElement < obj.timeline) maxElement = obj.timeline;\n  });\n  let objArr = [...Array(maxElement)].map((e) => (e = []));\n  data.forEach((obj) => {\n    objArr.forEach((val, index) => {\n      if (obj.timeline === index + 1) {\n        objArr[index].push(obj);\n      }\n    });\n  });\n\n  objArr.sort(orderByDateTimeline);\n  let objArr2 = [...Array(maxElement)].map((e) => (e = []));\n  let maxElements;\n  objArr.forEach((objs, i) => {\n    maxElements = 1;\n    objs.forEach((obj) => {\n      if (maxElements < obj.subThread) maxElements = obj.subThread;\n    });\n    objArr2[i] = maxElements;\n  });\n  let objArr3 = [...Array(maxElement)].map((e) => (e = []));\n  objArr2.forEach(\n    (obj, index) => (objArr3[index] = [...Array(obj)].map((e) => (e = [])))\n  );\n  objArr.forEach((ob) => {\n    ob.forEach((o) => {\n      objArr3.forEach((objs, j) => {\n        objs.forEach((obj, k) => {\n          if (o.timeline === j + 1 && o.subThread === k + 1) {\n            obj.push(o);\n          }\n        });\n      });\n    });\n  });\n  objArr3.forEach((objs) => {\n    objs\n      .sort(orderByDateSubThread)\n      .forEach((obj, index) =>\n        obj.forEach((obj) => (obj.subThread = index + 1))\n      );\n  });\n  return objArr3.flat(2);\n};\n"],"mappings":"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"}

package/dist/navigation-DuSgYkUA.js

@@ -0,0 +1,144 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { AdminALogo32Icon, BugIcon, ChevronDownIcon, ChevronRightIcon, CloudUploadIcon, ContentFeedIcon, MessageIcon, OfficeFormsLogo16Icon, RawSourceIcon, ViewDashboardIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+import { makeStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+import TreeView from "@material-ui/lab/TreeView";
+import TreeItem from "@material-ui/lab/TreeItem";
+
+//#region src/UI/navigation/FluentSideNav.jsx
+const useTreeItemStyles = makeStyles((theme) => ({
+	root: {
+		color: theme.palette.text.secondary,
+		"&:hover > $content": { backgroundColor: theme.palette.action.hover },
+		"&:focus > $content, &$selected > $content": {
+			backgroundColor: `var(--tree-view-bg-color, ${theme.palette.grey[300]})`,
+			color: "var(--tree-view-color)"
+		},
+		"&:focus > $marker, &$selected > $marker": {
+			backgroundColor: `var(--tree-view-bg-color, ${theme.palette.grey[300]})`,
+			color: "var(--tree-view-color)"
+		},
+		"&:focus > $content $label, &:hover > $content $label, &$selected > $content $label": { backgroundColor: "transparent" }
+	},
+	content: {
+		color: theme.palette.text.secondary,
+		paddingRight: theme.spacing(1),
+		paddingLeft: theme.spacing(1),
+		fontWeight: theme.typography.fontWeightMedium,
+		"$expanded > &": { fontWeight: theme.typography.fontWeightRegular }
+	},
+	group: {
+		marginLeft: 0,
+		"& $content": { paddingLeft: theme.spacing(2) }
+	},
+	expanded: {},
+	selected: {},
+	label: {
+		fontWeight: "inherit",
+		color: "inherit"
+	},
+	labelRoot: {
+		display: "flex",
+		alignItems: "center",
+		padding: theme.spacing(1.5, 0)
+	},
+	labelIcon: {
+		marginRight: theme.spacing(2.5),
+		fontSize: 16,
+		color: theme.palette.secondary.main
+	},
+	labelText: {
+		fontWeight: "inherit",
+		fontSize: 14,
+		flexGrow: 1
+	}
+}));
+const StyledTreeItem = (props) => {
+	const classes = useTreeItemStyles();
+	const { labelText, labelIcon: LabelIcon$1, labelInfo, color, bgColor, to, children,...other } = props;
+	return /* @__PURE__ */ React.createElement(Link, {
+		to,
+		style: { textDecoration: "none" }
+	}, /* @__PURE__ */ React.createElement(TreeItem, {
+		label: /* @__PURE__ */ React.createElement("div", { className: classes.labelRoot }, LabelIcon$1 && /* @__PURE__ */ React.createElement(LabelIcon$1, {
+			color: "inherit",
+			className: classes.labelIcon
+		}), /* @__PURE__ */ React.createElement(Typography, {
+			variant: "body2",
+			className: classes.labelText
+		}, labelText), /* @__PURE__ */ React.createElement(Typography, {
+			variant: "caption",
+			color: "inherit"
+		}, labelInfo)),
+		style: {
+			"--tree-view-color": color,
+			"--tree-view-bg-color": bgColor
+		},
+		classes: {
+			root: classes.root,
+			content: classes.content,
+			expanded: classes.expanded,
+			selected: classes.selected,
+			group: classes.group,
+			label: classes.label
+		},
+		...other,
+		children
+	}));
+};
+StyledTreeItem.propTypes = {
+	bgColor: PropTypes.string,
+	color: PropTypes.string,
+	labelIcon: PropTypes.elementType,
+	labelInfo: PropTypes.string,
+	labelText: PropTypes.string.isRequired
+};
+const useStyles = makeStyles({ root: {
+	height: 264,
+	flexGrow: 1,
+	maxWidth: 280
+} });
+const FluentSideNav = (props) => {
+	const classes = useStyles();
+	const { data } = props;
+	const renderedArray = data.map((nodes) => {
+		const icons = {
+			ViewDashboardIcon,
+			AdminALogo32Icon,
+			MessageIcon,
+			ContentFeedIcon,
+			RawSourceIcon,
+			BugIcon,
+			OfficeFormsLogo16Icon,
+			CloudUploadIcon
+		};
+		return /* @__PURE__ */ React.createElement(StyledTreeItem, {
+			key: nodes.nodeId,
+			nodeId: nodes.nodeId,
+			labelText: nodes.labelText,
+			labelIcon: typeof nodes.labelIcon === "string" ? icons[nodes.labelIcon] : nodes.labelIcon,
+			to: nodes.to !== "" && nodes.to,
+			children: nodes.children && nodes.children.map((nodes$1) => {
+				return /* @__PURE__ */ React.createElement(StyledTreeItem, {
+					key: nodes$1.nodeId,
+					nodeId: nodes$1.nodeId,
+					labelText: nodes$1.labelText,
+					labelIcon: typeof nodes$1.labelIcon === "string" ? icons[nodes$1.labelIcon] : nodes$1.labelIcon,
+					to: nodes$1.to !== "" && nodes$1.to
+				});
+			})
+		});
+	});
+	return /* @__PURE__ */ React.createElement(TreeView, {
+		className: classes.root,
+		defaultCollapseIcon: /* @__PURE__ */ React.createElement(ChevronDownIcon, null),
+		defaultExpandIcon: /* @__PURE__ */ React.createElement(ChevronRightIcon, null),
+		defaultEndIcon: /* @__PURE__ */ React.createElement("div", { style: { width: 24 } })
+	}, renderedArray);
+};
+
+//#endregion
+export { FluentSideNav as t };
+//# sourceMappingURL=navigation-DuSgYkUA.js.map

package/dist/navigation-DuSgYkUA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-DuSgYkUA.js","names":["LabelIcon","nodes"],"sources":["../src/UI/navigation/FluentSideNav.jsx"],"sourcesContent":["import React from 'react'\nimport PropTypes from 'prop-types'\nimport { makeStyles } from '@material-ui/core/styles'\nimport TreeView from '@material-ui/lab/TreeView'\nimport TreeItem from '@material-ui/lab/TreeItem'\nimport Typography from '@material-ui/core/Typography'\nimport {\n  ChevronDownIcon,\n  ChevronRightIcon,\n  ViewDashboardIcon,\n  AdminALogo32Icon,\n  MessageIcon,\n  ContentFeedIcon,\n  RawSourceIcon,\n  BugIcon,\n  OfficeFormsLogo16Icon,\n  CloudUploadIcon\n} from '@fluentui/react-icons'\nimport { Link } from 'react-router-dom'\n\nconst useTreeItemStyles = makeStyles((theme) => ({\n  root: {\n    color: theme.palette.text.secondary,\n    '&:hover > $content': {\n      backgroundColor: theme.palette.action.hover\n    },\n    '&:focus > $content, &$selected > $content': {\n      backgroundColor: `var(--tree-view-bg-color, ${theme.palette.grey[300]})`,\n      color: 'var(--tree-view-color)'\n    },\n    '&:focus > $marker, &$selected > $marker': {\n      backgroundColor: `var(--tree-view-bg-color, ${theme.palette.grey[300]})`,\n      color: 'var(--tree-view-color)'\n    },\n    '&:focus > $content $label, &:hover > $content $label, &$selected > $content $label': {\n      backgroundColor: 'transparent'\n    }\n  },\n  content: {\n    color: theme.palette.text.secondary,\n    paddingRight: theme.spacing(1),\n    paddingLeft: theme.spacing(1),\n    fontWeight: theme.typography.fontWeightMedium,\n    '$expanded > &': {\n      fontWeight: theme.typography.fontWeightRegular\n    }\n  },\n  group: {\n    marginLeft: 0,\n    '& $content': {\n      paddingLeft: theme.spacing(2)\n    }\n  },\n  expanded: {},\n  selected: {},\n  label: {\n    fontWeight: 'inherit',\n    color: 'inherit'\n  },\n  labelRoot: {\n    display: 'flex',\n    alignItems: 'center',\n    padding: theme.spacing(1.5, 0)\n  },\n  labelIcon: {\n    marginRight: theme.spacing(2.5),\n    fontSize: 16,\n    color: theme.palette.secondary.main\n  },\n  labelText: {\n    fontWeight: 'inherit',\n    fontSize: 14,\n    flexGrow: 1\n  }\n}))\n\nconst StyledTreeItem = (props) => {\n  const classes = useTreeItemStyles()\n  const {\n    labelText,\n    labelIcon: LabelIcon,\n    labelInfo,\n    color,\n    bgColor,\n    to,\n    children,\n    ...other\n  } = props\n\n  return (\n    <Link to={to} style={{ textDecoration: 'none' }}>\n      <TreeItem\n        label={\n          <div className={classes.labelRoot}>\n            {LabelIcon && (\n              <LabelIcon color='inherit' className={classes.labelIcon} />\n            )}\n            <Typography variant='body2' className={classes.labelText}>\n              {labelText}\n            </Typography>\n            <Typography variant='caption' color='inherit'>\n              {labelInfo}\n            </Typography>\n          </div>\n        }\n        style={{\n          '--tree-view-color': color,\n          '--tree-view-bg-color': bgColor\n        }}\n        classes={{\n          root: classes.root,\n          content: classes.content,\n          expanded: classes.expanded,\n          selected: classes.selected,\n          group: classes.group,\n          label: classes.label\n        }}\n        {...other}\n        children={children}\n      />\n    </Link>\n  )\n}\n\nStyledTreeItem.propTypes = {\n  bgColor: PropTypes.string,\n  color: PropTypes.string,\n  labelIcon: PropTypes.elementType,\n  labelInfo: PropTypes.string,\n  labelText: PropTypes.string.isRequired\n}\n\nconst useStyles = makeStyles({\n  root: {\n    height: 264,\n    flexGrow: 1,\n    maxWidth: 280\n  }\n})\n\nexport const FluentSideNav = (props) => {\n  const classes = useStyles()\n  const { data } = props\n\n  const renderedArray = data.map((nodes) => {\n    const icons = {\n      ViewDashboardIcon,\n      AdminALogo32Icon,\n      MessageIcon,\n      ContentFeedIcon,\n      RawSourceIcon,\n      BugIcon,\n      OfficeFormsLogo16Icon,\n      CloudUploadIcon\n    }\n    return (\n      <StyledTreeItem\n        key={nodes.nodeId}\n        nodeId={nodes.nodeId}\n        labelText={nodes.labelText}\n        labelIcon={\n          typeof nodes.labelIcon === 'string'\n            ? icons[nodes.labelIcon]\n            : nodes.labelIcon\n        }\n        to={nodes.to !== '' && nodes.to}\n        children={\n          nodes.children &&\n          nodes.children.map((nodes) => {\n            return (\n              <StyledTreeItem\n                key={nodes.nodeId}\n                nodeId={nodes.nodeId}\n                labelText={nodes.labelText}\n                labelIcon={\n                  typeof nodes.labelIcon === 'string'\n                    ? icons[nodes.labelIcon]\n                    : nodes.labelIcon\n                }\n                to={nodes.to !== '' && nodes.to}\n              />\n            )\n          })\n        }\n      />\n    )\n  })\n\n  return (\n    <TreeView\n      className={classes.root}\n      defaultCollapseIcon={<ChevronDownIcon />}\n      defaultExpandIcon={<ChevronRightIcon />}\n      defaultEndIcon={<div style={{ width: 24 }} />}\n      // defaultExpanded={[{ expanded }]}\n    >\n      {renderedArray}\n    </TreeView>\n  )\n}\n"],"mappings":";;;;;;;;;;AAoBA,MAAM,oBAAoB,YAAY,WAAW;CAC/C,MAAM;EACJ,OAAO,MAAM,QAAQ,KAAK;EAC1B,sBAAsB,EACpB,iBAAiB,MAAM,QAAQ,OAAO,OACvC;EACD,6CAA6C;GAC3C,iBAAiB,6BAA6B,MAAM,QAAQ,KAAK,KAAK;GACtE,OAAO;GACR;EACD,2CAA2C;GACzC,iBAAiB,6BAA6B,MAAM,QAAQ,KAAK,KAAK;GACtE,OAAO;GACR;EACD,sFAAsF,EACpF,iBAAiB,eAClB;EACF;CACD,SAAS;EACP,OAAO,MAAM,QAAQ,KAAK;EAC1B,cAAc,MAAM,QAAQ,EAAE;EAC9B,aAAa,MAAM,QAAQ,EAAE;EAC7B,YAAY,MAAM,WAAW;EAC7B,iBAAiB,EACf,YAAY,MAAM,WAAW,mBAC9B;EACF;CACD,OAAO;EACL,YAAY;EACZ,cAAc,EACZ,aAAa,MAAM,QAAQ,EAAE,EAC9B;EACF;CACD,UAAU,EAAE;CACZ,UAAU,EAAE;CACZ,OAAO;EACL,YAAY;EACZ,OAAO;EACR;CACD,WAAW;EACT,SAAS;EACT,YAAY;EACZ,SAAS,MAAM,QAAQ,KAAK,EAAE;EAC/B;CACD,WAAW;EACT,aAAa,MAAM,QAAQ,IAAI;EAC/B,UAAU;EACV,OAAO,MAAM,QAAQ,UAAU;EAChC;CACD,WAAW;EACT,YAAY;EACZ,UAAU;EACV,UAAU;EACX;CACF,EAAE;AAEH,MAAM,kBAAkB,UAAU;CAChC,MAAM,UAAU,mBAAmB;CACnC,MAAM,EACJ,WACA,WAAWA,aACX,WACA,OACA,SACA,IACA,SACA,GAAG,UACD;AAEJ,QACE,oCAAC;EAAS;EAAI,OAAO,EAAE,gBAAgB,QAAQ;IAC7C,oCAAC;EACC,OACE,oCAAC,SAAI,WAAW,QAAQ,aACrBA,eACC,oCAACA;GAAU,OAAM;GAAU,WAAW,QAAQ;IAAa,EAE7D,oCAAC;GAAW,SAAQ;GAAQ,WAAW,QAAQ;KAC5C,UACU,EACb,oCAAC;GAAW,SAAQ;GAAU,OAAM;KACjC,UACU,CACT;EAER,OAAO;GACL,qBAAqB;GACrB,wBAAwB;GACzB;EACD,SAAS;GACP,MAAM,QAAQ;GACd,SAAS,QAAQ;GACjB,UAAU,QAAQ;GAClB,UAAU,QAAQ;GAClB,OAAO,QAAQ;GACf,OAAO,QAAQ;GAChB;EACD,GAAI;EACM;GACV,CACG;;AAIX,eAAe,YAAY;CACzB,SAAS,UAAU;CACnB,OAAO,UAAU;CACjB,WAAW,UAAU;CACrB,WAAW,UAAU;CACrB,WAAW,UAAU,OAAO;CAC7B;AAED,MAAM,YAAY,WAAW,EAC3B,MAAM;CACJ,QAAQ;CACR,UAAU;CACV,UAAU;CACX,EACF,CAAC;AAEF,MAAa,iBAAiB,UAAU;CACtC,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,SAAS;CAEjB,MAAM,gBAAgB,KAAK,KAAK,UAAU;EACxC,MAAM,QAAQ;GACZ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;AACD,SACE,oCAAC;GACC,KAAK,MAAM;GACX,QAAQ,MAAM;GACd,WAAW,MAAM;GACjB,WACE,OAAO,MAAM,cAAc,WACvB,MAAM,MAAM,aACZ,MAAM;GAEZ,IAAI,MAAM,OAAO,MAAM,MAAM;GAC7B,UACE,MAAM,YACN,MAAM,SAAS,KAAK,YAAU;AAC5B,WACE,oCAAC;KACC,KAAKC,QAAM;KACX,QAAQA,QAAM;KACd,WAAWA,QAAM;KACjB,WACE,OAAOA,QAAM,cAAc,WACvB,MAAMA,QAAM,aACZA,QAAM;KAEZ,IAAIA,QAAM,OAAO,MAAMA,QAAM;MAC7B;KAEJ;IAEJ;GAEJ;AAEF,QACE,oCAAC;EACC,WAAW,QAAQ;EACnB,qBAAqB,oCAAC,sBAAkB;EACxC,mBAAmB,oCAAC,uBAAmB;EACvC,gBAAgB,oCAAC,SAAI,OAAO,EAAE,OAAO,IAAI,GAAI;IAG5C,cACQ"}

package/dist/newGrid-C5cV3hvO.js

@@ -0,0 +1,126 @@
+import { r as useUdpExport, t as ExportSidesheet } from "./ExportSidesheet-J4UlfjNv.js";
+import React, { forwardRef, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { ApiMethodInstanceGrid, EntityMaintenanceGrid, ServerSideGrid } from "udp-react-stencil-component-library";
+
+//#region src/UI/templates/newGrid/EntityMaintenanceUdpGrid.tsx
+const EntityMaintenanceUdpGrid = (props) => {
+	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(EntityMaintenanceGrid, props));
+};
+
+//#endregion
+//#region src/UI/templates/newGrid/BackwardsCompatibleGrid.jsx
+const BackwardsCompatibleGrid = forwardRef((props, ref) => {
+	const { gridBarTitle, queryId, gridId, primaryActionOnClick, primaryActionLabel, primaryActionIcon, defaultSearchObject, renderConfigs, disableGridPersistance, enableCheckboxOnColumns, gridHeight } = props;
+	const [exportSidesheetOpen, setExportSidesheetOpen] = useState(false);
+	const gridApiRef = useRef(null);
+	const fullDefaultSearchObject = useMemo(() => {
+		return {
+			filterElements: defaultSearchObject,
+			logicalSearchOperator: 1
+		};
+	}, [defaultSearchObject]);
+	const columnOverrides = useMemo(() => {
+		return renderConfigs.map((col) => {
+			const { rendererName,...rest } = col;
+			const newCol = {
+				...rest,
+				...rendererName && { cellRenderer: rendererName }
+			};
+			if (newCol.field === "actions") {
+				newCol.pinned = "right";
+				newCol.filter = false;
+				newCol.sortable = false;
+				newCol.suppressHeaderMenuButton = true;
+			}
+			return newCol;
+		});
+	}, [renderConfigs]);
+	const sizedIcon = useMemo(() => {
+		if (primaryActionIcon === "add32") return "add";
+	}, [primaryActionIcon]);
+	const { updateExportParameters, createExport, entity, searchObject, fileFormat, numRowsToExport, validSearch, errorList, activeExportJob, exportLoading, handleFileDownload, clearParameters } = useUdpExport();
+	const exportFromGrid = (searchObject$1, entityName) => {
+		if (searchObject$1 && entityName) {
+			updateExportParameters(entityName, searchObject$1);
+			setExportSidesheetOpen(true);
+		} else console.error("Failed to retrieve searchObject or entityName from grid");
+	};
+	const handleCloseExportSidesheet = () => {
+		setExportSidesheetOpen(false);
+		clearParameters();
+	};
+	useImperativeHandle(ref, () => ({
+		refreshOnNoResults: () => gridApiRef.current?.refreshServerSide(),
+		getSelectedRows: () => gridApiRef.current?.getSelectedRows()
+	}));
+	const handleGridApiCallback = (api) => {
+		gridApiRef.current = api;
+	};
+	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(ExportSidesheet, {
+		entity,
+		searchObject,
+		fileFormat,
+		numRowsToExport,
+		errorList,
+		activeExportJob,
+		handleFileDownload,
+		exportSidesheetOpen,
+		handleCloseExportSidesheet,
+		createExport,
+		exportLoading,
+		validSearch
+	}), /* @__PURE__ */ React.createElement(ApiMethodInstanceGrid, {
+		apiMethodInstanceId: queryId,
+		gridId,
+		defaultSearchObject: fullDefaultSearchObject,
+		columnDefOverrides: columnOverrides,
+		gridHeight,
+		gridOptions: {
+			pagination: true,
+			rowSelection: enableCheckboxOnColumns && {
+				mode: "multiRow",
+				enableClickSelection: true,
+				headerCheckbox: false
+			}
+		},
+		gridHeaderConfig: {
+			title: gridBarTitle,
+			primaryActionButton: {
+				label: primaryActionLabel,
+				iconName: sizedIcon,
+				onClick: primaryActionOnClick
+			}
+		},
+		gridFunctions: [
+			{ name: "agGridExport" },
+			{ name: "openSavedViews" },
+			{ name: "agGridSizeColumnsToFit" },
+			{ name: "agGridAutoSizeColumns" },
+			!disableGridPersistance && { name: "restoreGridState" },
+			{ name: "agGridHideShowColumns" },
+			{ name: "agGridResetColumns" },
+			{
+				name: "udpExport",
+				params: { callback: (searchObject$1, entityName) => exportFromGrid(searchObject$1, entityName) }
+			}
+		],
+		gridApiCallback: handleGridApiCallback
+	}));
+});
+BackwardsCompatibleGrid.displayName = "BackwardsCompatibleGrid";
+
+//#endregion
+//#region src/UI/templates/newGrid/ApiMethodInstanceUdpGrid.jsx
+const ApiMethodInstanceUdpGrid = (props) => {
+	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(ApiMethodInstanceGrid, props));
+};
+
+//#endregion
+//#region src/UI/templates/newGrid/ServerSideUdpGrid.jsx
+const ServerSideUdpGrid = (props) => {
+	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(ServerSideGrid, props));
+};
+
+//#endregion
+export { EntityMaintenanceUdpGrid as i, ApiMethodInstanceUdpGrid as n, BackwardsCompatibleGrid as r, ServerSideUdpGrid as t };
+//# sourceMappingURL=newGrid-C5cV3hvO.js.map

package/dist/newGrid-C5cV3hvO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"newGrid-C5cV3hvO.js","names":["EntityMaintenanceUdpGrid: React.FC<any>","searchObject"],"sources":["../src/UI/templates/newGrid/EntityMaintenanceUdpGrid.tsx","../src/UI/templates/newGrid/BackwardsCompatibleGrid.jsx","../src/UI/templates/newGrid/ApiMethodInstanceUdpGrid.jsx","../src/UI/templates/newGrid/ServerSideUdpGrid.jsx"],"sourcesContent":["import React from 'react'\nimport { EntityMaintenanceGrid } from 'udp-react-stencil-component-library'\n\nexport const EntityMaintenanceUdpGrid: React.FC<any> = (props) => {\n\n  return (\n   <div >\n      <EntityMaintenanceGrid {...props}/>\n   </div>\n  )\n}\n","import React, {\n  useMemo,\n  useState,\n  useRef,\n  forwardRef,\n  useImperativeHandle\n} from 'react';\nimport { ApiMethodInstanceGrid } from 'udp-react-stencil-component-library';\nimport { useUdpExport } from '../../../udp/export/useUdpExport';\nimport { ExportSidesheet } from '../../../udp/export/ExportSidesheet';\n\n/*\n * This grid is intended to be a temporary drop in replacement for ambient-template-grid.\n * Do not use it unless you were using the old grid, this will not be further supported and is worse on performance than the other new grids.\n */\n\nexport const BackwardsCompatibleGrid = forwardRef((props, ref) => {\n  const {\n    gridBarTitle,\n    queryId,\n    gridId,\n    primaryActionOnClick,\n    primaryActionLabel,\n    primaryActionIcon,\n    defaultSearchObject,\n    renderConfigs,\n    disableGridPersistance,\n    enableCheckboxOnColumns,\n    gridHeight\n  } = props;\n\n  const [exportSidesheetOpen, setExportSidesheetOpen] = useState(false);\n  const gridApiRef = useRef(null);\n\n  //Convert the filter Elements passed in to a search object\n  const fullDefaultSearchObject = useMemo(() => {\n    return {\n      filterElements: defaultSearchObject,\n      logicalSearchOperator: 1\n    };\n  }, [defaultSearchObject]);\n\n  //Convert renderConfigs to columnOverrides\n  const columnOverrides = useMemo(() => {\n    const initialColumns = renderConfigs;\n\n    return initialColumns.map((col) => {\n      // Use destructuring to separate 'rendererName' from the rest of the properties.\n      const { rendererName, ...rest } = col;\n\n      // Start building the new object, renaming rendererName if it exists.\n      const newCol = {\n        ...rest,\n        ...(rendererName && { cellRenderer: rendererName })\n      };\n\n      // If this is the actions column, add the pinned property.\n      if (newCol.field === 'actions') {\n        newCol.pinned = 'right';\n        newCol.filter = false;\n        newCol.sortable = false;\n        newCol.suppressHeaderMenuButton = true;\n      }\n\n      return newCol;\n    });\n  }, [renderConfigs]);\n\n  const sizedIcon = useMemo(() => {\n    if (primaryActionIcon === 'add32') {\n      return 'add';\n    }\n  }, [primaryActionIcon]);\n\n  //export functions\n\n  const {\n    updateExportParameters,\n    createExport,\n    entity,\n    searchObject,\n    fileFormat,\n    numRowsToExport,\n    validSearch,\n    errorList,\n    activeExportJob,\n    exportLoading,\n    handleFileDownload,\n    clearParameters\n  } = useUdpExport();\n\n  const exportFromGrid = (searchObject, entityName) => {\n    if (searchObject && entityName) {\n      updateExportParameters(entityName, searchObject);\n      setExportSidesheetOpen(true);\n    } else {\n      console.error('Failed to retrieve searchObject or entityName from grid');\n    }\n  };\n\n  const handleCloseExportSidesheet = () => {\n    setExportSidesheetOpen(false);\n    clearParameters();\n  };\n\n  useImperativeHandle(ref, () => ({\n    //hooks for the parent to call these functions\n    refreshOnNoResults: () => gridApiRef.current?.refreshServerSide(),\n    getSelectedRows: () => gridApiRef.current?.getSelectedRows()\n  }));\n\n  const handleGridApiCallback = (api) => {\n    gridApiRef.current = api;\n  };\n\n  return (\n    <div>\n      <ExportSidesheet\n        entity={entity}\n        searchObject={searchObject}\n        fileFormat={fileFormat}\n        numRowsToExport={numRowsToExport}\n        errorList={errorList}\n        activeExportJob={activeExportJob}\n        handleFileDownload={handleFileDownload}\n        exportSidesheetOpen={exportSidesheetOpen}\n        handleCloseExportSidesheet={handleCloseExportSidesheet}\n        createExport={createExport}\n        exportLoading={exportLoading}\n        validSearch={validSearch}\n      />\n      <ApiMethodInstanceGrid\n        apiMethodInstanceId={queryId}\n        gridId={gridId}\n        defaultSearchObject={fullDefaultSearchObject}\n        columnDefOverrides={columnOverrides}\n        gridHeight={gridHeight}\n        gridOptions={{\n          pagination: true,\n          rowSelection: enableCheckboxOnColumns && {\n            mode: 'multiRow',\n            enableClickSelection: true,\n            headerCheckbox: false\n          }\n        }}\n        gridHeaderConfig={{\n          title: gridBarTitle,\n          primaryActionButton: {\n            label: primaryActionLabel,\n            iconName: sizedIcon,\n            onClick: primaryActionOnClick\n          }\n        }}\n        gridFunctions={[\n          { name: 'agGridExport' },\n          { name: 'openSavedViews' },\n          { name: 'agGridSizeColumnsToFit' },\n          { name: 'agGridAutoSizeColumns' },\n          !disableGridPersistance && { name: 'restoreGridState' },\n          { name: 'agGridHideShowColumns' },\n          { name: 'agGridResetColumns' },\n          {\n            name: 'udpExport',\n            params: {\n              callback: (searchObject, entityName) =>\n                exportFromGrid(searchObject, entityName)\n            }\n          }\n        ]}\n        gridApiCallback={handleGridApiCallback}\n      />\n    </div>\n  );\n});\n\nBackwardsCompatibleGrid.displayName = 'BackwardsCompatibleGrid';\n","import React from 'react'\nimport { ApiMethodInstanceGrid } from 'udp-react-stencil-component-library'\n\nexport const ApiMethodInstanceUdpGrid = (props) => {\n\n  return (\n   <div >\n      <ApiMethodInstanceGrid {...props}/>\n   </div>\n  )\n}\n","import React from 'react'\nimport { ServerSideGrid } from 'udp-react-stencil-component-library'\n\nexport const ServerSideUdpGrid = (props) => {\n\n  return (\n   <div >\n      <ServerSideGrid {...props}/>\n   </div>\n  )\n}\n"],"mappings":";;;;;AAGA,MAAaA,4BAA2C,UAAU;AAEhE,QACC,oCAAC,aACE,oCAAC,uBAA0B,MAAQ,CAChC;;;;;ACQT,MAAa,0BAA0B,YAAY,OAAO,QAAQ;CAChE,MAAM,EACJ,cACA,SACA,QACA,sBACA,oBACA,mBACA,qBACA,eACA,wBACA,yBACA,eACE;CAEJ,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,MAAM;CACrE,MAAM,aAAa,OAAO,KAAK;CAG/B,MAAM,0BAA0B,cAAc;AAC5C,SAAO;GACL,gBAAgB;GAChB,uBAAuB;GACxB;IACA,CAAC,oBAAoB,CAAC;CAGzB,MAAM,kBAAkB,cAAc;AAGpC,SAFuB,cAED,KAAK,QAAQ;GAEjC,MAAM,EAAE,aAAc,GAAG,SAAS;GAGlC,MAAM,SAAS;IACb,GAAG;IACH,GAAI,gBAAgB,EAAE,cAAc,cAAc;IACnD;AAGD,OAAI,OAAO,UAAU,WAAW;AAC9B,WAAO,SAAS;AAChB,WAAO,SAAS;AAChB,WAAO,WAAW;AAClB,WAAO,2BAA2B;;AAGpC,UAAO;IACP;IACD,CAAC,cAAc,CAAC;CAEnB,MAAM,YAAY,cAAc;AAC9B,MAAI,sBAAsB,QACxB,QAAO;IAER,CAAC,kBAAkB,CAAC;CAIvB,MAAM,EACJ,wBACA,cACA,QACA,cACA,YACA,iBACA,aACA,WACA,iBACA,eACA,oBACA,oBACE,cAAc;CAElB,MAAM,kBAAkB,gBAAc,eAAe;AACnD,MAAIC,kBAAgB,YAAY;AAC9B,0BAAuB,YAAYA,eAAa;AAChD,0BAAuB,KAAK;QAE5B,SAAQ,MAAM,0DAA0D;;CAI5E,MAAM,mCAAmC;AACvC,yBAAuB,MAAM;AAC7B,mBAAiB;;AAGnB,qBAAoB,YAAY;EAE9B,0BAA0B,WAAW,SAAS,mBAAmB;EACjE,uBAAuB,WAAW,SAAS,iBAAiB;EAC7D,EAAE;CAEH,MAAM,yBAAyB,QAAQ;AACrC,aAAW,UAAU;;AAGvB,QACE,oCAAC,aACC,oCAAC;EACS;EACM;EACF;EACK;EACN;EACM;EACG;EACC;EACO;EACd;EACC;EACF;GACb,EACF,oCAAC;EACC,qBAAqB;EACb;EACR,qBAAqB;EACrB,oBAAoB;EACR;EACZ,aAAa;GACX,YAAY;GACZ,cAAc,2BAA2B;IACvC,MAAM;IACN,sBAAsB;IACtB,gBAAgB;IACjB;GACF;EACD,kBAAkB;GAChB,OAAO;GACP,qBAAqB;IACnB,OAAO;IACP,UAAU;IACV,SAAS;IACV;GACF;EACD,eAAe;GACb,EAAE,MAAM,gBAAgB;GACxB,EAAE,MAAM,kBAAkB;GAC1B,EAAE,MAAM,0BAA0B;GAClC,EAAE,MAAM,yBAAyB;GACjC,CAAC,0BAA0B,EAAE,MAAM,oBAAoB;GACvD,EAAE,MAAM,yBAAyB;GACjC,EAAE,MAAM,sBAAsB;GAC9B;IACE,MAAM;IACN,QAAQ,EACN,WAAW,gBAAc,eACvB,eAAeA,gBAAc,WAAW,EAC3C;IACF;GACF;EACD,iBAAiB;GACjB,CACE;EAER;AAEF,wBAAwB,cAAc;;;;AC5KtC,MAAa,4BAA4B,UAAU;AAEjD,QACC,oCAAC,aACE,oCAAC,uBAA0B,MAAQ,CAChC;;;;;ACLT,MAAa,qBAAqB,UAAU;AAE1C,QACC,oCAAC,aACE,oCAAC,gBAAmB,MAAQ,CACzB"}

package/dist/newsCard-2_MrdV0F.js

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import { Collapse, Divider, Typography, makeStyles } from "@material-ui/core";
+import PropTypes from "prop-types";
+
+//#region src/UI/surfaces/cards/newsCard/NewsCard.jsx
+const useStyles = makeStyles((theme) => ({
+	root: { "&:hover": {
+		backgroundColor: theme.palette.secondary.main,
+		color: theme?.palette?.getContrastText(theme.palette.secondary.main)
+	} },
+	title: {
+		lineHeight: 1.2,
+		marginBottom: theme.spacing(1.5)
+	},
+	number: {
+		marginRight: 16,
+		paddingLeft: 16
+	},
+	divider: {
+		width: "100%",
+		marginTop: 16
+	}
+}));
+const NewsCard = ({ number, title, summary, width, component = "h2" }) => {
+	const [expanded, setExpanded] = useState(false);
+	const classes = useStyles();
+	return /* @__PURE__ */ React.createElement("div", {
+		className: classes.root,
+		style: { cursor: summary.length > 56 && "pointer" },
+		onClick: () => setExpanded(!expanded)
+	}, /* @__PURE__ */ React.createElement("div", { style: {
+		width: width === "double" ? 560 : 260,
+		display: "flex",
+		marginTop: 16,
+		paddingRight: 16
+	} }, /* @__PURE__ */ React.createElement("div", { className: classes.number }, /* @__PURE__ */ React.createElement(Typography, { variant: "h2" }, number)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, {
+		variant: "subtitle2",
+		component,
+		className: classes.title
+	}, title), /* @__PURE__ */ React.createElement(Typography, { style: { minHeight: width !== "double" && 40 } }, summary.slice(0, 57), " ", summary.length > 56 && !expanded && "...")), /* @__PURE__ */ React.createElement(Collapse, {
+		in: expanded,
+		timeout: "auto",
+		unmountOnExit: true
+	}, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, null, summary.slice(57)))))), /* @__PURE__ */ React.createElement(Divider, { className: classes.divider }));
+};
+NewsCard.propTypes = {
+	number: PropTypes.number.isRequired,
+	title: PropTypes.string.isRequired,
+	component: PropTypes.string,
+	summary: PropTypes.string.isRequired,
+	width: PropTypes.string
+};
+NewsCard.defaultProps = { component: "h2" };
+
+//#endregion
+export { NewsCard as t };
+//# sourceMappingURL=newsCard-2_MrdV0F.js.map

package/dist/newsCard-2_MrdV0F.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"newsCard-2_MrdV0F.js","names":[],"sources":["../src/UI/surfaces/cards/newsCard/NewsCard.jsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { Typography, makeStyles, Collapse, Divider } from '@material-ui/core'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    '&:hover': {\n      backgroundColor: theme.palette.secondary.main,\n      color: theme?.palette?.getContrastText(theme.palette.secondary.main)\n    }\n  },\n  title: {\n    lineHeight: 1.2,\n    marginBottom: theme.spacing(1.5)\n  },\n  number: {\n    marginRight: 16,\n    paddingLeft: 16\n  },\n  divider: {\n    width: '100%',\n    marginTop: 16\n  }\n}))\n\nexport const NewsCard = ({\n  number,\n  title,\n  summary,\n  width,\n  component = 'h2'\n}) => {\n  const [expanded, setExpanded] = useState(false)\n\n  const classes = useStyles()\n\n  return (\n    <div\n      className={classes.root}\n      style={{ cursor: summary.length > 56 && 'pointer' }}\n      onClick={() => setExpanded(!expanded)}\n    >\n      <div\n        style={{\n          width: width === 'double' ? 560 : 260,\n          display: 'flex',\n          marginTop: 16,\n          paddingRight: 16\n        }}\n      >\n        <div className={classes.number}>\n          <Typography variant='h2'>{number}</Typography>\n        </div>\n\n        <div>\n          <div>\n            <Typography\n              variant='subtitle2'\n              component={component}\n              className={classes.title}\n            >\n              {title}\n            </Typography>\n            <Typography style={{ minHeight: width !== 'double' && 40 }}>\n              {summary.slice(0, 57)} {summary.length > 56 && !expanded && '...'}\n            </Typography>\n          </div>\n          <Collapse in={expanded} timeout='auto' unmountOnExit>\n            <div>\n              <Typography>{summary.slice(57)}</Typography>\n            </div>\n          </Collapse>\n        </div>\n      </div>\n      <Divider className={classes.divider} />\n    </div>\n  )\n}\nNewsCard.propTypes = {\n  /**\n   * Number listed by news item\n   */\n  number: PropTypes.number.isRequired,\n  /**\n   * Title of news item\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * Header Tag override. Defaults to H2\n   */\n  component: PropTypes.string,\n  /**\n   * Summary of news item (overflow beyond 56 characters is sent to expanded content area)\n   */\n  summary: PropTypes.string.isRequired,\n  /**\n   * Optional width flag. width === double will set the card to full width\n   */\n  width: PropTypes.string\n}\n\nNewsCard.defaultProps = {\n  component: 'h2'\n}\n"],"mappings":";;;;;AAIA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EACJ,WAAW;EACT,iBAAiB,MAAM,QAAQ,UAAU;EACzC,OAAO,OAAO,SAAS,gBAAgB,MAAM,QAAQ,UAAU,KAAK;EACrE,EACF;CACD,OAAO;EACL,YAAY;EACZ,cAAc,MAAM,QAAQ,IAAI;EACjC;CACD,QAAQ;EACN,aAAa;EACb,aAAa;EACd;CACD,SAAS;EACP,OAAO;EACP,WAAW;EACZ;CACF,EAAE;AAEH,MAAa,YAAY,EACvB,QACA,OACA,SACA,OACA,YAAY,WACR;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAE/C,MAAM,UAAU,WAAW;AAE3B,QACE,oCAAC;EACC,WAAW,QAAQ;EACnB,OAAO,EAAE,QAAQ,QAAQ,SAAS,MAAM,WAAW;EACnD,eAAe,YAAY,CAAC,SAAS;IAErC,oCAAC,SACC,OAAO;EACL,OAAO,UAAU,WAAW,MAAM;EAClC,SAAS;EACT,WAAW;EACX,cAAc;EACf,IAED,oCAAC,SAAI,WAAW,QAAQ,UACtB,oCAAC,cAAW,SAAQ,QAAM,OAAoB,CAC1C,EAEN,oCAAC,aACC,oCAAC,aACC,oCAAC;EACC,SAAQ;EACG;EACX,WAAW,QAAQ;IAElB,MACU,EACb,oCAAC,cAAW,OAAO,EAAE,WAAW,UAAU,YAAY,IAAI,IACvD,QAAQ,MAAM,GAAG,GAAG,EAAC,KAAE,QAAQ,SAAS,MAAM,CAAC,YAAY,MACjD,CACT,EACN,oCAAC;EAAS,IAAI;EAAU,SAAQ;EAAO;IACrC,oCAAC,aACC,oCAAC,kBAAY,QAAQ,MAAM,GAAG,CAAc,CACxC,CACG,CACP,CACF,EACN,oCAAC,WAAQ,WAAW,QAAQ,UAAW,CACnC;;AAGV,SAAS,YAAY;CAInB,QAAQ,UAAU,OAAO;CAIzB,OAAO,UAAU,OAAO;CAIxB,WAAW,UAAU;CAIrB,SAAS,UAAU,OAAO;CAI1B,OAAO,UAAU;CAClB;AAED,SAAS,eAAe,EACtB,WAAW,MACZ"}