udp-react-enterprise-component-library 25.14.1-beta.9 → 25.16.1

package/dist/DynamicContainerWithMenu-CQLpIY2A.js

@@ -0,0 +1,141 @@
+import { AmbientTokenButton } from "./AmbientTokenButton-CpdlLmsF.js";
+import { useDynamicListCalculation } from "./useDynamicListCalculation-B4erIwyM.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 };
+//# sourceMappingURL=DynamicContainerWithMenu-CQLpIY2A.js.map

package/dist/DynamicContainerWithMenu-CQLpIY2A.js.map

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

package/dist/EmptyStateDisplay-BMhnBskG.js

@@ -0,0 +1,66 @@
+import { FluentButton } from "./FluentButton-h_8VjXGT.js";
+import { FluentIcon } from "./FluentIcon-CB-ANF6C.js";
+import { LayoutUnit } from "./LayoutUnit-fGVQwt6Y.js";
+import React from "react";
+import { Box, Typography, makeStyles } from "@material-ui/core";
+import { ErrorIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+
+//#region src/UI/dataDisplay/EmptyStateDisplay.jsx
+const useStyles = makeStyles((theme) => ({
+	container: {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		height: "100%",
+		width: "100%"
+	},
+	secondaryText: { color: theme.palette.text.secondary },
+	image: { width: (props) => props?.imageWidth }
+}));
+const EmptyStateDisplay = (props) => {
+	const { icon, iconSize = 48, customIconSize = true, imageSrc, imageWidth = "100px", primaryText, secondaryText, actionLabel, action } = props;
+	const classes = useStyles({ imageWidth });
+	return /* @__PURE__ */ React.createElement("div", { className: classes.container }, imageSrc ? /* @__PURE__ */ React.createElement("img", {
+		src: imageSrc,
+		alt: "logo",
+		className: classes.image
+	}) : /* @__PURE__ */ React.createElement(FluentIcon, {
+		component: icon ?? ErrorIcon,
+		size: iconSize,
+		customSize: customIconSize
+	}), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xxs" }), primaryText && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, {
+		variant: "subtitle2",
+		align: "center"
+	}, primaryText)), secondaryText && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.secondaryText,
+		align: "center"
+	}, secondaryText)), (primaryText || secondaryText) && /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xxs" }), action && /* @__PURE__ */ React.createElement("div", { className: primaryText || secondaryText ? classes.buttonWrapper : "" }, /* @__PURE__ */ React.createElement(FluentButton, {
+		onClick: action,
+		variant: "outlined",
+		color: "secondary",
+		id: "udpRecord-EmptyStateDisplay-" + primaryText.replace(/\s+/g, "") + "-" + actionLabel.replace(/\s+/g, ""),
+		udprecordid: "udpRecord-EmptyStateDisplay-" + primaryText.replace(/\s+/g, "") + "-" + actionLabel.replace(/\s+/g, "")
+	}, actionLabel)));
+};
+EmptyStateDisplay.propTypes = {
+	icon: PropTypes.elementType,
+	iconSize: PropTypes.number,
+	customIconSize: PropTypes.bool,
+	imageSrc: PropTypes.string,
+	imageWidth: PropTypes.string,
+	primaryText: PropTypes.string,
+	secondaryText: PropTypes.string,
+	actionLabel: PropTypes.string,
+	action: PropTypes.func
+};
+EmptyStateDisplay.defaultProps = {
+	iconSize: 48,
+	customIconSize: true,
+	imageWidth: "100px"
+};
+
+//#endregion
+export { EmptyStateDisplay };
+//# sourceMappingURL=EmptyStateDisplay-BMhnBskG.js.map

