udp-react-enterprise-component-library 25.18.1-beta.2 → 25.18.1-beta.20

package/dist/DonutChartWidget-mKcG-bWw.js

@@ -0,0 +1,161 @@
+import { t as __export } from "./chunk-B4enJp2Q.js";
+import { t as WidgetCard_default } from "./WidgetCard-CDqYxK5O.js";
+import { t as FluentStatsSnippet_default } from "./FluentStatsSnippet-BuDlbH0Q.js";
+import { t as ChartSummaryToggle_default } from "./ChartSummaryToggle-x9LKkWUM.js";
+import { t as convertISODate } from "./ConvertISODate-TfG2U4Iu.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/DonutChartWidget/DonutChartWidget.jsx
+const layout = {
+	w: {
+		default: 2,
+		min: 0,
+		max: 4
+	},
+	h: {
+		default: 2,
+		min: 0,
+		max: 4
+	}
+};
+const DonutChartWidget = (props, ref) => {
+	const { children, params, setParam, ...other } = props;
+	const { mockData, apiUrl, theme, dateRange } = params;
+	let body = /* @__PURE__ */ React.createElement(Fragment, null, dateRange && /* @__PURE__ */ React.createElement(Typography, {
+		gutterBottom: true,
+		variant: "caption",
+		component: "h3"
+	}, "From: ", convertISODate(dateRange.from), " to:", " ", convertISODate(dateRange.to)), /* @__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, {
+		variant: "donutChart",
+		style: {
+			overflow: "auto",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			padding: 0
+		},
+		spec: {
+			$schema: "https://vega.github.io/schema/vega/v5.json",
+			width: 200,
+			height: 200,
+			data: [{
+				name: "table",
+				values: mockData?.data,
+				transform: [{
+					type: "pie",
+					field: "value"
+				}]
+			}, {
+				name: "used",
+				source: "table",
+				transform: [
+					{
+						type: "formula",
+						expr: "datum.id === 'Other' ? 'Other' : 'Main'",
+						as: "id"
+					},
+					{
+						type: "aggregate",
+						fields: ["field"],
+						groupby: ["id"],
+						ops: ["sum"],
+						as: ["sum"]
+					},
+					{
+						type: "pivot",
+						field: "label",
+						value: "sum"
+					}
+				]
+			}],
+			scales: [{
+				name: "color",
+				type: "ordinal",
+				domain: {
+					data: "table",
+					field: "label"
+				},
+				range: { scheme: "greys" }
+			}],
+			marks: [{
+				type: "arc",
+				from: { data: "table" },
+				encode: {
+					enter: {
+						fill: {
+							scale: "color",
+							field: "label"
+						},
+						x: { signal: "width / 2" },
+						y: { signal: "height / 2" },
+						padAngle: { value: .01 }
+					},
+					update: {
+						startAngle: { field: "startAngle" },
+						endAngle: { field: "endAngle" },
+						innerRadius: { signal: "width / 2 - 10" },
+						outerRadius: { signal: "width / 2" }
+					}
+				}
+			}, {
+				type: "text",
+				from: { data: "used" },
+				style: ["percent"],
+				encode: { enter: {
+					x: { signal: "width / 2" },
+					y: { signal: "height / 2" },
+					align: { value: "center" },
+					baseline: { value: "middle" },
+					fontSize: { value: 24 }
+				} }
+			}],
+			legends: [{
+				fill: "color",
+				direction: "vertical",
+				encode: { labels: {
+					name: "legendLabel",
+					enter: { text: { field: "label" } }
+				} },
+				orient: "right",
+				labelColor: theme === "dark" ? "white" : "rgba(0, 0, 0, 0.87)"
+			}]
+		}
+	})), children);
+	return /* @__PURE__ */ React.createElement(WidgetCard_default, {
+		theme,
+		ref,
+		headerActions: /* @__PURE__ */ React.createElement(ChartSummaryToggle_default, {
+			value: params.mode,
+			onChange: (value) => setParam("mode", value)
+		}),
+		...other,
+		title: mockData?.title
+	}, mockData ? body : /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, "Could not retrieve widget data. Please contact support."));
+};
+var DonutChartWidget_default = forwardRef(DonutChartWidget);
+
+//#endregion
+//#region src/UI/widgets/library/DonutChartWidget/index.ts
+var DonutChartWidget_exports = /* @__PURE__ */ __export({
+	default: () => DonutChartWidget_default,
+	layout: () => layout
+});
+
+//#endregion
+export { DonutChartWidget_default as n, layout as r, DonutChartWidget_exports as t };
+//# sourceMappingURL=DonutChartWidget-mKcG-bWw.js.map

