@pega/react-sdk-components 23.1.10 → 23.1.12

package/lib/components/infra/Stages/Stages.js

@@ -1,9 +1,9 @@
-import React from "react";
-import { Breadcrumbs, Card, Typography } from "@material-ui/core";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Breadcrumbs, Card, Typography } from '@material-ui/core';
 import DoubleArrowIcon from '@material-ui/icons/DoubleArrow';
 import DoneIcon from '@material-ui/icons/Done';
 import { makeStyles } from '@material-ui/core/styles';
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
     root: {
         paddingRight: theme.spacing(1),
         paddingLeft: theme.spacing(1),
@@ -12,20 +12,20 @@ const useStyles = makeStyles((theme) => ({
         marginRight: theme.spacing(1),
         marginLeft: theme.spacing(1),
         marginTop: theme.spacing(1),
-        marginBottom: theme.spacing(1),
+        marginBottom: theme.spacing(1)
     },
     completedStage: {
-        color: theme.palette.text.primary,
+        color: theme.palette.text.primary
     },
     currentStage: {
         color: theme.palette.info.dark,
-        fontWeight: 600,
+        fontWeight: 600
     },
     futureStage: {
-        color: theme.palette.text.secondary,
+        color: theme.palette.text.secondary
     },
     separatorIcon: {
-        color: theme.palette.text.disabled,
+        color: theme.palette.text.disabled
     }
 }));
 /**
@@ -38,8 +38,7 @@ function getFilteredStages(stages) {
     if (!Array.isArray(stages)) {
         return [];
     }
-    return stages.filter((stage) => stage.type !== "Alternate" ||
-        (stage.type === "Alternate" && stage.visited_status === "active"));
+    return stages.filter(stage => stage.type !== 'Alternate' || (stage.type === 'Alternate' && stage.visited_status === 'active'));
 }
 /* TODO - this component should be refactored and not exposed as top level DX Component -
   the stages should be created as part of the CaseView */
@@ -53,11 +52,11 @@ export default function Stages(props) {
     const stagesObj = filteredStages.map((stage, index, arr) => {
         const theID = stage.ID || stage.id;
         return {
-            name: PCore.getLocaleUtils().getLocaleValue(stage.name, null, key),
+            name: PCore.getLocaleUtils().getLocaleValue(stage.name, undefined, key),
             id: theID,
-            complete: stage.visited_status === "completed",
-            current: (theID === currentStageID),
-            last: (index === arr.length - 1),
+            complete: stage.visited_status === 'completed',
+            current: theID === currentStageID,
+            last: index === arr.length - 1
         };
     });
     // debugging/investigation help
@@ -75,15 +74,13 @@ export default function Stages(props) {
         else {
             theClass = classes.futureStage;
         }
-        return React.createElement("span", { key: index },
-            stage.complete ? React.createElement(DoneIcon, { color: "disabled", fontSize: "small" }) : null,
-            React.createElement(Typography, { variant: "h5", component: "span", display: "inline", className: theClass }, stage.name));
+        return (_jsxs("span", { children: [stage.complete ? _jsx(DoneIcon, { color: 'disabled', fontSize: 'small' }) : null, _jsx(Typography, { variant: 'h5', component: 'span', display: 'inline', className: theClass, children: stage.name })] }, index));
     }
     function getStages(inStages) {
-        return React.createElement(Breadcrumbs, { "aria-label": "stages", separator: React.createElement(DoubleArrowIcon, { className: classes.separatorIcon }) }, inStages.map((stage, index) => {
-            return getStage(stage, index);
-        }));
+        return (_jsx(Breadcrumbs, { "aria-label": 'stages', separator: _jsx(DoubleArrowIcon, { className: classes.separatorIcon }), children: inStages.map((stage, index) => {
+                return getStage(stage, index);
+            }) }));
     }
-    return (React.createElement(Card, { id: "Stages", className: classes.root }, getStages(stagesObj)));
+    return (_jsx(Card, { id: 'Stages', className: classes.root, children: getStages(stagesObj) }));
 }
 //# sourceMappingURL=Stages.js.map