package/dist/EmptyStateDisplay-BMhnBskG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyStateDisplay-BMhnBskG.js","names":[],"sources":["../src/UI/dataDisplay/EmptyStateDisplay.jsx"],"sourcesContent":["import { ErrorIcon } from '@fluentui/react-icons';\nimport { Typography, makeStyles, Box } from '@material-ui/core';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { FluentButton } from '../inputs/buttons/FluentButton';\nimport { FluentIcon } from '../../utilities/iconLibrary/FluentIcon';\nimport { LayoutUnit } from '../../layout/LayoutUnit';\n\nconst useStyles = makeStyles(theme => ({\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    height: '100%',\n    width: '100%',\n  },\n  secondaryText: {\n    color: theme.palette.text.secondary,\n  },\n  image: {\n    width: props => props?.imageWidth,\n  },\n}));\n\nexport const EmptyStateDisplay = props => {\n  const {\n    icon,\n    iconSize = 48,\n    customIconSize = true,\n    imageSrc,\n    imageWidth = '100px',\n    primaryText,\n    secondaryText,\n    actionLabel,\n    action,\n  } = props;\n  const classes = useStyles({ imageWidth });\n\n  return (\n    <div className={classes.container}>\n      {imageSrc ? (\n        <img src={imageSrc} alt='logo' className={classes.image} />\n      ) : (\n        <FluentIcon\n          component={icon ?? ErrorIcon}\n          size={iconSize}\n          customSize={customIconSize}\n        />\n      )}\n      <LayoutUnit unit=\"xxs\" />\n      {primaryText && (\n        <div>\n          <Typography variant='subtitle2' align='center'>\n            {primaryText}\n          </Typography>\n        </div>\n      )}\n      {secondaryText && (\n        <div>\n          <Typography className={classes.secondaryText} align='center'>\n            {secondaryText}\n          </Typography>\n        </div>\n      )}\n      {(primaryText || secondaryText) && <LayoutUnit unit=\"xxs\" />}\n      {action && (\n        <div\n          className={primaryText || secondaryText ? classes.buttonWrapper : ''}\n        >\n          <FluentButton\n            onClick={action}\n            variant='outlined'\n            color='secondary'\n            id={\n              'udpRecord-EmptyStateDisplay-' +\n              primaryText.replace(/\\s+/g, '') +\n              '-' +\n              actionLabel.replace(/\\s+/g, '')\n            }\n            udprecordid={\n              'udpRecord-EmptyStateDisplay-' +\n              primaryText.replace(/\\s+/g, '') +\n              '-' +\n              actionLabel.replace(/\\s+/g, '')\n            }\n          >\n            {actionLabel}\n          </FluentButton>\n        </div>\n      )}\n    </div>\n  );\n};\n\nEmptyStateDisplay.propTypes = {\n  icon: PropTypes.elementType,\n  iconSize: PropTypes.number,\n  customIconSize: PropTypes.bool,\n  imageSrc: PropTypes.string,\n  imageWidth: PropTypes.string,\n  primaryText: PropTypes.string,\n  secondaryText: PropTypes.string,\n  actionLabel: PropTypes.string,\n  action: PropTypes.func\n};\n\nEmptyStateDisplay.defaultProps = {\n  iconSize: 48,\n  customIconSize: true,\n  imageWidth: '100px'\n};\n"],"mappings":";;;;;;;;;AAQA,MAAM,YAAY,YAAW,WAAU;CACrC,WAAW;EACT,SAAS;EACT,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,QAAQ;EACR,OAAO;EACR;CACD,eAAe,EACb,OAAO,MAAM,QAAQ,KAAK,WAC3B;CACD,OAAO,EACL,QAAO,UAAS,OAAO,YACxB;CACF,EAAE;AAEH,MAAa,qBAAoB,UAAS;CACxC,MAAM,EACJ,MACA,WAAW,IACX,iBAAiB,MACjB,UACA,aAAa,SACb,aACA,eACA,aACA,WACE;CACJ,MAAM,UAAU,UAAU,EAAE,YAAY,CAAC;AAEzC,QACE,oCAAC,SAAI,WAAW,QAAQ,aACrB,WACC,oCAAC;EAAI,KAAK;EAAU,KAAI;EAAO,WAAW,QAAQ;GAAS,GAE3D,oCAAC;EACC,WAAW,QAAQ;EACnB,MAAM;EACN,YAAY;GACZ,EAEJ,oCAAC,cAAW,MAAK,QAAQ,EACxB,eACC,oCAAC,aACC,oCAAC;EAAW,SAAQ;EAAY,OAAM;IACnC,YACU,CACT,EAEP,iBACC,oCAAC,aACC,oCAAC;EAAW,WAAW,QAAQ;EAAe,OAAM;IACjD,cACU,CACT,GAEN,eAAe,kBAAkB,oCAAC,cAAW,MAAK,QAAQ,EAC3D,UACC,oCAAC,SACC,WAAW,eAAe,gBAAgB,QAAQ,gBAAgB,MAElE,oCAAC;EACC,SAAS;EACT,SAAQ;EACR,OAAM;EACN,IACE,iCACA,YAAY,QAAQ,QAAQ,GAAG,GAC/B,MACA,YAAY,QAAQ,QAAQ,GAAG;EAEjC,aACE,iCACA,YAAY,QAAQ,QAAQ,GAAG,GAC/B,MACA,YAAY,QAAQ,QAAQ,GAAG;IAGhC,YACY,CACX,CAEJ;;AAIV,kBAAkB,YAAY;CAC5B,MAAM,UAAU;CAChB,UAAU,UAAU;CACpB,gBAAgB,UAAU;CAC1B,UAAU,UAAU;CACpB,YAAY,UAAU;CACtB,aAAa,UAAU;CACvB,eAAe,UAAU;CACzB,aAAa,UAAU;CACvB,QAAQ,UAAU;CACnB;AAED,kBAAkB,eAAe;CAC/B,UAAU;CACV,gBAAgB;CAChB,YAAY;CACb"}

