@pega/react-sdk-components 0.23.0

package/lib/components/templates/CaseView/CaseView.js

@@ -0,0 +1,180 @@
+/* eslint-disable react/jsx-boolean-value */
+import React, { useState, useEffect, useContext } from "react";
+import PropTypes from "prop-types";
+import { Utils } from '../../helpers/utils';
+import { Card, CardHeader, Avatar, Typography, Divider } from "@material-ui/core";
+import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import Grid from '@material-ui/core/Grid';
+import StoreContext from "../../../bridge/Context/StoreContext";
+import CaseViewActionsMenu from "./CaseViewActionsMenu";
+import VerticalTabs from '../../infra/VerticalTabs';
+import DeferLoad from '../../infra/DeferLoad';
+const useStyles = makeStyles((theme) => ({
+    root: {
+        paddingRight: theme.spacing(1),
+        paddingLeft: theme.spacing(1),
+        paddingTop: theme.spacing(1),
+        paddingBottom: theme.spacing(1),
+        marginRight: theme.spacing(1),
+        marginLeft: theme.spacing(1),
+        marginTop: theme.spacing(1),
+        marginBottom: theme.spacing(1),
+    },
+    caseViewHeader: {
+        backgroundColor: theme.palette.info.light,
+        color: theme.palette.getContrastText(theme.palette.info.light),
+        borderRadius: "inherit",
+    },
+    caseViewIconBox: {
+        backgroundColor: theme.palette.info.dark,
+        width: theme.spacing(8),
+        height: theme.spacing(8),
+        padding: theme.spacing(1),
+    },
+    caseViewIconImage: {
+        filter: 'invert(100%)'
+    }
+}));
+export default function CaseView(props) {
+    const { getPConnect, icon, header, subheader, children, caseInfo: { availableActions = [], availableProcesses = [], hasNewAttachments } } = props;
+    const currentCaseID = props.caseInfo.ID;
+    let isComponentMounted = true;
+    const { displayOnlyFA } = useContext(StoreContext);
+    const thePConn = getPConnect();
+    const classes = useStyles();
+    /**
+     *
+     * @param inName the metadata <em>name</em> that will cause a region to be returned
+     */
+    function getChildRegionByName(inName) {
+        for (const child of children) {
+            const theMetadataType = child.props.getPConnect().getRawMetadata()['type'].toLowerCase();
+            const theMetadataName = child.props.getPConnect().getRawMetadata()['name'].toLowerCase();
+            if ((theMetadataType === "region") && (theMetadataName === inName)) {
+                return child;
+            }
+        }
+        return null;
+    }
+    const theSummaryRegion = getChildRegionByName("summary");
+    const theStagesRegion = getChildRegionByName("stages");
+    const theTodoRegion = getChildRegionByName("todo");
+    const theUtilitiesRegion = getChildRegionByName("utilities");
+    const theTabsRegion = getChildRegionByName("tabs");
+    const svgCase = Utils.getImageSrc(icon, PCore.getAssetLoader().getStaticServerUrl());
+    const [activeVertTab, setActiveVertTab] = useState(0);
+    // const tmpLoadData1 = { config: { label: "Details", name: "pyDetailsTabContent" }, type: "DeferLoad" };
+    // const tmpLoadData2 = { config: { label: "Case History", name: "CaseHistory" }, type: "DeferLoad" };
+    // Extract the tabs we need to display from theTabsRegion (one tab per entry in theTabsRegionChildren)
+    const theTabsRegionChildren = theTabsRegion.props.getPConnect().getChildren();
+    // vertTabInfo is sent to VerticalTabs component
+    const vertTabInfo = [];
+    // deferLoadInfo is sent to DeferLoad component (currently selected entry)
+    const deferLoadInfo = [];
+    if (theTabsRegionChildren) {
+        // populate vertTabInfo and deferLoadInfo
+        theTabsRegionChildren.forEach((tabComp, index) => {
+            const theTabCompConfig = tabComp.getPConnect().getConfigProps();
+            // eslint-disable-next-line prefer-const
+            let { label, inheritedProps } = theTabCompConfig;
+            // For some tabs, "label" property is not avaialable in theTabCompConfig, so will get them from inheritedProps
+            if (!label) {
+                inheritedProps.forEach(inheritedProp => {
+                    if (inheritedProp.prop === 'label') {
+                        label = inheritedProp.value;
+                    }
+                });
+            }
+            // We'll display the tabs when either visibility property doesn't exist or is true(if exists)
+            if (theTabCompConfig.visibility === undefined || theTabCompConfig.visibility === true) {
+                vertTabInfo.push({ name: label, id: index });
+                deferLoadInfo.push({ type: 'DeferLoad', config: theTabCompConfig });
+            }
+        });
+    }
+    function handleVerticalTabClick(eventDetail) {
+        const theItem = parseInt(eventDetail.additionalData.itemClicked, 10);
+        // only call useEffectSetter if the component is mounted
+        if (isComponentMounted) {
+            setActiveVertTab(theItem);
+        }
+    }
+    // Add and Remove event listener for VerticalTabClick only at startup and teardown
+    useEffect(() => {
+        document.addEventListener('VerticalTabClick', (event) => {
+            handleVerticalTabClick(event.detail);
+        });
+        return () => {
+            // inform that the component is unmounted so other code can
+            //  know not to try to call useState setters (to avoid console warnings)
+            isComponentMounted = false;
+            document.removeEventListener('VerticalTabClick', (event) => {
+                handleVerticalTabClick(event.detail);
+            });
+        };
+    }, []);
+    useEffect(() => {
+        if (hasNewAttachments) {
+            PCore.getPubSubUtils().publish(PCore.getEvents().getCaseEvent().CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW, true);
+        }
+    }, [hasNewAttachments]);
+    function _editClick() {
+        const editAction = availableActions.find((action) => action.ID === "pyUpdateCaseDetails");
+        const actionsAPI = thePConn.getActionsApi();
+        const openLocalAction = actionsAPI.openLocalAction.bind(actionsAPI);
+        openLocalAction(editAction.ID, { ...editAction });
+    }
+    function getActionButtonsHtml() {
+        const aBHtml = React.createElement(Box, null,
+            React.createElement(Button, { onClick: () => { _editClick(); } }, "Edit"),
+            "\u00A0",
+            React.createElement(CaseViewActionsMenu, { getPConnect: getPConnect, availableActions: availableActions, availableProcesses: availableProcesses }));
+        return aBHtml;
+    }
+    function getContainerContents() {
+        if (!displayOnlyFA) {
+            // show full portal
+            return (React.createElement(Grid, { container: true },
+                React.createElement(Grid, { item: true, xs: 3 },
+                    React.createElement("div", { hidden: true, id: "current-caseID" }, currentCaseID),
+                    React.createElement(Card, { className: classes.root },
+                        React.createElement(CardHeader, { className: classes.caseViewHeader, title: React.createElement(Typography, { variant: "h6", component: "div" }, header), subheader: React.createElement(Typography, { variant: "body1", component: "div", id: "caseId" }, subheader), avatar: React.createElement(Avatar, { className: classes.caseViewIconBox, variant: "square" },
+                                React.createElement("img", { src: svgCase, className: classes.caseViewIconImage })) }),
+                        getActionButtonsHtml(),
+                        React.createElement(Divider, null),
+                        theSummaryRegion,
+                        React.createElement(Divider, null),
+                        vertTabInfo.length > 1 && React.createElement(VerticalTabs, { tabconfig: vertTabInfo }))),
+                React.createElement(Grid, { item: true, xs: 6 },
+                    theStagesRegion,
+                    theTodoRegion,
+                    deferLoadInfo.length > 0 && React.createElement(DeferLoad, { getPConnect: getPConnect, name: deferLoadInfo[activeVertTab].config.name, isTab: true })),
+                React.createElement(Grid, { item: true, xs: 3 }, theUtilitiesRegion)));
+        }
+        else {
+            // displayOnlyFA - only show the "todo" region
+            return (React.createElement(Grid, { container: true },
+                React.createElement(Grid, { item: true, xs: 12 }, theTodoRegion)));
+        }
+    }
+    return (getContainerContents());
+}
+CaseView.defaultProps = {
+    icon: "",
+    children: [],
+    caseInfo: {},
+    showIconInHeader: true,
+    getPConnect: null
+};
+CaseView.propTypes = {
+    icon: PropTypes.string,
+    children: PropTypes.arrayOf(PropTypes.node),
+    subheader: PropTypes.string.isRequired,
+    header: PropTypes.string.isRequired,
+    showIconInHeader: PropTypes.bool,
+    caseInfo: PropTypes.objectOf(PropTypes.any),
+    getPConnect: PropTypes.func
+};
+//# sourceMappingURL=CaseView.js.map