package/dist/DonutChartWidget-mKcG-bWw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChartWidget-mKcG-bWw.js","names":["FluentStatsSnippet","WidgetCard","ChartSummaryToggle"],"sources":["../src/UI/widgets/library/DonutChartWidget/DonutChartWidget.jsx","../src/UI/widgets/library/DonutChartWidget/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 ChartSummaryToggle from '../../FluentComponents/ChartSummaryToggle'\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\nconst DonutChartWidget = (props, ref) => {\n  const { children, params, setParam, ...other } = props\n  const { mockData, apiUrl, theme, dateRange } = params\n\n  let body = (\n    <Fragment>\n      {dateRange && (\n        <Typography gutterBottom variant='caption' component='h3'>\n          From: {convertISODate(dateRange.from)} to:{' '}\n          {convertISODate(dateRange.to)}\n        </Typography>\n      )}\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      <Box clone flex={1} mt={1} overflow='hidden'>\n        <MuiVegaLite\n          variant='donutChart'\n          style={{\n            overflow: 'auto',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            padding: 0\n          }}\n          spec={{\n            $schema: 'https://vega.github.io/schema/vega/v5.json',\n            width: 200,\n            height: 200,\n            data: [\n              {\n                name: 'table',\n                values: mockData?.data,\n                transform: [\n                  {\n                    type: 'pie',\n                    field: 'value'\n                  }\n                ]\n              },\n              {\n                name: 'used',\n                source: 'table',\n                transform: [\n                  {\n                    type: 'formula',\n                    expr: \"datum.id === 'Other' ? 'Other' : 'Main'\",\n                    as: 'id'\n                  },\n                  {\n                    type: 'aggregate',\n                    fields: ['field'],\n                    groupby: ['id'],\n                    ops: ['sum'],\n                    as: ['sum']\n                  },\n                  {\n                    type: 'pivot',\n                    field: 'label',\n                    value: 'sum'\n                  }\n                ]\n              }\n            ],\n            scales: [\n              {\n                name: 'color',\n                type: 'ordinal',\n                domain: { data: 'table', field: 'label' },\n                range: { scheme: 'greys' }\n              }\n            ],\n            marks: [\n              {\n                type: 'arc',\n                from: { data: 'table' },\n                encode: {\n                  enter: {\n                    fill: { scale: 'color', field: 'label' },\n                    x: { signal: 'width / 2' },\n                    y: { signal: 'height / 2' },\n                    padAngle: { value: 0.01 }\n                  },\n                  update: {\n                    startAngle: { field: 'startAngle' },\n                    endAngle: { field: 'endAngle' },\n                    innerRadius: { signal: 'width / 2 - 10' },\n                    outerRadius: { signal: 'width / 2' }\n                  }\n                }\n              },\n              {\n                type: 'text',\n                from: { data: 'used' },\n                style: ['percent'],\n                encode: {\n                  enter: {\n                    x: { signal: 'width / 2' },\n                    y: { signal: 'height / 2' },\n                    align: { value: 'center' },\n                    baseline: { value: 'middle' },\n                    fontSize: { value: 24 }\n                  }\n                }\n              }\n            ],\n            legends: [\n              {\n                fill: 'color',\n                direction: 'vertical',\n                encode: {\n                  labels: {\n                    name: 'legendLabel',\n                    enter: { text: { field: 'label' } }\n                  }\n                },\n                orient: 'right',\n                labelColor: theme === 'dark' ? 'white' : 'rgba(0, 0, 0, 0.87)'\n              }\n            ]\n          }}\n        />\n      </Box>\n      {children}\n    </Fragment>\n  )\n\n  return (\n    <WidgetCard\n      theme={theme}\n      ref={ref}\n      headerActions={\n        <ChartSummaryToggle\n          value={params.mode}\n          onChange={(value) => setParam('mode', value)}\n        />\n      }\n      {...other}\n      title={mockData?.title}\n    >\n      {mockData ? (\n        body\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(DonutChartWidget)\n","export * from './DonutChartWidget';\nexport {default} from './DonutChartWidget';\n"],"mappings":"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"}

package/dist/DragDropFileUpload-TFHchivz.js

@@ -0,0 +1,89 @@
+import { t as FluentButton } from "./FluentButton-BexKrnAp.js";
+import { t as FluentIcon } from "./FluentIcon-DQ6nSDJg.js";
+import { t as formatBytes } from "./formatBytes-Cq2rh3hB.js";
+import React, { useMemo } from "react";
+import { Typography, lighten, makeStyles } from "@material-ui/core";
+import { PageIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { useDropzone } from "react-dropzone";
+
+//#region src/uploader/DragDropFileUpload.jsx
+const useStyles = makeStyles((theme) => ({
+	btnWrapper: {
+		display: "flex",
+		justifyContent: "center",
+		gap: theme.spacing(2),
+		marginTop: theme.spacing(1),
+		marginBottom: theme.spacing(1)
+	},
+	dndWrapper: {
+		backgroundColor: lighten(theme.palette.secondary.light, .8),
+		height: "100%",
+		minHeight: (props) => props?.minHeight,
+		maxHeight: (props) => props?.maxHeight,
+		display: "flex",
+		alignItems: "center",
+		textAlign: "center",
+		border: `dashed 2px ${lighten(theme.palette.secondary.light, .4)}`,
+		overflow: "hidden"
+	},
+	fileNameWrapper: {
+		display: "flex",
+		gap: theme.spacing(1),
+		alignItems: "center",
+		textAlign: "center",
+		justifyContent: "center"
+	},
+	dndContent: {
+		flexGrow: 1,
+		textAlign: "center"
+	},
+	textWrapper: {
+		overflow: "hidden",
+		marginRight: theme.spacing(2),
+		marginLeft: theme.spacing(2)
+	}
+}));
+const DragDropFileUpload = (props) => {
+	const { title, handleUploadFile, hideSelectFileButton = false, hideFilePreview = false, minHeight, maxHeight, multiple = false, ...otherDropZoneProps } = props;
+	const { t } = useTranslation();
+	const classes = useStyles({
+		minHeight,
+		maxHeight
+	});
+	const { open, acceptedFiles, getRootProps, getInputProps } = useDropzone({
+		noClick: true,
+		noKeyboard: true,
+		multiple,
+		onDrop: handleUploadFile,
+		...otherDropZoneProps
+	});
+	const files = useMemo(() => {
+		return acceptedFiles.map((file) => /* @__PURE__ */ React.createElement("div", { className: classes.fileNameWrapper }, /* @__PURE__ */ React.createElement(FluentIcon, {
+			size: "small",
+			component: PageIcon
+		}), /* @__PURE__ */ React.createElement(Typography, null, ` ${file?.path} (${formatBytes(file?.size)})`)));
+	}, [acceptedFiles]);
+	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", {
+		...getRootProps({ className: "dropzone" }),
+		className: classes.dndWrapper
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.dndContent }, /* @__PURE__ */ React.createElement("input", getInputProps()), /* @__PURE__ */ React.createElement(Typography, { className: classes.textWrapper }, title ? title : multiple ? t("Drag and drop files here or select files") : t("Drag and drop a file here or select a file")), !hideSelectFileButton && /* @__PURE__ */ React.createElement("div", { className: classes.btnWrapper }, /* @__PURE__ */ React.createElement(FluentButton, {
+		onClick: open,
+		color: "secondary",
+		variant: "contained"
+	}, /* @__PURE__ */ React.createElement(Typography, { noWrap: true }, multiple ? t("Select Files") : t("Select a File")))), !hideFilePreview && /* @__PURE__ */ React.createElement("div", null, files))));
+};
+DragDropFileUpload.propTypes = {
+	title: PropTypes.string,
+	handleUploadFile: PropTypes.func,
+	hideSelectFileButton: PropTypes.bool,
+	hideFilePreview: PropTypes.bool,
+	minHeight: PropTypes.string | PropTypes.number,
+	maxHeight: PropTypes.string | PropTypes.number,
+	multiple: PropTypes.bool
+};
+
+//#endregion
+export { DragDropFileUpload as t };
+//# sourceMappingURL=DragDropFileUpload-TFHchivz.js.map

package/dist/DragDropFileUpload-TFHchivz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragDropFileUpload-TFHchivz.js","names":[],"sources":["../src/uploader/DragDropFileUpload.jsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useDropzone } from 'react-dropzone';\nimport { useTranslation } from 'react-i18next';\nimport { FluentButton } from '../UI/inputs/buttons/FluentButton';\nimport { FluentIcon } from '../utilities/iconLibrary/FluentIcon';\nimport { formatBytes } from '../utilities/uploader/formatBytes';\nimport { PageIcon } from '@fluentui/react-icons';\nimport { Typography, lighten, makeStyles } from '@material-ui/core';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  btnWrapper: {\n    display: 'flex',\n    justifyContent: 'center',\n    gap: theme.spacing(2),\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1)\n  },\n  dndWrapper: {\n    backgroundColor: lighten(theme.palette.secondary.light, 0.8),\n    height: '100%',\n    minHeight: (props) => props?.minHeight,\n    maxHeight: (props) => props?.maxHeight,\n    display: 'flex',\n    alignItems: 'center',\n    textAlign: 'center',\n    border: `dashed 2px ${lighten(theme.palette.secondary.light, 0.4)}`,\n    overflow: 'hidden'\n  },\n  fileNameWrapper: {\n    display: 'flex',\n    gap: theme.spacing(1),\n    alignItems: 'center',\n    textAlign: 'center',\n    justifyContent: 'center'\n  },\n  dndContent: {\n    flexGrow: 1,\n    textAlign: 'center'\n  },\n  textWrapper: {\n    overflow: 'hidden',\n    marginRight: theme.spacing(2),\n    marginLeft: theme.spacing(2)\n  }\n}));\n\nexport const DragDropFileUpload = (props) => {\n  const {\n    title,\n    handleUploadFile,\n    hideSelectFileButton = false,\n    hideFilePreview = false,\n    minHeight,\n    maxHeight,\n    multiple = false,\n    ...otherDropZoneProps\n  } = props;\n  const { t } = useTranslation();\n  const classes = useStyles({ minHeight, maxHeight });\n\n  const { open, acceptedFiles, getRootProps, getInputProps } = useDropzone({\n    noClick: true,\n    noKeyboard: true,\n    multiple: multiple,\n    onDrop: handleUploadFile,\n    ...otherDropZoneProps\n  });\n\n  const files = useMemo(() => {\n    return acceptedFiles.map((file) => (\n      <div className={classes.fileNameWrapper}>\n        <FluentIcon size='small' component={PageIcon} />\n        <Typography>{` ${file?.path} (${formatBytes(file?.size)})`}</Typography>\n      </div>\n    ));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [acceptedFiles]);\n\n  return (\n    <div>\n      <div\n        {...getRootProps({ className: 'dropzone' })}\n        className={classes.dndWrapper}\n      >\n        <div className={classes.dndContent}>\n          <input {...getInputProps()} />\n          <Typography className={classes.textWrapper}>\n            {title\n              ? title\n              : multiple\n              ? t('Drag and drop files here or select files')\n              : t('Drag and drop a file here or select a file')}\n          </Typography>\n          {!hideSelectFileButton && (\n            <div className={classes.btnWrapper}>\n              <FluentButton\n                onClick={open}\n                color='secondary'\n                variant='contained'\n              >\n                <Typography noWrap>\n                  {multiple ? t('Select Files') : t('Select a File')}\n                </Typography>\n              </FluentButton>\n            </div>\n          )}\n          {!hideFilePreview && <div>{files}</div>}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nDragDropFileUpload.propTypes = {\n  /**\n   * Optional, title\n   */\n  title: PropTypes.string,\n\n  /**\n   * Optional, event handler that accept a param (an array of files) when drop or select files.\n   * can use other props to handle this event such as onDropAccepted, onDropRejected.\n   * https://react-dropzone.js.org/#section-components\n   */\n  handleUploadFile: PropTypes.func,\n\n  /**\n   * Optional, hide or show the select file button (default is false)\n   */\n  hideSelectFileButton: PropTypes.bool,\n\n  /**\n   * Optional, hide or show the file sneak preview (default is false)\n   */\n  hideFilePreview: PropTypes.bool,\n\n  /**\n   * Optional, minimum height\n   */\n  minHeight: PropTypes.string | PropTypes.number,\n\n  /**\n   * Optional, maximum height\n   */\n  maxHeight: PropTypes.string | PropTypes.number,\n\n  /**\n   * Optional, allow to add multiple files at a time (default is false)\n   */\n  multiple: PropTypes.bool\n};\n"],"mappings":";;;;;;;;;;;AAUA,MAAM,YAAY,YAAY,WAAW;CACvC,YAAY;EACV,SAAS;EACT,gBAAgB;EAChB,KAAK,MAAM,QAAQ,EAAE;EACrB,WAAW,MAAM,QAAQ,EAAE;EAC3B,cAAc,MAAM,QAAQ,EAAE;EAC/B;CACD,YAAY;EACV,iBAAiB,QAAQ,MAAM,QAAQ,UAAU,OAAO,GAAI;EAC5D,QAAQ;EACR,YAAY,UAAU,OAAO;EAC7B,YAAY,UAAU,OAAO;EAC7B,SAAS;EACT,YAAY;EACZ,WAAW;EACX,QAAQ,cAAc,QAAQ,MAAM,QAAQ,UAAU,OAAO,GAAI;EACjE,UAAU;EACX;CACD,iBAAiB;EACf,SAAS;EACT,KAAK,MAAM,QAAQ,EAAE;EACrB,YAAY;EACZ,WAAW;EACX,gBAAgB;EACjB;CACD,YAAY;EACV,UAAU;EACV,WAAW;EACZ;CACD,aAAa;EACX,UAAU;EACV,aAAa,MAAM,QAAQ,EAAE;EAC7B,YAAY,MAAM,QAAQ,EAAE;EAC7B;CACF,EAAE;AAEH,MAAa,sBAAsB,UAAU;CAC3C,MAAM,EACJ,OACA,kBACA,uBAAuB,OACvB,kBAAkB,OAClB,WACA,WACA,WAAW,OACX,GAAG,uBACD;CACJ,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,UAAU,UAAU;EAAE;EAAW;EAAW,CAAC;CAEnD,MAAM,EAAE,MAAM,eAAe,cAAc,kBAAkB,YAAY;EACvE,SAAS;EACT,YAAY;EACF;EACV,QAAQ;EACR,GAAG;EACJ,CAAC;CAEF,MAAM,QAAQ,cAAc;AAC1B,SAAO,cAAc,KAAK,SACxB,oCAAC,SAAI,WAAW,QAAQ,mBACtB,oCAAC;GAAW,MAAK;GAAQ,WAAW;IAAY,EAChD,oCAAC,kBAAY,IAAI,MAAM,KAAK,IAAI,YAAY,MAAM,KAAK,CAAC,GAAgB,CACpE,CACN;IAED,CAAC,cAAc,CAAC;AAEnB,QACE,oCAAC,aACC,oCAAC;EACC,GAAI,aAAa,EAAE,WAAW,YAAY,CAAC;EAC3C,WAAW,QAAQ;IAEnB,oCAAC,SAAI,WAAW,QAAQ,cACtB,oCAAC,SAAU,eAAe,CAAI,EAC9B,oCAAC,cAAW,WAAW,QAAQ,eAC5B,QACG,QACA,WACA,EAAE,2CAA2C,GAC7C,EAAE,6CAA6C,CACxC,EACZ,CAAC,wBACA,oCAAC,SAAI,WAAW,QAAQ,cACtB,oCAAC;EACC,SAAS;EACT,OAAM;EACN,SAAQ;IAER,oCAAC,cAAW,gBACT,WAAW,EAAE,eAAe,GAAG,EAAE,gBAAgB,CACvC,CACA,CACX,EAEP,CAAC,mBAAmB,oCAAC,aAAK,MAAY,CACnC,CACF,CACF;;AAIV,mBAAmB,YAAY;CAI7B,OAAO,UAAU;CAOjB,kBAAkB,UAAU;CAK5B,sBAAsB,UAAU;CAKhC,iBAAiB,UAAU;CAK3B,WAAW,UAAU,SAAS,UAAU;CAKxC,WAAW,UAAU,SAAS,UAAU;CAKxC,UAAU,UAAU;CACrB"}

package/dist/DraggableSidebarTemplate-BUWBvL6H.js

@@ -0,0 +1,93 @@
+import React from "react";
+import { Container, makeStyles } from "@material-ui/core";
+import clsx from "clsx";
+import { Resizable } from "re-resizable";
+
+//#region src/UI/templates/OpenPage.jsx
+const useStyles$1 = makeStyles((theme) => ({ root: {
+	flex: 1,
+	display: "flex",
+	flexDirection: "column",
+	position: "absolute",
+	top: 93
+} }), { name: "PageContent" });
+/**
+* Page content wrapper that provides page gutters and container
+*/
+const OpenPage = (props) => {
+	const classes = useStyles$1(props);
+	const { className, children, maxWidth = false, disableGutters = false, ...other } = props;
+	return /* @__PURE__ */ React.createElement(Container, {
+		...other,
+		classes: null,
+		className: clsx(className, classes.root),
+		maxWidth,
+		disableGutters
+	}, children);
+};
+
+//#endregion
+//#region src/UI/templates/DraggableSidebarTemplate.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {},
+	stage: {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		width: "100%",
+		marginTop: 16,
+		gap: 16
+	},
+	gridColumn: {
+		width: "100%",
+		height: "100vh",
+		border: 0
+	},
+	arrow: { transform: "rotate(180deg)" },
+	buttonContainer: {
+		background: theme.palette.common.white,
+		borderRadius: "50px 0px 0px 50px",
+		marginTop: theme.spacing(1),
+		height: 39,
+		paddingTop: (props) => props.removePadding ? 0 : 10
+	},
+	hide: { display: "none" }
+}));
+const DraggableSidebarTemplate = (props) => {
+	const { body, sidebar, divide, width, setWidth, handleToggleClick, handleToggleClickClose, expanded, hideSidebarButton, hide, maxWidth, enable = {
+		top: true,
+		right: true,
+		bottom: true,
+		left: true,
+		topRight: false,
+		bottomRight: false,
+		bottomLeft: false,
+		topLeft: false
+	}, splitScreenStyle = {} } = props;
+	const classes = useStyles(props);
+	return /* @__PURE__ */ React.createElement("div", { style: {
+		width: "100%",
+		display: "flex",
+		overflow: !hide && "hidden",
+		border: 0
+	} }, /* @__PURE__ */ React.createElement(OpenPage, {
+		disableGutters: true,
+		style: {
+			position: "relative",
+			top: 0
+		}
+	}, /* @__PURE__ */ React.createElement("div", { className: divide && classes.stage }, /* @__PURE__ */ React.createElement("div", null, body))), /* @__PURE__ */ React.createElement("div", { className: divide && classes.stage }), !hide && /* @__PURE__ */ React.createElement(Resizable, {
+		style: splitScreenStyle,
+		onResizeStop: (e, direction, ref, d) => {
+			setWidth(width + d.width);
+		},
+		defaultSize: { width },
+		size: { width },
+		maxWidth: maxWidth || "50%",
+		enable
+	}, sidebar));
+};
+
+//#endregion
+export { OpenPage as n, DraggableSidebarTemplate as t };
+//# sourceMappingURL=DraggableSidebarTemplate-BUWBvL6H.js.map