package/lib/components/infra/Stages/Stages.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../../src/components/infra/Stages/Stages.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { Breadcrumbs, Card, Typography } from \"@material-ui/core\";\nimport DoubleArrowIcon from '@material-ui/icons/DoubleArrow';\nimport DoneIcon from '@material-ui/icons/Done';\nimport { makeStyles } from '@material-ui/core/styles';\nimport type { PConnProps } from '../../../types/PConnProps';\n\n\ninterface StagesProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n  stages: Array<any>\n}\n\n\n// Remove this and use \"real\" PCore type once .d.ts is fixed (currently shows 1 error)\ndeclare const PCore: any;\n\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  completedStage: {\n    color: theme.palette.text.primary,\n  },\n  currentStage: {\n    color: theme.palette.info.dark,\n    fontWeight: 600,\n  },\n  futureStage: {\n    color: theme.palette.text.secondary,\n  },\n  separatorIcon: {\n    color: theme.palette.text.disabled,\n  }\n\n}));\n\n\n/**\n * API to filter out the alternate stages which are not in active and return all other stages\n * @param {Array} stages - Stages of a case type\n *\n * @returns {Array} - Returns stages which are non alternate stages and alternate stage which is active.\n */\nfunction getFilteredStages(stages) {\n  if (!Array.isArray(stages)) {\n    return [];\n  }\n\n  return stages.filter(\n    (stage) =>\n      stage.type !== \"Alternate\" ||\n      (stage.type === \"Alternate\" && stage.visited_status === \"active\")\n  );\n}\n\n/* TODO - this component should be refactored and not exposed as top level DX Component -\n  the stages should be created as part of the CaseView */\nexport default function Stages(props: StagesProps) {\n  const classes = useStyles();\n\n  const { getPConnect, stages } = props;\n  const pConn = getPConnect();\n  const key = `${pConn.getCaseInfo().getClassName()}!CASE!${pConn.getCaseInfo().getName()}`.toUpperCase();\n\n\n  const filteredStages = getFilteredStages(stages);\n  const currentStageID = pConn.getValue(PCore.getConstants().CASE_INFO.STAGEID, '');  // 2nd arg empty string until typedef allows optional\n  const stagesObj = filteredStages.map((stage, index, arr) => {\n    const theID = stage.ID || stage.id;\n    return {\n      name: PCore.getLocaleUtils().getLocaleValue(stage.name, null, key),\n      id: theID,\n      complete: stage.visited_status === \"completed\",\n      current: (theID === currentStageID),\n      last: (index === arr.length - 1),\n    };\n  });\n\n  // debugging/investigation help\n  // console.log(`Stages: current: ${currentStageID} stagesObj: ${JSON.stringify(stagesObj)}`);\n\n  function getStage(stage, index) {\n    //  Removing nested ternary for lint\n    // const theClass = stage.current ? classes.currentStage : (stage.complete ? classes.completedStage : classes.futureStage);\n    let theClass;\n    if (stage.current) {\n      theClass = classes.currentStage;\n    } else if (stage.complete) {\n      theClass = classes.completedStage;\n    } else {\n      theClass = classes.futureStage;\n    }\n\n    return <span key={index}>\n        {stage.complete ? <DoneIcon color=\"disabled\" fontSize=\"small\" /> : null}\n        <Typography variant=\"h5\" component=\"span\" display=\"inline\" className={theClass}>{stage.name}</Typography>\n      </span>;\n  }\n\n  function getStages(inStages) {\n    return <Breadcrumbs aria-label=\"stages\" separator={<DoubleArrowIcon className={classes.separatorIcon} />}>\n      {inStages.map((stage, index) => {\n        return getStage(stage, index);\n      })}\n    </Breadcrumbs>\n  }\n\n  return (\n    <Card id=\"Stages\" className={classes.root}>\n      {/* Stages<br />\n      currentStageID: {currentStageID}<br />\n      {JSON.stringify(stagesObj)}<br /><br /> */}\n      {getStages(stagesObj)}\n    </Card>\n  )\n}\n"]}
+{"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../../src/components/infra/Stages/Stages.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAClE,OAAO,eAAe,MAAM,gCAAgC,CAAC;AAC7D,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAStD,MAAM,SAAS,GAAG,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACrC,IAAI,EAAE;QACJ,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAC9B,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAC7B,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAC5B,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAC/B,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAC7B,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAC5B,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAC3B,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;KAC/B;IACD,cAAc,EAAE;QACd,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;KAClC;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;QAC9B,UAAU,EAAE,GAAG;KAChB;IACD,WAAW,EAAE;QACX,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS;KACpC;IACD,aAAa,EAAE;QACb,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;KACnC;CACF,CAAC,CAAC,CAAC;AAEJ;;;;;GAKG;AACH,SAAS,iBAAiB,CAAC,MAAM;IAC/B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;QAC1B,OAAO,EAAE,CAAC;KACX;IAED,OAAO,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,WAAW,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,WAAW,IAAI,KAAK,CAAC,cAAc,KAAK,QAAQ,CAAC,CAAC,CAAC;AACjI,CAAC;AAED;yDACyD;AACzD,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAkB;IAC/C,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACtC,MAAM,KAAK,GAAG,WAAW,EAAE,CAAC;IAC5B,MAAM,GAAG,GAAG,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC,YAAY,EAAE,SAAS,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,WAAW,EAAE,CAAC;IAExG,MAAM,cAAc,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC;IACjD,MAAM,cAAc,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,SAAS,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC,qDAAqD;IACxI,MAAM,SAAS,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE;QACzD,MAAM,KAAK,GAAG,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC,EAAE,CAAC;QACnC,OAAO;YACL,IAAI,EAAE,KAAK,CAAC,cAAc,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC;YACvE,EAAE,EAAE,KAAK;YACT,QAAQ,EAAE,KAAK,CAAC,cAAc,KAAK,WAAW;YAC9C,OAAO,EAAE,KAAK,KAAK,cAAc;YACjC,IAAI,EAAE,KAAK,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC;SAC/B,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,+BAA+B;IAC/B,6FAA6F;IAE7F,SAAS,QAAQ,CAAC,KAAK,EAAE,KAAK;QAC5B,oCAAoC;QACpC,2HAA2H;QAC3H,IAAI,QAAQ,CAAC;QACb,IAAI,KAAK,CAAC,OAAO,EAAE;YACjB,QAAQ,GAAG,OAAO,CAAC,YAAY,CAAC;SACjC;aAAM,IAAI,KAAK,CAAC,QAAQ,EAAE;YACzB,QAAQ,GAAG,OAAO,CAAC,cAAc,CAAC;SACnC;aAAM;YACL,QAAQ,GAAG,OAAO,CAAC,WAAW,CAAC;SAChC;QAED,OAAO,CACL,2BACG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAC,OAAO,GAAG,CAAC,CAAC,CAAC,IAAI,EACvE,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,EAAC,SAAS,EAAE,QAAQ,YAC3E,KAAK,CAAC,IAAI,GACA,KAJJ,KAAK,CAKT,CACR,CAAC;IACJ,CAAC;IAED,SAAS,SAAS,CAAC,QAAQ;QACzB,OAAO,CACL,KAAC,WAAW,kBAAY,QAAQ,EAAC,SAAS,EAAE,KAAC,eAAe,IAAC,SAAS,EAAE,OAAO,CAAC,aAAa,GAAI,YAC9F,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBAC7B,OAAO,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;YAChC,CAAC,CAAC,GACU,CACf,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,IAAI,IAAC,EAAE,EAAC,QAAQ,EAAC,SAAS,EAAE,OAAO,CAAC,IAAI,YAItC,SAAS,CAAC,SAAS,CAAC,GAChB,CACR,CAAC;AACJ,CAAC","sourcesContent":["import { Breadcrumbs, Card, Typography } from '@material-ui/core';\nimport DoubleArrowIcon from '@material-ui/icons/DoubleArrow';\nimport DoneIcon from '@material-ui/icons/Done';\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport { PConnProps } from '../../../types/PConnProps';\n\ninterface StagesProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n  stages: any[];\n}\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  completedStage: {\n    color: theme.palette.text.primary\n  },\n  currentStage: {\n    color: theme.palette.info.dark,\n    fontWeight: 600\n  },\n  futureStage: {\n    color: theme.palette.text.secondary\n  },\n  separatorIcon: {\n    color: theme.palette.text.disabled\n  }\n}));\n\n/**\n * API to filter out the alternate stages which are not in active and return all other stages\n * @param {Array} stages - Stages of a case type\n *\n * @returns {Array} - Returns stages which are non alternate stages and alternate stage which is active.\n */\nfunction getFilteredStages(stages) {\n  if (!Array.isArray(stages)) {\n    return [];\n  }\n\n  return stages.filter(stage => stage.type !== 'Alternate' || (stage.type === 'Alternate' && stage.visited_status === 'active'));\n}\n\n/* TODO - this component should be refactored and not exposed as top level DX Component -\n  the stages should be created as part of the CaseView */\nexport default function Stages(props: StagesProps) {\n  const classes = useStyles();\n\n  const { getPConnect, stages } = props;\n  const pConn = getPConnect();\n  const key = `${pConn.getCaseInfo().getClassName()}!CASE!${pConn.getCaseInfo().getName()}`.toUpperCase();\n\n  const filteredStages = getFilteredStages(stages);\n  const currentStageID = pConn.getValue(PCore.getConstants().CASE_INFO.STAGEID, ''); // 2nd arg empty string until typedef allows optional\n  const stagesObj = filteredStages.map((stage, index, arr) => {\n    const theID = stage.ID || stage.id;\n    return {\n      name: PCore.getLocaleUtils().getLocaleValue(stage.name, undefined, key),\n      id: theID,\n      complete: stage.visited_status === 'completed',\n      current: theID === currentStageID,\n      last: index === arr.length - 1\n    };\n  });\n\n  // debugging/investigation help\n  // console.log(`Stages: current: ${currentStageID} stagesObj: ${JSON.stringify(stagesObj)}`);\n\n  function getStage(stage, index) {\n    //  Removing nested ternary for lint\n    // const theClass = stage.current ? classes.currentStage : (stage.complete ? classes.completedStage : classes.futureStage);\n    let theClass;\n    if (stage.current) {\n      theClass = classes.currentStage;\n    } else if (stage.complete) {\n      theClass = classes.completedStage;\n    } else {\n      theClass = classes.futureStage;\n    }\n\n    return (\n      <span key={index}>\n        {stage.complete ? <DoneIcon color='disabled' fontSize='small' /> : null}\n        <Typography variant='h5' component='span' display='inline' className={theClass}>\n          {stage.name}\n        </Typography>\n      </span>\n    );\n  }\n\n  function getStages(inStages) {\n    return (\n      <Breadcrumbs aria-label='stages' separator={<DoubleArrowIcon className={classes.separatorIcon} />}>\n        {inStages.map((stage, index) => {\n          return getStage(stage, index);\n        })}\n      </Breadcrumbs>\n    );\n  }\n\n  return (\n    <Card id='Stages' className={classes.root}>\n      {/* Stages<br />\n      currentStageID: {currentStageID}<br />\n      {JSON.stringify(stagesObj)}<br /><br /> */}\n      {getStages(stagesObj)}\n    </Card>\n  );\n}\n"]}

package/lib/components/infra/VerticalTabs/LeftAlignVerticalTabs/LeftAlignVerticalTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LeftAlignVerticalTabs.d.ts","sourceRoot":"","sources":["../../../../../src/components/infra/VerticalTabs/LeftAlignVerticalTabs/LeftAlignVerticalTabs.tsx"],"names":[],"mappings":"AAsBA,QAAA,MAAM,qBAAqB,EAAE,GASuD,CAAC;AAErF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"LeftAlignVerticalTabs.d.ts","sourceRoot":"","sources":["../../../../../src/components/infra/VerticalTabs/LeftAlignVerticalTabs/LeftAlignVerticalTabs.tsx"],"names":[],"mappings":"AAiBA,QAAA,MAAM,qBAAqB,EAAE,GAc3B,CAAC;AAEH,eAAe,qBAAqB,CAAC"}

