@pega/react-sdk-components 0.23.25 → 0.23.27

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

@@ -1,13 +1,7 @@
 /// <reference types="react" />
-import PropTypes from "prop-types";
-declare function VerticalTabs(props: any): JSX.Element;
-declare namespace VerticalTabs {
-    var defaultProps: {
-        tabconfig: never[];
-    };
-    var propTypes: {
-        tabconfig: PropTypes.Requireable<(object | null | undefined)[]>;
-    };
+interface VerticalTabsProps {
+    tabconfig: any[];
 }
-export default VerticalTabs;
+export default function VerticalTabs(props: VerticalTabsProps): JSX.Element;
+export {};
 //# sourceMappingURL=VerticalTabs.d.ts.map

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":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAgCnC,iBAAwB,YAAY,CAAC,KAAK,KAAA,eAiCzC;kBAjCuB,YAAY;;;;;;;;eAAZ,YAAY"}
+{"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,17 +1,18 @@
-import React, { useState, useEffect } from "react";
-import PropTypes from "prop-types";
+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 LeftAlignVerticalTab from '../LeftAlignVerticalTabs';
+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,12 +25,14 @@ const createCustomEvent = (eventName, additionalData) => {
     return null;
 };
 export default function VerticalTabs(props) {
+    // Get emitted components from map (so we can get any override that may exist)
+    const LeftAlignVerticalTab = getComponentFromMap('LeftAlignVerticalTabs');
     // Get a React warning when we use tabConfig as mixed case. So all lowercase tabconfig
-    const { tabconfig } = props;
+    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);
@@ -38,13 +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 }))) }) }));
 }
-VerticalTabs.defaultProps = {
-    tabconfig: []
-};
-VerticalTabs.propTypes = {
-    tabconfig: PropTypes.arrayOf(PropTypes.object)
-};
 //# 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,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAErD,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAC1C,OAAO,oBAAoB,MAAM,0BAA0B,CAAC;AAG5D,+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,KAAK;IACxC,sFAAsF;IACtF,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC5B,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;AAED,YAAY,CAAC,YAAY,GAAG;IAC1B,SAAS,EAAE,EAAE;CACd,CAAC;AAEF,YAAY,CAAC,SAAS,GAAG;IACvB,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC;CAC/C,CAAC","sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { makeStyles } from '@material-ui/core/styles'\n\nimport Tabs from '@material-ui/core/Tabs';\nimport LeftAlignVerticalTab from '../LeftAlignVerticalTabs';\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) {\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\nVerticalTabs.defaultProps = {\n  tabconfig: []\n};\n\nVerticalTabs.propTypes = {\n  tabconfig: PropTypes.arrayOf(PropTypes.object)\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,22 +1,18 @@
-/// <reference types="react" />
-import PropTypes from 'prop-types';
+import { PropsWithChildren } from 'react';
+import { PConnProps } from '../../../types/PConnProps';
 import './View.css';
-declare function View(props: any): "" | JSX.Element;
+interface ViewProps extends PConnProps {
+    template?: string;
+    label?: string;
+    showLabel: boolean;
+    mode?: string;
+    title?: string;
+    visibility?: boolean;
+    name?: string;
+    bInForm?: boolean;
+}
+declare function View(props: PropsWithChildren<ViewProps>): JSX.Element | "" | null;
 declare namespace View {
-    var defaultProps: {
-        label: undefined;
-        showLabel: undefined;
-        mode: undefined;
-    };
-    var propTypes: {
-        children: PropTypes.Requireable<any[]>;
-        template: PropTypes.Requireable<string>;
-        getPConnect: PropTypes.Validator<(...args: any[]) => any>;
-        label: PropTypes.Requireable<string>;
-        showLabel: PropTypes.Requireable<boolean>;
-        mode: PropTypes.Requireable<string>;
-        title: PropTypes.Requireable<string>;
-    };
     var additionalProps: (state: any, getPConnect: any) => {};
 }
 export default View;

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":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAWnC,OAAO,YAAY,CAAC;AAmBpB,iBAAwB,IAAI,CAAC,KAAK,KAAA,oBA4GjC;kBA5GuB,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,9 +1,5 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-// import { FieldGroup } from "@pega/cosmos-react-core";
-// import { LazyMap as LazyComponentMap } from "../../components_map";
-import { SdkComponentMap } from '../../../bridge/helpers/sdk_component_map';
-import ErrorBoundary from '../ErrorBoundary';
+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
 import './View.css';