package/lib/components/templates/CaseView/CaseView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaseView.js","sourceRoot":"","sources":["../../../../src/components/templates/CaseView/CaseView.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable react/jsx-boolean-value */\n\nimport React, { useState, useEffect, useContext } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Utils } from '../../helpers/utils';\nimport { Card, CardHeader, Avatar, Typography, Divider } from \"@material-ui/core\";\nimport { makeStyles } from '@material-ui/core/styles';\nimport Box from '@material-ui/core/Box';\nimport Button from '@material-ui/core/Button';\nimport Grid from '@material-ui/core/Grid';\n\nimport StoreContext from \"../../../bridge/Context/StoreContext\";\nimport CaseViewActionsMenu from \"./CaseViewActionsMenu\";\nimport VerticalTabs from '../../infra/VerticalTabs';\nimport DeferLoad from '../../infra/DeferLoad';\n\n\ndeclare const PCore;\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    paddingRight: theme.spacing(1),\n    paddingLeft: theme.spacing(1),\n    paddingTop: theme.spacing(1),\n    paddingBottom: theme.spacing(1),\n    marginRight: theme.spacing(1),\n    marginLeft: theme.spacing(1),\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1),\n  },\n  caseViewHeader: {\n    backgroundColor: theme.palette.info.light,\n    color: theme.palette.getContrastText(theme.palette.info.light),\n    borderRadius: \"inherit\",\n  },\n  caseViewIconBox: {\n    backgroundColor: theme.palette.info.dark,\n    width: theme.spacing(8),\n    height: theme.spacing(8),\n    padding: theme.spacing(1),\n  },\n  caseViewIconImage: {\n    filter: 'invert(100%)'\n  }\n}));\n\nexport default function CaseView(props) {\n  const {\n    getPConnect,\n    icon,\n    header,\n    subheader,\n    children,\n    caseInfo: { availableActions = [], availableProcesses = [], hasNewAttachments }\n  } = props;\n  const currentCaseID = props.caseInfo.ID;\n  let isComponentMounted = true;\n\n  const { displayOnlyFA } = useContext(StoreContext);\n\n  const thePConn = getPConnect();\n\n  const classes = useStyles();\n\n\n  /**\n   *\n   * @param inName the metadata <em>name</em> that will cause a region to be returned\n   */\n   function getChildRegionByName(inName: string): any {\n\n    for (const child of children) {\n      const theMetadataType: string = child.props.getPConnect().getRawMetadata()['type'].toLowerCase();\n      const theMetadataName: string = child.props.getPConnect().getRawMetadata()['name'].toLowerCase();\n\n      if ((theMetadataType === \"region\") && (theMetadataName === inName )) {\n        return child;\n      }\n    }\n\n    return null;\n  }\n\n\n  const theSummaryRegion = getChildRegionByName(\"summary\");\n  const theStagesRegion = getChildRegionByName(\"stages\");\n  const theTodoRegion = getChildRegionByName(\"todo\");\n  const theUtilitiesRegion = getChildRegionByName(\"utilities\");\n  const theTabsRegion = getChildRegionByName(\"tabs\");\n\n  const svgCase = Utils.getImageSrc(icon, PCore.getAssetLoader().getStaticServerUrl());\n\n  const [activeVertTab, setActiveVertTab] = useState(0);\n\n  // const tmpLoadData1 = { config: { label: \"Details\", name: \"pyDetailsTabContent\" }, type: \"DeferLoad\" };\n  // const tmpLoadData2 = { config: { label: \"Case History\", name: \"CaseHistory\" }, type: \"DeferLoad\" };\n\n  // Extract the tabs we need to display from theTabsRegion (one tab per entry in theTabsRegionChildren)\n  const theTabsRegionChildren = theTabsRegion.props.getPConnect().getChildren();\n\n  // vertTabInfo is sent to VerticalTabs component\n  const vertTabInfo: Array<Object> = [];\n\n  // deferLoadInfo is sent to DeferLoad component (currently selected entry)\n  const deferLoadInfo: Array<any> = [];\n\n  if (theTabsRegionChildren) {\n    // populate vertTabInfo and deferLoadInfo\n    theTabsRegionChildren.forEach((tabComp, index) => {\n      const theTabCompConfig = tabComp.getPConnect().getConfigProps();\n      // eslint-disable-next-line prefer-const\n      let { label, inheritedProps } = theTabCompConfig;\n      // For some tabs, \"label\" property is not avaialable in theTabCompConfig, so will get them from inheritedProps\n      if (!label) {\n        inheritedProps.forEach(inheritedProp => {\n          if (inheritedProp.prop === 'label') {\n            label = inheritedProp.value;\n          }\n        });\n      }\n      // We'll display the tabs when either visibility property doesn't exist or is true(if exists)\n      if (theTabCompConfig.visibility === undefined || theTabCompConfig.visibility === true) {\n        vertTabInfo.push({ name: label, id: index });\n        deferLoadInfo.push({ type: 'DeferLoad', config: theTabCompConfig });\n      }\n    });\n  }\n\n\n\n  function handleVerticalTabClick(eventDetail: any) {\n    const theItem = parseInt(eventDetail.additionalData.itemClicked, 10);\n\n    // only call useEffectSetter if the component is mounted\n    if (isComponentMounted) {\n      setActiveVertTab(theItem);\n    }\n  }\n\n\n  // Add and Remove event listener for VerticalTabClick only at startup and teardown\n  useEffect(() => {\n    document.addEventListener('VerticalTabClick', (event: any) => {\n      handleVerticalTabClick(event.detail);\n    });\n\n    return ():void => {\n      // inform that the component is unmounted so other code can\n      //  know not to try to call useState setters (to avoid console warnings)\n      isComponentMounted = false;\n\n      document.removeEventListener('VerticalTabClick', (event: any) => {\n        handleVerticalTabClick(event.detail);\n      });\n    }\n  }, [])\n\n  useEffect(() => {\n    if (hasNewAttachments) {\n      PCore.getPubSubUtils().publish(PCore.getEvents().getCaseEvent().CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW, true);\n    }\n  }, [hasNewAttachments]);\n\n  function _editClick() {\n\n    const editAction = availableActions.find(\n      (action) => action.ID === \"pyUpdateCaseDetails\"\n    );\n    const actionsAPI = thePConn.getActionsApi();\n    const openLocalAction = actionsAPI.openLocalAction.bind(actionsAPI);\n\n    openLocalAction( editAction.ID, { ...editAction});\n  }\n\n\n  function getActionButtonsHtml(): any {\n\n    const aBHtml = <Box>\n            <Button onClick={() => {_editClick()}}>Edit</Button>\n            &nbsp;\n            <CaseViewActionsMenu getPConnect={getPConnect} availableActions={availableActions} availableProcesses={availableProcesses} />\n        </Box>;\n\n\n    return aBHtml;\n\n  }\n\n\n  function getContainerContents() {\n\n    if (!displayOnlyFA) {\n      // show full portal\n      return (\n        <Grid container>\n          <Grid item xs={3}>\n          <div hidden={true} id=\"current-caseID\">{currentCaseID}</div>\n          <Card className={classes.root} >\n            <CardHeader className={classes.caseViewHeader}\n              title={<Typography variant=\"h6\" component=\"div\">{header}</Typography>}\n              subheader={<Typography variant=\"body1\" component=\"div\" id=\"caseId\">{subheader}</Typography>}\n              avatar={\n                <Avatar className={classes.caseViewIconBox} variant=\"square\">\n                  <img src={svgCase} className={classes.caseViewIconImage}/>\n                </Avatar>\n              }\n            />\n            {getActionButtonsHtml()}\n            <Divider />\n            {theSummaryRegion}\n            <Divider />\n            { vertTabInfo.length > 1 && <VerticalTabs tabconfig={vertTabInfo} />}\n          </Card>\n        </Grid>\n\n        <Grid item xs={6}>\n          {theStagesRegion}\n          {theTodoRegion}\n          { deferLoadInfo.length > 0 && <DeferLoad getPConnect={getPConnect} name={deferLoadInfo[activeVertTab].config.name } isTab />}\n        </Grid>\n\n        <Grid item xs={3}>\n          {theUtilitiesRegion}\n        </Grid>\n      </Grid>\n      )\n    } else {\n      // displayOnlyFA - only show the \"todo\" region\n      return (\n        <Grid container>\n          <Grid item xs={12}>\n            {theTodoRegion}\n          </Grid>\n        </Grid>\n      )\n    }\n  }\n\n\n  return (\n      getContainerContents()\n  );\n}\n\nCaseView.defaultProps = {\n  icon: \"\",\n  children: [],\n  caseInfo: {},\n  showIconInHeader: true,\n  getPConnect: null\n};\n\nCaseView.propTypes = {\n  icon: PropTypes.string,\n  children: PropTypes.arrayOf(PropTypes.node),\n  subheader: PropTypes.string.isRequired,\n  header: PropTypes.string.isRequired,\n  showIconInHeader: PropTypes.bool,\n  caseInfo: PropTypes.objectOf(PropTypes.any),\n  getPConnect: PropTypes.func\n};\n"]}