package/dist/DraggableSidebarTemplate-BUWBvL6H.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableSidebarTemplate-BUWBvL6H.js","names":["useStyles"],"sources":["../src/UI/templates/OpenPage.jsx","../src/UI/templates/DraggableSidebarTemplate.jsx"],"sourcesContent":["import clsx from 'clsx'\nimport { makeStyles, Container } from '@material-ui/core'\nimport React from 'react'\n\nconst useStyles = makeStyles(\n  (theme) => ({\n    root: {\n      flex: 1,\n      display: 'flex',\n      flexDirection: 'column',\n      position: 'absolute',\n      top: 93\n    }\n  }),\n  { name: 'PageContent' }\n)\n\n/**\n * Page content wrapper that provides page gutters and container\n */\nexport const OpenPage = (props) => {\n  const classes = useStyles(props)\n  const {\n    className,\n    children,\n    maxWidth = false,\n    disableGutters = false,\n    ...other\n  } = props\n\n  return (\n    <Container\n      {...other}\n      classes={null}\n      className={clsx(className, classes.root)}\n      maxWidth={maxWidth}\n      disableGutters={disableGutters}\n    >\n      {children}\n    </Container>\n  )\n}\n","import React from 'react';\nimport { Resizable } from 're-resizable';\nimport { makeStyles } from '@material-ui/core';\nimport { OpenPage } from '../templates/OpenPage';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  stage: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    width: '100%',\n    marginTop: 16,\n    gap: 16\n  },\n  gridColumn: {\n    width: '100%',\n    height: '100vh',\n    border: 0\n  },\n  arrow: {\n    transform: 'rotate(180deg)'\n  },\n  buttonContainer: {\n    background: theme.palette.common.white,\n    borderRadius: '50px 0px 0px 50px',\n    marginTop: theme.spacing(1),\n    height: 39,\n    // @todo: fix this padding hack\n    paddingTop: (props) => (props.removePadding ? 0 : 10)\n  },\n  hide: {\n    display: 'none'\n  }\n}));\n\nexport const DraggableSidebarTemplate = (props) => {\n  const {\n    body,\n    sidebar,\n    divide,\n    width,\n    setWidth,\n    handleToggleClick,\n    handleToggleClickClose,\n    expanded,\n    hideSidebarButton,\n    hide,\n    maxWidth,\n    enable = {\n      top: true,\n      right: true,\n      bottom: true,\n      left: true,\n      topRight: false,\n      bottomRight: false,\n      bottomLeft: false,\n      topLeft: false\n    },\n    splitScreenStyle = {}\n  } = props;\n\n  const classes = useStyles(props);\n\n  return (\n    <div\n      style={{\n        width: '100%',\n        display: 'flex',\n        overflow: !hide && 'hidden',\n        border: 0\n      }}\n    >\n      <OpenPage\n        disableGutters={true}\n        style={{\n          position: 'relative',\n          top: 0\n        }}\n      >\n        <div className={divide && classes.stage}>\n          <div>{body}</div>\n        </div>\n      </OpenPage>\n      <div className={divide && classes.stage} />\n      {/* <div\n        className={clsx(\n          classes.buttonContainer,\n          hideSidebarButton && classes.hide\n        )}\n      >\n        <SidebarCollapseButton\n          className={classes.arrow}\n          expanded={expanded}\n          onClick={\n            expanded ? () => handleToggleClick(0) : () => handleToggleClick(1)\n          }\n        />\n      </div> */}\n\n      {!hide && (\n        <Resizable\n          style={splitScreenStyle}\n          onResizeStop={(e, direction, ref, d) => {\n            setWidth(width + d.width);\n          }}\n          defaultSize={{\n            width: width\n          }}\n          size={{\n            width: width\n          }}\n          maxWidth={maxWidth || '50%'}\n          enable={enable}\n        >\n          {sidebar}\n        </Resizable>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAIA,MAAMA,cAAY,YACf,WAAW,EACV,MAAM;CACJ,MAAM;CACN,SAAS;CACT,eAAe;CACf,UAAU;CACV,KAAK;CACN,EACF,GACD,EAAE,MAAM,eAAe,CACxB;;;;AAKD,MAAa,YAAY,UAAU;CACjC,MAAM,UAAUA,YAAU,MAAM;CAChC,MAAM,EACJ,WACA,UACA,WAAW,OACX,iBAAiB,OACjB,GAAG,UACD;AAEJ,QACE,oCAAC;EACC,GAAI;EACJ,SAAS;EACT,WAAW,KAAK,WAAW,QAAQ,KAAK;EAC9B;EACM;IAEf,SACS;;;;;AClChB,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EAAE;CACR,OAAO;EACL,SAAS;EACT,eAAe;EACf,YAAY;EACZ,OAAO;EACP,WAAW;EACX,KAAK;EACN;CACD,YAAY;EACV,OAAO;EACP,QAAQ;EACR,QAAQ;EACT;CACD,OAAO,EACL,WAAW,kBACZ;CACD,iBAAiB;EACf,YAAY,MAAM,QAAQ,OAAO;EACjC,cAAc;EACd,WAAW,MAAM,QAAQ,EAAE;EAC3B,QAAQ;EAER,aAAa,UAAW,MAAM,gBAAgB,IAAI;EACnD;CACD,MAAM,EACJ,SAAS,QACV;CACF,EAAE;AAEH,MAAa,4BAA4B,UAAU;CACjD,MAAM,EACJ,MACA,SACA,QACA,OACA,UACA,mBACA,wBACA,UACA,mBACA,MACA,UACA,SAAS;EACP,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,UAAU;EACV,aAAa;EACb,YAAY;EACZ,SAAS;EACV,EACD,mBAAmB,EAAE,KACnB;CAEJ,MAAM,UAAU,UAAU,MAAM;AAEhC,QACE,oCAAC,SACC,OAAO;EACL,OAAO;EACP,SAAS;EACT,UAAU,CAAC,QAAQ;EACnB,QAAQ;EACT,IAED,oCAAC;EACC,gBAAgB;EAChB,OAAO;GACL,UAAU;GACV,KAAK;GACN;IAED,oCAAC,SAAI,WAAW,UAAU,QAAQ,SAChC,oCAAC,aAAK,KAAW,CACb,CACG,EACX,oCAAC,SAAI,WAAW,UAAU,QAAQ,QAAS,EAgB1C,CAAC,QACA,oCAAC;EACC,OAAO;EACP,eAAe,GAAG,WAAW,KAAK,MAAM;AACtC,YAAS,QAAQ,EAAE,MAAM;;EAE3B,aAAa,EACJ,OACR;EACD,MAAM,EACG,OACR;EACD,UAAU,YAAY;EACd;IAEP,QACS,CAEV"}

package/dist/DynamicContainerWithMenu-lYZyNyb_.js

@@ -0,0 +1,141 @@
+import { t as AmbientTokenButton } from "./AmbientTokenButton-B53E25r2.js";
+import { t as useDynamicListCalculation } from "./useDynamicListCalculation-BzXkwt1u.js";
+import React, { Children, cloneElement, forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { MenuItem, Popover } from "@material-ui/core";
+import { MoreVerticalIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+import { makeStyles as makeStyles$1 } from "@material-ui/core/styles";
+
+//#region src/UI/containers/DynamicContainerWithMenu.jsx
+const useStyles = makeStyles$1((theme) => ({ filterChipMenuIcon: {
+	background: theme.palette.common.grey,
+	padding: theme.spacing(1),
+	color: theme.palette.primary.main
+} }));
+const DynamicContainerWithMenu = forwardRef((props, ref) => {
+	const { children, className, menuButton, menuIconClassName, includeBuffer = true } = props;
+	const classes = useStyles();
+	const { calculateNumberOfVisibleChildren } = useDynamicListCalculation();
+	const modifiedMenuButton = useMemo(() => {
+		if (!menuButton) return null;
+		return cloneElement(menuButton, {
+			onClick: (event) => {
+				menuButton.props.onClick(event);
+				handlePopoverClick(event);
+			},
+			...menuButton.props
+		}, menuButton.props.children);
+	}, [menuButton]);
+	const [allChildren, setAllChildren] = useState([]);
+	const [visibleChildren, setVisibleChildren] = useState([]);
+	const [menuChildren, setMenuChildren] = useState([]);
+	const [anchorEl, setAnchorEl] = useState(null);
+	const open = Boolean(anchorEl);
+	const id = open ? "simple-popover" : void 0;
+	const containerRef = useRef(ref);
+	const outerContainerRef = useRef(null);
+	const childrenRefs = useRef([]);
+	const handlePopoverClick = (event) => {
+		setAnchorEl(event.currentTarget);
+	};
+	const handlePopoverClose = () => {
+		setAnchorEl(null);
+	};
+	const handleSizeChange = useCallback(() => {
+		const maxVisibleChildren = calculateNumberOfVisibleChildren(containerRef, childrenRefs, includeBuffer);
+		const visibleChildren$1 = allChildren.slice(0, maxVisibleChildren);
+		const menuChildren$1 = allChildren.slice(maxVisibleChildren);
+		setVisibleChildren(visibleChildren$1);
+		setMenuChildren(menuChildren$1);
+	}, [
+		containerRef,
+		allChildren,
+		childrenRefs,
+		calculateNumberOfVisibleChildren,
+		includeBuffer
+	]);
+	const handleMenuItemClick = useCallback((child) => {
+		if (child.props.onClick && typeof child.props.onClick === "function") child.props.onClick();
+		let children$1 = child.props.children;
+		while (children$1) {
+			if (Array.isArray(children$1) && children$1.length > 0) children$1.forEach((child$1) => {
+				if (child$1.props.onClick && typeof child$1.props.onClick === "function") child$1.props.onClick();
+			});
+			else if (typeof children$1 === "object") {
+				if (children$1.props.onClick && typeof children$1.props.onClick === "function") children$1.props.onClick();
+			}
+			children$1 = children$1.props.children;
+		}
+		handlePopoverClose();
+	}, []);
+	useEffect(() => {
+		const arrayChildren = Children.toArray(children);
+		setAllChildren(arrayChildren);
+		setVisibleChildren(arrayChildren);
+	}, [children]);
+	useLayoutEffect(handleSizeChange, [handleSizeChange]);
+	useLayoutEffect(() => {
+		window.addEventListener("resize", handleSizeChange);
+		const resizeObserver = new ResizeObserver(handleSizeChange);
+		if (outerContainerRef.current) resizeObserver.observe(outerContainerRef.current);
+		return () => {
+			window.removeEventListener("resize", handleSizeChange);
+			resizeObserver.disconnect();
+		};
+	}, [handleSizeChange, outerContainerRef]);
+	return /* @__PURE__ */ React.createElement("div", {
+		ref: outerContainerRef,
+		style: {
+			width: "100%",
+			overflow: "hidden"
+		}
+	}, /* @__PURE__ */ React.createElement("div", {
+		className,
+		ref: containerRef,
+		style: {
+			display: "flex",
+			flexWrap: "noWrap",
+			overflow: "hidden",
+			flexGrow: 1
+		}
+	}, visibleChildren && Children.map(visibleChildren, (child, index) => {
+		return cloneElement(child, {
+			ref: (ref$1) => childrenRefs.current[index] = ref$1,
+			...child.props
+		}, child.props.children);
+	}), menuChildren && menuChildren.length > 0 && /* @__PURE__ */ React.createElement("div", null, modifiedMenuButton ?? /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		id,
+		icon: MoreVerticalIcon,
+		tooltip: "Additional Filter Values",
+		ariaLabel: "Additional Filter Values",
+		onClick: handlePopoverClick,
+		iconClassName: menuIconClassName ?? classes.filterChipMenuIcon
+	}), /* @__PURE__ */ React.createElement(Popover, {
+		id,
+		open,
+		anchorEl,
+		onClose: handlePopoverClose,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "right"
+		}
+	}, Children.map(menuChildren, (child, index) => {
+		return /* @__PURE__ */ React.createElement(MenuItem, { onClick: () => handleMenuItemClick(child) }, cloneElement(child, { ...child.props }, child.props.children));
+	})))));
+});
+DynamicContainerWithMenu.displayName = "DynamicContainerWithMenu";
+DynamicContainerWithMenu.propTypes = {
+	children: PropTypes.node.isRequired,
+	className: PropTypes.string,
+	menuButton: PropTypes.node,
+	menuIconClassName: PropTypes.string,
+	includeBuffer: PropTypes.bool
+};
+
+//#endregion
+export { DynamicContainerWithMenu as t };
+//# sourceMappingURL=DynamicContainerWithMenu-lYZyNyb_.js.map