@@ -21,14 +17,15 @@ const NO_HEADER_TEMPLATES = [
     'DetailsThreeColumn',
     'NarrowWideDetails',
     'WideNarrowDetails',
-    'Confirmation'
+    'Confirmation',
+    'DynamicTabs'
 ];
 export default function View(props) {
     const { children, template, getPConnect, mode, visibility, name: pageName } = props;
-    let { label, showLabel = false } = props;
+    let { label = '', showLabel = false } = props;
     // Get the inherited props from the parent to determine label settings. For 8.6, this is only for embedded data form views
     // Putting this logic here instead of copy/paste in every Form template index.js
-    const inheritedProps = getPConnect().getInheritedProps();
+    const inheritedProps = getPConnect().getInheritedProps(); // try to remove any when getInheritedProps typedefs are fixed
     label = inheritedProps.label || label;
     showLabel = inheritedProps.showLabel || showLabel;
     const isEmbeddedDataView = mode === 'editable'; // would be better to check the reference child for `context` attribute if possible
@@ -46,43 +43,16 @@ export default function View(props) {
     //  JA - React SDK not using LazyComponentMap yet
     if (template /* && LazyComponentMap[template] */) {
         // const ViewTemplate = LazyComponentMap[template];
-        let ViewTemplate;
-        if (SdkComponentMap) {
-            // This is the node_modules version of react_pconnect!
-            const theLocalComponent = SdkComponentMap.getLocalComponentMap()[template];
-            if (theLocalComponent !== undefined) {
-                // eslint-disable-next-line no-console
-                console.log(`View component found ${template}: Local`);
-                ViewTemplate = theLocalComponent;
-            }
-            else {
-                const thePegaProvidedComponent = SdkComponentMap.getPegaProvidedComponentMap()[template];
-                if (thePegaProvidedComponent !== undefined) {
-                    // console.log(`View component found ${template}: Pega-provided`);
-                    ViewTemplate = thePegaProvidedComponent;
-                }
-                else {
-                    // eslint-disable-next-line no-console
-                    console.error(`View component can't find template type ${template}`);
-                    ViewTemplate = ErrorBoundary;
-                }
-            }
-            if (template === 'ListView') {
-                // special case for ListView - add in a prop
-                const bInForm = true;
-                props = { ...props, bInForm };
-            }
-        }
-        else {
-            // eslint-disable-next-line no-console
-            console.warn(`View: SdkComponentMap expected but not found.`);
-            // eslint-disable-next-line no-console
-            console.error(`View: Trying to render an unknown template: ${template}`);
+        const ViewTemplate = getComponentFromMap(template);
+        if (template === 'ListView') {
+            // special case for ListView - add in a prop
+            const bInForm = true;
+            props = { ...props, bInForm };
         }
         // 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 = (
@@ -90,40 +60,18 @@ 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);
-    }
-    else {
-        return React.createElement("div", { id: 'View' }, "View has no children.");
+        return _jsx(_Fragment, { children: children });
     }
+    return null;
 }
-View.defaultProps = {
-    label: undefined,
-    showLabel: undefined,
-    mode: undefined
-};
-View.propTypes = {
-    children: PropTypes.oneOfType([
-        PropTypes.arrayOf(PropTypes.node),
-        PropTypes.array
-    ]) /* array might be empty */,
-    template: PropTypes.string /* .isRequired */,
-    getPConnect: PropTypes.func.isRequired,
-    label: PropTypes.string,
-    showLabel: PropTypes.bool,
-    mode: PropTypes.string,
-    title: PropTypes.string
-};
 // Adapted from Constellation DX Component to add in additional props for some templates
 View.additionalProps = (state, getPConnect) => {
     const thePConn = getPConnect();

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';\nimport PropTypes from 'prop-types';\n// import { FieldGroup } from \"@pega/cosmos-react-core\";\n// import { LazyMap as LazyComponentMap } from \"../../components_map\";\n\nimport { SdkComponentMap } from '../../../bridge/helpers/sdk_component_map';\nimport ErrorBoundary from '../ErrorBoundary';\n\nimport { getAllFields } from '../../helpers/template-utils';\n\n// Need to import any templates that we might render\n\nimport './View.css';\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];\n\nexport default function View(props) {\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 = getPConnect().getInheritedProps();\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    let ViewTemplate: any;\n\n    if (SdkComponentMap) {\n      // This is the node_modules version of react_pconnect!\n      const theLocalComponent = SdkComponentMap.getLocalComponentMap()[template];\n      if (theLocalComponent !== undefined) {\n        // eslint-disable-next-line no-console\n        console.log(`View component found ${template}: Local`);\n        ViewTemplate = theLocalComponent;\n      } else {\n        const thePegaProvidedComponent = SdkComponentMap.getPegaProvidedComponentMap()[template];\n        if (thePegaProvidedComponent !== undefined) {\n          // console.log(`View component found ${template}: Pega-provided`);\n          ViewTemplate = thePegaProvidedComponent;\n        } else {\n          // eslint-disable-next-line no-console\n          console.error(`View component can't find template type ${template}`);\n          ViewTemplate = ErrorBoundary;\n        }\n      }\n\n      if (template === 'ListView') {\n        // special case for ListView - add in a prop\n        const bInForm = true;\n        props = { ...props, bInForm };\n      }\n    } else {\n      // eslint-disable-next-line no-console\n      console.warn(`View: SdkComponentMap expected but not found.`);\n\n      // eslint-disable-next-line no-console\n      console.error(`View: Trying to render an unknown template: ${template}`);\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  } else {\n    return <div id='View'>View has no children.</div>;\n  }\n}\n\nView.defaultProps = {\n  label: undefined,\n  showLabel: undefined,\n  mode: undefined\n};\n\nView.propTypes = {\n  children: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.node),\n    PropTypes.array\n  ]) /* array might be empty */,\n  template: PropTypes.string /* .isRequired */,\n  getPConnect: PropTypes.func.isRequired,\n  label: PropTypes.string,\n  showLabel: PropTypes.bool,\n  mode: PropTypes.string,\n  title: PropTypes.string\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":"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","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,20 +1,24 @@
-/// <reference types="react" />
-import PropTypes from 'prop-types';
+import { PropsWithChildren } from 'react';
+import { PConnProps } from '../../../types/PConnProps';
 import './AppShell.css';
-declare function AppShell(props: any): JSX.Element;
-declare namespace AppShell {
-    var defaultProps: {
-        pages: never[];
-        caseTypes: never[];
-        children: never[];
-    };
-    var propTypes: {
-        showAppName: PropTypes.Requireable<boolean>;
-        pages: PropTypes.Requireable<(object | null | undefined)[]>;
-        caseTypes: PropTypes.Requireable<(object | null | undefined)[]>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike[]>;
-        getPConnect: PropTypes.Validator<(...args: any[]) => any>;
+interface AppShellProps extends PConnProps {
+    showAppName: boolean;
+    pages: {
+        pxPageViewIcon: string;
+        pyClassName: string;
+        pyLabel: string;
+        pyRuleName: string;
+        pyURLContent: string;
+    }[];
+    caseTypes?: object[];
+    portalTemplate: string;
+    portalName: string;
+    portalLogo: string;
+    navDisplayOptions: {
+        alignment: string;
+        position: string;
     };
 }
-export default AppShell;
+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":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,OAAO,gBAAgB,CAAC;AA4BxB,iBAAwB,QAAQ,CAAC,KAAK,KAAA,eAoLrC;kBApLuB,QAAQ;;;;;;;;;;;;;;eAAR,QAAQ"}
+{"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,13 +1,11 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+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 { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
 import './AppShell.css';
-// AppShell can emit NavBar or WssNavBar
-import NavBar from '../../infra/NavBar';
-import WssNavBar from '../../template/WssNavBar';
 const useStyles = makeStyles(theme => ({
     root: {
         display: 'flex'
@@ -27,9 +25,12 @@ const useStyles = makeStyles(theme => ({
     }
 }));
 export default function AppShell(props) {
-    const { pages, caseTypes, showAppName, children, getPConnect, portalTemplate, portalName, portalLogo, navDisplayOptions } = props;
+    // Get emitted components from map (so we can get any override that may exist)
+    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();
@@ -37,27 +38,25 @@ export default function AppShell(props) {
     const userName = envInfo.getOperatorName();
     const currentUserInitials = Utils.getInitials(userName);
     const appNameToDisplay = showAppName ? envInfo.getApplicationLabel() : '';
-    const portalClass = pConn.getValue('.classID');
+    const portalClass = pConn.getValue('.classID', ''); // 2nd arg empty string until typedef marked correctly
     const envPortalName = envInfo.getPortalName();
-    const localeUtils = PCore.getLocaleUtils();
+    const localizedVal = PCore.getLocaleUtils().getLocaleValue;
     const classes = useStyles();
     const actionsAPI = pConn.getActionsApi();
-    const localeReference = pConn.getValue('.pyLocaleReference');
+    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);
     }, []);
@@ -69,9 +68,9 @@ export default function AppShell(props) {
             portalLogo.toLowerCase().includes('pzpega-logo-mark') ||
             portalLogo.toLowerCase().includes('py-logo') ||
             portalLogo.toLowerCase().includes('py-full-logo')) {
-            const portalLogoImage = Utils.getIconPath(PCore.getAssetLoader().getStaticServerUrl()).concat('pzpega-logo-mark.svg');
+            const portalLogoImage = Utils.getIconPath(Utils.getSDKStaticConentUrl()).concat('pzpega-logo-mark.svg');
             setIconURL(portalLogoImage);
-            setFullIconURL(`${PCore.getAssetLoader().getStaticServerUrl()}static/py-full-logo.svg`);
+            setFullIconURL(`${Utils.getSDKStaticConentUrl()}static/py-full-logo.svg`);
         }
         // not using default icon to fetch it using the way which uses authentication
         else {
@@ -84,7 +83,7 @@ export default function AppShell(props) {
             })
                 .catch(() => {
                 // eslint-disable-next-line no-console
-                console.error(`Unable to load the image for the portal logo/icon with the insName:${portalLogo}`);
+                console.error(`${localizedVal('Unable to load the image for the portal logo/icon with the insName', 'AppShell')}:${portalLogo}`);
             });
         }
     }, [portalLogo]);
@@ -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
         };
@@ -112,15 +111,13 @@ export default function AppShell(props) {
     const links = !pages
         ? []
         : pages.map(page => {
-            const name = localeUtils.getLocaleValue(page.pyLabel, '', localeReference);
+            const name = localizedVal(page.pyLabel, '', localeReference);
             return {
                 text: name,
                 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,31 +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: localeUtils.getLocaleValue(appNameToDisplay, '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase()), appInfo: {
-                    imageSrc: iconURL,
-                    appName: localeUtils.getLocaleValue(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, { pConn: getPConnect(), appName: appNameToDisplay, 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 })] }) }));
 }
-AppShell.defaultProps = {
-    pages: [],
-    caseTypes: [],
-    children: []
-};
-AppShell.propTypes = {
-    showAppName: PropTypes.bool /* .isRequired */,
-    pages: PropTypes.arrayOf(PropTypes.object),
-    caseTypes: PropTypes.arrayOf(PropTypes.object),
-    children: PropTypes.arrayOf(PropTypes.node),
-    getPConnect: PropTypes.func.isRequired
-};
 //# sourceMappingURL=AppShell.js.map