package/lib/components/infra/VerticalTabs/LeftAlignVerticalTabs/LeftAlignVerticalTabs.js

@@ -1,6 +1,6 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { withStyles } from '@material-ui/core/styles';
-import { Tab, Divider, } from '@material-ui/core';
+import { Tab, Divider } from '@material-ui/core';
 // LeftAlignVerticalTab is a specialized Tab that has styles to make it
 //  left aligned and full width of the container Tabs
 // Aligning the Tab labels left (with & .<class name> syntax) inspired by:
@@ -10,14 +10,12 @@ import { Tab, Divider, } from '@material-ui/core';
 const LeftAlignVerticalTabs = withStyles(( /* theme */) => ({
     root: {
         width: '100%',
-        maxWidth: '100%',
+        maxWidth: '100%'
     },
     wrapper: {
         display: 'block',
-        textAlign: 'left',
-    },
-}))((props) => React.createElement("div", null,
-    React.createElement(Tab, { ...props }),
-    React.createElement(Divider, null)));
+        textAlign: 'left'
+    }
+}))((props) => (_jsxs("div", { children: [_jsx(Tab, { ...props }), _jsx(Divider, {})] })));
 export default LeftAlignVerticalTabs;
 //# sourceMappingURL=LeftAlignVerticalTabs.js.map

package/lib/components/infra/VerticalTabs/LeftAlignVerticalTabs/LeftAlignVerticalTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"LeftAlignVerticalTabs.js","sourceRoot":"","sources":["../../../../../src/components/infra/VerticalTabs/LeftAlignVerticalTabs/LeftAlignVerticalTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EACL,GAAG,EACH,OAAO,GACR,MAAM,mBAAmB,CAAC;AAS3B,uEAAuE;AACvE,qDAAqD;AAErD,0EAA0E;AAC1E,gIAAgI;AAEhI,8EAA8E;AAC9E,iEAAiE;AACjE,MAAM,qBAAqB,GAAQ,UAAU,CAAC,EAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IAC9D,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,MAAM;KACjB;IACD,OAAO,EAAE;QACP,OAAO,EAAE,OAAO;QAChB,SAAS,EAAE,MAAM;KAClB;CACF,CAAC,CAAC,CAAC,CAAC,KAAiC,EAAE,EAAE,CAAC;IAAK,oBAAC,GAAG,OAAK,KAAK,GAAI;IAAA,oBAAC,OAAO,OAAG,CAAM,CAAC,CAAC;AAErF,eAAe,qBAAqB,CAAC","sourcesContent":["import React from \"react\";\nimport { withStyles } from '@material-ui/core/styles'\nimport {\n  Tab,\n  Divider,\n} from '@material-ui/core';\n\n// LeftAlignVerticalTabs does NOT have getPConnect. So, no need to extend from PConnProps\n\ninterface LeftAlignVerticalTabsProps {\n  // If any, enter additional props that only exist on this component\n}\n\n\n// LeftAlignVerticalTab is a specialized Tab that has styles to make it\n//  left aligned and full width of the container Tabs\n\n// Aligning the Tab labels left (with & .<class name> syntax) inspired by:\n//  https://stackoverflow.com/questions/63307723/how-to-modify-the-wrapper-css-rule-of-a-tabs-component-to-make-the-text-aligned\n\n// In this styling, \"root\" is the top-level \"Tab\" object (which is the button)\n//  and the button contains spans that will match on the '> span'\nconst LeftAlignVerticalTabs: any = withStyles((/* theme */) => ({\n  root: {\n    width: '100%',\n    maxWidth: '100%',\n  },\n  wrapper: {\n    display: 'block',\n    textAlign: 'left',\n  },\n}))((props: LeftAlignVerticalTabsProps) => <div><Tab {...props} /><Divider /></div>);\n\nexport default LeftAlignVerticalTabs;\n"]}
+{"version":3,"file":"LeftAlignVerticalTabs.js","sourceRoot":"","sources":["../../../../../src/components/infra/VerticalTabs/LeftAlignVerticalTabs/LeftAlignVerticalTabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAQjD,uEAAuE;AACvE,qDAAqD;AAErD,0EAA0E;AAC1E,gIAAgI;AAEhI,8EAA8E;AAC9E,iEAAiE;AACjE,MAAM,qBAAqB,GAAQ,UAAU,CAAC,EAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IAC9D,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,MAAM;KACjB;IACD,OAAO,EAAE;QACP,OAAO,EAAE,OAAO;QAChB,SAAS,EAAE,MAAM;KAClB;CACF,CAAC,CAAC,CAAC,CAAC,KAAiC,EAAE,EAAE,CAAC,CACzC,0BACE,KAAC,GAAG,OAAK,KAAK,GAAI,EAClB,KAAC,OAAO,KAAG,IACP,CACP,CAAC,CAAC;AAEH,eAAe,qBAAqB,CAAC","sourcesContent":["import { withStyles } from '@material-ui/core/styles';\nimport { Tab, Divider } from '@material-ui/core';\n\n// LeftAlignVerticalTabs does NOT have getPConnect. So, no need to extend from PConnProps\n\ninterface LeftAlignVerticalTabsProps {\n  // If any, enter additional props that only exist on this component\n}\n\n// LeftAlignVerticalTab is a specialized Tab that has styles to make it\n//  left aligned and full width of the container Tabs\n\n// Aligning the Tab labels left (with & .<class name> syntax) inspired by:\n//  https://stackoverflow.com/questions/63307723/how-to-modify-the-wrapper-css-rule-of-a-tabs-component-to-make-the-text-aligned\n\n// In this styling, \"root\" is the top-level \"Tab\" object (which is the button)\n//  and the button contains spans that will match on the '> span'\nconst LeftAlignVerticalTabs: any = withStyles((/* theme */) => ({\n  root: {\n    width: '100%',\n    maxWidth: '100%'\n  },\n  wrapper: {\n    display: 'block',\n    textAlign: 'left'\n  }\n}))((props: LeftAlignVerticalTabsProps) => (\n  <div>\n    <Tab {...props} />\n    <Divider />\n  </div>\n));\n\nexport default LeftAlignVerticalTabs;\n"]}

package/lib/components/infra/VerticalTabs/VerticalTabs/VerticalTabs.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 interface VerticalTabsProps {
-    tabconfig: Array<any>;
+    tabconfig: any[];
 }
 export default function VerticalTabs(props: VerticalTabsProps): JSX.Element;
 export {};

package/lib/components/infra/VerticalTabs/VerticalTabs/VerticalTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalTabs.d.ts","sourceRoot":"","sources":["../../../../../src/components/infra/VerticalTabs/VerticalTabs/VerticalTabs.tsx"],"names":[],"mappings":";AAOA,UAAU,iBAAiB;IAEzB,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,CAAA;CACtB;AA4BD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAoC5D"}
+{"version":3,"file":"VerticalTabs.d.ts","sourceRoot":"","sources":["../../../../../src/components/infra/VerticalTabs/VerticalTabs/VerticalTabs.tsx"],"names":[],"mappings":";AAOA,UAAU,iBAAiB;IAEzB,SAAS,EAAE,GAAG,EAAE,CAAC;CAClB;AAyBD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAgC5D"}

package/lib/components/infra/VerticalTabs/VerticalTabs/VerticalTabs.js

@@ -1,16 +1,18 @@
-import React, { useState, useEffect } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { useState, useEffect } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Tabs from '@material-ui/core/Tabs';
 import { getComponentFromMap } from '../../../../bridge/helpers/sdk_component_map';
 // The MuiTabs-indicator class is in a span whose parent is div (under the Tabs root component)
 //  So, we're going to make the selected vertical tab indicator use a color from our theme.
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
     tabs: {
         '& div > span': {
             backgroundColor: theme.palette.info.dark,
-            width: "3px"
-        },
-    },
+            width: '3px'
+        }
+    }
 }));
 // Implementation of custom event inspired by:
 //  https://betterprogramming.pub/master-your-react-skills-with-event-listeners-ebc01dde4fad
