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

package/dist/DonutChartWidget-COa5Dycy.js

@@ -1,161 +0,0 @@
-import { t as __export } from "./chunk-Bp6m_JJh.js";
-import { t as WidgetCard_default } from "./WidgetCard-DZYTvG7e.js";
-import { t as FluentStatsSnippet_default } from "./FluentStatsSnippet-BuDlbH0Q.js";
-import { t as ChartSummaryToggle_default } from "./ChartSummaryToggle-XZozMVzu.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-COa5Dycy.js.map

package/dist/DonutChartWidget-COa5Dycy.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DonutChartWidget-COa5Dycy.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-BFv9JP47.js

@@ -1,89 +0,0 @@
-import { t as FluentButton } from "./FluentButton-3xMbN_Vs.js";
-import { t as FluentIcon } from "./FluentIcon-DjE8A5DC.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-BFv9JP47.js.map

package/dist/DragDropFileUpload-BFv9JP47.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DragDropFileUpload-BFv9JP47.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,MACX,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-rp-hVZ9B.js

@@ -1,93 +0,0 @@
-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-rp-hVZ9B.js.map

package/dist/DraggableSidebarTemplate-rp-hVZ9B.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DraggableSidebarTemplate-rp-hVZ9B.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,MACjB,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-DWB4-ibW.js

@@ -1,141 +0,0 @@
-import { t as AmbientTokenButton } from "./AmbientTokenButton-DGq_rY9l.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-DWB4-ibW.js.map

package/dist/DynamicContainerWithMenu-DWB4-ibW.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DynamicContainerWithMenu-DWB4-ibW.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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"}