package/lib/components/templates/CaseView/CaseViewActionsMenu.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import PropTypes from "prop-types";
+declare function CaseViewActionsMenu(props: any): JSX.Element;
+declare namespace CaseViewActionsMenu {
+    var defaultProps: {
+        availableActions: never[];
+        availableProcesses: never[];
+    };
+    var propTypes: {
+        getPConnect: PropTypes.Validator<(...args: any[]) => any>;
+        availableActions: PropTypes.Requireable<(object | null | undefined)[]>;
+        availableProcesses: PropTypes.Requireable<any[]>;
+    };
+}
+export default CaseViewActionsMenu;
+//# sourceMappingURL=CaseViewActionsMenu.d.ts.map

package/lib/components/templates/CaseView/CaseViewActionsMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaseViewActionsMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/CaseView/CaseViewActionsMenu.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,iBAAwB,mBAAmB,CAAC,KAAK,KAAA,eAuDhD;kBAvDuB,mBAAmB;;;;;;;;;;;eAAnB,mBAAmB"}

package/lib/components/templates/CaseView/CaseViewActionsMenu.js

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import PropTypes from "prop-types";
+import Button from '@material-ui/core/Button';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+export default function CaseViewActionsMenu(props) {
+    const { getPConnect, availableActions, availableProcesses } = props;
+    const thePConn = getPConnect();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const arMenuItems = [];
+    function _actionMenuActionsClick(data) {
+        const actionsAPI = thePConn.getActionsApi();
+        const openLocalAction = actionsAPI.openLocalAction.bind(actionsAPI);
+        openLocalAction(data.ID, { ...data });
+        // after doing the action, close the menu...
+        handleClose();
+    }
+    availableActions.forEach((action) => {
+        arMenuItems.push(React.createElement(MenuItem, { key: action.ID, onClick: () => _actionMenuActionsClick(action) }, action.name));
+    });
+    availableProcesses.forEach((process) => {
+        arMenuItems.push(React.createElement(MenuItem, { onClick: handleClose }, process.name));
+    });
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { "aria-controls": "simple-menu", "aria-haspopup": "true", onClick: handleClick }, "Actions..."),
+        React.createElement(Menu, { id: "simple-menu", anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: handleClose }, arMenuItems)));
+}
+CaseViewActionsMenu.defaultProps = {
+    availableActions: [],
+    availableProcesses: []
+};
+CaseViewActionsMenu.propTypes = {
+    getPConnect: PropTypes.func.isRequired,
+    availableActions: PropTypes.arrayOf(PropTypes.object),
+    availableProcesses: PropTypes.arrayOf(PropTypes.any)
+};
+//# sourceMappingURL=CaseViewActionsMenu.js.map