package/dist/EntitySideBarContent-Do-R7Fr2.js

@@ -0,0 +1,84 @@
+import { getPathObject, getPrimaryKeyValues } from "./CrudBrowserUtilities-Cm_FNdfE.js";
+import { toLowerFirstChar, toTitleCase } from "./StringUtilities-DyjYA5pU.js";
+import { useAxiosGet } from "./useAxiosGet-CAH3ZOZ8.js";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Typography, makeStyles } from "@material-ui/core";
+import { ConfigService } from "udp-react-stencil-component-library";
+import { useSnackbar } from "notistack";
+import { useTranslation } from "react-i18next";
+
+//#region src/actions/sidebar/EntitySideBarContent.jsx
+const useStyles = makeStyles((theme) => ({ dataRoot: { marginTop: theme.spacing(2) } }));
+const EntitySideBarContent = (props) => {
+	const { action, executeAction, entityAttributes, selectedNodeObj, apiCatalogId, entityName, sidebarEntity, menuNodeList, closeSplitScreen } = props;
+	const classes = useStyles(props);
+	const [data, setData] = useState(null);
+	const { enqueueSnackbar } = useSnackbar();
+	const { t } = useTranslation();
+	const [{ data: selectedEntity }] = useAxiosGet(ConfigService.integrationV1ApiUrl, `apicatalog/${apiCatalogId}/promotedMethodEntities/${entityName}/product/${ConfigService.config.UNITY_PRODUCT_ID}`, {}, !!!apiCatalogId || !!!entityName || !!sidebarEntity, false);
+	const entity = useMemo(() => {
+		return selectedEntity || sidebarEntity;
+	}, [selectedEntity, sidebarEntity]);
+	const showError = useCallback(() => {
+		enqueueSnackbar(t(`Invalid action value.`), {
+			variant: "error",
+			anchorOrigin: {
+				vertical: "top",
+				horizontal: "center"
+			}
+		});
+	}, [enqueueSnackbar, t]);
+	const onGet = useCallback(async (data$1) => {
+		if (entity?.unityBaseGetMethod && action?.value) if (entity.unityBaseGetMethod.apiMethodId === action.value) return await executeAction(data$1, action.value);
+		else showError();
+	}, [
+		action,
+		executeAction,
+		entity,
+		showError
+	]);
+	const handleOnGet = useCallback(async (value) => {
+		if (entity?.unityBaseGetMethod) {
+			const primaryKeyValues = getPrimaryKeyValues(entityAttributes, value);
+			const response = await onGet({ data: { ...getPathObject(entity?.unityBaseGetMethod?.pathParameters, primaryKeyValues) } }).catch((res) => {
+				enqueueSnackbar(res.message, {
+					variant: "error",
+					anchorOrigin: {
+						vertical: "top",
+						horizontal: "center"
+					}
+				});
+			});
+			if (response?.status === 200) setData(response.data);
+		}
+	}, [
+		enqueueSnackbar,
+		entityAttributes,
+		onGet,
+		entity
+	]);
+	const renderData = useCallback((schemaAttribute) => {
+		if (!data || schemaAttribute?.extendedProperties?.childEntity) return null;
+		return /* @__PURE__ */ React.createElement("div", { className: classes.dataRoot }, /* @__PURE__ */ React.createElement(Typography, {
+			variant: "subtitle2",
+			style: { marginTop: 8 }
+		}, toTitleCase(schemaAttribute?.name)), /* @__PURE__ */ React.createElement(Typography, null, data[toLowerFirstChar(schemaAttribute.name)]));
+	}, [classes, data]);
+	const cardContent = useMemo(() => {
+		return /* @__PURE__ */ React.createElement("div", null, entityAttributes?.map((schemaAttribute, index) => {
+			return !schemaAttribute?.extendedProperties?.identifier && /* @__PURE__ */ React.createElement(React.Fragment, { key: `${schemaAttribute.name}-${index}` }, renderData(schemaAttribute));
+		}));
+	}, [entityAttributes, renderData]);
+	useEffect(() => {
+		if (!data) handleOnGet(selectedNodeObj);
+	}, [
+		handleOnGet,
+		selectedNodeObj,
+		data
+	]);
+	return /* @__PURE__ */ React.createElement("div", null, cardContent);
+};
+
+//#endregion
+export { EntitySideBarContent };
+//# sourceMappingURL=EntitySideBarContent-Do-R7Fr2.js.map