package/dist/DynamicContainerWithMenu-lYZyNyb_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicContainerWithMenu-lYZyNyb_.js","names":["makeStyles","visibleChildren","menuChildren","children","child","ref"],"sources":["../src/UI/containers/DynamicContainerWithMenu.jsx"],"sourcesContent":["import { MoreVerticalIcon } from '@fluentui/react-icons';\nimport { MenuItem, Popover } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\nimport React, {\n  Children,\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport { useDynamicListCalculation } from '../../hooks/useDynamicListCalculation';\nimport { AmbientTokenButton } from '../inputs/buttons/AmbientTokenButton';\n\nconst useStyles = makeStyles((theme) => ({\n  filterChipMenuIcon: {\n    background: theme.palette.common.grey,\n    padding: theme.spacing(1),\n    color: theme.palette.primary.main\n  }\n}));\n\nexport const DynamicContainerWithMenu = forwardRef((props, ref) => {\n  // ################### Props ###################\n  const {\n    children,\n    className,\n    menuButton,\n    menuIconClassName,\n    includeBuffer = true\n  } = props;\n\n  // ################### Custom Hooks ###################\n  const classes = useStyles();\n  const { calculateNumberOfVisibleChildren } = useDynamicListCalculation();\n\n  // ################### Memoized Values ###################\n  const modifiedMenuButton = useMemo(() => {\n    if (!menuButton) return null;\n\n    return cloneElement(\n      menuButton,\n      {\n        onClick: (event) => {\n          menuButton.props.onClick(event);\n          handlePopoverClick(event);\n        },\n        ...menuButton.props\n      },\n      menuButton.props.children\n    );\n  }, [menuButton]);\n\n  // ################### States ###################\n  const [allChildren, setAllChildren] = useState([]);\n  const [visibleChildren, setVisibleChildren] = useState([]);\n  const [menuChildren, setMenuChildren] = useState([]);\n  const [anchorEl, setAnchorEl] = useState(null);\n\n  // ################### Variables ###################\n  const open = Boolean(anchorEl);\n  const id = open ? 'simple-popover' : undefined;\n\n  // ################### Refs ###################\n  const containerRef = useRef(ref);\n  const outerContainerRef = useRef(null);\n  const childrenRefs = useRef([]);\n\n  // ################### Functions ###################\n  const handlePopoverClick = (event) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handlePopoverClose = () => {\n    setAnchorEl(null);\n  };\n\n  // ################### Callbacks ###################\n  const handleSizeChange = useCallback(() => {\n    const maxVisibleChildren = calculateNumberOfVisibleChildren(\n      containerRef,\n      childrenRefs,\n      includeBuffer\n    );\n\n    const visibleChildren = allChildren.slice(0, maxVisibleChildren);\n    const menuChildren = allChildren.slice(maxVisibleChildren);\n\n    setVisibleChildren(visibleChildren);\n    setMenuChildren(menuChildren);\n  }, [\n    containerRef,\n    allChildren,\n    childrenRefs,\n    calculateNumberOfVisibleChildren,\n    includeBuffer\n  ]);\n\n  const handleMenuItemClick = useCallback((child) => {\n    if (child.props.onClick && typeof child.props.onClick === 'function') {\n      child.props.onClick();\n    }\n\n    // If the child has children, then call the onClick function for each child\n    let children = child.props.children;\n    while (children) {\n      if (Array.isArray(children) && children.length > 0) {\n        children.forEach((child) => {\n          if (\n            child.props.onClick &&\n            typeof child.props.onClick === 'function'\n          ) {\n            child.props.onClick();\n          }\n        });\n      } else if (typeof children === 'object') {\n        if (\n          children.props.onClick &&\n          typeof children.props.onClick === 'function'\n        ) {\n          children.props.onClick();\n        }\n      }\n\n      children = children.props.children;\n    }\n\n    handlePopoverClose();\n  }, []);\n\n  // ################### Effects ###################\n  useEffect(() => {\n    const arrayChildren = Children.toArray(children);\n    setAllChildren(arrayChildren);\n    setVisibleChildren(arrayChildren);\n  }, [children]);\n\n  useLayoutEffect(handleSizeChange, [handleSizeChange]);\n\n  useLayoutEffect(() => {\n    // Add the resize event listener for when the browser window is resized\n    window.addEventListener('resize', handleSizeChange);\n    // Add the resize observer for when the parent div is resized\n    const resizeObserver = new ResizeObserver(handleSizeChange);\n    if (outerContainerRef.current) {\n      resizeObserver.observe(outerContainerRef.current);\n    }\n\n    // Remove the event listeners on cleanup\n    return () => {\n      window.removeEventListener('resize', handleSizeChange);\n      resizeObserver.disconnect();\n    };\n  }, [handleSizeChange, outerContainerRef]);\n\n  // ################### Render ###################\n  return (\n    <div\n      ref={outerContainerRef}\n      style={{\n        width: '100%',\n        overflow: 'hidden'\n      }}\n    >\n      <div\n        className={className}\n        ref={containerRef}\n        style={{\n          display: 'flex',\n          flexWrap: 'noWrap',\n          overflow: 'hidden',\n          flexGrow: 1\n        }}\n      >\n        {visibleChildren &&\n          Children.map(visibleChildren, (child, index) => {\n            return cloneElement(\n              child,\n              {\n                ref: (ref) => (childrenRefs.current[index] = ref),\n                ...child.props\n              },\n              child.props.children\n            );\n          })}\n        {menuChildren && menuChildren.length > 0 && (\n          <div>\n            {modifiedMenuButton ?? (\n              <AmbientTokenButton\n                id={id}\n                icon={MoreVerticalIcon}\n                tooltip='Additional Filter Values'\n                ariaLabel='Additional Filter Values'\n                onClick={handlePopoverClick}\n                iconClassName={menuIconClassName ?? classes.filterChipMenuIcon}\n              />\n            )}\n            <Popover\n              id={id}\n              open={open}\n              anchorEl={anchorEl}\n              onClose={handlePopoverClose}\n              anchorOrigin={{\n                vertical: 'bottom',\n                horizontal: 'right'\n              }}\n              transformOrigin={{\n                vertical: 'top',\n                horizontal: 'right'\n              }}\n            >\n              {Children.map(menuChildren, (child, index) => {\n                return (\n                  <MenuItem onClick={() => handleMenuItemClick(child)}>\n                    {cloneElement(\n                      child,\n                      {\n                        ...child.props\n                      },\n                      child.props.children\n                    )}\n                  </MenuItem>\n                );\n              })}\n            </Popover>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n});\n\nDynamicContainerWithMenu.displayName = 'DynamicContainerWithMenu';\nDynamicContainerWithMenu.propTypes = {\n  /**\n   * The children to render in the container\n   */\n  children: PropTypes.node.isRequired,\n  /**\n   * A className to apply to the container\n   */\n  className: PropTypes.string,\n  /**\n   * A custom menu button to use instead of the default\n   */\n  menuButton: PropTypes.node,\n  /**\n   * A custom class to apply to the menu icon\n   */\n  menuIconClassName: PropTypes.string,\n  /**\n   * Whether to include a space buffer between the menu button and container border (default: true)\n   * @default true\n   */\n  includeBuffer: PropTypes.bool\n};\n"],"mappings":"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"}