package/lib/components/templates/CaseView/CaseViewActionsMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaseViewActionsMenu.js","sourceRoot":"","sources":["../../../../src/components/templates/CaseView/CaseViewActionsMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAC9C,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAC1C,OAAO,QAAQ,MAAM,4BAA4B,CAAC;AAElD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,KAAK;IAC/C,MAAM,EAAC,WAAW,EAAE,gBAAgB,EAAE,kBAAkB,EAAC,GAAG,KAAK,CAAC;IAClE,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAG/B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAEnE,MAAM,WAAW,GAAG,CAAC,KAA0C,EAAE,EAAE;QACjE,WAAW,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,WAAW,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAe,EAAE,CAAC;IAGnC,SAAS,uBAAuB,CAAC,IAAI;QAEnC,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,EAAE,CAAC;QAC5C,MAAM,eAAe,GAAG,UAAU,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAEpE,eAAe,CAAE,IAAI,CAAC,EAAE,EAAE,EAAE,GAAG,IAAI,EAAC,CAAC,CAAC;QACtC,4CAA4C;QAC5C,WAAW,EAAE,CAAC;IAEhB,CAAC;IAGD,gBAAgB,CAAC,OAAO,CAAE,CAAC,MAAM,EAAE,EAAE;QACnC,WAAW,CAAC,IAAI,CAAE,oBAAC,QAAQ,IAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,uBAAuB,CAAC,MAAM,CAAC,IAAG,MAAM,CAAC,IAAI,CAAY,CAAE,CAAA;IACxH,CAAC,CAAC,CAAC;IAEH,kBAAkB,CAAC,OAAO,CAAE,CAAC,OAAO,EAAE,EAAE;QACtC,WAAW,CAAC,IAAI,CAAE,oBAAC,QAAQ,IAAC,OAAO,EAAE,WAAW,IAAG,OAAO,CAAC,IAAI,CAAY,CAAE,CAAA;IAC/E,CAAC,CAAC,CAAC;IAGH,OAAO,CACL,oBAAC,KAAK,CAAC,QAAQ;QACb,oBAAC,MAAM,qBAAe,aAAa,mBAAe,MAAM,EAAC,OAAO,EAAE,WAAW,iBAEpE;QACT,oBAAC,IAAI,IACH,EAAE,EAAC,aAAa,EAChB,QAAQ,EAAE,QAAQ,EAClB,WAAW,QACX,IAAI,EAAE,OAAO,CAAC,QAAQ,CAAC,EACvB,OAAO,EAAE,WAAW,IAEnB,WAAW,CACP,CACQ,CAClB,CAAC;AACJ,CAAC;AAED,mBAAmB,CAAC,YAAY,GAAG;IACjC,gBAAgB,EAAE,EAAE;IACpB,kBAAkB,EAAE,EAAE;CACvB,CAAA;AAED,mBAAmB,CAAC,SAAS,GAAG;IAC9B,WAAW,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;IACtC,gBAAgB,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC;IACrD,kBAAkB,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC;CACrD,CAAC","sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from \"prop-types\";\nimport Button from '@material-ui/core/Button';\nimport Menu from '@material-ui/core/Menu';\nimport MenuItem from '@material-ui/core/MenuItem';\n\nexport default function CaseViewActionsMenu(props) {\n  const {getPConnect, availableActions, availableProcesses} = props;\n  const thePConn = getPConnect();\n\n\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleClose = () => {\n    setAnchorEl(null);\n  };\n\n  const arMenuItems: Array<any> = [];\n\n\n  function _actionMenuActionsClick(data) {\n\n    const actionsAPI = thePConn.getActionsApi();\n    const openLocalAction = actionsAPI.openLocalAction.bind(actionsAPI);\n\n    openLocalAction( data.ID, { ...data});\n    // after doing the action, close the menu...\n    handleClose();\n\n  }\n\n\n  availableActions.forEach( (action) => {\n    arMenuItems.push( <MenuItem key={action.ID} onClick={() => _actionMenuActionsClick(action)}>{action.name}</MenuItem> )\n  });\n\n  availableProcesses.forEach( (process) => {\n    arMenuItems.push( <MenuItem onClick={handleClose}>{process.name}</MenuItem> )\n  });\n\n\n  return (\n    <React.Fragment>\n      <Button aria-controls=\"simple-menu\" aria-haspopup=\"true\" onClick={handleClick}>\n        Actions...\n      </Button>\n      <Menu\n        id=\"simple-menu\"\n        anchorEl={anchorEl}\n        keepMounted\n        open={Boolean(anchorEl)}\n        onClose={handleClose}\n      >\n        {arMenuItems}\n      </Menu>\n    </React.Fragment>\n  );\n}\n\nCaseViewActionsMenu.defaultProps = {\n  availableActions: [],\n  availableProcesses: []\n}\n\nCaseViewActionsMenu.propTypes = {\n  getPConnect: PropTypes.func.isRequired,\n  availableActions: PropTypes.arrayOf(PropTypes.object),\n  availableProcesses: PropTypes.arrayOf(PropTypes.any)\n};\n"]}

