@pega/react-sdk-overrides 23.1.10 → 23.1.12

package/lib/template/Details/DetailsTwoColumn/DetailsTwoColumn.tsx

@@ -1,21 +1,18 @@
-import React, { createElement } from 'react';
+import { createElement } from 'react';
 import Grid from '@material-ui/core/Grid';
+
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-// import type { PConnProps } from '../../../../types/PConnProps';
-
-
-// Can't use PConnProps until getPConnect().getChildren() type is ok
-// interface DetailsTwoColumnProps extends PConnProps {
-//   // If any, enter additional props that only exist on this component
-//   showLabel: boolean,
-//   label: string,
-//   showHighlightedData: boolean
-// }
-
+interface DetailsTwoColumnProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  showLabel: boolean;
+  label: string;
+  showHighlightedData: boolean;
+}
 
-export default function DetailsTwoColumn(props /* : DetailsTwoColumnProps */) {
+export default function DetailsTwoColumn(props: DetailsTwoColumnProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldGroup = getComponentFromMap('FieldGroup');
 
@@ -28,20 +25,18 @@ export default function DetailsTwoColumn(props /* : DetailsTwoColumnProps */) {
   // in a readonly (display) mode instead of a editable
   getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
   getPConnect().setInheritedProp('readOnly', true);
-  const children = getPConnect()
-    .getChildren()
-    .map((configObject, index) =>
-      createElement(createPConnectComponent(), {
-        ...configObject,
-        // eslint-disable-next-line react/no-array-index-key
-        key: index.toString()
-      })
-    );
+  const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
+    createElement(createPConnectComponent(), {
+      ...configObject,
+      // eslint-disable-next-line react/no-array-index-key
+      key: index.toString()
+    })
+  );
 
   // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
   let highlightedDataArr = [];
   if (showHighlightedData) {
-    const { highlightedData = [] } = getPConnect().getRawMetadata().config;
+    const { highlightedData = [] } = (getPConnect().getRawMetadata() as any).config;
     highlightedDataArr = highlightedData.map(field => {
       field.config.displayMode = 'STACKED_LARGE_VAL';
 
@@ -51,8 +46,7 @@ export default function DetailsTwoColumn(props /* : DetailsTwoColumnProps */) {
         field.config.displayAsStatus = true;
       }
 
-      return getPConnect().createComponent(field,
-        '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
+      return getPConnect().createComponent(field, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
     });
   }
 

package/lib/template/Details/DetailsTwoColumn/config-ext.json

@@ -4,6 +4,5 @@
   "description": "Details (Two column)",
   "type": "Template",
   "subtype": "DETAILS",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/template/Details/DetailsTwoColumn/index.tsx

@@ -1 +1 @@
-export { default } from './DetailsTwoColumn';
+export { default } from './DetailsTwoColumn';

package/lib/template/Details/DynamicTabs/DynamicTabs.tsx

@@ -1,8 +1,9 @@
-import React, { Children, useState, useMemo } from 'react';
+import React, { Children, useMemo, useState } from 'react';
 import { makeStyles, Tab, Tabs } from '@material-ui/core';
 import { TabContext, TabPanel } from '@material-ui/lab';
+
 import { buildView } from '@pega/react-sdk-components/lib/components/helpers/field-group-utils';
-// import type { PConnProps } from '../../../../types/PConnProps';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 const useStyles = makeStyles(() => ({
   tab: {
@@ -10,24 +11,24 @@ const useStyles = makeStyles(() => ({
   }
 }));
 
-// ListViewProps can't be used until getComponentConfig is NOT private
-// interface DynamicTabsProps extends PConnProps {
-//   // If any, enter additional props that only exist on this component
-//   showLabel: boolean;
-//   label: string;
-//   referenceList?: Array<any>;
-// }
+interface DynamicTabsProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  showLabel: boolean;
+  label: string;
+  referenceList?: any[];
+}
 
-function DynamicTabs(props /*: DynamicTabsProps */) {
+function DynamicTabs(props: DynamicTabsProps) {
   const classes = useStyles();
   const { referenceList, showLabel, label, getPConnect } = props;
   const pConnect = getPConnect();
   // Get the inherited props from the parent to determine label settings
   const propsToUse = { label, showLabel, ...pConnect.getInheritedProps() };
   const defaultTabIndex = 0;
+  // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'.
   const { tablabel } = pConnect.getComponentConfig();
   const tablabelProp = PCore.getAnnotationUtils().getPropertyName(tablabel);
-  const referenceListData = pConnect.getValue(`${referenceList}.pxResults`, ''); // 2nd arg empty string until typedefs properly allow optional
+  const referenceListData: any = pConnect.getValue(`${referenceList}.pxResults`, ''); // 2nd arg empty string until typedefs properly allow optional
   const memoisedTabViews = useMemo(() => {
     pConnect.setInheritedProp('displayMode', 'LABELS_LEFT');
     pConnect.setInheritedProp('readOnly', true);
@@ -57,16 +58,16 @@ function DynamicTabs(props /*: DynamicTabsProps */) {
 
   return (
     <>
-      {propsToUse.label && <h3 id="dynamic-tabs-title">{propsToUse.label}</h3>}
+      {propsToUse.label && <h3 id='dynamic-tabs-title'>{propsToUse.label}</h3>}
       <TabContext value={panelShown.toString()}>
-        <Tabs onChange={handleTabClick} value={panelShown} variant="scrollable" scrollButtons="auto" indicatorColor="primary" id="dynamic-tabs">
+        <Tabs onChange={handleTabClick} value={panelShown} variant='scrollable' scrollButtons='auto' indicatorColor='primary' id='dynamic-tabs'>
           {tabItems.map((tab: any) => (
             <Tab key={tab.id} label={tab.name} value={tab.id} className={classes.tab} />
           ))}
         </Tabs>
 
         {tabItems.map((tab: any) => (
-          <TabPanel key={tab.id} value={tab.id.toString()} tabIndex={+tab.id} id="dynamic-tabpanel">
+          <TabPanel key={tab.id} value={tab.id.toString()} tabIndex={+tab.id} id='dynamic-tabpanel'>
             <div>{memoisedTabViews[parseInt(tab.id, 10)] || 'No content exists'}</div>
           </TabPanel>
         ))}

package/lib/template/FieldGroupTemplate/FieldGroupTemplate.tsx

@@ -1,23 +1,22 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
+
 import { getReferenceList, buildView } from '@pega/react-sdk-components/lib/components/helpers/field-group-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-
-import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface FieldGroupTemplateProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  referenceList?: Array<any>,
-  contextClass: string,
-  renderMode?: string,
-  heading?: string,
-  lookForChildInConfig?: boolean,
-  displayMode?: string,
-  fieldHeader?: string,
-  allowTableEdit: boolean
+  referenceList?: any[];
+  contextClass: string;
+  renderMode?: string;
+  heading?: string;
+  lookForChildInConfig?: boolean;
+  displayMode?: string;
+  fieldHeader?: string;
+  allowTableEdit: boolean;
 }
 
-
 export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldGroup = getComponentFromMap('FieldGroup');
@@ -52,7 +51,7 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
     if (PCore.getPCoreVersion()?.includes('8.7')) {
       pConn.getListActions().insert({ classID: contextClass }, referenceList.length, pageReference);
     } else {
-      pConn.getListActions().insert({}, referenceList.length, null);  // 3rd arg null until typedef marked correctly as optional
+      pConn.getListActions().insert({}, referenceList.length);
     }
   };
 
@@ -64,7 +63,7 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
       if (PCore.getPCoreVersion()?.includes('8.7')) {
         pConn.getListActions().deleteEntry(index, pageReference);
       } else {
-        pConn.getListActions().deleteEntry(index, null);  // 2nd arg null until typedef marked correctly as optional
+        pConn.getListActions().deleteEntry(index);
       }
     };
     if (referenceList.length === 0 && allowAddEdit !== false) {
@@ -74,10 +73,7 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
     const MemoisedChildren = useMemo(() => {
       return referenceList.map((item, index) => ({
         id: index,
-        name:
-          fieldHeader === 'propertyRef'
-            ? getDynamicHeaderProp(item, index)
-            : `${HEADING} ${index + 1}`,
+        name: fieldHeader === 'propertyRef' ? getDynamicHeaderProp(item, index) : `${HEADING} ${index + 1}`,
         children: buildView(pConn, index, lookForChildInConfig)
       }));
     }, [referenceList?.length]);
@@ -96,10 +92,7 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
     return referenceList.map((item, index) => {
       const key = item[heading] || `field-group-row-${index}`;
       return (
-        <FieldGroup
-          key={key}
-          name={fieldHeader === 'propertyRef' ? getDynamicHeaderProp(item, index) : `${HEADING} ${index + 1}`}
-        >
+        <FieldGroup key={key} name={fieldHeader === 'propertyRef' ? getDynamicHeaderProp(item, index) : `${HEADING} ${index + 1}`}>
           {buildView(pConn, index, lookForChildInConfig)}
         </FieldGroup>
       );

package/lib/template/InlineDashboard/InlineDashboard.tsx

@@ -1,17 +1,14 @@
-import React from 'react';
+import { PropsWithChildren, ReactElement } from 'react';
 import { Grid, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-// InlineDashboard does NOT have getPConnect. So, no need to extend from PConnProps
 interface InlineDashboardProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  children: Array<any>,
-  title: string,
-  filterPosition?: string
+  title: string;
+  filterPosition?: string;
 }
 
-
 const useStyles = makeStyles((/* theme */) => ({
   headerStyles: {
     fontWeight: 500,
@@ -39,10 +36,11 @@ const useStyles = makeStyles((/* theme */) => ({
   }
 }));
 
-export default function InlineDashboard(props: InlineDashboardProps) {
+export default function InlineDashboard(props: PropsWithChildren<InlineDashboardProps>) {
   const classes = useStyles();
 
   const { children, title, filterPosition } = props;
+  const childrenToRender = children as ReactElement[];
 
   const direction = filterPosition === 'inline-start' ? 'row-reverse' : 'row';
   return (
@@ -54,20 +52,20 @@ export default function InlineDashboard(props: InlineDashboardProps) {
       {filterPosition === 'block-start' && (
         <Grid container spacing={2} direction='column-reverse' className={classes.containerStyles}>
           <Grid item xs={12} className={classes.colStyles}>
-            {children[0]}
+            {childrenToRender[0]}
           </Grid>
-          <Grid item xs={12} className={classes.filterContainerStyles}>
-            {children[1]}
+          <Grid id='filters' item xs={12} className={classes.filterContainerStyles}>
+            {childrenToRender[1]}
           </Grid>
         </Grid>
       )}
       {filterPosition !== 'block-start' && (
         <Grid container spacing={2} direction={direction} className={classes.containerStyles}>
           <Grid item xs={9}>
-            {children[0]}
+            {childrenToRender[0]}
           </Grid>
-          <Grid item xs={3} className={classes.inlineStyles}>
-            {children[1]}
+          <Grid id='filters' item xs={3} className={classes.inlineStyles}>
+            {childrenToRender[1]}
           </Grid>
         </Grid>
       )}

package/lib/template/InlineDashboardPage/InlineDashboardPage.tsx

@@ -1,39 +1,35 @@
-import React from 'react';
-import { useMemo, Children, useEffect, useState } from 'react';
+import { useMemo, Children, useEffect, useState, PropsWithChildren } from 'react';
 
 import { buildFilterComponents } from '@pega/react-sdk-components/lib/components/infra/DashboardFilter/filterUtils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-
-import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
-
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface InlineDashboardPageProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  children: Array<any>,
-  title: string,
-  icon?: string,
-  filterPosition?: string
+  title: string;
+  icon?: string;
+  filterPosition?: string;
 }
 
-
-export default function InlineDashboardPage(props: InlineDashboardPageProps) {
+export default function InlineDashboardPage(props: PropsWithChildren<InlineDashboardPageProps>) {
   // Get emitted components from map (so we can get any override that may exist)
-  const InlineDashboard = getComponentFromMap("InlineDashboard");
+  const InlineDashboard = getComponentFromMap('InlineDashboard');
 
-  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-  const { children, getPConnect, icon = '', filterPosition = 'block-start'  } = props;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { children, getPConnect, icon = '', filterPosition = 'block-start' } = props;
   const [filterComponents, setFilterComponents] = useState([]);
   const childArray = useMemo(() => {
     return Children.toArray(children);
   }, [children]);
 
-  const allFilters = getPConnect().getRawMetadata()["children"][1];
+  const allFilters = (getPConnect().getRawMetadata() as any).children[1];
 
   useEffect(() => {
     setFilterComponents(buildFilterComponents(getPConnect, allFilters));
   }, []);
 
-  const inlineProps = props;
+  const inlineProps = { ...props };
+  inlineProps.children = [];
   // Region layout views
   inlineProps.children[0] = childArray[0];
   // filter items

package/lib/template/ListPage/ListPage.tsx

@@ -1,21 +1,16 @@
-import React from "react";
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-
-import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface ListPageProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  parameters: object
+  parameters: object;
 }
 
-
 export default function ListPage(props: ListPageProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const ListView = getComponentFromMap('ListView');
 
- // special case for ListView - add in a prop
- const listViewProps = {...props, bInForm: false};
-  return (
-    <ListView  {...listViewProps}></ListView>
-  )
+  // special case for ListView - add in a prop
+  const listViewProps = { ...props, bInForm: false };
+  return <ListView {...listViewProps} />;
 }

package/lib/template/ListPage/config-ext.json

@@ -3,6 +3,5 @@
   "type": "Template",
   "subtype": "PAGE",
   "label": "List page",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/template/ListView/DefaultViewMeta.ts

@@ -34,10 +34,8 @@ const getDefaultConfig = (fieldMeta, classID, show) => {
   };
 };
 
-
 export default function getDefaultViewMeta(fieldMeta, classID, showField) {
-  const { type, name, displayAs, fieldID, isUserReference, associationID, datasource, label, fieldType } =
-    fieldMeta;
+  const { type, name, displayAs, fieldID, isUserReference, associationID, datasource, label, fieldType } = fieldMeta;
   const mapperKey = type && displayAs ? type.concat(':').concat(displayAs) : type;
   const defaultConfig = getDefaultConfig(fieldMeta, classID, showField);
   let viewMeta;