udp-react-enterprise-component-library 25.18.1-beta.6 → 25.18.1-beta.60

package/dist/BulkActionsGridButton-JYgIABWU.js

@@ -0,0 +1,922 @@
+import { t as Form } from "./Form-DbOA5j38.js";
+import { t as Field } from "./Field-Cda5rJe2.js";
+import { t as FluentButton } from "./FluentButton-BexKrnAp.js";
+import { t as ConfigService } from "./configService-C4uoG3wj.js";
+import { i as useHandleAxiosSnackbar } from "./apiHelpers-WIR8pqy0.js";
+import { t as apiMutate } from "./useAxiosMutate-DeqKSi5z.js";
+import { t as FluentIcon } from "./FluentIcon-DQ6nSDJg.js";
+import { W as VisibilityTypeEnums } from "./unitySystemEnums-CZDCsD5t.js";
+import { n as PrimaryActionButton_default } from "./PrimaryActionButton-Dk8zvDAW.js";
+import { t as AmbientTextField } from "./AmbientTextField-CdnqPJUw.js";
+import { t as AmbientTokenButton } from "./AmbientTokenButton-B53E25r2.js";
+import { t as AmbientChipButton } from "./AmbientChipButton-DYAYXuKp.js";
+import { t as FluentDialog } from "./FluentDialog-B5ZxvX1E.js";
+import { r as getGridState } from "./GridFunctions-D76ygiH2.js";
+import { t as DynamicContainerWithMenu } from "./DynamicContainerWithMenu-lYZyNyb_.js";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Badge, Box, Divider, FormControlLabel, InputAdornment, MenuItem, Popover, Switch, Tab, Tabs, Tooltip, Typography, lighten, makeStyles } from "@material-ui/core";
+import { AppIconDefaultIcon, BlockedIcon, BulletedTreeListIcon, ChevronDownIcon, ClearIcon, CombineIcon, DeleteIcon, DownloadIcon, ErrorIcon, ExportIcon, FavoriteStarIcon, FilterIcon, LightbulbIcon, MoreVerticalIcon, SaveIcon, SearchIcon, TripleColumnIcon, UploadIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { makeStyles as makeStyles$1 } from "@material-ui/core/styles";
+import Chip$1 from "@material-ui/core/Chip";
+import Divider$1 from "@material-ui/core/Divider";
+import Tooltip$1 from "@material-ui/core/Tooltip";
+import Typography$1 from "@material-ui/core/Typography";
+import StarIcon from "@material-ui/icons/esm/Star";
+
+//#region src/UI/utilityDisplay/GridActionBar.jsx
+const useStyles$3 = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		flexDirection: "row",
+		padding: theme.spacing(.5),
+		background: (props) => props.background ? props.background : lighten(theme.palette.secondary.light, .9)
+	},
+	label: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "flex-end"
+	},
+	title: {
+		flex: 1,
+		display: "flex",
+		alignItems: "center",
+		marginLeft: (props) => props.title ? theme.spacing(2) : 0
+	},
+	tabRoot: {
+		minWidth: 0,
+		textTransform: "none"
+	},
+	controls: {
+		display: "flex",
+		alignItems: "center",
+		gridGap: theme.spacing(2),
+		gap: theme.spacing(2),
+		marginRight: theme.spacing(2)
+	},
+	icon: {
+		background: theme.palette.common.white,
+		padding: theme.spacing(1),
+		color: theme.palette.secondary.main
+	}
+}));
+const GridActionBar = (props) => {
+	const classes = useStyles$3(props);
+	const { children, onChange, handleChange, value, exportCSV, exportExcel, exportPDF, fitClick, expandClick, clearClick, exportClick, saveGridConfig, deleteGridConfig, clearGridConfig, title, hideFitGrid = false, hideExpandGrid = false, hideExportGrid = false, hideRemoveFilters = false, hideFilterTab = false, hideGroupTab = false, hideColumnTab = false, hideSearchBar = false } = props;
+	const gridControlsExport = /* @__PURE__ */ React.createElement("div", null);
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.title }, title && /* @__PURE__ */ React.createElement(Typography, {
+		variant: "h6",
+		style: {
+			overflow: "hidden",
+			whiteSpace: "nowrap",
+			textOverflow: "ellipsis"
+		}
+	}, " ", title, " "), !hideSearchBar && /* @__PURE__ */ React.createElement("div", { style: {
+		flex: 1,
+		marginLeft: 16,
+		marginRight: 16,
+		marginTop: -16
+	} }, /* @__PURE__ */ React.createElement(AmbientTextField, {
+		title,
+		onChange,
+		InputProps: {
+			type: "search",
+			startAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React.createElement(SearchIcon, null))
+		}
+	}))), /* @__PURE__ */ React.createElement("div", null, " ", gridControlsExport), /* @__PURE__ */ React.createElement("div", { className: classes.controls }, saveGridConfig && /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		iconClassName: classes.icon,
+		icon: SaveIcon,
+		tooltip: "Save Grid Configuration",
+		ariaLabel: "Save Grid Configuration",
+		onClick: saveGridConfig
+	}), deleteGridConfig && /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		iconClassName: classes.icon,
+		icon: DeleteIcon,
+		tooltip: "Delete Grid Configuration",
+		ariaLabel: "Delete Grid Configuration",
+		onClick: deleteGridConfig
+	}), clearGridConfig && /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		iconClassName: classes.icon,
+		icon: ClearIcon,
+		tooltip: "Clear Grid Configuration",
+		ariaLabel: "Clear Grid Configuration",
+		onClick: clearGridConfig
+	}), !hideFitGrid && /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		iconClassName: classes.icon,
+		icon: CombineIcon,
+		tooltip: "Fit Grid",
+		ariaLabel: "Fit Grid",
+		onClick: fitClick
+	}), !hideExpandGrid && /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		iconClassName: classes.icon,
+		icon: ExportIcon,
+		tooltip: "Expand Grid",
+		ariaLabel: "Expand Grid",
+		onClick: expandClick
+	}), !hideExportGrid && /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		iconClassName: classes.icon,
+		icon: DownloadIcon,
+		tooltip: "Export Grid",
+		ariaLabel: "Export Grid",
+		onClick: exportClick
+	}), !hideRemoveFilters && /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		iconClassName: classes.icon,
+		icon: BlockedIcon,
+		tooltip: "Remove Filters",
+		ariaLabel: "Remove Filters",
+		onClick: clearClick
+	})), /* @__PURE__ */ React.createElement(Tabs, {
+		value,
+		onChange: handleChange,
+		"aria-label": "basic tabs example"
+	}, !hideFilterTab && /* @__PURE__ */ React.createElement(Tab, {
+		label: "Filter",
+		classes: { root: classes.tabRoot }
+	}), !hideGroupTab && /* @__PURE__ */ React.createElement(Tab, {
+		label: "Group",
+		classes: { root: classes.tabRoot }
+	}), !hideColumnTab && /* @__PURE__ */ React.createElement(Tab, {
+		label: "Column",
+		classes: { root: classes.tabRoot }
+	})), children);
+};
+GridActionBar.propTypes = {
+	title: PropTypes.string,
+	children: PropTypes.node,
+	handleChange: PropTypes.func,
+	value: PropTypes.number,
+	fitClick: PropTypes.func,
+	expandClick: PropTypes.func,
+	clearClick: PropTypes.func,
+	exportClick: PropTypes.func
+};
+
+//#endregion
+//#region src/UI/utilityDisplay/GridPrimaryBar.jsx
+const useStyles$2 = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		flexDirection: "row",
+		padding: theme.spacing(.5)
+	},
+	label: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "flex-end"
+	},
+	title: {
+		flex: 1,
+		display: "flex",
+		alignItems: "center",
+		marginLeft: (props) => props.title ? theme.spacing(2) : 0
+	},
+	tabRoot: {
+		minWidth: 0,
+		textTransform: "none"
+	},
+	controls: {
+		display: "flex",
+		alignItems: "center",
+		gridGap: theme.spacing(2),
+		gap: theme.spacing(2),
+		marginRight: theme.spacing(2)
+	},
+	icon: {
+		background: theme.palette.common.white,
+		padding: theme.spacing(1),
+		color: theme.palette.primary.main
+	}
+}));
+const GridPrimaryBar = (props) => {
+	const classes = useStyles$2(props);
+	const { children, onChange, fitClick, expandClick, clearClick, exportClick, filterClick, columnsClick, groupClick, title, hiddenActionButtons, hiddenLabels, hideSearchBar = false, secondaryActionButtons, saveViewClick, viewsClick, insightsClick, onPrimaryActionClick, primaryActionDisabled, primaryActionLabel, primaryActionIcon, onSearchKeyDown } = props;
+	const [actionButtonMedianPx, setActionButtonMedianPx] = useState(0);
+	const [actionButtons, setActionButtons] = useState([]);
+	const [menuActionButtons, setMenuActionButtons] = useState([]);
+	const [anchorEl, setAnchorEl] = useState(null);
+	const [windowWidthBreakpoint, setWindowWidthBreakpoint] = useState(1400);
+	const chipButtonSizePx = 100;
+	const tokenButtonSizePx = 40;
+	const open = Boolean(anchorEl);
+	const id = open ? "simple-popover" : void 0;
+	const defaultActionButtons = useMemo(() => [
+		{
+			icon: SaveIcon,
+			tooltip: "Save Grid Configuration",
+			label: "Save View",
+			visible: !hiddenActionButtons.includes("saveView"),
+			hideLabel: hiddenLabels.includes("saveView"),
+			onClick: saveViewClick,
+			background: "transparent"
+		},
+		{
+			icon: FavoriteStarIcon,
+			tooltip: "Browse Views",
+			label: "Views",
+			visible: !hiddenActionButtons.includes("views"),
+			onClick: viewsClick,
+			hideLabel: hiddenLabels.includes("views"),
+			iconClassName: classes.icon
+		},
+		{
+			icon: LightbulbIcon,
+			tooltip: "Insights",
+			label: "Insights",
+			visible: !hiddenActionButtons.includes("insights"),
+			hideLabel: hiddenLabels.includes("insights"),
+			onClick: insightsClick,
+			iconClassName: classes.icon
+		},
+		{
+			icon: UploadIcon,
+			tooltip: "Import/Export",
+			label: "Import/Export",
+			visible: !!exportClick && !hiddenActionButtons.includes("importExport"),
+			hideLabel: hiddenLabels.includes("importExport"),
+			onClick: exportClick,
+			iconClassName: classes.icon
+		},
+		{
+			icon: BulletedTreeListIcon,
+			tooltip: "Group",
+			label: "Group",
+			visible: !!groupClick && !hiddenActionButtons.includes("group"),
+			hideLabel: hiddenLabels.includes("group"),
+			onClick: groupClick,
+			iconClassName: classes.icon
+		},
+		{
+			icon: FilterIcon,
+			tooltip: "Filter",
+			label: "Filter",
+			visible: !!filterClick && !hiddenActionButtons.includes("filter"),
+			hideLabel: hiddenLabels.includes("filter"),
+			onClick: filterClick,
+			iconClassName: classes.icon
+		},
+		{
+			icon: TripleColumnIcon,
+			tooltip: "Columns",
+			label: "Columns",
+			visible: !!columnsClick && !hiddenActionButtons.includes("columns"),
+			hideLabel: hiddenLabels.includes("columns"),
+			onClick: columnsClick,
+			iconClassName: classes.icon
+		},
+		{
+			icon: CombineIcon,
+			tooltip: "Fit Grid",
+			label: "Fit Grid",
+			visible: !!fitClick && !hiddenActionButtons.includes("fitGrid"),
+			hideLabel: hiddenLabels.includes("fitGrid"),
+			onClick: fitClick,
+			iconClassName: classes.icon
+		},
+		{
+			icon: ExportIcon,
+			tooltip: "Expand Grid",
+			label: "Expand Grid",
+			visible: !!expandClick && !hiddenActionButtons.includes("expandGrid"),
+			hideLabel: hiddenLabels.includes("expandGrid"),
+			onClick: expandClick,
+			iconClassName: classes.icon
+		},
+		{
+			icon: BlockedIcon,
+			tooltip: "Clear Filters",
+			label: "Clear Filters",
+			visible: !!clearClick && !hiddenActionButtons.includes("clearFilters"),
+			hideLabel: hiddenLabels.includes("clearFilters"),
+			onClick: clearClick,
+			iconClassName: classes.icon
+		}
+	], [
+		classes.icon,
+		clearClick,
+		columnsClick,
+		expandClick,
+		exportClick,
+		filterClick,
+		fitClick,
+		groupClick,
+		hiddenActionButtons,
+		hiddenLabels,
+		insightsClick,
+		saveViewClick,
+		viewsClick
+	]);
+	const handlePopoverClick = (event) => {
+		setAnchorEl(event.currentTarget);
+	};
+	const handlePopoverClose = () => {
+		setAnchorEl(null);
+	};
+	const formatActionButtons = useCallback((buttons) => {
+		return buttons.map((button) => {
+			if (button.visible === void 0) button.visible = true;
+			if (button.hideLabel === void 0) button.hideLabel = false;
+			if (button.label === void 0) {
+				button.label = button.tooltip ?? "Button";
+				button.hideLabel = true;
+			}
+			if (button.iconClassName === void 0 && button.background === void 0) button.iconClassName = classes.icon;
+			return button;
+		});
+	}, [classes?.icon]);
+	useEffect(() => {
+		const allActionButtons = formatActionButtons([...defaultActionButtons, ...secondaryActionButtons]);
+		const menuButtons = [];
+		const numActionButtons = allActionButtons.length - hiddenActionButtons.length;
+		const buttonTotalWidth = numActionButtons * chipButtonSizePx - (chipButtonSizePx - tokenButtonSizePx) * hiddenLabels.length;
+		const calculatedMedian = Math.floor(buttonTotalWidth / numActionButtons);
+		let breakPoint = (calculatedMedian > 70 ? 950 : 900) + buttonTotalWidth;
+		const currentWindowWidth = window.innerWidth;
+		while (currentWindowWidth < breakPoint && allActionButtons.length > 0) {
+			const movedAction = allActionButtons.pop();
+			menuButtons.push(movedAction);
+			breakPoint -= calculatedMedian;
+		}
+		setActionButtonMedianPx(calculatedMedian);
+		setActionButtons(allActionButtons);
+		setMenuActionButtons(menuButtons);
+		setWindowWidthBreakpoint(breakPoint);
+	}, [
+		formatActionButtons,
+		defaultActionButtons,
+		secondaryActionButtons,
+		hiddenActionButtons?.length,
+		hiddenLabels?.length
+	]);
+	useEffect(() => {
+		const handleResize = () => {
+			let breakPoint = windowWidthBreakpoint;
+			let visibleButtons = [...actionButtons];
+			let menuButtons = [...menuActionButtons];
+			while (window.innerWidth < breakPoint && visibleButtons.length > 0) {
+				const movedAction = visibleButtons.pop();
+				menuButtons.push(movedAction);
+				breakPoint -= actionButtonMedianPx;
+			}
+			while (window.innerWidth > breakPoint + actionButtonMedianPx && menuButtons.length > 0) {
+				const movedAction = menuButtons.pop(0);
+				visibleButtons.push(movedAction);
+				breakPoint += actionButtonMedianPx;
+			}
+			setActionButtons(visibleButtons);
+			setMenuActionButtons(menuButtons);
+			setWindowWidthBreakpoint(breakPoint);
+		};
+		window.addEventListener("resize", handleResize);
+		return () => {
+			window.removeEventListener("resize", handleResize);
+		};
+	}, [
+		windowWidthBreakpoint,
+		actionButtons,
+		menuActionButtons,
+		actionButtonMedianPx
+	]);
+	const handleCustomKeyDown = (event) => {
+		if (onSearchKeyDown) {
+			if (event.key === "Enter") onSearchKeyDown();
+		}
+	};
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.title }, title && /* @__PURE__ */ React.createElement(Typography, {
+		variant: "h6",
+		style: {
+			overflow: "hidden",
+			whiteSpace: "nowrap",
+			textOverflow: "ellipsis"
+		}
+	}, " ", title, " "), !hideSearchBar && /* @__PURE__ */ React.createElement("div", { style: {
+		flex: 1,
+		marginLeft: 16,
+		marginRight: 16,
+		marginTop: -16,
+		maxWidth: 300
+	} }, /* @__PURE__ */ React.createElement(AmbientTextField, {
+		title,
+		onChange,
+		onKeyDown: handleCustomKeyDown,
+		InputProps: {
+			type: "search",
+			startAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React.createElement(SearchIcon, null))
+		}
+	}))), /* @__PURE__ */ React.createElement("div", { className: classes.controls }, actionButtons.map((button) => button.visible && (button.hideLabel ? /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		id: "udpRecord-GridPrimaryBar-Token-" + button.label.replace(/ /g, "-"),
+		udprecordid: "udpRecord-GridPrimaryBar-Token-" + button.label.replace(/ /g, "-"),
+		icon: button.icon ?? AppIconDefaultIcon,
+		tooltip: button.tooltip,
+		onClick: button.onClick,
+		ariaLabel: button.label,
+		iconClassName: button.iconClassName
+	}) : /* @__PURE__ */ React.createElement(AmbientChipButton, {
+		id: "udpRecord-GridPrimaryBar-Chip-" + button.label.replace(/ /g, "-"),
+		udprecordid: "udpRecord-GridPrimaryBar-Chip-" + button.label.replace(/ /g, "-"),
+		icon: button.icon ?? AppIconDefaultIcon,
+		tooltip: button.tooltip,
+		label: button.label,
+		onClick: button.onClick,
+		background: button.background
+	}))), !!menuActionButtons.length && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		id,
+		icon: MoreVerticalIcon,
+		tooltip: "More Actions",
+		ariaLabel: "More Actions",
+		onClick: handlePopoverClick,
+		iconClassName: classes.icon
+	}), /* @__PURE__ */ React.createElement(Popover, {
+		id,
+		open,
+		anchorEl,
+		onClose: handlePopoverClose,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "right"
+		}
+	}, menuActionButtons.slice(0).reverse().map((button) => {
+		if (!button.visible) return null;
+		return /* @__PURE__ */ React.createElement(MenuItem, {
+			id: "udpRecord-GridPrimaryBar-MenuItem-" + button.label.replace(/ /g, "-"),
+			udprecordid: "udpRecord-GridPrimaryBar-MenuItem-" + button.label.replace(/ /g, "-"),
+			onClick: button.onClick,
+			style: {
+				display: "flex",
+				justifyContent: "space-between"
+			}
+		}, /* @__PURE__ */ React.createElement(Typography, null, button.label), /* @__PURE__ */ React.createElement(FluentIcon, {
+			component: button.icon ?? AppIconDefaultIcon,
+			style: { marginLeft: 7 }
+		}));
+	})))), onPrimaryActionClick && /* @__PURE__ */ React.createElement(PrimaryActionButton_default, {
+		onClick: onPrimaryActionClick,
+		id: "udpRecord-GridPrimaryBar-Add",
+		udprecordid: "udpRecord-GridPrimaryBar-Add",
+		disabled: primaryActionDisabled
+	}, /* @__PURE__ */ React.createElement(Typography, { style: { marginLeft: 4 } }, primaryActionLabel ?? "Button"), /* @__PURE__ */ React.createElement(FluentIcon, {
+		style: { marginLeft: 7 },
+		component: primaryActionIcon ?? AppIconDefaultIcon
+	})));
+};
+GridPrimaryBar.propTypes = {
+	title: PropTypes.string,
+	children: PropTypes.node,
+	onChange: PropTypes.func,
+	fitClick: PropTypes.func,
+	expandClick: PropTypes.func,
+	clearClick: PropTypes.func,
+	exportClick: PropTypes.func,
+	insightsClick: PropTypes.func,
+	filterClick: PropTypes.func,
+	columnsClick: PropTypes.func,
+	groupClick: PropTypes.func,
+	hideSearchBar: PropTypes.bool,
+	secondaryActionButtons: PropTypes.arrayOf(PropTypes.object),
+	hiddenActionButtons: PropTypes.arrayOf(PropTypes.oneOf([
+		"saveView",
+		"views",
+		"insights",
+		"importExport",
+		"group",
+		"filter",
+		"columns",
+		"fitGrid",
+		"expandGrid",
+		"clearFilters"
+	])),
+	hiddenLabels: PropTypes.arrayOf(PropTypes.oneOf([
+		"saveView",
+		"views",
+		"insights",
+		"importExport",
+		"group",
+		"filter",
+		"columns",
+		"fitGrid",
+		"expandGrid",
+		"clearFilters"
+	])),
+	onPrimaryActionClick: PropTypes.func,
+	primaryActionLabel: PropTypes.string,
+	primaryActionIcon: PropTypes.elementType
+};
+
+//#endregion
+//#region src/UI/utilityDisplay/SaveViewFormDialog.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	root: {},
+	saveForm: {
+		minWidth: 450,
+		paddingLeft: theme.spacing(2),
+		paddingRight: theme.spacing(2)
+	},
+	column: {
+		flex: 1,
+		paddingLeft: theme.spacing(2),
+		paddingRight: theme.spacing(2)
+	},
+	divider: {
+		backgroundColor: "grey",
+		color: "grey",
+		width: 2,
+		height: "100%"
+	},
+	infoHeader: { color: "grey" }
+}));
+/**
+* @param {PropTypes.InferProps<typeof SaveViewFormDialog.propTypes>} props
+*/
+const SaveViewFormDialog = (props) => {
+	const { handleErrorSnackbar, handleSuccessSnackbar } = useHandleAxiosSnackbar();
+	const { open, handleClose, tenant, application, user, refetchViews, gApi, gcApi, gridId, domain, apiCatalogId } = props;
+	const { t } = useTranslation();
+	const classes = useStyles$1(props);
+	const saveViewFormRef = useRef(null);
+	const triggerSaveView = useCallback(() => {
+		saveViewFormRef.current.handleSubmit();
+	}, [saveViewFormRef]);
+	const saveView = async (values) => {
+		const data = {
+			data: {
+				gridView: {
+					Name: values.name,
+					GridViewVisibilityTypeId: values.private ? VisibilityTypeEnums.Private : VisibilityTypeEnums.Public,
+					isDefault: 0,
+					tenantId: user?.currentTenantId,
+					userId: user?.id,
+					gridId,
+					domain,
+					apiCatalogId
+				},
+				gridConfigurations: getGridState(gApi, gcApi, gridId)
+			},
+			method: "POST"
+		};
+		handleClose();
+		await apiMutate(ConfigService.tenantV2ApiUrl, `GridView/createGridView`, data).then((response) => {
+			handleSuccessSnackbar(t("View Saved"));
+			refetchViews();
+		}).catch((error) => {
+			console.log(error);
+			handleErrorSnackbar(error, t("Failed to Save View"));
+		});
+	};
+	return /* @__PURE__ */ React.createElement(FluentDialog, {
+		title: t("Save New View"),
+		open,
+		handleClose,
+		labelOne: t("Save View"),
+		labelTwo: t("Cancel"),
+		actionOne: triggerSaveView,
+		actionTwo: handleClose
+	}, /* @__PURE__ */ React.createElement(Box, { display: "flex" }, /* @__PURE__ */ React.createElement("div", { className: classes.column }, /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.infoHeader,
+		align: "left"
+	}, t("Tenant")), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "subtitle2",
+		align: "left"
+	}, tenant ?? "--")), /* @__PURE__ */ React.createElement(Divider, {
+		flexItem: true,
+		orientation: "vertical"
+	}), /* @__PURE__ */ React.createElement("div", { className: classes.column }, /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.infoHeader,
+		align: "left"
+	}, t("Application")), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "subtitle2",
+		align: "left"
+	}, application ?? "--")), /* @__PURE__ */ React.createElement(Divider, {
+		flexItem: true,
+		orientation: "vertical"
+	}), /* @__PURE__ */ React.createElement("div", { className: classes.column }, /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.infoHeader,
+		align: "left"
+	}, t("Entity")), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "subtitle2",
+		align: "left"
+	}, domain ?? "--"))), /* @__PURE__ */ React.createElement("div", { className: classes.saveForm }, /* @__PURE__ */ React.createElement(Form, {
+		onSubmit: saveView,
+		ref: saveViewFormRef
+	}, /* @__PURE__ */ React.createElement(Field, {
+		type: "text",
+		component: AmbientTextField,
+		name: "name",
+		id: "name",
+		label: t("Name"),
+		fullWidth: true,
+		required: true,
+		style: {
+			marginBottom: 20,
+			marginTop: 10
+		}
+	}), /* @__PURE__ */ React.createElement(FormControlLabel, {
+		control: /* @__PURE__ */ React.createElement(Field, {
+			component: Switch,
+			name: "private",
+			id: "private",
+			defaultValue: false,
+			type: "checkbox"
+		}),
+		label: t("Private"),
+		labelPlacement: "end"
+	}))));
+};
+SaveViewFormDialog.propTypes = {
+	open: PropTypes.bool.isRequired,
+	handleClose: PropTypes.func.isRequired,
+	tenant: PropTypes.string,
+	application: PropTypes.string,
+	entity: PropTypes.string,
+	user: PropTypes.object,
+	columnDefsValues: PropTypes.array,
+	refetchViews: PropTypes.func,
+	gApi: PropTypes.object,
+	gcApi: PropTypes.object,
+	setSelectedView: PropTypes.func
+};
+
+//#endregion
+//#region src/UI/utilityDisplay/ChipSection.jsx
+const useStyles = makeStyles$1((theme) => ({
+	wrapper: {
+		display: "flex",
+		gap: theme.spacing(1),
+		flexWrap: "noWrap",
+		backgroundColor: `${theme.palette.secondary.light}80`,
+		alignItems: "center",
+		flexGrow: 1,
+		width: "100%"
+	},
+	chipHolder: {
+		display: "flex",
+		gap: theme.spacing(1),
+		flexWrap: "noWrap",
+		backgroundColor: `${theme.palette.secondary.light}80`,
+		alignItems: "center",
+		overflow: "scroll",
+		"&::-webkit-scrollbar": { display: "none" },
+		flexGrow: 1
+	},
+	viewChip: {
+		backgroundColor: theme.palette.secondary.main,
+		color: "white",
+		maxWidth: "150px",
+		transition: "opacity 0.3s ease",
+		marginLeft: theme.spacing(1)
+	},
+	menuItem: { backgroundColor: "white" },
+	filterChipMenuIcon: {
+		background: theme.palette.common.grey,
+		padding: theme.spacing(1),
+		color: theme.palette.primary.main
+	},
+	additionalFilterChip: {},
+	KPI: {
+		marginLeft: "auto",
+		display: "flex",
+		gap: theme.spacing(1),
+		color: "grey",
+		width: "auto"
+	},
+	kpiValue: {
+		color: "black",
+		fontSize: "1.1em"
+	},
+	kpiItem: {
+		display: "flex",
+		justifyContent: "center",
+		width: "max-content"
+	},
+	kpiLabel: {
+		width: "max-content",
+		marginRight: theme.spacing(1)
+	},
+	clickedChip: {
+		backgroundColor: theme.palette.primary.main,
+		color: "white",
+		maxWidth: "150px"
+	},
+	filterChipLabel: {
+		color: theme.palette.text.primary,
+		whiteSpace: "nowrap",
+		marginRight: theme.spacing(1)
+	},
+	filterChipValue: {
+		color: theme.palette.text.secondary,
+		whiteSpace: "nowrap"
+	}
+}));
+const ChipSection = (props) => {
+	const { filterChips = [], viewChips = [], additionalFilterChips = [], hideKpiSection = false, kpiValues = [], maxKPIsDisplayed = 4, handleDelete } = props;
+	const classes = useStyles();
+	const chipRefs = useRef([]);
+	const chipSectionContainerRef = useRef(null);
+	const viewChipsContainerRef = useRef(null);
+	const filterChipsContainerRef = useRef(null);
+	const additionalFilterChipsContainerRef = useRef(null);
+	const kpiContainerRef = useRef(null);
+	const [selectedFilterChip, setSelectedFilterChip] = useState(null);
+	const abbrNum = (number, decPlaces) => {
+		if (typeof number === "string" && !isNaN(Number(number))) number = Number(number);
+		else if (typeof number !== "number") throw new Error("The input must be a number or a string that can be converted to a number.");
+		if (typeof decPlaces !== "number") return null;
+		decPlaces = Math.pow(10, decPlaces);
+		let abbrev = [
+			"k",
+			"m",
+			"b",
+			"t"
+		];
+		for (let i = abbrev.length - 1; i >= 0; i--) {
+			let size = Math.pow(10, (i + 1) * 3);
+			if (size <= number) {
+				number = Math.round(number * decPlaces / size) / decPlaces;
+				if (number === 1e3 && i < abbrev.length - 1) {
+					number = 1;
+					i++;
+				}
+				number += abbrev[i];
+				break;
+			}
+		}
+		return number;
+	};
+	const isEmpty = (array) => Array.isArray(array) && array.length === 0;
+	const abbreviateLabel = (label) => {
+		const maxLength = 10;
+		if (label.length > maxLength) return label.slice(0, maxLength - 3) + "...";
+		else return null;
+	};
+	const handleFilterChipToggle = (chip) => {
+		setSelectedFilterChip(chip);
+		if (typeof chip.onToggle === "function") chip.onToggle();
+	};
+	const handleFilterChipUntoggle = () => {
+		if (selectedFilterChip) {
+			if (typeof selectedFilterChip.onUntoggle === "function") selectedFilterChip.onUntoggle();
+			setSelectedFilterChip(null);
+		}
+	};
+	return /* @__PURE__ */ React.createElement("div", {
+		ref: chipSectionContainerRef,
+		className: classes.wrapper,
+		style: { display: [
+			kpiValues,
+			additionalFilterChips,
+			viewChips,
+			filterChips
+		].every((arr) => arr.length === 0) ? "none" : "flex" }
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.chipHolder }, /* @__PURE__ */ React.createElement("div", { ref: viewChipsContainerRef }, viewChips.map((chip, index) => /* @__PURE__ */ React.createElement(Chip$1, {
+		onDelete: () => handleDelete("view", index),
+		key: index,
+		label: chip.label,
+		className: classes.viewChip,
+		icon: /* @__PURE__ */ React.createElement(StarIcon, null),
+		size: "small"
+	}))), !isEmpty(viewChips) && !isEmpty(filterChips) && /* @__PURE__ */ React.createElement(Divider$1, {
+		orientation: "vertical",
+		flexItem: true
+	}), !isEmpty(filterChips) && /* @__PURE__ */ React.createElement(DynamicContainerWithMenu, {
+		className: classes.chipHolder,
+		ref: filterChipsContainerRef
+	}, selectedFilterChip && /* @__PURE__ */ React.createElement(Chip$1, {
+		onDelete: handleFilterChipUntoggle,
+		label: selectedFilterChip.label,
+		className: classes.viewChip,
+		size: "small"
+	}), filterChips.map((chip, index) => {
+		if (selectedFilterChip && chip.id === selectedFilterChip.id) return null;
+		return /* @__PURE__ */ React.createElement(Tooltip$1, { title: chip.label }, /* @__PURE__ */ React.createElement(Chip$1, {
+			key: index,
+			label: /* @__PURE__ */ React.createElement("div", { style: {
+				display: "flex",
+				flexWrap: "noWrap"
+			} }, /* @__PURE__ */ React.createElement(Typography$1, {
+				noWrap: true,
+				className: chip.value ? classes.filterChipLabel : ""
+			}, chip.label), /* @__PURE__ */ React.createElement(Typography$1, {
+				noWrap: true,
+				className: classes.filterChipValue
+			}, chip.value)),
+			className: classes.filterChip,
+			size: "small",
+			onClick: () => handleFilterChipToggle(chip),
+			ref: (el) => chipRefs.current[index] = el
+		}));
+	})), !isEmpty(additionalFilterChips) && !isEmpty(filterChips) && /* @__PURE__ */ React.createElement(Divider$1, {
+		orientation: "vertical",
+		flexItem: true
+	}), /* @__PURE__ */ React.createElement("div", {
+		ref: additionalFilterChipsContainerRef,
+		style: { display: "flex" }
+	}, additionalFilterChips.map((chip, index) => /* @__PURE__ */ React.createElement(Chip$1, {
+		variant: "outlined",
+		onDelete: () => handleDelete("additionalFilter", index),
+		key: index,
+		label: chip.label,
+		className: classes.additionalFilterChip,
+		size: "small"
+	})))), !hideKpiSection && /* @__PURE__ */ React.createElement("div", {
+		className: classes.KPI,
+		ref: kpiContainerRef
+	}, kpiValues.slice(0, 4).map((kpi, index) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+		className: classes.kpiItem,
+		id: index
+	}, /* @__PURE__ */ React.createElement("span", { className: classes.kpiLabel }, abbreviateLabel(kpi.label) && /* @__PURE__ */ React.createElement(Tooltip$1, {
+		title: kpi.label,
+		arrow: true
+	}, /* @__PURE__ */ React.createElement(Typography$1, { noWrap: true }, /* @__PURE__ */ React.createElement("span", null, kpi.label, ":"))) || /* @__PURE__ */ React.createElement(React.Fragment, null, kpi.label)), /* @__PURE__ */ React.createElement("span", { className: classes.kpiValue }, /* @__PURE__ */ React.createElement(Tooltip$1, {
+		title: kpi.value,
+		arrow: true
+	}, /* @__PURE__ */ React.createElement("span", null, abbrNum(kpi.value, 1))))), index !== maxKPIsDisplayed - 1 && /* @__PURE__ */ React.createElement(Divider$1, {
+		orientation: "vertical",
+		flexItem: true
+	})))));
+};
+ChipSection.propTypes = {
+	filterChips: PropTypes.arrayOf(PropTypes.shape({
+		label: PropTypes.string.isRequired,
+		value: PropTypes.string.isRequired
+	})),
+	viewChips: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string.isRequired })),
+	additionalFilterChips: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string.isRequired })),
+	hideKpiSection: PropTypes.bool,
+	kpiValues: PropTypes.arrayOf(PropTypes.shape({
+		label: PropTypes.string.isRequired,
+		value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+	})),
+	maxKPIsDisplayed: PropTypes.number,
+	handleDelete: PropTypes.func,
+	selectedFilterChipsIndex: PropTypes.number,
+	setSelectedFilterChipsIndex: PropTypes.func
+};
+
+//#endregion
+//#region src/UI/utilityDisplay/BulkActionsGridButton.jsx
+const BulkActionsGridButton = (props) => {
+	const { numSelectedRows, bulkActions, triggerAction, domain } = props;
+	const [actionsAnchorEl, setActionsAnchorEl] = useState(null);
+	const handleBulkActionsClick = (event) => {
+		setActionsAnchorEl(event.currentTarget);
+	};
+	const triggerBulkAction = (actionId) => {
+		triggerAction(actionId);
+	};
+	const filterAction = (action) => {
+		return !!domain ? JSON.parse(action?.parameters)?.entityName === domain : true;
+	};
+	return /* @__PURE__ */ React.createElement("div", { style: {
+		marginTop: 5,
+		marginLeft: 20
+	} }, /* @__PURE__ */ React.createElement(Badge, {
+		badgeContent: numSelectedRows,
+		color: "secondary"
+	}, /* @__PURE__ */ React.createElement(FluentButton, {
+		type: "button",
+		onClick: handleBulkActionsClick,
+		variant: "outlined",
+		color: "primary",
+		endIcon: /* @__PURE__ */ React.createElement(FluentIcon, {
+			component: ChevronDownIcon,
+			size: "small"
+		})
+	}, "With Selected")), /* @__PURE__ */ React.createElement(Popover, {
+		id: "actions",
+		open: Boolean(actionsAnchorEl),
+		anchorEl: actionsAnchorEl,
+		onClose: () => setActionsAnchorEl(null),
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "right"
+		}
+	}, bulkActions && bulkActions.map((action) => {
+		const valid = filterAction(action);
+		return /* @__PURE__ */ React.createElement(Tooltip, {
+			placement: "right",
+			title: !valid ? "Action entity does not match data grid entity" : ""
+		}, /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement(MenuItem, {
+			onClick: () => triggerBulkAction(action.actionId),
+			style: {
+				display: "flex",
+				justifyContent: "space-between"
+			},
+			disabled: !valid
+		}, /* @__PURE__ */ React.createElement(Typography, null, action.name), /* @__PURE__ */ React.createElement(FluentIcon, {
+			component: valid ? action.icon ?? AppIconDefaultIcon : ErrorIcon,
+			style: { marginLeft: 7 },
+			color: !valid && "red"
+		}))));
+	})));
+};
+
+//#endregion
+export { GridActionBar as a, GridPrimaryBar as i, ChipSection as n, SaveViewFormDialog as r, BulkActionsGridButton as t };
+//# sourceMappingURL=BulkActionsGridButton-JYgIABWU.js.map