udp-react-enterprise-component-library 25.18.1-beta.31 → 25.18.1-beta.33

package/dist/accordion-DT5LpWAW.js

@@ -0,0 +1,192 @@
+import { t as FluentIcon } from "./FluentIcon-DQ6nSDJg.js";
+import { t as FluentIconButton } from "./FluentIconButton-Dc95mE3v.js";
+import { S as getIconFromName } from "./TreeUtilities-CujOFOPm.js";
+import { t as StatusChip } from "./StatusChip-DZAN88VU.js";
+import { t as IconButtonWithTooltip } from "./IconButtonWithToolTip-DswviiJB.js";
+import React, { useCallback } from "react";
+import { ButtonBase, Collapse, Tooltip, Typography, lighten, makeStyles } from "@material-ui/core";
+import clsx from "clsx";
+import { ChevronUpIcon } from "@fluentui/react-icons";
+
+//#region src/UI/accordion/Accordion.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {
+		width: "100%",
+		height: "100%"
+	},
+	rootBorder: {
+		borderStyle: "solid",
+		borderColor: (props) => theme.palette[props?.color]?.main,
+		borderWidth: "1px 1px 1px 6px"
+	},
+	headerWrapper: {
+		display: "flex",
+		justifyContent: "space-between",
+		alignItems: "center",
+		backgroundColor: (props) => props?.simpleAccordion && props?.color && props?.color !== "default" ? props?.color === "paper" ? theme.palette.background.paper : lighten(theme.palette[props?.color]?.light, .8) : theme.palette.background.default,
+		overflow: "hidden",
+		width: (props) => props?.headerWidth ?? "100%"
+	},
+	secondaryButtonsWrapper: {
+		display: "flex",
+		gap: theme.spacing(2),
+		borderRadius: theme.spacing(2),
+		backgroundColor: "white",
+		padding: `2px ${theme.spacing(1)}px`,
+		width: "fit-content"
+	},
+	primaryButtonWrapper: {
+		minWidth: "68px",
+		maxWidth: (props) => props?.primaryActionMaxWidth,
+		height: "auto",
+		color: "white",
+		backgroundColor: (props) => theme.palette[props?.color]?.main,
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center",
+		alignSelf: "normal"
+	},
+	headerColor: { backgroundColor: (props) => props?.color !== "default" && props?.color !== "paper" && lighten(theme.palette[props?.color]?.light, .85) },
+	buttonWrapper: {
+		display: "flex",
+		gap: theme.spacing(.5)
+	},
+	titleWrapper: {
+		display: "flex",
+		justifyContent: "space-between",
+		alignItems: "center",
+		flexGrow: 2,
+		margin: (props) => props.removeHeaderMargin ? "0px" : theme.spacing(.8),
+		color: theme.palette.text.primary
+	},
+	closeButtonWrapper: {
+		display: "flex",
+		justifyContent: "flex-end",
+		marginTop: theme.spacing(1)
+	},
+	unexpandedIconButton: {
+		width: "68px",
+		height: "40px",
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center",
+		alignSelf: "normal",
+		borderTop: `solid 1px lightgrey`,
+		borderLeft: `solid 1px lightgrey`,
+		overflow: "hidden",
+		border: (props) => props?.removeBorder && "0px"
+	},
+	rightIconButton: {
+		backgroundColor: "white",
+		padding: theme.spacing(1),
+		borderRadius: "50%"
+	},
+	primaryActionLabel: {
+		marginRight: theme.spacing(.5),
+		marginLeft: theme.spacing(.5)
+	},
+	expand: {
+		transform: "rotate(0deg)",
+		marginLeft: "auto",
+		marginRight: theme.spacing(1),
+		transition: theme.transitions.create("transform", { duration: theme.transitions.duration.shortest })
+	},
+	expandOpen: { transform: "rotate(180deg)" },
+	titleStatusWrapper: {
+		display: "flex",
+		alignItems: "center",
+		gap: theme.spacing(1)
+	}
+}));
+const Accordion = (props) => {
+	const { title, subtitle, subtitleVariant, status, statusIcon, statusLabel, secondaryIconButtons, overriddenSecondaryContainer, rightIcon, rightIconAction, rightIconTooltip, disableRightIconButton = false, primaryActionIcon, primaryActionLabel, primaryAction, primaryActionMaxWidth, disablePrimaryActionButton = false, color = "info", children, expand, setExpand, additionalEvent, hideCloseButton = false, hideRightIconButton = false, hidePrimaryAction = false, noWrapTitle = false, simpleAccordion = false, recordId = 0, removeBorder = false, headerWidth, removeHeaderMargin, titleVariant = "subtitle2", chevronIconSize = "medium" } = props;
+	const classes = useStyles({
+		color,
+		primaryActionMaxWidth,
+		simpleAccordion,
+		headerWidth,
+		removeHeaderMargin,
+		removeBorder
+	});
+	const handleOnClickAccordion = useCallback(() => {
+		if (setExpand) setExpand(!expand);
+		if (additionalEvent) additionalEvent();
+	}, [
+		additionalEvent,
+		expand,
+		setExpand
+	]);
+	return /* @__PURE__ */ React.createElement("div", { className: clsx(classes.root, { [classes.rootBorder]: !simpleAccordion & !removeBorder }) }, /* @__PURE__ */ React.createElement("div", {
+		className: clsx(classes.headerWrapper, { [classes.headerColor]: simpleAccordion ? false : expand }),
+		onClick: handleOnClickAccordion
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.titleWrapper }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: classes.titleStatusWrapper }, /* @__PURE__ */ React.createElement(Typography, {
+		variant: titleVariant,
+		noWrap: noWrapTitle
+	}, title), statusLabel && /* @__PURE__ */ React.createElement(StatusChip, {
+		status: status ?? color,
+		label: statusLabel,
+		icon: statusIcon
+	})), subtitle && /* @__PURE__ */ React.createElement(Typography, {
+		variant: subtitleVariant,
+		noWrap: noWrapTitle
+	}, subtitle), overriddenSecondaryContainer ? { overriddenSecondaryContainer } : /* @__PURE__ */ React.createElement("div", null, secondaryIconButtons?.length > 0 && /* @__PURE__ */ React.createElement("div", { className: classes.secondaryButtonsWrapper }, secondaryIconButtons?.map((item) => /* @__PURE__ */ React.createElement("div", { className: classes.buttonWrapper }, /* @__PURE__ */ React.createElement(IconButtonWithTooltip, {
+		...item,
+		title: item?.title,
+		icon: item.icon,
+		onClick: (event) => {
+			event.stopPropagation();
+			item.onClick();
+		},
+		size: "small",
+		id: `udpRecord-Accordion-${item?.title}-${recordId}`,
+		udprecordid: `udpRecord-Accordion-${item?.title}-${recordId}`
+	}), item?.value && /* @__PURE__ */ React.createElement(Typography, null, item?.value)))))), !hideRightIconButton && !simpleAccordion && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(IconButtonWithTooltip, {
+		title: rightIconTooltip,
+		icon: rightIcon,
+		onClick: (event) => {
+			event.stopPropagation();
+			rightIconAction();
+		},
+		className: classes.rightIconButton,
+		size: "small",
+		disabled: disableRightIconButton,
+		id: `udpRecord-Accordion-RightButton-${recordId}`,
+		udprecordid: `udpRecord-Accordion-RightButton-${recordId}`
+	}))), !hidePrimaryAction && !simpleAccordion && /* @__PURE__ */ React.createElement("div", { className: classes.primaryButtonWrapper }, primaryActionIcon ? /* @__PURE__ */ React.createElement(Tooltip, { title: primaryActionLabel }, /* @__PURE__ */ React.createElement(ButtonBase, {
+		onClick: (event) => {
+			event.stopPropagation();
+			primaryAction();
+		},
+		className: classes.primaryButtonWrapper,
+		disabled: disablePrimaryActionButton,
+		id: `udpRecord-Accordion-ButtonBase-${recordId}`,
+		udprecordid: `udpRecord-Accordion-ButtonBase-${recordId}`
+	}, /* @__PURE__ */ React.createElement(FluentIcon, { component: primaryActionIcon }))) : /* @__PURE__ */ React.createElement(ButtonBase, {
+		onClick: primaryAction,
+		className: classes.primaryButtonWrapper,
+		disabled: disablePrimaryActionButton
+	}, /* @__PURE__ */ React.createElement(Typography, { className: classes.primaryActionLabel }, primaryActionLabel))), simpleAccordion && /* @__PURE__ */ React.createElement(FluentIconButton, {
+		icon: getIconFromName("ChevronDownIcon"),
+		onClick: handleOnClickAccordion,
+		className: clsx(classes.expand, { [classes.expandOpen]: expand }),
+		size: chevronIconSize,
+		disabled: disableRightIconButton,
+		id: `udpRecord-Accordion-ExpandButton-${recordId}`,
+		udprecordid: `udpRecord-Accordion-ExpandButton-${recordId}`
+	})), /* @__PURE__ */ React.createElement(Collapse, {
+		in: expand,
+		timeout: "auto",
+		unmountOnExit: true
+	}, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, children), !hideCloseButton && !simpleAccordion && /* @__PURE__ */ React.createElement("div", { className: classes.closeButtonWrapper }, /* @__PURE__ */ React.createElement(ButtonBase, {
+		onClick: () => {
+			if (setExpand) setExpand(false);
+		},
+		className: classes.unexpandedIconButton,
+		id: `udpRecord-Accordion-CloseButton-${recordId}`,
+		udprecordid: `udpRecord-Accordion-CloseButton-${recordId}`
+	}, /* @__PURE__ */ React.createElement(FluentIcon, { component: ChevronUpIcon }))))));
+};
+
+//#endregion
+export { Accordion as t };
+//# sourceMappingURL=accordion-DT5LpWAW.js.map