package/lib/components/templates/CaseView/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './CaseView';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/templates/CaseView/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/CaseView/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}

package/lib/components/templates/CaseView/index.js

@@ -0,0 +1,2 @@
+export { default } from './CaseView';
+//# sourceMappingURL=index.js.map

package/lib/components/templates/CaseView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/templates/CaseView/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default } from './CaseView';\n"]}

package/lib/components/templates/DataReference/DataReference.d.ts

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+declare function DataReference(props: any): any;
+declare namespace DataReference {
+    var defaultProps: {
+        label: undefined;
+        showLabel: undefined;
+        displayMode: undefined;
+        allowAndPersistChangesInReviewMode: boolean;
+        referenceType: string;
+        selectionMode: string;
+        displayAs: string;
+        ruleClass: string;
+        parameters: undefined;
+        hideLabel: boolean;
+    };
+    var propTypes: {
+        children: PropTypes.Validator<PropTypes.ReactNodeLike[]>;
+        getPConnect: PropTypes.Validator<(...args: any[]) => any>;
+        label: PropTypes.Requireable<string>;
+        showLabel: PropTypes.Requireable<(...args: any[]) => any>;
+        displayMode: PropTypes.Requireable<string>;
+        allowAndPersistChangesInReviewMode: PropTypes.Requireable<boolean>;
+        referenceType: PropTypes.Requireable<string>;
+        selectionMode: PropTypes.Requireable<string>;
+        displayAs: PropTypes.Requireable<string>;
+        ruleClass: PropTypes.Requireable<string>;
+        parameters: PropTypes.Requireable<(string | null | undefined)[]>;
+        hideLabel: PropTypes.Requireable<boolean>;
+    };
+}
+export default DataReference;
+//# sourceMappingURL=DataReference.d.ts.map

package/lib/components/templates/DataReference/DataReference.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataReference.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/DataReference/DataReference.tsx"],"names":[],"mappings":"AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAQnC,iBAAwB,aAAa,CAAC,KAAK,KAAA,OA4P1C;kBA5PuB,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAAb,aAAa"}

package/lib/components/templates/DataReference/DataReference.js