@@ -24,13 +26,13 @@ const createCustomEvent = (eventName, additionalData) => {
 };
 export default function VerticalTabs(props) {
     // Get emitted components from map (so we can get any override that may exist)
-    const LeftAlignVerticalTab = getComponentFromMap("LeftAlignVerticalTabs");
+    const LeftAlignVerticalTab = getComponentFromMap('LeftAlignVerticalTabs');
     // Get a React warning when we use tabConfig as mixed case. So all lowercase tabconfig
     const { tabconfig = [] } = props;
     const classes = useStyles();
     const [value, setValue] = useState(0);
     useEffect(() => {
-        const eventData = { "itemClicked": value.toString() };
+        const eventData = { itemClicked: value.toString() };
         const myEvent = createCustomEvent('VerticalTabClick', eventData);
         if (myEvent !== null) {
             document.dispatchEvent(myEvent);
@@ -39,7 +41,6 @@ export default function VerticalTabs(props) {
     const handleChange = (event, newValue) => {
         setValue(newValue);
     };
-    return (React.createElement("div", { id: "VerticalTabs" },
-        React.createElement(Tabs, { className: classes.tabs, orientation: "vertical", value: value, onChange: handleChange }, tabconfig.map((tab) => React.createElement(LeftAlignVerticalTab, { ...props, label: tab.name, key: tab.name })))));
+    return (_jsx("div", { id: 'VerticalTabs', children: _jsx(Tabs, { className: classes.tabs, orientation: 'vertical', value: value, onChange: handleChange, children: tabconfig.map(tab => (_createElement(LeftAlignVerticalTab, { ...props, label: tab.name, key: tab.name }))) }) }));
 }
 //# sourceMappingURL=VerticalTabs.js.map

package/lib/components/infra/VerticalTabs/VerticalTabs/VerticalTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalTabs.js","sourceRoot":"","sources":["../../../../../src/components/infra/VerticalTabs/VerticalTabs/VerticalTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAErD,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAC1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA8C,CAAC;AASnF,+FAA+F;AAC/F,2FAA2F;AAC3F,MAAM,SAAS,GAAG,UAAU,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACpC;IACA,IAAI,EAAE;QACJ,cAAc,EAAE;YACd,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;YACxC,KAAK,EAAE,KAAK;SACb;KACF;CACJ,CAAC,CAAC,CAAC;AAEJ,8CAA8C;AAC9C,4FAA4F;AAC5F,MAAM,iBAAiB,GAAG,CAAC,SAAiB,EAAE,cAAuC,EAAsB,EAAE;IAC3G,IAAI,MAAM,EAAE;QACV,OAAO,IAAI,WAAW,CAAC,SAAS,EAAE;YAChC,MAAM,EAAE,EAAE,cAAc,EAAE;SAC3B,CAAC,CAAC;KACJ;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAGF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAwB;IAC3D,8EAA8E;IAC9E,MAAM,oBAAoB,GAAG,mBAAmB,CAAC,uBAAuB,CAAC,CAAC;IAE1E,sFAAsF;IACtF,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,KAAK,CAAC;IACjC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAC5B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEtC,SAAS,CAAC,GAAG,EAAE;QAEb,MAAM,SAAS,GAAG,EAAC,aAAa,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAC,CAAC;QACpD,MAAM,OAAO,GAAG,iBAAiB,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC;QAEjE,IAAI,OAAO,KAAK,IAAI,EAAE;YACpB,QAAQ,CAAC,aAAa,CAAE,OAAO,CAAE,CAAC;SACnC;IAEH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,YAAY,GAAG,CAAC,KAA4B,EAAE,QAAgB,EAAE,EAAE;QACtE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,OAAO,CACL,6BAAK,EAAE,EAAC,cAAc;QAEpB,oBAAC,IAAI,IACH,SAAS,EAAE,OAAO,CAAC,IAAI,EACvB,WAAW,EAAC,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,IACrB,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,oBAAC,oBAAoB,OAAK,KAAK,EAAE,KAAK,EAAE,GAAG,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,IAAI,GAAI,CAAC,CACvF,CACH,CACP,CAAA;AACH,CAAC","sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { makeStyles } from '@material-ui/core/styles'\n\nimport Tabs from '@material-ui/core/Tabs';\nimport { getComponentFromMap } from '../../../../bridge/helpers/sdk_component_map';\n\n// VerticalTabs does NOT have getPConnect. So, no need to extend from PConnProps\ninterface VerticalTabsProps {\n  // If any, enter additional props that only exist on this component\n  tabconfig: Array<any>\n}\n\n\n// The MuiTabs-indicator class is in a span whose parent is div (under the Tabs root component)\n//  So, we're going to make the selected vertical tab indicator use a color from our theme.\nconst useStyles = makeStyles((theme) => (\n    {\n    tabs: {\n      '& div > span': {\n        backgroundColor: theme.palette.info.dark,\n        width: \"3px\"\n      },\n    },\n}));\n\n// Implementation of custom event inspired by:\n//  https://betterprogramming.pub/master-your-react-skills-with-event-listeners-ebc01dde4fad\nconst createCustomEvent = (eventName: string, additionalData: {[key: string]: string}): CustomEvent | null => {\n  if (window) {\n    return new CustomEvent(eventName, {\n      detail: { additionalData }\n    });\n  }\n\n  return null;\n};\n\n\nexport default function VerticalTabs(props: VerticalTabsProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const LeftAlignVerticalTab = getComponentFromMap(\"LeftAlignVerticalTabs\");\n\n  // Get a React warning when we use tabConfig as mixed case. So all lowercase tabconfig\n  const { tabconfig = [] } = props;\n  const classes = useStyles();\n  const [value, setValue] = useState(0);\n\n  useEffect(() => {\n\n    const eventData = {\"itemClicked\": value.toString()};\n    const myEvent = createCustomEvent('VerticalTabClick', eventData);\n\n    if (myEvent !== null) {\n      document.dispatchEvent( myEvent );\n    }\n\n  }, [value]);\n\n  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {\n    setValue(newValue);\n  };\n\n  return (\n    <div id=\"VerticalTabs\">\n      {/* VerticalTabs: {JSON.stringify(tabconfig)} */}\n      <Tabs\n        className={classes.tabs}\n        orientation=\"vertical\"\n        value={value}\n        onChange={handleChange}>\n        {tabconfig.map((tab) => <LeftAlignVerticalTab {...props} label={tab.name} key={tab.name} />)}\n      </Tabs>\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"VerticalTabs.js","sourceRoot":"","sources":["../../../../../src/components/infra/VerticalTabs/VerticalTabs/VerticalTabs.tsx"],"names":[],"mappings":";;AAAA,OAAc,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAE1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA8C,CAAC;AAQnF,+FAA+F;AAC/F,2FAA2F;AAC3F,MAAM,SAAS,GAAG,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACrC,IAAI,EAAE;QACJ,cAAc,EAAE;YACd,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;YACxC,KAAK,EAAE,KAAK;SACb;KACF;CACF,CAAC,CAAC,CAAC;AAEJ,8CAA8C;AAC9C,4FAA4F;AAC5F,MAAM,iBAAiB,GAAG,CAAC,SAAiB,EAAE,cAAyC,EAAsB,EAAE;IAC7G,IAAI,MAAM,EAAE;QACV,OAAO,IAAI,WAAW,CAAC,SAAS,EAAE;YAChC,MAAM,EAAE,EAAE,cAAc,EAAE;SAC3B,CAAC,CAAC;KACJ;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAwB;IAC3D,8EAA8E;IAC9E,MAAM,oBAAoB,GAAG,mBAAmB,CAAC,uBAAuB,CAAC,CAAC;IAE1E,sFAAsF;IACtF,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,KAAK,CAAC;IACjC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAC5B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEtC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,EAAE,WAAW,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC;QACpD,MAAM,OAAO,GAAG,iBAAiB,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC;QAEjE,IAAI,OAAO,KAAK,IAAI,EAAE;YACpB,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;SACjC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,YAAY,GAAG,CAAC,KAA4B,EAAE,QAAgB,EAAE,EAAE;QACtE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,OAAO,CACL,cAAK,EAAE,EAAC,cAAc,YAEpB,KAAC,IAAI,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI,EAAE,WAAW,EAAC,UAAU,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,YACvF,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACpB,eAAC,oBAAoB,OAAK,KAAK,EAAE,KAAK,EAAE,GAAG,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,IAAI,GAAI,CACpE,CAAC,GACG,GACH,CACP,CAAC;AACJ,CAAC","sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Tabs from '@material-ui/core/Tabs';\n\nimport { getComponentFromMap } from '../../../../bridge/helpers/sdk_component_map';\n\n// VerticalTabs does NOT have getPConnect. So, no need to extend from PConnProps\ninterface VerticalTabsProps {\n  // If any, enter additional props that only exist on this component\n  tabconfig: any[];\n}\n\n// The MuiTabs-indicator class is in a span whose parent is div (under the Tabs root component)\n//  So, we're going to make the selected vertical tab indicator use a color from our theme.\nconst useStyles = makeStyles(theme => ({\n  tabs: {\n    '& div > span': {\n      backgroundColor: theme.palette.info.dark,\n      width: '3px'\n    }\n  }\n}));\n\n// Implementation of custom event inspired by:\n//  https://betterprogramming.pub/master-your-react-skills-with-event-listeners-ebc01dde4fad\nconst createCustomEvent = (eventName: string, additionalData: { [key: string]: string }): CustomEvent | null => {\n  if (window) {\n    return new CustomEvent(eventName, {\n      detail: { additionalData }\n    });\n  }\n\n  return null;\n};\n\nexport default function VerticalTabs(props: VerticalTabsProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const LeftAlignVerticalTab = getComponentFromMap('LeftAlignVerticalTabs');\n\n  // Get a React warning when we use tabConfig as mixed case. So all lowercase tabconfig\n  const { tabconfig = [] } = props;\n  const classes = useStyles();\n  const [value, setValue] = useState(0);\n\n  useEffect(() => {\n    const eventData = { itemClicked: value.toString() };\n    const myEvent = createCustomEvent('VerticalTabClick', eventData);\n\n    if (myEvent !== null) {\n      document.dispatchEvent(myEvent);\n    }\n  }, [value]);\n\n  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {\n    setValue(newValue);\n  };\n\n  return (\n    <div id='VerticalTabs'>\n      {/* VerticalTabs: {JSON.stringify(tabconfig)} */}\n      <Tabs className={classes.tabs} orientation='vertical' value={value} onChange={handleChange}>\n        {tabconfig.map(tab => (\n          <LeftAlignVerticalTab {...props} label={tab.name} key={tab.name} />\n        ))}\n      </Tabs>\n    </div>\n  );\n}\n"]}

package/lib/components/infra/View/View.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
+import { PropsWithChildren } from 'react';
+import { PConnProps } from '../../../types/PConnProps';
 import './View.css';
-import type { PConnProps } from '../../../types/PConnProps';
 interface ViewProps extends PConnProps {
-    children: Array<any>;
     template?: string;
     label?: string;
     showLabel: boolean;
@@ -12,7 +11,7 @@ interface ViewProps extends PConnProps {
     name?: string;
     bInForm?: boolean;
 }
-declare function View(props: ViewProps): JSX.Element | "" | null;
+declare function View(props: PropsWithChildren<ViewProps>): JSX.Element | "" | null;
 declare namespace View {
     var additionalProps: (state: any, getPConnect: any) => {};
 }

package/lib/components/infra/View/View.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"View.d.ts","sourceRoot":"","sources":["../../../../src/components/infra/View/View.tsx"],"names":[],"mappings":";AAUA,OAAO,YAAY,CAAC;AAEpB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAG5D,UAAU,SAAU,SAAQ,UAAU;IAEpC,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAsBD,iBAAwB,IAAI,CAAC,KAAK,EAAE,SAAS,2BAkF5C;kBAlFuB,IAAI;;;eAAJ,IAAI"}
+{"version":3,"file":"View.d.ts","sourceRoot":"","sources":["../../../../src/components/infra/View/View.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAIvD,OAAO,YAAY,CAAC;AAEpB,UAAU,SAAU,SAAQ,UAAU;IAEpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAqBD,iBAAwB,IAAI,CAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,2BAsF/D;kBAtFuB,IAAI;;;eAAJ,IAAI"}

package/lib/components/infra/View/View.js

@@ -1,6 +1,4 @@
-import React from 'react';
-// import { FieldGroup } from "@pega/cosmos-react-core";
-// import { LazyMap as LazyComponentMap } from "../../components_map";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
 import { getAllFields } from '../../helpers/template-utils';
 // Need to import any templates that we might render
@@ -54,7 +52,7 @@ export default function View(props) {
         // for debugging/investigation
         // console.log(`View rendering template: ${template}`);
         // spreading because all props should go to the template
-        let RenderedTemplate = React.createElement(ViewTemplate, { key: key, ...props }, children);
+        let RenderedTemplate = (_jsx(ViewTemplate, { ...props, children: children }, key));
         if (FORMTEMPLATES.includes(template) && showLabel) {
             // Original:
             // RenderedTemplate = (
@@ -62,18 +60,15 @@ export default function View(props) {
             //     {RenderedTemplate}
             //   </FieldGroup>
             // );
-            RenderedTemplate = (React.createElement("div", { "data-name": 'RenderedTemplate', "data-template-type": template, 
-                /* name */ id: 'label', style: { marginBlockStart: '1rem' }, className: 'grid-column' }, RenderedTemplate));
+            RenderedTemplate = (_jsx("div", { "data-name": 'RenderedTemplate', "data-template-type": template, 
+                /* name */ id: 'label', style: { marginBlockStart: '1rem' }, className: 'grid-column', children: RenderedTemplate }));
         }
-        return (React.createElement("div", { className: 'grid-column' },
-            showLabel && !NO_HEADER_TEMPLATES.includes(template) && (React.createElement("div", { className: 'template-title-container' },
-                React.createElement("span", null, label))),
-            RenderedTemplate));
+        return (_jsxs("div", { className: 'grid-column', children: [showLabel && !NO_HEADER_TEMPLATES.includes(template) && (_jsx("div", { className: 'template-title-container', children: _jsx("span", { children: label }) })), RenderedTemplate] }));
     }
     // debugging/investigation help
     // console.log(`View about to render React.Fragment for children: ${children}`);
     if (children) {
-        return React.createElement(React.Fragment, null, children);
+        return _jsx(_Fragment, { children: children });
     }
     return null;
 }

package/lib/components/infra/View/View.js.map

@@ -1 +1 @@
-{"version":3,"file":"View.js","sourceRoot":"","sources":["../../../../src/components/infra/View/View.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n// import { FieldGroup } from \"@pega/cosmos-react-core\";\n// import { LazyMap as LazyComponentMap } from \"../../components_map\";\n\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\n\nimport { getAllFields } from '../../helpers/template-utils';\n\n// Need to import any templates that we might render\n\nimport './View.css';\n\nimport type { PConnProps } from '../../../types/PConnProps';\n\n\ninterface ViewProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n  children: Array<any>,\n  template?: string,\n  label?: string,\n  showLabel: boolean,\n  mode?: string,\n  title?: string,\n  visibility?: boolean,\n  name?: string,\n  bInForm?: boolean\n}\n\n\n//\n// WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with\n// Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and\n// is totally at your own risk.\n//\n\nconst FORMTEMPLATES = ['OneColumn', 'TwoColumn', 'DefaultForm', 'WideNarrow', 'NarrowWide'];\nconst NO_HEADER_TEMPLATES = [\n  'SubTabs',\n  'SimpleTable',\n  'Details',\n  'DetailsTwoColumn',\n  'DetailsThreeColumn',\n  'NarrowWideDetails',\n  'WideNarrowDetails',\n  'Confirmation',\n  'DynamicTabs'\n];\n\nexport default function View(props: ViewProps) {\n  const { children, template, getPConnect, mode, visibility, name: pageName } = props;\n  let { label = '', showLabel = false } = props;\n\n  // Get the inherited props from the parent to determine label settings. For 8.6, this is only for embedded data form views\n  // Putting this logic here instead of copy/paste in every Form template index.js\n\n  const inheritedProps: any = getPConnect().getInheritedProps();  // try to remove any when getInheritedProps typedefs are fixed\n  label = inheritedProps.label || label;\n  showLabel = inheritedProps.showLabel || showLabel;\n\n  const isEmbeddedDataView = mode === 'editable'; // would be better to check the reference child for `context` attribute if possible\n  if (isEmbeddedDataView && showLabel === undefined) {\n    showLabel = true;\n  }\n\n  const key = `${getPConnect().getContextName()}_${getPConnect().getPageReference()}_${pageName}`;\n  // As long as the template is defined in the dependencies of the view\n  // it will be loaded, otherwise fall back to single column\n  if (visibility === false) {\n    return '';\n  }\n\n  // As long as the template is defined in the dependencies of the view\n  // it will be loaded, otherwise fall back to single column\n  //  JA - React SDK not using LazyComponentMap yet\n  if (template /* && LazyComponentMap[template] */) {\n    // const ViewTemplate = LazyComponentMap[template];\n    const ViewTemplate: any = getComponentFromMap(template);\n\n    if (template === 'ListView') {\n      // special case for ListView - add in a prop\n      const bInForm = true;\n      props = { ...props, bInForm };\n    }\n\n    // for debugging/investigation\n    // console.log(`View rendering template: ${template}`);\n\n    // spreading because all props should go to the template\n    let RenderedTemplate = <ViewTemplate key={key} {...props}>{children}</ViewTemplate>;\n\n    if (FORMTEMPLATES.includes(template) && showLabel) {\n      // Original:\n      // RenderedTemplate = (\n      //   <FieldGroup name={label} style={{ marginBlockStart: \"1rem\" }}>\n      //     {RenderedTemplate}\n      //   </FieldGroup>\n      // );\n      RenderedTemplate = (\n        <div\n          data-name='RenderedTemplate'\n          data-template-type={template}\n          /* name */ id='label'\n          style={{ marginBlockStart: '1rem' }}\n          className='grid-column'\n        >\n          {RenderedTemplate}\n        </div>\n      );\n    }\n\n    return (\n      <div className='grid-column'>\n        {showLabel && !NO_HEADER_TEMPLATES.includes(template) && (\n          <div className='template-title-container'>\n            <span>{label}</span>\n          </div>\n        )}\n        {RenderedTemplate}\n      </div>\n    );\n  }\n\n  // debugging/investigation help\n  // console.log(`View about to render React.Fragment for children: ${children}`);\n\n  if (children) {\n    return <>{children}</>;\n  }\n\n  return null;\n}\n\n\n// Adapted from Constellation DX Component to add in additional props for some templates\nView.additionalProps = (state, getPConnect) => {\n  const thePConn = getPConnect();\n  const { template } = thePConn.getConfigProps();\n\n  let propObj = {};\n  let allFields = {};\n\n  switch (template) {\n    case 'CaseSummary':\n      allFields = getAllFields(thePConn);\n      // eslint-disable-next-line no-case-declarations\n      const unresFields = {\n        primaryFields: allFields[0],\n        secondaryFields: allFields[1]\n      };\n      propObj = thePConn.resolveConfigProps(unresFields);\n      break;\n\n    case 'Details':\n      allFields = getAllFields(thePConn);\n      propObj = { fields: allFields[0] };\n      break;\n\n    default:\n      break;\n  }\n\n  return propObj;\n};\n"]}
+{"version":3,"file":"View.js","sourceRoot":"","sources":["../../../../src/components/infra/View/View.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAG5D,oDAAoD;AAEpD,OAAO,YAAY,CAAC;AAcpB,EAAE;AACF,qHAAqH;AACrH,uHAAuH;AACvH,+BAA+B;AAC/B,EAAE;AAEF,MAAM,aAAa,GAAG,CAAC,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC;AAC5F,MAAM,mBAAmB,GAAG;IAC1B,SAAS;IACT,aAAa;IACb,SAAS;IACT,kBAAkB;IAClB,oBAAoB;IACpB,mBAAmB;IACnB,mBAAmB;IACnB,cAAc;IACd,aAAa;CACd,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAmC;IAC9D,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACpF,IAAI,EAAE,KAAK,GAAG,EAAE,EAAE,SAAS,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IAE9C,0HAA0H;IAC1H,gFAAgF;IAEhF,MAAM,cAAc,GAAQ,WAAW,EAAE,CAAC,iBAAiB,EAAE,CAAC,CAAC,8DAA8D;IAC7H,KAAK,GAAG,cAAc,CAAC,KAAK,IAAI,KAAK,CAAC;IACtC,SAAS,GAAG,cAAc,CAAC,SAAS,IAAI,SAAS,CAAC;IAElD,MAAM,kBAAkB,GAAG,IAAI,KAAK,UAAU,CAAC,CAAC,mFAAmF;IACnI,IAAI,kBAAkB,IAAI,SAAS,KAAK,SAAS,EAAE;QACjD,SAAS,GAAG,IAAI,CAAC;KAClB;IAED,MAAM,GAAG,GAAG,GAAG,WAAW,EAAE,CAAC,cAAc,EAAE,IAAI,WAAW,EAAE,CAAC,gBAAgB,EAAE,IAAI,QAAQ,EAAE,CAAC;IAChG,qEAAqE;IACrE,0DAA0D;IAC1D,IAAI,UAAU,KAAK,KAAK,EAAE;QACxB,OAAO,EAAE,CAAC;KACX;IAED,qEAAqE;IACrE,0DAA0D;IAC1D,iDAAiD;IACjD,IAAI,QAAQ,CAAC,mCAAmC,EAAE;QAChD,mDAAmD;QACnD,MAAM,YAAY,GAAQ,mBAAmB,CAAC,QAAQ,CAAC,CAAC;QAExD,IAAI,QAAQ,KAAK,UAAU,EAAE;YAC3B,4CAA4C;YAC5C,MAAM,OAAO,GAAG,IAAI,CAAC;YACrB,KAAK,GAAG,EAAE,GAAG,KAAK,EAAE,OAAO,EAAE,CAAC;SAC/B;QAED,8BAA8B;QAC9B,uDAAuD;QAEvD,wDAAwD;QACxD,IAAI,gBAAgB,GAAG,CACrB,KAAC,YAAY,OAAe,KAAK,YAC9B,QAAQ,IADQ,GAAG,CAEP,CAChB,CAAC;QAEF,IAAI,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,SAAS,EAAE;YACjD,YAAY;YACZ,uBAAuB;YACvB,mEAAmE;YACnE,yBAAyB;YACzB,kBAAkB;YAClB,KAAK;YACL,gBAAgB,GAAG,CACjB,2BACY,kBAAkB,wBACR,QAAQ;gBAC5B,UAAU,CAAC,EAAE,EAAC,OAAO,EACrB,KAAK,EAAE,EAAE,gBAAgB,EAAE,MAAM,EAAE,EACnC,SAAS,EAAC,aAAa,YAEtB,gBAAgB,GACb,CACP,CAAC;SACH;QAED,OAAO,CACL,eAAK,SAAS,EAAC,aAAa,aACzB,SAAS,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CACvD,cAAK,SAAS,EAAC,0BAA0B,YACvC,yBAAO,KAAK,GAAQ,GAChB,CACP,EACA,gBAAgB,IACb,CACP,CAAC;KACH;IAED,+BAA+B;IAC/B,gFAAgF;IAEhF,IAAI,QAAQ,EAAE;QACZ,OAAO,4BAAG,QAAQ,GAAI,CAAC;KACxB;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED,wFAAwF;AACxF,IAAI,CAAC,eAAe,GAAG,CAAC,KAAK,EAAE,WAAW,EAAE,EAAE;IAC5C,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,EAAE,QAAQ,EAAE,GAAG,QAAQ,CAAC,cAAc,EAAE,CAAC;IAE/C,IAAI,OAAO,GAAG,EAAE,CAAC;IACjB,IAAI,SAAS,GAAG,EAAE,CAAC;IAEnB,QAAQ,QAAQ,EAAE;QAChB,KAAK,aAAa;YAChB,SAAS,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC;YACnC,gDAAgD;YAChD,MAAM,WAAW,GAAG;gBAClB,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC;gBAC3B,eAAe,EAAE,SAAS,CAAC,CAAC,CAAC;aAC9B,CAAC;YACF,OAAO,GAAG,QAAQ,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC;YACnD,MAAM;QAER,KAAK,SAAS;YACZ,SAAS,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC;YACnC,OAAO,GAAG,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;YACnC,MAAM;QAER;YACE,MAAM;KACT;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC","sourcesContent":["import { PropsWithChildren } from 'react';\n\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\nimport { getAllFields } from '../../helpers/template-utils';\nimport { PConnProps } from '../../../types/PConnProps';\n\n// Need to import any templates that we might render\n\nimport './View.css';\n\ninterface ViewProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n  template?: string;\n  label?: string;\n  showLabel: boolean;\n  mode?: string;\n  title?: string;\n  visibility?: boolean;\n  name?: string;\n  bInForm?: boolean;\n}\n\n//\n// WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with\n// Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and\n// is totally at your own risk.\n//\n\nconst FORMTEMPLATES = ['OneColumn', 'TwoColumn', 'DefaultForm', 'WideNarrow', 'NarrowWide'];\nconst NO_HEADER_TEMPLATES = [\n  'SubTabs',\n  'SimpleTable',\n  'Details',\n  'DetailsTwoColumn',\n  'DetailsThreeColumn',\n  'NarrowWideDetails',\n  'WideNarrowDetails',\n  'Confirmation',\n  'DynamicTabs'\n];\n\nexport default function View(props: PropsWithChildren<ViewProps>) {\n  const { children, template, getPConnect, mode, visibility, name: pageName } = props;\n  let { label = '', showLabel = false } = props;\n\n  // Get the inherited props from the parent to determine label settings. For 8.6, this is only for embedded data form views\n  // Putting this logic here instead of copy/paste in every Form template index.js\n\n  const inheritedProps: any = getPConnect().getInheritedProps(); // try to remove any when getInheritedProps typedefs are fixed\n  label = inheritedProps.label || label;\n  showLabel = inheritedProps.showLabel || showLabel;\n\n  const isEmbeddedDataView = mode === 'editable'; // would be better to check the reference child for `context` attribute if possible\n  if (isEmbeddedDataView && showLabel === undefined) {\n    showLabel = true;\n  }\n\n  const key = `${getPConnect().getContextName()}_${getPConnect().getPageReference()}_${pageName}`;\n  // As long as the template is defined in the dependencies of the view\n  // it will be loaded, otherwise fall back to single column\n  if (visibility === false) {\n    return '';\n  }\n\n  // As long as the template is defined in the dependencies of the view\n  // it will be loaded, otherwise fall back to single column\n  //  JA - React SDK not using LazyComponentMap yet\n  if (template /* && LazyComponentMap[template] */) {\n    // const ViewTemplate = LazyComponentMap[template];\n    const ViewTemplate: any = getComponentFromMap(template);\n\n    if (template === 'ListView') {\n      // special case for ListView - add in a prop\n      const bInForm = true;\n      props = { ...props, bInForm };\n    }\n\n    // for debugging/investigation\n    // console.log(`View rendering template: ${template}`);\n\n    // spreading because all props should go to the template\n    let RenderedTemplate = (\n      <ViewTemplate key={key} {...props}>\n        {children}\n      </ViewTemplate>\n    );\n\n    if (FORMTEMPLATES.includes(template) && showLabel) {\n      // Original:\n      // RenderedTemplate = (\n      //   <FieldGroup name={label} style={{ marginBlockStart: \"1rem\" }}>\n      //     {RenderedTemplate}\n      //   </FieldGroup>\n      // );\n      RenderedTemplate = (\n        <div\n          data-name='RenderedTemplate'\n          data-template-type={template}\n          /* name */ id='label'\n          style={{ marginBlockStart: '1rem' }}\n          className='grid-column'\n        >\n          {RenderedTemplate}\n        </div>\n      );\n    }\n\n    return (\n      <div className='grid-column'>\n        {showLabel && !NO_HEADER_TEMPLATES.includes(template) && (\n          <div className='template-title-container'>\n            <span>{label}</span>\n          </div>\n        )}\n        {RenderedTemplate}\n      </div>\n    );\n  }\n\n  // debugging/investigation help\n  // console.log(`View about to render React.Fragment for children: ${children}`);\n\n  if (children) {\n    return <>{children}</>;\n  }\n\n  return null;\n}\n\n// Adapted from Constellation DX Component to add in additional props for some templates\nView.additionalProps = (state, getPConnect) => {\n  const thePConn = getPConnect();\n  const { template } = thePConn.getConfigProps();\n\n  let propObj = {};\n  let allFields = {};\n\n  switch (template) {\n    case 'CaseSummary':\n      allFields = getAllFields(thePConn);\n      // eslint-disable-next-line no-case-declarations\n      const unresFields = {\n        primaryFields: allFields[0],\n        secondaryFields: allFields[1]\n      };\n      propObj = thePConn.resolveConfigProps(unresFields);\n      break;\n\n    case 'Details':\n      allFields = getAllFields(thePConn);\n      propObj = { fields: allFields[0] };\n      break;\n\n    default:\n      break;\n  }\n\n  return propObj;\n};\n"]}

package/lib/components/template/AppShell/AppShell.css

@@ -1,40 +1,39 @@
 .appshell-top {
-    display: flex;
-    background-color: var(--app-background-color);
+  display: flex;
+  background-color: var(--app-background-color);
 }
 
-
 .appshell-main {
-    position: relative;
-    min-height: 100vh;
-    display: block;
-    width: 100%;
+  position: relative;
+  min-height: 100vh;
+  display: block;
+  width: 100%;
 }
 
 .psdk-icon {
-    padding: 0rem 0.125rem;
-    min-width: unset;
+  padding: 0rem 0.125rem;
+  min-width: unset;
 }
 
 .progress-box {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-    background-color: whitesmoke;
-    position: fixed;
-    z-index: 999;
-    top: 0rem;
-    left: 0rem;
-    opacity: 0.5;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  background-color: whitesmoke;
+  position: fixed;
+  z-index: 999;
+  top: 0rem;
+  left: 0rem;
+  opacity: 0.5;
 }
 
 .progress-spinner {
-    text-align: center;
+  text-align: center;
 }
 
 ::ng-deep snack-bar-container.snackbar-newline {
-    white-space: pre-line;
+  white-space: pre-line;
 }

package/lib/components/template/AppShell/AppShell.d.ts

@@ -1,17 +1,16 @@
-/// <reference types="react" />
+import { PropsWithChildren } from 'react';
+import { PConnProps } from '../../../types/PConnProps';
 import './AppShell.css';
-import type { PConnProps } from '../../../types/PConnProps';
 interface AppShellProps extends PConnProps {
     showAppName: boolean;
-    pages: Array<{
+    pages: {
         pxPageViewIcon: string;
         pyClassName: string;
         pyLabel: string;
         pyRuleName: string;
         pyURLContent: string;
-    }>;
-    caseTypes?: Array<object>;
-    children?: Array<any>;
+    }[];
+    caseTypes?: object[];
     portalTemplate: string;
     portalName: string;
     portalLogo: string;
@@ -20,6 +19,6 @@ interface AppShellProps extends PConnProps {
         position: string;
     };
 }
-export default function AppShell(props: AppShellProps): JSX.Element;
+export default function AppShell(props: PropsWithChildren<AppShellProps>): JSX.Element;
 export {};
 //# sourceMappingURL=AppShell.d.ts.map

package/lib/components/template/AppShell/AppShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../../src/components/template/AppShell/AppShell.tsx"],"names":[],"mappings":";AAKA,OAAO,gBAAgB,CAAC;AAGxB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5D,UAAU,aAAc,SAAQ,UAAU;IAExC,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,KAAK,CAAC;QACX,cAAc,EAAE,MAAM,CAAC;QACvB,WAAW,EAAE,MAAM,CAAC;QACpB,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,EAAE,MAAM,CAAC;QACnB,YAAY,EAAE,MAAM,CAAC;KAEtB,CAAC,CAAC;IACH,SAAS,CAAC,EAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAG,MAAM,CAAC;IACpB,iBAAiB,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAA;CAC3D;AA0BD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAC,aAAa,eA+LnD"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../../src/components/template/AppShell/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAO/D,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,OAAO,gBAAgB,CAAC;AAExB,UAAU,aAAc,SAAQ,UAAU;IAExC,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE;QACL,cAAc,EAAE,MAAM,CAAC;QACvB,WAAW,EAAE,MAAM,CAAC;QACpB,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,EAAE,MAAM,CAAC;QACnB,YAAY,EAAE,MAAM,CAAC;KACtB,EAAE,CAAC;IACJ,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;CAC5D;AAqBD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,iBAAiB,CAAC,aAAa,CAAC,eAkKvE"}

package/lib/components/template/AppShell/AppShell.js

@@ -1,10 +1,11 @@
-import React, { useEffect, useState } from 'react';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { Utils } from '../../helpers/utils';
 import Avatar from '@material-ui/core/Avatar';
+import { Utils } from '../../helpers/utils';
 import { NavContext } from '../../helpers/reactContextHelpers';
-import './AppShell.css';
 import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
+import './AppShell.css';
 const useStyles = makeStyles(theme => ({
     root: {
         display: 'flex'
@@ -25,11 +26,11 @@ const useStyles = makeStyles(theme => ({
 }));
 export default function AppShell(props) {
     // Get emitted components from map (so we can get any override that may exist)
-    const NavBar = getComponentFromMap("NavBar");
-    const WssNavBar = getComponentFromMap("WssNavBar");
+    const NavBar = getComponentFromMap('NavBar');
+    const WssNavBar = getComponentFromMap('WssNavBar');
     const { pages = [], caseTypes = [], showAppName, children = [], getPConnect, portalTemplate, portalName, portalLogo, navDisplayOptions } = props;
     const [open, setOpen] = useState(true);
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [activeTab, setActiveTab] = useState(!pages ? null : pages[0]?.pyRuleName);
     const pConn = getPConnect();
     const envInfo = PCore.getEnvironmentInfo();
@@ -45,19 +46,17 @@ export default function AppShell(props) {
     const localeReference = pConn.getValue('.pyLocaleReference', ''); // 2nd arg empty string until typedef marked correctly
     const [imageBlobUrl, setImageBlobUrl] = useState(null);
     // useState for appName and mapChildren - note these are ONLY updated once (on component mount!)
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [appName, setAppName] = useState('');
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [mapChildren, setMapChildren] = useState([]);
     // Initial setting of appName and mapChildren
     useEffect(() => {
         setAppName(PCore.getEnvironmentInfo().getApplicationName());
-        const tempMap = pConn.getChildren()?.["map"]((child, index) => {
+        const tempMap = pConn.getChildren()?.map((child, index) => {
             const theChildComp = child.getPConnect().getComponentName();
             const theKey = `.${index}`;
-            return (React.createElement("div", { id: theChildComp, key: theKey, style: { border: 'solid 1px silver', margin: '1px' } },
-                theChildComp,
-                " will be here"));
+            return (_jsxs("div", { id: theChildComp, style: { border: 'solid 1px silver', margin: '1px' }, children: [theChildComp, " will be here"] }, theKey));
         });
         setMapChildren(tempMap);
     }, []);
@@ -98,7 +97,7 @@ export default function AppShell(props) {
     }, []);
     const getOperator = () => {
         return {
-            avatar: portalTemplate !== 'wss' ? React.createElement(Avatar, null) : { name: userName, imageSrc: imageBlobUrl },
+            avatar: portalTemplate !== 'wss' ? _jsx(Avatar, {}) : { name: userName, imageSrc: imageBlobUrl },
             name: userName,
             currentUserInitials
         };
@@ -118,9 +117,7 @@ export default function AppShell(props) {
                 name,
                 icon: page.pxPageViewIcon.replace('pi pi-', ''),
                 active: page.pyRuleName === activeTab,
-                onClick: () => !page.pyURLContent || page.pyURLContent === ''
-                    ? showPage(page.pyRuleName, page.pyClassName)
-                    : openURL(page.pyURLContent)
+                onClick: () => (!page.pyURLContent || page.pyURLContent === '' ? showPage(page.pyRuleName, page.pyClassName) : openURL(page.pyURLContent))
             };
         });
     if (pConn.hasChildren()) {
@@ -131,19 +128,16 @@ export default function AppShell(props) {
         // console.log(`--> ${mapChildCompNames.map((name) => {return name;})}`);
     }
     if (portalTemplate === 'wss') {
-        return (React.createElement("div", { id: 'AppShell' },
-            React.createElement(WssNavBar, { portalName: portalName, imageSrc: iconURL, fullImageSrc: fullIconURL, appName: localizedVal(appNameToDisplay, '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase()), appInfo: {
-                    imageSrc: iconURL,
-                    appName: localizedVal(appNameToDisplay, '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase()),
-                    onClick: links[0] && /* links[0].onClick ? */ links[0].onClick /* : undefined */
-                }, navLinks: links.filter((link, index) => {
-                    return index !== 0;
-                }), operator: getOperator(), navDisplayOptions: navDisplayOptions }),
-            React.createElement("div", { className: classes.wsscontent }, children)));
+        return (_jsxs("div", { id: 'AppShell', children: [_jsx(WssNavBar, { portalName: portalName, imageSrc: iconURL, fullImageSrc: fullIconURL, appName: localizedVal(appNameToDisplay, '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase()), appInfo: {
+                        imageSrc: iconURL,
+                        appName: localizedVal(appNameToDisplay, '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase()),
+                        onClick: links[0] && /* links[0].onClick ? */ links[0].onClick /* : undefined */
+                    }, navLinks: links.filter((link, index) => {
+                        return index !== 0;
+                    }), operator: getOperator(), navDisplayOptions: navDisplayOptions }), _jsx("div", { className: classes.wsscontent, children: children })] }));
     }
-    return (React.createElement(NavContext.Provider, { value: { open, setOpen } },
-        React.createElement("div", { id: 'AppShell', className: classes.root },
-            React.createElement(NavBar, { getPConnect: getPConnect, pConn: getPConnect(), appName: localizedVal(appNameToDisplay, '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase()), pages: pages, caseTypes: caseTypes }),
-            React.createElement("div", { className: classes.content }, children))));
+    return (
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    _jsx(NavContext.Provider, { value: { open, setOpen }, children: _jsxs("div", { id: 'AppShell', className: classes.root, children: [_jsx(NavBar, { getPConnect: getPConnect, pConn: getPConnect(), appName: localizedVal(appNameToDisplay, '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase()), pages: pages, caseTypes: caseTypes }), _jsx("div", { className: classes.content, children: children })] }) }));
 }
 //# sourceMappingURL=AppShell.js.map