package/dist/accordion-DT5LpWAW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-DT5LpWAW.js","names":[],"sources":["../src/UI/accordion/Accordion.jsx"],"sourcesContent":["import {\n  ButtonBase,\n  Collapse,\n  Tooltip,\n  Typography,\n  lighten,\n  makeStyles\n} from '@material-ui/core';\nimport clsx from 'clsx';\nimport React, { useCallback } from 'react';\nimport { FluentIcon } from '../../utilities/iconLibrary/FluentIcon';\nimport { IconButtonWithTooltip } from '../inputs/buttons/IconButtonWithToolTip';\nimport { ChevronUpIcon } from '@fluentui/react-icons';\nimport { FluentIconButton } from '../inputs/buttons/FluentIconButton';\nimport { getIconFromName } from '../../utilities/tree/TreeUtilities';\nimport { StatusChip } from '../dataDisplay/status/StatusChip';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    width: '100%',\n    height: '100%'\n  },\n  rootBorder: {\n    borderStyle: 'solid',\n    borderColor: (props) => theme.palette[props?.color]?.main,\n    borderWidth: '1px 1px 1px 6px'\n  },\n  headerWrapper: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    backgroundColor: (props) =>\n      props?.simpleAccordion && props?.color && props?.color !== 'default'\n        ? props?.color === 'paper'\n          ? theme.palette.background.paper\n          : lighten(theme.palette[props?.color]?.light, 0.8)\n        : theme.palette.background.default,\n    overflow: 'hidden',\n    width: (props) => props?.headerWidth ?? '100%'\n  },\n  secondaryButtonsWrapper: {\n    display: 'flex',\n    gap: theme.spacing(2),\n    borderRadius: theme.spacing(2),\n    backgroundColor: 'white',\n    padding: `2px ${theme.spacing(1)}px`,\n    width: 'fit-content'\n  },\n  primaryButtonWrapper: {\n    minWidth: '68px',\n    maxWidth: (props) => props?.primaryActionMaxWidth,\n    height: 'auto',\n    color: 'white',\n    backgroundColor: (props) => theme.palette[props?.color]?.main,\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    alignSelf: 'normal'\n  },\n  headerColor: {\n    backgroundColor: (props) =>\n      props?.color !== 'default' &&\n      props?.color !== 'paper' &&\n      lighten(theme.palette[props?.color]?.light, 0.85)\n  },\n  buttonWrapper: {\n    display: 'flex',\n    gap: theme.spacing(0.5)\n  },\n  titleWrapper: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    flexGrow: 2,\n    margin: (props) => (props.removeHeaderMargin ? '0px' : theme.spacing(0.8)),\n    color: theme.palette.text.primary\n  },\n  closeButtonWrapper: {\n    display: 'flex',\n    justifyContent: 'flex-end',\n    marginTop: theme.spacing(1)\n  },\n  unexpandedIconButton: {\n    width: '68px',\n    height: '40px',\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    alignSelf: 'normal',\n    borderTop: `solid 1px lightgrey`,\n    borderLeft: `solid 1px lightgrey`,\n    overflow: 'hidden',\n    border: (props) => props?.removeBorder && '0px'\n  },\n  rightIconButton: {\n    backgroundColor: 'white',\n    padding: theme.spacing(1),\n    borderRadius: '50%'\n  },\n  primaryActionLabel: {\n    marginRight: theme.spacing(0.5),\n    marginLeft: theme.spacing(0.5)\n  },\n  expand: {\n    transform: 'rotate(0deg)',\n    marginLeft: 'auto',\n    marginRight: theme.spacing(1),\n    transition: theme.transitions.create('transform', {\n      duration: theme.transitions.duration.shortest\n    })\n  },\n  expandOpen: {\n    transform: 'rotate(180deg)'\n  },\n  titleStatusWrapper: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n  }\n}));\n\nexport const Accordion = (props) => {\n  const {\n    title,\n    subtitle,\n    subtitleVariant,\n    status,\n    statusIcon,\n    statusLabel,\n    secondaryIconButtons,\n    overriddenSecondaryContainer,\n    rightIcon,\n    rightIconAction,\n    rightIconTooltip,\n    disableRightIconButton = false,\n    primaryActionIcon,\n    primaryActionLabel,\n    primaryAction,\n    primaryActionMaxWidth,\n    disablePrimaryActionButton = false,\n    color = 'info',\n    children,\n    expand,\n    setExpand,\n    additionalEvent,\n    hideCloseButton = false,\n    hideRightIconButton = false,\n    hidePrimaryAction = false,\n    noWrapTitle = false,\n    simpleAccordion = false,\n    recordId = 0,\n    removeBorder = false,\n    headerWidth,\n    removeHeaderMargin,\n    titleVariant = 'subtitle2',\n    chevronIconSize = 'medium'\n  } = props;\n  const classes = useStyles({\n    color,\n    primaryActionMaxWidth,\n    simpleAccordion,\n    headerWidth,\n    removeHeaderMargin,\n    removeBorder,\n  });\n\n  const handleOnClickAccordion = useCallback(() => {\n    if (setExpand) {\n      setExpand(!expand);\n    }\n\n    if (additionalEvent) {\n      additionalEvent();\n    }\n  }, [additionalEvent, expand, setExpand]);\n\n  return (\n    <div\n      className={clsx(classes.root, {\n        [classes.rootBorder]: !simpleAccordion & !removeBorder\n      })}\n    >\n      <div\n        className={clsx(classes.headerWrapper, {\n          [classes.headerColor]: simpleAccordion ? false : expand\n        })}\n        onClick={handleOnClickAccordion}\n      >\n        <div className={classes.titleWrapper}>\n          <div>\n            <div className={classes.titleStatusWrapper}>\n              <Typography variant={titleVariant} noWrap={noWrapTitle}>\n                {title}\n              </Typography>\n              {statusLabel && <StatusChip\n                status={status ?? color}\n                label={statusLabel}\n                icon={statusIcon}\n              />}\n            </div>\n\n            {subtitle && (\n              <Typography variant={subtitleVariant} noWrap={noWrapTitle}>\n                {subtitle}\n              </Typography>\n            )}\n\n            {overriddenSecondaryContainer ? (\n              { overriddenSecondaryContainer }\n            ) : (\n              <div>\n                {secondaryIconButtons?.length > 0 && (\n                  <div className={classes.secondaryButtonsWrapper}>\n                    {secondaryIconButtons?.map((item) => (\n                      <div className={classes.buttonWrapper}>\n                        <IconButtonWithTooltip\n                          {...item}\n                          title={item?.title}\n                          icon={item.icon}\n                          onClick={(event) => {\n                            event.stopPropagation();\n                            item.onClick();\n                          }}\n                          size='small'\n                          id={`udpRecord-Accordion-${item?.title}-${recordId}`}\n                          udprecordid={`udpRecord-Accordion-${item?.title}-${recordId}`}\n                        />\n                        {item?.value && <Typography>{item?.value}</Typography>}\n                      </div>\n                    ))}\n                  </div>\n                )}\n              </div>\n            )}\n          </div>\n          {!hideRightIconButton && !simpleAccordion && (\n            <div>\n              <IconButtonWithTooltip\n                title={rightIconTooltip}\n                icon={rightIcon}\n                onClick={(event) => {\n                  event.stopPropagation();\n                  rightIconAction();\n                }}\n                className={classes.rightIconButton}\n                size='small'\n                disabled={disableRightIconButton}\n                id={`udpRecord-Accordion-RightButton-${recordId}`}\n                udprecordid={`udpRecord-Accordion-RightButton-${recordId}`}\n              />\n            </div>\n          )}\n        </div>\n        {!hidePrimaryAction && !simpleAccordion && (\n          <div className={classes.primaryButtonWrapper}>\n            {primaryActionIcon ? (\n              <Tooltip title={primaryActionLabel}>\n                <ButtonBase\n                  onClick={(event) => {\n                    event.stopPropagation();\n                    primaryAction();\n                  }}\n                  className={classes.primaryButtonWrapper}\n                  disabled={disablePrimaryActionButton}\n                  id={`udpRecord-Accordion-ButtonBase-${recordId}`}\n                  udprecordid={`udpRecord-Accordion-ButtonBase-${recordId}`}\n                >\n                  <FluentIcon component={primaryActionIcon} />\n                </ButtonBase>\n              </Tooltip>\n            ) : (\n              <ButtonBase\n                onClick={primaryAction}\n                className={classes.primaryButtonWrapper}\n                disabled={disablePrimaryActionButton}\n              >\n                <Typography className={classes.primaryActionLabel}>\n                  {primaryActionLabel}\n                </Typography>\n              </ButtonBase>\n            )}\n          </div>\n        )}\n        {simpleAccordion && (\n          <FluentIconButton\n            icon={getIconFromName('ChevronDownIcon')}\n            onClick={handleOnClickAccordion}\n            className={clsx(classes.expand, {\n              [classes.expandOpen]: expand\n            })}\n            size={chevronIconSize}\n            disabled={disableRightIconButton}\n            id={`udpRecord-Accordion-ExpandButton-${recordId}`}\n            udprecordid={`udpRecord-Accordion-ExpandButton-${recordId}`}\n          />\n        )}\n      </div>\n      <Collapse in={expand} timeout='auto' unmountOnExit>\n        <div>\n          <div>{children}</div>\n          {!hideCloseButton && !simpleAccordion && (\n            <div className={classes.closeButtonWrapper}>\n              <ButtonBase\n                onClick={() => {\n                  if (setExpand) {\n                    setExpand(false);\n                  }\n                }}\n                className={classes.unexpandedIconButton}\n                id={`udpRecord-Accordion-CloseButton-${recordId}`}\n                udprecordid={`udpRecord-Accordion-CloseButton-${recordId}`}\n              >\n                <FluentIcon component={ChevronUpIcon} />\n              </ButtonBase>\n            </div>\n          )}\n        </div>\n      </Collapse>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAiBA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM;EACJ,OAAO;EACP,QAAQ;EACT;CACD,YAAY;EACV,aAAa;EACb,cAAc,UAAU,MAAM,QAAQ,OAAO,QAAQ;EACrD,aAAa;EACd;CACD,eAAe;EACb,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,kBAAkB,UAChB,OAAO,mBAAmB,OAAO,SAAS,OAAO,UAAU,YACvD,OAAO,UAAU,UACf,MAAM,QAAQ,WAAW,QACzB,QAAQ,MAAM,QAAQ,OAAO,QAAQ,OAAO,GAAI,GAClD,MAAM,QAAQ,WAAW;EAC/B,UAAU;EACV,QAAQ,UAAU,OAAO,eAAe;EACzC;CACD,yBAAyB;EACvB,SAAS;EACT,KAAK,MAAM,QAAQ,EAAE;EACrB,cAAc,MAAM,QAAQ,EAAE;EAC9B,iBAAiB;EACjB,SAAS,OAAO,MAAM,QAAQ,EAAE,CAAC;EACjC,OAAO;EACR;CACD,sBAAsB;EACpB,UAAU;EACV,WAAW,UAAU,OAAO;EAC5B,QAAQ;EACR,OAAO;EACP,kBAAkB,UAAU,MAAM,QAAQ,OAAO,QAAQ;EACzD,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,WAAW;EACZ;CACD,aAAa,EACX,kBAAkB,UAChB,OAAO,UAAU,aACjB,OAAO,UAAU,WACjB,QAAQ,MAAM,QAAQ,OAAO,QAAQ,OAAO,IAAK,EACpD;CACD,eAAe;EACb,SAAS;EACT,KAAK,MAAM,QAAQ,GAAI;EACxB;CACD,cAAc;EACZ,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,UAAU;EACV,SAAS,UAAW,MAAM,qBAAqB,QAAQ,MAAM,QAAQ,GAAI;EACzE,OAAO,MAAM,QAAQ,KAAK;EAC3B;CACD,oBAAoB;EAClB,SAAS;EACT,gBAAgB;EAChB,WAAW,MAAM,QAAQ,EAAE;EAC5B;CACD,sBAAsB;EACpB,OAAO;EACP,QAAQ;EACR,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,WAAW;EACX,WAAW;EACX,YAAY;EACZ,UAAU;EACV,SAAS,UAAU,OAAO,gBAAgB;EAC3C;CACD,iBAAiB;EACf,iBAAiB;EACjB,SAAS,MAAM,QAAQ,EAAE;EACzB,cAAc;EACf;CACD,oBAAoB;EAClB,aAAa,MAAM,QAAQ,GAAI;EAC/B,YAAY,MAAM,QAAQ,GAAI;EAC/B;CACD,QAAQ;EACN,WAAW;EACX,YAAY;EACZ,aAAa,MAAM,QAAQ,EAAE;EAC7B,YAAY,MAAM,YAAY,OAAO,aAAa,EAChD,UAAU,MAAM,YAAY,SAAS,UACtC,CAAC;EACH;CACD,YAAY,EACV,WAAW,kBACZ;CACD,oBAAoB;EAClB,SAAS;EACT,YAAY;EACZ,KAAK,MAAM,QAAQ,EAAE;EACtB;CACF,EAAE;AAEH,MAAa,aAAa,UAAU;CAClC,MAAM,EACJ,OACA,UACA,iBACA,QACA,YACA,aACA,sBACA,8BACA,WACA,iBACA,kBACA,yBAAyB,OACzB,mBACA,oBACA,eACA,uBACA,6BAA6B,OAC7B,QAAQ,QACR,UACA,QACA,WACA,iBACA,kBAAkB,OAClB,sBAAsB,OACtB,oBAAoB,OACpB,cAAc,OACd,kBAAkB,OAClB,WAAW,GACX,eAAe,OACf,aACA,oBACA,eAAe,aACf,kBAAkB,aAChB;CACJ,MAAM,UAAU,UAAU;EACxB;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,yBAAyB,kBAAkB;AAC/C,MAAI,UACF,WAAU,CAAC,OAAO;AAGpB,MAAI,gBACF,kBAAiB;IAElB;EAAC;EAAiB;EAAQ;EAAU,CAAC;AAExC,QACE,oCAAC,SACC,WAAW,KAAK,QAAQ,MAAM,GAC3B,QAAQ,aAAa,CAAC,kBAAkB,CAAC,cAC3C,CAAC,IAEF,oCAAC;EACC,WAAW,KAAK,QAAQ,eAAe,GACpC,QAAQ,cAAc,kBAAkB,QAAQ,QAClD,CAAC;EACF,SAAS;IAET,oCAAC,SAAI,WAAW,QAAQ,gBACtB,oCAAC,aACC,oCAAC,SAAI,WAAW,QAAQ,sBACtB,oCAAC;EAAW,SAAS;EAAc,QAAQ;IACxC,MACU,EACZ,eAAe,oCAAC;EACf,QAAQ,UAAU;EAClB,OAAO;EACP,MAAM;GACN,CACE,EAEL,YACC,oCAAC;EAAW,SAAS;EAAiB,QAAQ;IAC3C,SACU,EAGd,+BACC,EAAE,8BAA8B,GAEhC,oCAAC,aACE,sBAAsB,SAAS,KAC9B,oCAAC,SAAI,WAAW,QAAQ,2BACrB,sBAAsB,KAAK,SAC1B,oCAAC,SAAI,WAAW,QAAQ,iBACtB,oCAAC;EACC,GAAI;EACJ,OAAO,MAAM;EACb,MAAM,KAAK;EACX,UAAU,UAAU;AAClB,SAAM,iBAAiB;AACvB,QAAK,SAAS;;EAEhB,MAAK;EACL,IAAI,uBAAuB,MAAM,MAAM,GAAG;EAC1C,aAAa,uBAAuB,MAAM,MAAM,GAAG;GACnD,EACD,MAAM,SAAS,oCAAC,kBAAY,MAAM,MAAmB,CAClD,CACN,CACE,CAEJ,CAEJ,EACL,CAAC,uBAAuB,CAAC,mBACxB,oCAAC,aACC,oCAAC;EACC,OAAO;EACP,MAAM;EACN,UAAU,UAAU;AAClB,SAAM,iBAAiB;AACvB,oBAAiB;;EAEnB,WAAW,QAAQ;EACnB,MAAK;EACL,UAAU;EACV,IAAI,mCAAmC;EACvC,aAAa,mCAAmC;GAChD,CACE,CAEJ,EACL,CAAC,qBAAqB,CAAC,mBACtB,oCAAC,SAAI,WAAW,QAAQ,wBACrB,oBACC,oCAAC,WAAQ,OAAO,sBACd,oCAAC;EACC,UAAU,UAAU;AAClB,SAAM,iBAAiB;AACvB,kBAAe;;EAEjB,WAAW,QAAQ;EACnB,UAAU;EACV,IAAI,kCAAkC;EACtC,aAAa,kCAAkC;IAE/C,oCAAC,cAAW,WAAW,oBAAqB,CACjC,CACL,GAEV,oCAAC;EACC,SAAS;EACT,WAAW,QAAQ;EACnB,UAAU;IAEV,oCAAC,cAAW,WAAW,QAAQ,sBAC5B,mBACU,CACF,CAEX,EAEP,mBACC,oCAAC;EACC,MAAM,gBAAgB,kBAAkB;EACxC,SAAS;EACT,WAAW,KAAK,QAAQ,QAAQ,GAC7B,QAAQ,aAAa,QACvB,CAAC;EACF,MAAM;EACN,UAAU;EACV,IAAI,oCAAoC;EACxC,aAAa,oCAAoC;GACjD,CAEA,EACN,oCAAC;EAAS,IAAI;EAAQ,SAAQ;EAAO;IACnC,oCAAC,aACC,oCAAC,aAAK,SAAe,EACpB,CAAC,mBAAmB,CAAC,mBACpB,oCAAC,SAAI,WAAW,QAAQ,sBACtB,oCAAC;EACC,eAAe;AACb,OAAI,UACF,WAAU,MAAM;;EAGpB,WAAW,QAAQ;EACnB,IAAI,mCAAmC;EACvC,aAAa,mCAAmC;IAEhD,oCAAC,cAAW,WAAW,gBAAiB,CAC7B,CACT,CAEJ,CACG,CACP"}

package/dist/actionSummary-BrcS82Qz.js

@@ -0,0 +1,255 @@
+import { t as FluentSearchField } from "./FluentSearchField-DebM7Nzf.js";
+import { t as UnityFluentIcon } from "./UnityFluentIcon-DrASIcTF.js";
+import { n as useActions } from "./useActions-Db2P12NS.js";
+import { i as mapRule, t as evaluateRule } from "./RuleUtilities-D5ACzikQ.js";
+import { t as PrimaryActionButton } from "./PrimaryActionButton-Dk8zvDAW.js";
+import { t as Typography$1 } from "./Typography-BMsa1JYd.js";
+import React, { useMemo, useState } from "react";
+import { Chip, List, Popover, Typography, makeStyles } from "@material-ui/core";
+import * as Icons from "@fluentui/react-icons";
+import { MoreVerticalIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+
+//#region src/actions/actionSummary/ActionSummaryCard.tsx
+const useStyles$4 = makeStyles((theme) => ({
+	root: {
+		width: 750,
+		paddingLeft: 12,
+		paddingRight: 12,
+		maxHeight: 750,
+		overflowY: "scroll"
+	},
+	header: {
+		display: "flex",
+		justifyContent: "space-between"
+	}
+}));
+const ActionSummaryCard = ({ actionMenuContent, selectedNode }) => {
+	const classes = useStyles$4();
+	const [searchValue, setSearchValue] = useState("");
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.header }, /* @__PURE__ */ React.createElement("div", { style: {
+		display: "flex",
+		justifyContent: "center",
+		flexDirection: "column"
+	} }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, "Actions")), /* @__PURE__ */ React.createElement(FluentSearchField, {
+		id: "udpRecord-ActionSummaryCard-Search",
+		udprecordid: "udpRecord-ActionSummaryCard-Search",
+		value: searchValue,
+		onChange: (e) => setSearchValue(e.target.value),
+		variant: "filled",
+		style: {
+			marginTop: 0,
+			paddingTop: 0
+		}
+	})), actionMenuContent.map((section, i) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ActionSummaryHeader, {
+		key: i,
+		iconType: section.iconType,
+		icon: section.icon,
+		header: section.header
+	}), /* @__PURE__ */ React.createElement(ActionSummaryListContainer, {
+		key: i,
+		selectedNode,
+		items: section.items.map((item) => {
+			const highlighted = item?.value && item.value.toLowerCase().includes(searchValue.toLowerCase()) && searchValue.length > 0;
+			return {
+				...item,
+				highlighted: highlighted || item.highlighted
+			};
+		})
+	}))));
+};
+
+//#endregion
+//#region src/actions/actionSummary/ActionSummaryListContainer.tsx
+const useStyles$3 = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		flexWrap: "wrap",
+		overflowY: "scroll",
+		marginTop: theme.spacing(1),
+		marginBottom: theme.spacing(1)
+	},
+	itemContainer: {
+		display: "flex",
+		flexDirection: "column",
+		paddingLeft: 1,
+		width: "33%"
+	}
+}));
+const ActionSummaryListContainer = ({ items, selectedNode }) => {
+	const classes = useStyles$3();
+	function* keyGenerator() {
+		let count = 0;
+		while (true) yield count++;
+	}
+	const countGen = keyGenerator();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.itemContainer }, /* @__PURE__ */ React.createElement(List, { disablePadding: true }, items.filter((item, i) => i % 3 === 0).map((item) => /* @__PURE__ */ React.createElement(ActionSummaryListItem, {
+		selectedNode,
+		...item,
+		key: countGen.next().value
+	})))), /* @__PURE__ */ React.createElement("div", { className: classes.itemContainer }, /* @__PURE__ */ React.createElement(List, { disablePadding: true }, items.filter((item, i) => i % 3 === 1).map((item) => /* @__PURE__ */ React.createElement(ActionSummaryListItem, {
+		selectedNode,
+		...item,
+		key: countGen.next().value
+	})))), /* @__PURE__ */ React.createElement("div", { className: classes.itemContainer }, /* @__PURE__ */ React.createElement(List, { disablePadding: true }, items.filter((item, i) => i % 3 === 2).map((item) => /* @__PURE__ */ React.createElement(ActionSummaryListItem, {
+		selectedNode,
+		...item,
+		key: countGen.next().value
+	})))));
+};
+
+//#endregion
+//#region src/actions/actionSummary/ActionSummaryHeader.tsx
+const useStyles$2 = makeStyles((theme) => ({
+	root: {
+		backgroundColor: theme.palette.primary.main + "1A",
+		display: "flex",
+		padding: 5,
+		gap: 10
+	},
+	container: {
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "center"
+	},
+	icon: { color: theme.palette.primary.main }
+}));
+const ActionSummaryHeader = ({ icon, header, iconType }) => {
+	const classes = useStyles$2();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.container }, /* @__PURE__ */ React.createElement(UnityFluentIcon, {
+		className: classes.icon,
+		type: iconType,
+		component: Icons[icon]
+	})), /* @__PURE__ */ React.createElement("div", { className: classes.container }, /* @__PURE__ */ React.createElement(Typography, {
+		display: "inline",
+		variant: "h6"
+	}, header)));
+};
+
+//#endregion
+//#region src/actions/actionSummary/ActionSummaryListItem.tsx
+const useStyles$1 = makeStyles((theme) => ({
+	listItemWithChip: {
+		paddingTop: 1,
+		paddingBottom: 1,
+		alignItems: "start"
+	},
+	listItemGutters: { paddingLeft: 10 },
+	chipSelected: {
+		backgroundColor: theme.palette.secondary.main + "1A",
+		color: theme?.getThemeData()?.mode === "light" ? "black" : "white"
+	},
+	chipWhite: {
+		color: theme?.getThemeData()?.mode === "light" ? "black" : "white",
+		backgroundColor: theme.palette.background.paper
+	},
+	chipRoot: {
+		width: "100%",
+		justifyContent: "start",
+		paddingTop: 1
+	},
+	chipWhiteDeselected: {
+		color: "grey",
+		backgroundColor: theme.palette.background.paper
+	},
+	chipHover: {
+		"&:hover": { backgroundColor: theme.palette.secondary.main + "3A" },
+		"&:focus": { backgroundColor: theme.palette.secondary.main + "3A" }
+	}
+}));
+const ActionSummaryListItem = ({ value, highlighted, enabled, actionId, selectedNode }) => {
+	const classes = useStyles$1();
+	const { triggerAction } = useActions();
+	return useMemo(() => {
+		return /* @__PURE__ */ React.createElement("div", { className: classes.listItemWithChip }, /* @__PURE__ */ React.createElement(Chip, {
+			color: "primary",
+			clickable: enabled,
+			onClick: enabled ? () => triggerAction(actionId, selectedNode?.nodeObj) : () => {},
+			classes: {
+				colorPrimary: enabled ? highlighted ? classes.chipSelected : classes.chipWhite : classes.chipWhiteDeselected,
+				root: classes.chipRoot,
+				clickableColorPrimary: classes.chipHover
+			},
+			label: value
+		}));
+	}, [
+		highlighted,
+		enabled,
+		value
+	]);
+};
+
+//#endregion
+//#region src/actions/actionSummary/ActionSummaryPopover.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {},
+	actionsMenu: { color: theme?.palette?.getContrastText(theme?.palette?.primary?.main) }
+}));
+const ActionSummaryPopover = (props) => {
+	const { panelActions, noContrastColor, selectedNode, setLoading } = props;
+	useStyles();
+	const [anchorEl, setAnchorEl] = useState(null);
+	const { t } = useTranslation();
+	const handleClick = (event) => {
+		setAnchorEl(event.currentTarget);
+	};
+	const handleClose = () => {
+		setAnchorEl(null);
+	};
+	const actionSummaryPopoverActions = useMemo(() => {
+		return panelActions?.reduce((actions, current) => {
+			if (!current.enabled) return actions;
+			const passRule = current.action.actionRules?.reduce((boolValue, rule) => {
+				const ruleExpression = mapRule(rule.mapping, rule.jsonLogic);
+				return boolValue && evaluateRule(ruleExpression, selectedNode?.nodeObj, selectedNode?.properties?.joiningEntityCatalogObjectKey, selectedNode?.wasLazyLoaded);
+			}, true) ?? true;
+			if (!passRule && current?.hideAction) return actions;
+			const currentVal = {
+				value: current.action.name,
+				actionId: current.actionId,
+				sequence: current.sequence,
+				enabled: passRule
+			};
+			const group = actions.find((action) => action?.header?.toLowerCase() === current?.groupName?.toLowerCase());
+			if (group) {
+				group.items.push(currentVal);
+				group.items.sort((a, b) => a.sequence - b.sequence);
+			} else actions.push({
+				header: current.groupName,
+				icon: current.icon.name,
+				iconType: current.icon.type,
+				items: [currentVal]
+			});
+			return actions;
+		}, []);
+	}, [panelActions, selectedNode]);
+	const open = Boolean(anchorEl);
+	const id = open ? "action-summary-popover" : void 0;
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PrimaryActionButton, {
+		onClick: handleClick,
+		icon: /* @__PURE__ */ React.createElement(MoreVerticalIcon, null)
+	}, /* @__PURE__ */ React.createElement(Typography$1, null, t("Actions"))), /* @__PURE__ */ React.createElement(Popover, {
+		id,
+		open,
+		anchorEl,
+		onClose: handleClose,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "left"
+		}
+	}, /* @__PURE__ */ React.createElement(ActionSummaryCard, {
+		actionMenuContent: actionSummaryPopoverActions,
+		setLoading,
+		selectedNode
+	})));
+};
+ActionSummaryPopover.propTypes = {
+	panelActions: PropTypes.array,
+	noContrastColor: PropTypes.bool,
+	selectedNode: PropTypes.object
+};
+
+//#endregion
+export { ActionSummaryCard as a, ActionSummaryListContainer as i, ActionSummaryListItem as n, ActionSummaryHeader as r, ActionSummaryPopover as t };
+//# sourceMappingURL=actionSummary-BrcS82Qz.js.map