@@ -0,0 +1,221 @@
+import React, { useMemo, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import SingleReferenceReadonly from '../SingleReferenceReadOnly';
+import MultiReferenceReadonly from '../MultiReferenceReadOnly';
+const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
+export default function DataReference(props) {
+    const { children, getPConnect, label, showLabel, displayMode, allowAndPersistChangesInReviewMode, referenceType, selectionMode, displayAs, ruleClass, parameters, hideLabel } = props;
+    let childrenToRender = children;
+    const pConn = getPConnect();
+    const [dropDownDataSource, setDropDownDataSource] = useState(null);
+    const propsToUse = { label, showLabel, ...pConn.getInheritedProps() };
+    if (propsToUse.showLabel === false) {
+        propsToUse.label = '';
+    }
+    const rawViewMetadata = pConn.getRawMetadata();
+    const viewName = rawViewMetadata.name;
+    const [firstChildMeta] = rawViewMetadata.children;
+    const refList = rawViewMetadata.config.referenceList;
+    const canBeChangedInReviewMode = allowAndPersistChangesInReviewMode && (displayAs === 'autocomplete' || displayAs === 'dropdown');
+    let propName;
+    const isDisplayModeEnabled = ['LABELS_LEFT', 'STACKED_LARGE_VAL'].includes(displayMode);
+    let firstChildPConnect;
+    /* Only for dropdown when it has param use data api to get the data back and add it to datasource */
+    useEffect(() => {
+        if (firstChildMeta?.type === "Dropdown" &&
+            rawViewMetadata.config?.parameters) {
+            const { value, key, text } = firstChildMeta.config.datasource.fields;
+            PCore.getDataApiUtils()
+                .getData(refList, {
+                dataViewParameters: parameters
+            })
+                .then((res) => {
+                if (res.data.data !== null) {
+                    const ddDataSource = res.data.data
+                        .map((listItem) => ({
+                        key: listItem[key.split(" .", 2)[1]],
+                        text: listItem[text.split(" .", 2)[1]],
+                        value: listItem[value.split(" .", 2)[1]]
+                    }))
+                        .filter((item) => item.key);
+                    // Filtering out undefined entries that will break preview
+                    setDropDownDataSource(ddDataSource);
+                }
+                else {
+                    const ddDataSource = [];
+                    setDropDownDataSource(ddDataSource);
+                }
+            })
+                .catch((err) => {
+                // eslint-disable-next-line no-console
+                console.error(err?.stack);
+                return Promise.resolve({
+                    data: { data: [] }
+                });
+            });
+        }
+    }, [firstChildMeta, rawViewMetadata, parameters]);
+    if (firstChildMeta?.type !== 'Region') {
+        firstChildPConnect = getPConnect().getChildren()[0].getPConnect;
+        /* remove refresh When condition from those old view so that it will not be used for runtime */
+        if (firstChildMeta.config?.readOnly) {
+            delete firstChildMeta.config.readOnly;
+        }
+        if (firstChildMeta?.type === 'Dropdown') {
+            firstChildMeta.config.datasource.source = rawViewMetadata.config?.parameters
+                ? dropDownDataSource
+                : '@DATASOURCE '.concat(refList).concat('.pxResults');
+        }
+        else if (firstChildMeta?.type === 'AutoComplete') {
+            firstChildMeta.config.datasource = refList;
+            /* Insert the parameters to the component only if present */
+            if (rawViewMetadata.config?.parameters) {
+                firstChildMeta.config.parameters = parameters;
+            }
+        }
+        // set displayMode conditionally
+        if (!canBeChangedInReviewMode) {
+            firstChildMeta.config.displayMode = displayMode;
+        }
+        if (firstChildMeta.type === 'SimpleTableSelect' && selectionMode === SELECTION_MODE.MULTI) {
+            propName = PCore.getAnnotationUtils().getPropertyName(firstChildMeta.config.selectionList);
+        }
+        else {
+            propName = PCore.getAnnotationUtils().getPropertyName(firstChildMeta.config.value);
+        }
+    }
+    const handleSelection = event => {
+        const caseKey = pConn.getCaseInfo().getKey();
+        const refreshOptions = { autoDetectRefresh: true };
+        if (canBeChangedInReviewMode && pConn.getValue('__currentPageTabViewName')) {
+            getPConnect()
+                .getActionsApi()
+                .refreshCaseView(caseKey, pConn.getValue('__currentPageTabViewName'), null, refreshOptions);
+            PCore.getDeferLoadManager().refreshActiveComponents(pConn.getContextName());
+        }
+        else {
+            const pgRef = pConn.getPageReference().replace('caseInfo.content', '');
+            getPConnect().getActionsApi().refreshCaseView(caseKey, viewName, pgRef, refreshOptions);
+        }
+        // AutoComplete sets value on event.id whereas Dropdown sets it on event.target.value
+        const propValue = event?.id || event?.target.value;
+        if (propValue && canBeChangedInReviewMode && isDisplayModeEnabled) {
+            PCore.getDataApiUtils()
+                .getCaseEditLock(caseKey)
+                .then(caseResponse => {
+                const pageTokens = pConn.getPageReference().replace('caseInfo.content', '').split('.');
+                let curr = {};
+                const commitData = curr;
+                pageTokens.forEach(el => {
+                    if (el !== '') {
+                        curr[el] = {};
+                        curr = curr[el];
+                    }
+                });
+                // expecting format like {Customer: {pyID:"C-100"}}
+                const propArr = propName.split('.');
+                propArr.forEach((element, idx) => {
+                    if (idx + 1 === propArr.length) {
+                        curr[element] = propValue;
+                    }
+                    else {
+                        curr[element] = {};
+                        curr = curr[element];
+                    }
+                });
+                PCore.getDataApiUtils()
+                    .updateCaseEditFieldsData(caseKey, { [caseKey]: commitData }, caseResponse.headers.etag, pConn.getContextName())
+                    .then(response => {
+                    PCore.getContainerUtils().updateChildContainersEtag(pConn.getContextName(), response.headers.etag);
+                });
+            });
+        }
+    };
+    // Re-create first child with overridden props
+    // Memoized child in order to stop unmount and remount of the child component when data reference
+    // rerenders without any actual change
+    const recreatedFirstChild = useMemo(() => {
+        const { type, config } = firstChildMeta;
+        if (firstChildMeta?.type !== 'Region') {
+            pConn.clearErrorMessages({
+                property: propName
+            });
+            if (!canBeChangedInReviewMode && isDisplayModeEnabled && selectionMode === SELECTION_MODE.SINGLE) {
+                return (React.createElement(SingleReferenceReadonly, { config: config, getPConnect: firstChildPConnect, label: propsToUse.label, type: type, displayAs: displayAs, displayMode: displayMode, ruleClass: ruleClass, referenceType: referenceType, hideLabel: hideLabel, dataRelationshipContext: rawViewMetadata.config.contextClass && rawViewMetadata.config.name ? rawViewMetadata.config.name : null }));
+            }
+            if (isDisplayModeEnabled && selectionMode === SELECTION_MODE.MULTI) {
+                return (React.createElement(MultiReferenceReadonly, { config: config, getPConnect: firstChildPConnect, label: propsToUse.label, hideLabel: hideLabel }));
+            }
+            // In the case of a datasource with parameters you cannot load the dropdown before the parameters
+            if (type === 'Dropdown' &&
+                rawViewMetadata.config?.parameters &&
+                dropDownDataSource === null) {
+                return null;
+            }
+            return firstChildPConnect().createComponent({
+                type,
+                config: {
+                    ...config,
+                    required: propsToUse.required,
+                    visibility: propsToUse.visibility,
+                    disabled: propsToUse.disabled,
+                    label: propsToUse.label,
+                    viewName: getPConnect().getCurrentView(),
+                    parameters: rawViewMetadata.config.parameters,
+                    readOnly: false,
+                    localeReference: rawViewMetadata.config.localeReference,
+                    ...(selectionMode === SELECTION_MODE.SINGLE ? { referenceType } : ''),
+                    dataRelationshipContext: rawViewMetadata.config.contextClass && rawViewMetadata.config.name
+                        ? rawViewMetadata.config.name
+                        : null,
+                    hideLabel,
+                    onRecordChange: handleSelection
+                }
+            });
+        }
+    }, [
+        firstChildMeta.config?.datasource?.source,
+        parameters,
+        dropDownDataSource,
+        propsToUse.required,
+        propsToUse.disabled
+    ]);
+    // Only include the views region for rendering when it has content
+    if (firstChildMeta?.type !== 'Region') {
+        const viewsRegion = rawViewMetadata.children[1];
+        if (viewsRegion?.name === 'Views' && viewsRegion.children.length) {
+            childrenToRender = [recreatedFirstChild, ...children.slice(1)];
+        }
+        else {
+            childrenToRender = [recreatedFirstChild];
+        }
+    }
+    return childrenToRender.length === 1 ? (childrenToRender[0] ?? null) : (React.createElement("div", null, childrenToRender.map(child => (React.createElement(React.Fragment, null, child)))));
+}
+DataReference.defaultProps = {
+    label: undefined,
+    showLabel: undefined,
+    displayMode: undefined,
+    allowAndPersistChangesInReviewMode: false,
+    referenceType: '',
+    selectionMode: '',
+    displayAs: '',
+    ruleClass: '',
+    parameters: undefined,
+    hideLabel: false
+};
+DataReference.propTypes = {
+    children: PropTypes.arrayOf(PropTypes.node).isRequired,
+    getPConnect: PropTypes.func.isRequired,
+    label: PropTypes.string,
+    showLabel: PropTypes.func,
+    displayMode: PropTypes.string,
+    allowAndPersistChangesInReviewMode: PropTypes.bool,
+    referenceType: PropTypes.string,
+    selectionMode: PropTypes.string,
+    displayAs: PropTypes.string,
+    ruleClass: PropTypes.string,
+    parameters: PropTypes.arrayOf(PropTypes.string),
+    hideLabel: PropTypes.bool
+};
+//# sourceMappingURL=DataReference.js.map

package/lib/components/templates/DataReference/DataReference.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataReference.js","sourceRoot":"","sources":["../../../../src/components/templates/DataReference/DataReference.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useMemo, useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport SingleReferenceReadonly from '../SingleReferenceReadOnly';\nimport MultiReferenceReadonly from '../MultiReferenceReadOnly';\n\nconst SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };\n\ndeclare const PCore: any;\n\nexport default function DataReference(props) {\n  const {\n    children,\n    getPConnect,\n    label,\n    showLabel,\n    displayMode,\n    allowAndPersistChangesInReviewMode,\n    referenceType,\n    selectionMode,\n    displayAs,\n    ruleClass,\n    parameters,\n    hideLabel\n  } = props;\n  let childrenToRender = children;\n  const pConn = getPConnect();\n  const [dropDownDataSource, setDropDownDataSource] = useState(null);\n  const propsToUse = { label, showLabel, ...pConn.getInheritedProps() };\n  if (propsToUse.showLabel === false) {\n    propsToUse.label = '';\n  }\n  const rawViewMetadata = pConn.getRawMetadata();\n  const viewName = rawViewMetadata.name;\n  const [firstChildMeta] = rawViewMetadata.children;\n  const refList = rawViewMetadata.config.referenceList;\n  const canBeChangedInReviewMode = allowAndPersistChangesInReviewMode && (displayAs === 'autocomplete' || displayAs === 'dropdown');\n  let propName;\n  const isDisplayModeEnabled = ['LABELS_LEFT', 'STACKED_LARGE_VAL'].includes(displayMode);\n  let firstChildPConnect;\n\n  /* Only for dropdown when it has param use data api to get the data back and add it to datasource */\n  useEffect(() => {\n    if (\n      firstChildMeta?.type === \"Dropdown\" &&\n      rawViewMetadata.config?.parameters\n    ) {\n      const { value, key, text } = firstChildMeta.config.datasource.fields;\n      PCore.getDataApiUtils()\n        .getData(refList, {\n          dataViewParameters: parameters\n        })\n        .then((res) => {\n          if (res.data.data !== null) {\n            const ddDataSource = res.data.data\n              .map((listItem) => ({\n                key: listItem[key.split(\" .\", 2)[1]],\n                text: listItem[text.split(\" .\", 2)[1]],\n                value: listItem[value.split(\" .\", 2)[1]]\n              }))\n              .filter((item) => item.key);\n            // Filtering out undefined entries that will break preview\n            setDropDownDataSource(ddDataSource);\n          } else {\n            const ddDataSource: any = []\n            setDropDownDataSource(ddDataSource);\n          }\n        })\n        .catch((err) => {\n          // eslint-disable-next-line no-console\n          console.error(err?.stack);\n          return Promise.resolve({\n            data: { data: [] }\n          });\n        });\n    }\n  }, [firstChildMeta, rawViewMetadata, parameters]);\n\n  if (firstChildMeta?.type !== 'Region') {\n    firstChildPConnect = getPConnect().getChildren()[0].getPConnect;\n    /* remove refresh When condition from those old view so that it will not be used for runtime */\n    if (firstChildMeta.config?.readOnly) {\n      delete firstChildMeta.config.readOnly;\n    }\n    if (firstChildMeta?.type === 'Dropdown') {\n      firstChildMeta.config.datasource.source = rawViewMetadata.config?.parameters\n        ? dropDownDataSource\n        : '@DATASOURCE '.concat(refList).concat('.pxResults');\n    } else if (firstChildMeta?.type === 'AutoComplete') {\n      firstChildMeta.config.datasource = refList;\n\n      /* Insert the parameters to the component only if present */\n      if (rawViewMetadata.config?.parameters) {\n        firstChildMeta.config.parameters = parameters;\n      }\n    }\n    // set displayMode conditionally\n    if (!canBeChangedInReviewMode) {\n      firstChildMeta.config.displayMode = displayMode;\n    }\n    if (firstChildMeta.type === 'SimpleTableSelect' && selectionMode === SELECTION_MODE.MULTI) {\n      propName = PCore.getAnnotationUtils().getPropertyName(firstChildMeta.config.selectionList);\n    } else {\n      propName = PCore.getAnnotationUtils().getPropertyName(firstChildMeta.config.value);\n    }\n  }\n\n  const handleSelection = event => {\n    const caseKey = pConn.getCaseInfo().getKey();\n    const refreshOptions = { autoDetectRefresh: true };\n    if (canBeChangedInReviewMode && pConn.getValue('__currentPageTabViewName')) {\n      getPConnect()\n        .getActionsApi()\n        .refreshCaseView(caseKey, pConn.getValue('__currentPageTabViewName'), null, refreshOptions);\n      PCore.getDeferLoadManager().refreshActiveComponents(pConn.getContextName());\n    } else {\n      const pgRef = pConn.getPageReference().replace('caseInfo.content', '');\n      getPConnect().getActionsApi().refreshCaseView(caseKey, viewName, pgRef, refreshOptions);\n    }\n\n    // AutoComplete sets value on event.id whereas Dropdown sets it on event.target.value\n    const propValue = event?.id || event?.target.value;\n    if (propValue && canBeChangedInReviewMode && isDisplayModeEnabled) {\n      PCore.getDataApiUtils()\n        .getCaseEditLock(caseKey)\n        .then(caseResponse => {\n          const pageTokens = pConn.getPageReference().replace('caseInfo.content', '').split('.');\n          let curr = {};\n          const commitData = curr;\n\n          pageTokens.forEach(el => {\n            if (el !== '') {\n              curr[el] = {};\n              curr = curr[el];\n            }\n          });\n\n          // expecting format like {Customer: {pyID:\"C-100\"}}\n          const propArr = propName.split('.');\n          propArr.forEach((element, idx) => {\n            if (idx + 1 === propArr.length) {\n              curr[element] = propValue;\n            } else {\n              curr[element] = {};\n              curr = curr[element];\n            }\n          });\n\n          PCore.getDataApiUtils()\n            .updateCaseEditFieldsData(\n              caseKey,\n              { [caseKey]: commitData },\n              caseResponse.headers.etag,\n              pConn.getContextName()\n            )\n            .then(response => {\n              PCore.getContainerUtils().updateChildContainersEtag(\n                pConn.getContextName(),\n                response.headers.etag\n              );\n            });\n        });\n    }\n  };\n\n  // Re-create first child with overridden props\n  // Memoized child in order to stop unmount and remount of the child component when data reference\n  // rerenders without any actual change\n  const recreatedFirstChild = useMemo(() => {\n    const { type, config } = firstChildMeta;\n    if (firstChildMeta?.type !== 'Region') {\n      pConn.clearErrorMessages({\n        property: propName\n      });\n      if (!canBeChangedInReviewMode && isDisplayModeEnabled && selectionMode === SELECTION_MODE.SINGLE) {\n        return (\n          <SingleReferenceReadonly\n            config={config}\n            getPConnect={firstChildPConnect}\n            label={propsToUse.label}\n            type={type}\n            displayAs={displayAs}\n            displayMode={displayMode}\n            ruleClass={ruleClass}\n            referenceType={referenceType}\n            hideLabel={hideLabel}\n            dataRelationshipContext={\n              rawViewMetadata.config.contextClass && rawViewMetadata.config.name ? rawViewMetadata.config.name : null\n            }\n          />\n        );\n      }\n\n      if (isDisplayModeEnabled && selectionMode === SELECTION_MODE.MULTI) {\n        return (\n          <MultiReferenceReadonly\n            config={config}\n            getPConnect={firstChildPConnect}\n            label={propsToUse.label}\n            hideLabel={hideLabel}\n          />\n        );\n      }\n\n      // In the case of a datasource with parameters you cannot load the dropdown before the parameters\n      if (\n        type === 'Dropdown' &&\n        rawViewMetadata.config?.parameters &&\n        dropDownDataSource === null\n      ) {\n        return null;\n      }\n\n      return firstChildPConnect().createComponent({\n        type,\n        config: {\n          ...config,\n          required: propsToUse.required,\n          visibility: propsToUse.visibility,\n          disabled: propsToUse.disabled,\n          label: propsToUse.label,\n          viewName: getPConnect().getCurrentView(),\n          parameters: rawViewMetadata.config.parameters,\n          readOnly: false,\n          localeReference: rawViewMetadata.config.localeReference,\n          ...(selectionMode === SELECTION_MODE.SINGLE ? { referenceType } : ''),\n          dataRelationshipContext:\n            rawViewMetadata.config.contextClass && rawViewMetadata.config.name\n              ? rawViewMetadata.config.name\n              : null,\n          hideLabel,\n          onRecordChange: handleSelection\n        }\n      });\n    }\n  }, [\n    firstChildMeta.config?.datasource?.source,\n    parameters,\n    dropDownDataSource,\n    propsToUse.required,\n    propsToUse.disabled\n  ]);\n\n  // Only include the views region for rendering when it has content\n  if (firstChildMeta?.type !== 'Region') {\n    const viewsRegion = rawViewMetadata.children[1];\n    if (viewsRegion?.name === 'Views' && viewsRegion.children.length) {\n      childrenToRender = [recreatedFirstChild, ...children.slice(1)];\n    } else {\n      childrenToRender = [recreatedFirstChild];\n    }\n  }\n\n  return childrenToRender.length === 1 ? (\n    childrenToRender[0] ?? null\n  ) : (\n    <div>\n      {childrenToRender.map(child => (\n        <React.Fragment>{child}</React.Fragment>\n      ))}\n    </div>\n  );\n}\n\nDataReference.defaultProps = {\n  label: undefined,\n  showLabel: undefined,\n  displayMode: undefined,\n  allowAndPersistChangesInReviewMode: false,\n  referenceType: '',\n  selectionMode: '',\n  displayAs: '',\n  ruleClass: '',\n  parameters: undefined,\n  hideLabel: false\n};\n\nDataReference.propTypes = {\n  children: PropTypes.arrayOf(PropTypes.node).isRequired,\n  getPConnect: PropTypes.func.isRequired,\n  label: PropTypes.string,\n  showLabel: PropTypes.func,\n  displayMode: PropTypes.string,\n  allowAndPersistChangesInReviewMode: PropTypes.bool,\n  referenceType: PropTypes.string,\n  selectionMode: PropTypes.string,\n  displayAs: PropTypes.string,\n  ruleClass: PropTypes.string,\n  parameters: PropTypes.arrayOf(PropTypes.string), // need to fix\n  hideLabel: PropTypes.bool\n};\n"]}

package/lib/components/templates/DataReference/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './DataReference';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/templates/DataReference/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/DataReference/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}

package/lib/components/templates/DataReference/index.js

@@ -0,0 +1,2 @@
+export { default } from './DataReference';
+//# sourceMappingURL=index.js.map

package/lib/components/templates/DataReference/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/templates/DataReference/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default } from './DataReference';\n"]}