package/dist/EntitySideBarContent-Do-R7Fr2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntitySideBarContent-Do-R7Fr2.js","names":["data"],"sources":["../src/actions/sidebar/EntitySideBarContent.jsx"],"sourcesContent":["import { makeStyles, Typography } from '@material-ui/core';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport {\n  getPathObject,\n  getPrimaryKeyValues\n} from '../../utilities/maintenanceEngine/CrudBrowserUtilities';\nimport {\n  toLowerFirstChar,\n  toTitleCase\n} from '../../utilities/input/StringUtilities';\nimport { useSnackbar } from 'notistack';\nimport { useTranslation } from 'react-i18next';\nimport { useAxiosGet } from '../../utilities/useAxiosGet';\nimport { ConfigService } from 'udp-react-stencil-component-library';\n\nconst useStyles = makeStyles((theme) => ({\n  dataRoot: {\n    marginTop: theme.spacing(2)\n  }\n}));\n\nexport const EntitySideBarContent = (props) => {\n  const {\n    action,\n    executeAction,\n    entityAttributes,\n    selectedNodeObj,\n    apiCatalogId,\n    entityName,\n    sidebarEntity,\n    menuNodeList,\n    closeSplitScreen\n  } = props;\n  const classes = useStyles(props);\n  const [data, setData] = useState(null);\n  const { enqueueSnackbar } = useSnackbar();\n  const { t } = useTranslation();\n\n  const [{ data: selectedEntity }] = useAxiosGet(\n    ConfigService.integrationV1ApiUrl,\n    `apicatalog/${apiCatalogId}/promotedMethodEntities/${entityName}/product/${ConfigService.config.UNITY_PRODUCT_ID}`,\n    {},\n    !!!apiCatalogId || !!!entityName || !!sidebarEntity,\n    false\n  );\n\n  const entity = useMemo(() => {\n    return selectedEntity || sidebarEntity;\n  }, [selectedEntity, sidebarEntity]);\n\n  const showError = useCallback(() => {\n    enqueueSnackbar(t(`Invalid action value.`), {\n      variant: 'error',\n      anchorOrigin: {\n        vertical: 'top',\n        horizontal: 'center'\n      }\n    });\n  }, [enqueueSnackbar, t]);\n\n  const onGet = useCallback(\n    async (data) => {\n      if (entity?.unityBaseGetMethod && action?.value) {\n        if (entity.unityBaseGetMethod.apiMethodId === action.value) {\n          return await executeAction(data, action.value);\n        } else {\n          showError();\n        }\n      }\n    },\n    [action, executeAction, entity, showError]\n  );\n\n  const handleOnGet = useCallback(\n    async (value) => {\n      if (entity?.unityBaseGetMethod) {\n        // Get primary key value object using path parameters and merge with data\n        const primaryKeyValues = getPrimaryKeyValues(entityAttributes, value);\n        const pathObject = getPathObject(\n          entity?.unityBaseGetMethod?.pathParameters,\n          primaryKeyValues\n        );\n\n        const data = { ...pathObject };\n        const response = await onGet({ data }).catch((res) => {\n          enqueueSnackbar(res.message, {\n            variant: 'error',\n            anchorOrigin: {\n              vertical: 'top',\n              horizontal: 'center'\n            }\n          });\n        });\n\n        if (response?.status === 200) {\n          setData(response.data);\n        }\n      }\n    },\n    [enqueueSnackbar, entityAttributes, onGet, entity]\n  );\n\n  const renderData = useCallback(\n    (schemaAttribute) => {\n      if (!data || schemaAttribute?.extendedProperties?.childEntity) {\n        return null;\n      }\n\n      return (\n        <div className={classes.dataRoot}>\n          <Typography variant='subtitle2' style={{ marginTop: 8 }}>\n            {toTitleCase(schemaAttribute?.name)}\n          </Typography>\n          <Typography>\n            {data[toLowerFirstChar(schemaAttribute.name)]}\n          </Typography>\n        </div>\n      );\n    },\n    [classes, data]\n  );\n\n  const cardContent = useMemo(() => {\n    return (\n      <div>\n        {entityAttributes?.map((schemaAttribute, index) => {\n          return (\n            !schemaAttribute?.extendedProperties?.identifier && (\n              <React.Fragment key={`${schemaAttribute.name}-${index}`}>\n                {renderData(schemaAttribute)}\n              </React.Fragment>\n            )\n          );\n        })}\n      </div>\n    );\n  }, [entityAttributes, renderData]);\n\n  useEffect(() => {\n    if (!data) {\n      handleOnGet(selectedNodeObj);\n    }\n  }, [handleOnGet, selectedNodeObj, data]);\n\n  return <div>{cardContent}</div>;\n};\n"],"mappings":";;;;;;;;;;AAeA,MAAM,YAAY,YAAY,WAAW,EACvC,UAAU,EACR,WAAW,MAAM,QAAQ,EAAE,EAC5B,EACF,EAAE;AAEH,MAAa,wBAAwB,UAAU;CAC7C,MAAM,EACJ,QACA,eACA,kBACA,iBACA,cACA,YACA,eACA,cACA,qBACE;CACJ,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,EAAE,oBAAoB,aAAa;CACzC,MAAM,EAAE,MAAM,gBAAgB;CAE9B,MAAM,CAAC,EAAE,MAAM,oBAAoB,YACjC,cAAc,qBACd,cAAc,aAAa,0BAA0B,WAAW,WAAW,cAAc,OAAO,oBAChG,EAAE,EACF,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,eACtC,MACD;CAED,MAAM,SAAS,cAAc;AAC3B,SAAO,kBAAkB;IACxB,CAAC,gBAAgB,cAAc,CAAC;CAEnC,MAAM,YAAY,kBAAkB;AAClC,kBAAgB,EAAE,wBAAwB,EAAE;GAC1C,SAAS;GACT,cAAc;IACZ,UAAU;IACV,YAAY;IACb;GACF,CAAC;IACD,CAAC,iBAAiB,EAAE,CAAC;CAExB,MAAM,QAAQ,YACZ,OAAO,WAAS;AACd,MAAI,QAAQ,sBAAsB,QAAQ,MACxC,KAAI,OAAO,mBAAmB,gBAAgB,OAAO,MACnD,QAAO,MAAM,cAAcA,QAAM,OAAO,MAAM;MAE9C,YAAW;IAIjB;EAAC;EAAQ;EAAe;EAAQ;EAAU,CAC3C;CAED,MAAM,cAAc,YAClB,OAAO,UAAU;AACf,MAAI,QAAQ,oBAAoB;GAE9B,MAAM,mBAAmB,oBAAoB,kBAAkB,MAAM;GAOrE,MAAM,WAAW,MAAM,MAAM,EAAE,MADlB,EAAE,GALI,cACjB,QAAQ,oBAAoB,gBAC5B,iBACD,EAE6B,EACO,CAAC,CAAC,OAAO,QAAQ;AACpD,oBAAgB,IAAI,SAAS;KAC3B,SAAS;KACT,cAAc;MACZ,UAAU;MACV,YAAY;MACb;KACF,CAAC;KACF;AAEF,OAAI,UAAU,WAAW,IACvB,SAAQ,SAAS,KAAK;;IAI5B;EAAC;EAAiB;EAAkB;EAAO;EAAO,CACnD;CAED,MAAM,aAAa,aAChB,oBAAoB;AACnB,MAAI,CAAC,QAAQ,iBAAiB,oBAAoB,YAChD,QAAO;AAGT,SACE,oCAAC,SAAI,WAAW,QAAQ,YACtB,oCAAC;GAAW,SAAQ;GAAY,OAAO,EAAE,WAAW,GAAG;KACpD,YAAY,iBAAiB,KAAK,CACxB,EACb,oCAAC,kBACE,KAAK,iBAAiB,gBAAgB,KAAK,EACjC,CACT;IAGV,CAAC,SAAS,KAAK,CAChB;CAED,MAAM,cAAc,cAAc;AAChC,SACE,oCAAC,aACE,kBAAkB,KAAK,iBAAiB,UAAU;AACjD,UACE,CAAC,iBAAiB,oBAAoB,cACpC,oCAAC,MAAM,YAAS,KAAK,GAAG,gBAAgB,KAAK,GAAG,WAC7C,WAAW,gBAAgB,CACb;IAGrB,CACE;IAEP,CAAC,kBAAkB,WAAW,CAAC;AAElC,iBAAgB;AACd,MAAI,CAAC,KACH,aAAY,gBAAgB;IAE7B;EAAC;EAAa;EAAiB;EAAK,CAAC;AAExC,QAAO,oCAAC,aAAK,YAAkB"}