package/dist/actionSummary-BrcS82Qz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"actionSummary-BrcS82Qz.js","names":["useStyles","ActionSummaryCard: FC<ActionSummaryProps>","useStyles","ActionSummaryListContainer: FC<\n  ActionSummaryListContainerProps\n>","count: number","useStyles","ActionSummaryHeader: FC<ActionSummaryHeaderProps>","useStyles","ActionSummaryListItem: FC<ActionSummaryListItemProps>","Typography"],"sources":["../src/actions/actionSummary/ActionSummaryCard.tsx","../src/actions/actionSummary/ActionSummaryListContainer.tsx","../src/actions/actionSummary/ActionSummaryHeader.tsx","../src/actions/actionSummary/ActionSummaryListItem.tsx","../src/actions/actionSummary/ActionSummaryPopover.jsx"],"sourcesContent":["import React, { FC, useState } from 'react';\nimport { makeStyles, Typography } from '@material-ui/core';\nimport { FluentSearchField } from '../../UI/inputs/textField/FluentSearchField';\nimport {\n  ActionSummaryHeader,\n  ActionSummaryListContainer,\n  ActionSummaryListItemProps\n} from '.';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    width: 750,\n    paddingLeft: 12,\n    paddingRight: 12,\n    maxHeight: 750,\n    overflowY: 'scroll'\n  },\n  header: {\n    display: 'flex',\n    justifyContent: 'space-between'\n    //backgroundColor: 'red'\n  }\n}));\n\nexport type ActionSummaryProps = {\n  actionMenuContent: Array<ActionSummaryContent>;\n  selectedNode: object | null | undefined;\n};\n\nexport type ActionSummaryContent = {\n  header: string;\n  icon: string;\n  iconType?: string;\n  items: Array<ActionSummaryListItemProps>;\n};\n\nexport const ActionSummaryCard: FC<ActionSummaryProps> = ({\n  actionMenuContent,\n  selectedNode\n}: ActionSummaryProps) => {\n  const classes = useStyles();\n  const [searchValue, setSearchValue] = useState<string>('');\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.header}>\n        <div\n          style={{\n            display: 'flex',\n            justifyContent: 'center',\n            flexDirection: 'column'\n          }}\n        >\n          <Typography variant='h6'>Actions</Typography>\n        </div>\n        <FluentSearchField\n          id='udpRecord-ActionSummaryCard-Search'\n          udprecordid='udpRecord-ActionSummaryCard-Search'\n          value={searchValue}\n          onChange={(e: any) => setSearchValue(e.target.value)}\n          variant='filled'\n          // searchOptions={searchOptions}\n          style={{ marginTop: 0, paddingTop: 0 }}\n        />\n      </div>\n      {actionMenuContent.map((section: ActionSummaryContent, i: number) => (\n        <>\n          <ActionSummaryHeader\n            key={i}\n            iconType={section.iconType}\n            icon={section.icon}\n            header={section.header}\n          />\n          <ActionSummaryListContainer\n            key={i}\n            selectedNode={selectedNode}\n            items={section.items.map((item): ActionSummaryListItemProps => {\n              const highlighted =\n                item?.value &&\n                item.value.toLowerCase().includes(searchValue.toLowerCase()) &&\n                searchValue.length > 0;\n              return { ...item, highlighted: highlighted || item.highlighted };\n            })}\n          />\n        </>\n      ))}\n    </div>\n  );\n};\n","import { List, makeStyles, Typography, ListItem } from '@material-ui/core';\nimport React, { FC, MutableRefObject } from 'react';\nimport { ActionSummaryListItemProps, ActionSummaryListItem } from '.';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    overflowY: 'scroll',\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1)\n  },\n  itemContainer: {\n    display: 'flex',\n    flexDirection: 'column',\n    paddingLeft: 1,\n    // paddingBottom: theme.spacing(2),\n    width: '33%'\n  }\n}));\n\ntype ActionSummaryListContainerProps = {\n  items: Array<ActionSummaryListItemProps>;\n  selectedNode?: object;\n};\n\nexport const ActionSummaryListContainer: FC<\n  ActionSummaryListContainerProps\n> = ({ items, selectedNode }: ActionSummaryListContainerProps) => {\n  const classes = useStyles();\n  function* keyGenerator() {\n    let count: number = 0;\n    while (true) {\n      yield count++;\n    }\n  }\n  const countGen = keyGenerator();\n  return (\n    <div className={classes.root}>\n      <div className={classes.itemContainer}>\n        <List disablePadding>\n          {items\n            .filter((item, i) => i % 3 === 0)\n            .map((item: ActionSummaryListItemProps) => (\n              <ActionSummaryListItem\n                selectedNode={selectedNode}\n                {...item}\n                key={countGen.next().value as number}\n              />\n            ))}\n        </List>\n      </div>\n      <div className={classes.itemContainer}>\n        <List disablePadding>\n          {items\n            .filter((item, i) => i % 3 === 1)\n            .map((item: ActionSummaryListItemProps) => (\n              <ActionSummaryListItem\n                selectedNode={selectedNode}\n                {...item}\n                key={countGen.next().value as number}\n              />\n            ))}\n        </List>\n      </div>\n      <div className={classes.itemContainer}>\n        <List disablePadding>\n          {items\n            .filter((item, i) => i % 3 === 2)\n            .map((item: ActionSummaryListItemProps) => (\n              <ActionSummaryListItem\n                selectedNode={selectedNode}\n                {...item}\n                key={countGen.next().value as number}\n              />\n            ))}\n        </List>\n      </div>\n    </div>\n  );\n};\n","import * as Icons from \"@fluentui/react-icons\";\nimport { makeStyles, Typography } from \"@material-ui/core\";\nimport React, { FC } from \"react\";\nimport { UnityFluentIcon } from '../../utilities/iconLibrary/UnityFluentIcon'\n\ntype ActionSummaryHeaderProps = {\n  icon: string;\n  header: string;\n  iconType?: string\n};\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    backgroundColor: theme.palette.primary.main + '1A',\n    display: \"flex\",\n    padding: 5,\n    gap: 10,\n  },\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center'\n\n  },\n  icon: {\n    color: theme.palette.primary.main\n  }\n}));\n\nexport const ActionSummaryHeader: FC<ActionSummaryHeaderProps> = (\n  {\n    icon,\n    header,\n    iconType\n  }: ActionSummaryHeaderProps\n) => {\n  const classes = useStyles();\n  return (\n    <div className={classes.root}>\n      <div className={classes.container}>\n        <UnityFluentIcon className={classes.icon} type={iconType} component={Icons[icon]}  />\n      </div>\n      <div className={classes.container}>\n        <Typography display='inline' variant='h6' >{header}</Typography>\n      </div>\n    </div>\n  );\n};\n","import React, { FC, useMemo, MutableRefObject } from 'react';\nimport { Chip, makeStyles } from '@material-ui/core';\nimport { useActions } from '../../hooks/useActions';\nimport { UdpTheme } from '../../utilities/theme.types';\n\nexport type ActionSummaryListItemProps = {\n  value: string;\n  highlighted?: boolean; // gives an mui chip background\n  enabled?: boolean; // greys out the item\n  actionId: string;\n  setLoading: Function;\n  selectedNode?: any;\n};\n\nconst useStyles = makeStyles((theme: UdpTheme) => ({\n  listItemWithChip: {\n    paddingTop: 1,\n    paddingBottom: 1,\n    alignItems: 'start'\n  },\n  listItemGutters: {\n    paddingLeft: 10\n  },\n  chipSelected: {\n    backgroundColor: theme.palette.secondary.main + '1A',\n    color: theme?.getThemeData()?.mode === 'light' ? 'black' : 'white'\n  },\n  chipWhite: {\n    color: theme?.getThemeData()?.mode === 'light' ? 'black' : 'white',\n    backgroundColor: theme.palette.background.paper\n  },\n  chipRoot: {\n    width: '100%',\n    justifyContent: 'start',\n    paddingTop: 1\n  },\n  chipWhiteDeselected: {\n    color: 'grey',\n    backgroundColor: theme.palette.background.paper\n  },\n  chipHover: {\n    '&:hover': {\n      backgroundColor: theme.palette.secondary.main + '3A'\n    },\n    '&:focus': {\n      backgroundColor: theme.palette.secondary.main + '3A'\n    }\n  }\n}));\n\nexport const ActionSummaryListItem: FC<ActionSummaryListItemProps> = ({\n  value,\n  highlighted,\n  enabled,\n  actionId,\n  selectedNode\n}: ActionSummaryListItemProps) => {\n  const classes = useStyles();\n  const { triggerAction } = useActions();\n  const render = useMemo(() => {\n    return (\n      <div className={classes.listItemWithChip}>\n        <Chip\n          color='primary'\n          clickable={enabled}\n          onClick={\n            enabled\n              ? () => triggerAction(actionId, selectedNode?.nodeObj)\n              : () => {}\n          }\n          classes={{\n            colorPrimary: enabled\n              ? highlighted\n                ? classes.chipSelected\n                : classes.chipWhite\n              : classes.chipWhiteDeselected,\n            root: classes.chipRoot,\n            clickableColorPrimary: classes.chipHover\n          }}\n          label={value}\n        />\n      </div>\n    );\n  }, [highlighted, enabled, value]);\n\n  return render;\n};\n","import { MoreVerticalIcon } from '@fluentui/react-icons';\nimport { makeStyles, Popover } from '@material-ui/core';\nimport PropTypes from 'prop-types';\nimport React, { useState, useMemo } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { ActionSummaryCard } from './';\nimport { evaluateRule, mapRule } from '../../utilities/rules/RuleUtilities';\nimport { PrimaryActionButton } from '../../UI/inputs/buttons/PrimaryActionButton';\nimport { Typography } from '../../UI/dataDisplay/typography/Typography';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  actionsMenu: {\n    color: theme?.palette?.getContrastText(theme?.palette?.primary?.main)\n  }\n}));\n\nexport const ActionSummaryPopover = (props) => {\n  const { panelActions, noContrastColor, selectedNode, setLoading } = props;\n  const classes = useStyles();\n  const [anchorEl, setAnchorEl] = useState(null);\n  const { t } = useTranslation();\n\n  const handleClick = (event) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleClose = () => {\n    setAnchorEl(null);\n  };\n\n  const actionSummaryPopoverActions = useMemo(() => {\n    return panelActions?.reduce((actions, current) => {\n      if (!current.enabled) return actions;\n\n      const passRule =\n        current.action.actionRules?.reduce((boolValue, rule) => {\n          const ruleExpression = mapRule(rule.mapping, rule.jsonLogic);\n          return (\n            boolValue &&\n            evaluateRule(\n              ruleExpression,\n              selectedNode?.nodeObj,\n              selectedNode?.properties?.joiningEntityCatalogObjectKey,\n              selectedNode?.wasLazyLoaded\n            )\n          );\n        }, true) ?? true;\n\n      if (!passRule && current?.hideAction) return actions;\n\n      const currentVal = {\n        value: current.action.name,\n        actionId: current.actionId,\n        sequence: current.sequence,\n        enabled: passRule\n      };\n\n      const group = actions.find(\n        (action) =>\n          action?.header?.toLowerCase() === current?.groupName?.toLowerCase()\n      );\n      if (group) {\n        group.items.push(currentVal);\n        group.items.sort((a, b) => a.sequence - b.sequence);\n      } else {\n        actions.push({\n          header: current.groupName,\n          icon: current.icon.name,\n          iconType: current.icon.type,\n          items: [currentVal]\n        });\n      }\n      return actions;\n    }, []);\n  }, [panelActions, selectedNode]);\n\n  const open = Boolean(anchorEl);\n  const id = open ? 'action-summary-popover' : undefined;\n\n  return (\n    <>\n      <PrimaryActionButton onClick={handleClick} icon={<MoreVerticalIcon />}>\n        <Typography>{t('Actions')}</Typography>\n      </PrimaryActionButton>\n\n      <Popover\n        id={id}\n        open={open}\n        anchorEl={anchorEl}\n        onClose={handleClose}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'left'\n        }}\n      >\n        <ActionSummaryCard\n          actionMenuContent={actionSummaryPopoverActions}\n          setLoading={setLoading}\n          selectedNode={selectedNode}\n        />\n      </Popover>\n    </>\n  );\n};\n\nActionSummaryPopover.propTypes = {\n  /**\n   * Actions configured within Action Panel\n   */\n  panelActions: PropTypes.array,\n  /**\n   * Boolean to toggle contrast color\n   */\n  noContrastColor: PropTypes.bool,\n  /**\n   * Action Panels\n   */\n  selectedNode: PropTypes.object\n};\n"],"mappings":"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"}