@pega/react-sdk-overrides 8.8.21 → 8.23.11-debug

package/lib/template/CaseView/CaseView.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/jsx-boolean-value */
 
 import React, { useState, useEffect, useContext } from 'react';
+import PropTypes from 'prop-types';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { Card, CardHeader, Avatar, Typography, Divider } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
@@ -9,20 +10,9 @@ import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 
 import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
-import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-
-import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
-
-interface CaseViewProps extends PConnProps {
-  // If any, enter additional props that only exist on this component
-  icon: string,
-  children: Array<any>,
-  subheader: string,
-  header: string,
-  showIconInHeader: boolean,
-  caseInfo: any,
-}
-
+import CaseViewActionsMenu from '@pega/react-sdk-components/lib/components/template/CaseViewActionsMenu';
+import VerticalTabs from '@pega/react-sdk-components/lib/components/infra/VerticalTabs/VerticalTabs';
+import DeferLoad from '@pega/react-sdk-components/lib/components/infra/DeferLoad';
 
 // Remove this and use "real" PCore type once .d.ts is fixed (currently shows 2 errors)
 declare const PCore: any;
@@ -55,20 +45,13 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-export default function CaseView(props: CaseViewProps) {
-  // Get emitted components from map (so we can get any override that may exist)
-  const CaseViewActionsMenu = getComponentFromMap("CaseViewActionsMenu");
-  const VerticalTabs = getComponentFromMap("VerticalTabs");
-  const DeferLoad = getComponentFromMap("DeferLoad");
-
+export default function CaseView(props) {
   const {
     getPConnect,
-    icon = '',
+    icon,
     header,
     subheader,
-    children = [],
-    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-    showIconInHeader = true,
+    children,
     caseInfo: {
       availableActions = [],
       availableProcesses = [],
@@ -293,3 +276,21 @@ export default function CaseView(props: CaseViewProps) {
 
   return getContainerContents();
 }
+
+CaseView.defaultProps = {
+  icon: '',
+  children: [],
+  caseInfo: {},
+  showIconInHeader: true,
+  getPConnect: null
+};
+
+CaseView.propTypes = {
+  icon: PropTypes.string,
+  children: PropTypes.arrayOf(PropTypes.node),
+  subheader: PropTypes.string.isRequired,
+  header: PropTypes.string.isRequired,
+  showIconInHeader: PropTypes.bool,
+  caseInfo: PropTypes.objectOf(PropTypes.any),
+  getPConnect: PropTypes.func
+};

package/lib/template/CaseViewActionsMenu/CaseViewActionsMenu.tsx

@@ -1,19 +1,15 @@
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
 import Button from '@material-ui/core/Button';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
-import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
-
-interface CaseViewActionsMenuProps extends PConnProps {
-  // If any, enter additional props that only exist on this component
-  availableActions: Array<any>,
-  availableProcesses: Array<any>,
-  caseTypeID: string,
-  caseTypeName: string
-}
+
+import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
+
+declare const PCore: typeof PCoreType;
 
 
-export default function CaseViewActionsMenu(props:CaseViewActionsMenuProps) {
+export default function CaseViewActionsMenu(props) {
   const { getPConnect, availableActions, availableProcesses, caseTypeID, caseTypeName } = props;
   const thePConn = getPConnect();
 
@@ -71,3 +67,16 @@ export default function CaseViewActionsMenu(props:CaseViewActionsMenuProps) {
     </React.Fragment>
   );
 }
+
+CaseViewActionsMenu.defaultProps = {
+  availableActions: [],
+  availableProcesses: []
+};
+
+CaseViewActionsMenu.propTypes = {
+  getPConnect: PropTypes.func.isRequired,
+  availableActions: PropTypes.arrayOf(PropTypes.object),
+  availableProcesses: PropTypes.arrayOf(PropTypes.any),
+  caseTypeID: PropTypes.string,
+  caseTypeName: PropTypes.string
+};

package/lib/template/Confirmation/Confirmation.tsx

@@ -1,25 +1,20 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable no-unused-vars */
 /* eslint-disable no-nested-ternary */
-import React, { useState } from 'react';
-import { Button, Card, makeStyles } from '@material-ui/core';
+import { Fragment, useState } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { getToDoAssignments } from '@pega/react-sdk-components/lib/components/infra/Containers/FlowContainer/helpers';
-import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import ToDo from '@pega/react-sdk-components/lib/components/widget/ToDo';
+import Details from '@pega/react-sdk-components/lib/components/template/Details/Details';
+import { Button, Card, makeStyles } from '@material-ui/core';
 
-import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
 
-// Confirmation does NOT have getPConnect. So, no need to extend from PConnProps
+declare const PCore: typeof PCoreType;
 
-interface ConfirmationProps extends PConnProps {
-  // If any, enter additional props that only exist on this component
-  children: Array<any>;
-  datasource: { source: any };
-  label: string;
-  showLabel: boolean;
-  showTasks: boolean;
-}
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
   root: {
     paddingRight: theme.spacing(1),
     paddingLeft: theme.spacing(1),
@@ -32,11 +27,7 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 
-export default function Confirmation(props: ConfirmationProps) {
-  // Get emitted components from map (so we can get any override that may exist)
-  const ToDo = getComponentFromMap('Todo'); // NOTE: ConstellationJS Engine uses "Todo" and not "ToDo"!!!
-  const Details = getComponentFromMap('Details');
-
+export default function Confirmation(props) {
   const classes = useStyles();
   const CONSTS = PCore.getConstants();
   const [showConfirmView, setShowConfirmView] = useState(true);
@@ -44,12 +35,20 @@ export default function Confirmation(props: ConfirmationProps) {
   // Get the inherited props from the parent to determine label settings
   // Not using whatsNext at the moment, need to figure out the use of it
   const whatsNext = datasource?.source;
-  const items = whatsNext.length > 0 ? whatsNext.map((item) => item.label) : '';
-  const activeContainerItemID = PCore.getContainerUtils().getActiveContainerItemName(getPConnect().getTarget());
-  const rootInfo = PCore.getContainerUtils().getContainerItemData(getPConnect().getTarget(), activeContainerItemID);
+  const items = whatsNext.length > 0 ? whatsNext.map(item => item.label) : '';
+  const activeContainerItemID = PCore.getContainerUtils().getActiveContainerItemName(
+    getPConnect().getTarget()
+  );
+  const rootInfo = PCore.getContainerUtils().getContainerItemData(
+    getPConnect().getTarget(),
+    activeContainerItemID
+  );
   const onConfirmViewClose = () => {
     setShowConfirmView(false);
-    PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CLOSE_CONFIRM_VIEW, rootInfo);
+    PCore.getPubSubUtils().publish(
+      PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CLOSE_CONFIRM_VIEW,
+      rootInfo
+    );
   };
   const todoProps = { ...props, renderTodoInConfirm: true };
   const toDoList = getToDoAssignments(getPConnect());
@@ -57,22 +56,49 @@ export default function Confirmation(props: ConfirmationProps) {
   const showDetails = detailProps?.children?.[0]?.props?.getPConnect()?.getChildren()?.length > 0;
   return showConfirmView ? (
     <Card className={classes.root}>
-      <h2 id="confirm-label">{props.showLabel ? props.label : ''}</h2>
+      <h2 id='confirm-label'>{props.showLabel ? props.label : ''}</h2>
       {showDetails ? <Details {...detailProps} /> : undefined}
       {showTasks ? (
         toDoList && toDoList.length > 0 ? (
-          <ToDo {...todoProps} datasource={{ source: toDoList }} getPConnect={getPConnect} type={CONSTS.TODO} headerText="Open Tasks" isConfirm />
+          <ToDo
+            {...todoProps}
+            datasource={{ source: toDoList }}
+            getPConnect={getPConnect}
+            type={CONSTS.TODO}
+            headerText='Open Tasks'
+            isConfirm
+          />
         ) : undefined
       ) : undefined}
       <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-        <Button variant="contained" color="primary" onClick={onConfirmViewClose}>
+        <Button variant='contained' color='primary' onClick={onConfirmViewClose}>
           Done
         </Button>
       </div>
     </Card>
   ) : toDoList && toDoList.length > 0 ? (
     <Card className={classes.root}>
-      <ToDo {...props} datasource={{ source: toDoList }} getPConnect={getPConnect} type={CONSTS.TODO} headerText="Tasks" isConfirm />
+      <ToDo
+        {...props}
+        datasource={{ source: toDoList }}
+        getPConnect={getPConnect}
+        type={CONSTS.TODO}
+        headerText='Tasks'
+        isConfirm
+      />
     </Card>
   ) : null;
 }
+
+Confirmation.defaultProps = {
+  datasource: undefined,
+  label: '',
+  showLabel: true
+};
+
+Confirmation.propTypes = {
+  getPConnect: PropTypes.func.isRequired,
+  datasource: PropTypes.objectOf(PropTypes.any),
+  label: PropTypes.string,
+  showLabel: PropTypes.bool
+};

package/lib/template/DataReference/DataReference.tsx

@@ -1,24 +1,7 @@
 import React, { useMemo, useState, useEffect } from 'react';
-import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-
-// import type { PConnProps } from '../../../types/PConnProps';
-
-// ReferenceProps can't be used until getComponentConfig() is NOT private
-// interface DataReferenceProps extends PConnProps {
-//   // If any, enter additional props that only exist on this component
-//   children: Array<any>,
-//   label: string,
-//   showLabel: any,
-//   displayMode: string,
-//   allowAndPersistChangesInReviewMode: boolean,
-//   referenceType: string,
-//   selectionMode: string,
-//   displayAs: string,
-//   ruleClass: string,
-//   parameters: Array<string>, // need to fix
-//   hideLabel: boolean
-// }
-
+import PropTypes from 'prop-types';
+import SingleReferenceReadonly from '@pega/react-sdk-components/lib/components/template/SingleReferenceReadOnly';
+import MultiReferenceReadonly from '@pega/react-sdk-components/lib/components/template/MultiReferenceReadOnly';
 
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
 
@@ -26,11 +9,7 @@ const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
 declare const PCore: any;
 
 
-export default function DataReference(props /*: DataReferenceProps */) {
-  // Get emitted components from map (so we can get any override that may exist)
-  const SingleReferenceReadonly = getComponentFromMap('SingleReferenceReadOnly');
-  const MultiReferenceReadonly = getComponentFromMap('MultiReferenceReadOnly');
-
+export default function DataReference(props) {
   const {
     children,
     getPConnect,
@@ -48,14 +27,14 @@ export default function DataReference(props /*: DataReferenceProps */) {
   let childrenToRender = children;
   const pConn = getPConnect();
   const [dropDownDataSource, setDropDownDataSource] = useState(null);
-  const propsToUse: any = { label, showLabel, ...pConn.getInheritedProps() };
+  const propsToUse = { label, showLabel, ...pConn.getInheritedProps() };
   if (propsToUse.showLabel === false) {
     propsToUse.label = '';
   }
   const rawViewMetadata = pConn.getRawMetadata();
-  const viewName = rawViewMetadata["name"];
-  const [firstChildMeta] = rawViewMetadata["children"];
-  const refList = rawViewMetadata["config"].referenceList;
+  const viewName = rawViewMetadata.name;
+  const [firstChildMeta] = rawViewMetadata.children;
+  const refList = rawViewMetadata.config.referenceList;
   const canBeChangedInReviewMode = allowAndPersistChangesInReviewMode && (displayAs === 'autocomplete' || displayAs === 'dropdown');
   let propName;
   const isDisplayModeEnabled = ['LABELS_LEFT', 'STACKED_LARGE_VAL'].includes(displayMode);
@@ -65,7 +44,7 @@ export default function DataReference(props /*: DataReferenceProps */) {
   useEffect(() => {
     if (
       firstChildMeta?.type === "Dropdown" &&
-      rawViewMetadata["config"]?.parameters
+      rawViewMetadata.config?.parameters
     ) {
       const { value, key, text } = firstChildMeta.config.datasource.fields;
       PCore.getDataApiUtils()
@@ -105,14 +84,14 @@ export default function DataReference(props /*: DataReferenceProps */) {
       delete firstChildMeta.config.readOnly;
     }
     if (firstChildMeta?.type === 'Dropdown') {
-      firstChildMeta.config.datasource.source = rawViewMetadata["config"]?.parameters
+      firstChildMeta.config.datasource.source = rawViewMetadata.config?.parameters
         ? dropDownDataSource
         : '@DATASOURCE '.concat(refList).concat('.pxResults');
     } else if (firstChildMeta?.type === 'AutoComplete') {
       firstChildMeta.config.datasource = refList;
 
       /* Insert the parameters to the component only if present */
-      if (rawViewMetadata["config"]?.parameters) {
+      if (rawViewMetadata.config?.parameters) {
         firstChildMeta.config.parameters = parameters;
       }
     }
@@ -130,10 +109,10 @@ export default function DataReference(props /*: DataReferenceProps */) {
   const handleSelection = event => {
     const caseKey = pConn.getCaseInfo().getKey();
     const refreshOptions = { autoDetectRefresh: true };
-    if (canBeChangedInReviewMode && pConn.getValue('__currentPageTabViewName', '')) {  // 2nd arg empty string until typedef marked correctly
+    if (canBeChangedInReviewMode && pConn.getValue('__currentPageTabViewName')) {
       getPConnect()
         .getActionsApi()
-        .refreshCaseView(caseKey, pConn.getValue('__currentPageTabViewName', ''), null, refreshOptions);  // 2nd arg empty string until typedef marked correctly
+        .refreshCaseView(caseKey, pConn.getValue('__currentPageTabViewName'), null, refreshOptions);
       PCore.getDeferLoadManager().refreshActiveComponents(pConn.getContextName());
     } else {
       const pgRef = pConn.getPageReference().replace('caseInfo.content', '');
@@ -191,10 +170,8 @@ export default function DataReference(props /*: DataReferenceProps */) {
   const recreatedFirstChild = useMemo(() => {
     const { type, config } = firstChildMeta;
     if (firstChildMeta?.type !== 'Region') {
-      pConn.clearErrorMessages({  // Need to add empty string for category and context to match typdef
-        property: propName,
-        category: '',
-        context: ''
+      pConn.clearErrorMessages({
+        property: propName
       });
       if (!canBeChangedInReviewMode && isDisplayModeEnabled && selectionMode === SELECTION_MODE.SINGLE) {
         return (
@@ -209,7 +186,7 @@ export default function DataReference(props /*: DataReferenceProps */) {
             referenceType={referenceType}
             hideLabel={hideLabel}
             dataRelationshipContext={
-              rawViewMetadata["config"].contextClass && rawViewMetadata["config"].name ? rawViewMetadata["config"].name : null
+              rawViewMetadata.config.contextClass && rawViewMetadata.config.name ? rawViewMetadata.config.name : null
             }
           />
         );
@@ -229,7 +206,7 @@ export default function DataReference(props /*: DataReferenceProps */) {
       // In the case of a datasource with parameters you cannot load the dropdown before the parameters
       if (
         type === 'Dropdown' &&
-        rawViewMetadata["config"]?.parameters &&
+        rawViewMetadata.config?.parameters &&
         dropDownDataSource === null
       ) {
         return null;
@@ -244,19 +221,18 @@ export default function DataReference(props /*: DataReferenceProps */) {
           disabled: propsToUse.disabled,
           label: propsToUse.label,
           viewName: getPConnect().getCurrentView(),
-          parameters: rawViewMetadata["config"].parameters,
+          parameters: rawViewMetadata.config.parameters,
           readOnly: false,
-          localeReference: rawViewMetadata["config"].localeReference,
+          localeReference: rawViewMetadata.config.localeReference,
           ...(selectionMode === SELECTION_MODE.SINGLE ? { referenceType } : ''),
           dataRelationshipContext:
-            rawViewMetadata["config"].contextClass && rawViewMetadata["config"].name
-              ? rawViewMetadata["config"].name
+            rawViewMetadata.config.contextClass && rawViewMetadata.config.name
+              ? rawViewMetadata.config.name
               : null,
           hideLabel,
           onRecordChange: handleSelection
-        },
-      },
-      '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional);
+        }
+      });
     }
   }, [
     firstChildMeta.config?.datasource?.source,
@@ -268,7 +244,7 @@ export default function DataReference(props /*: DataReferenceProps */) {
 
   // Only include the views region for rendering when it has content
   if (firstChildMeta?.type !== 'Region') {
-    const viewsRegion = rawViewMetadata["children"][1];
+    const viewsRegion = rawViewMetadata.children[1];
     if (viewsRegion?.name === 'Views' && viewsRegion.children.length) {
       childrenToRender = [recreatedFirstChild, ...children.slice(1)];
     } else {
@@ -286,3 +262,31 @@ export default function DataReference(props /*: DataReferenceProps */) {
     </div>
   );
 }
+
+DataReference.defaultProps = {
+  label: undefined,
+  showLabel: undefined,
+  displayMode: undefined,
+  allowAndPersistChangesInReviewMode: false,
+  referenceType: '',
+  selectionMode: '',
+  displayAs: '',
+  ruleClass: '',
+  parameters: undefined,
+  hideLabel: false
+};
+
+DataReference.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+  getPConnect: PropTypes.func.isRequired,
+  label: PropTypes.string,
+  showLabel: PropTypes.func,
+  displayMode: PropTypes.string,
+  allowAndPersistChangesInReviewMode: PropTypes.bool,
+  referenceType: PropTypes.string,
+  selectionMode: PropTypes.string,
+  displayAs: PropTypes.string,
+  ruleClass: PropTypes.string,
+  parameters: PropTypes.arrayOf(PropTypes.string), // need to fix
+  hideLabel: PropTypes.bool
+};

package/lib/template/DefaultForm/DefaultForm.tsx

@@ -1,31 +1,20 @@
 import React, { createElement } from 'react';
+import PropTypes from 'prop-types';
 import { getInstructions } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import connectToState from '@pega/react-sdk-components/lib/components/helpers/state-utils';
 import { getKeyForMappedField, mapStateToProps } from './utils';
-// import type { PConnProps } from '../../../types/PConnProps';
-
 
 import './DefaultForm.css';
 
-
-// Can't use PConn props until proper props for getPConnect().getChildren()[0].getPConnect;
-// interface DefaultFormProps extends PConnProps {
-//   // If any, enter additional props that only exist on this component
-//   children: Array<any>,
-//   NumCols: string
-
-// }
-
-
 const Child = connectToState(mapStateToProps)(props => {
   const { key, visibility, ...rest } = props;
 
   return createElement(createPConnectComponent(), { ...rest, key, visibility });
 });
 
-export default function DefaultForm(props /* : DefaultFormProps */) {
-  const { getPConnect, NumCols = '1' } = props;
+export default function DefaultForm(props) {
+  const { getPConnect, NumCols } = props;
   const instructions = getInstructions(getPConnect(), props.instructions);
 
   let divClass: string;
@@ -67,3 +56,12 @@ export default function DefaultForm(props /* : DefaultFormProps */) {
     </>
   );
 }
+
+DefaultForm.propTypes = {
+  // children: PropTypes.arrayOf(PropTypes.node).isRequired,
+  NumCols: PropTypes.string
+};
+
+DefaultForm.defaultProps = {
+  NumCols: '1'
+};

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

@@ -1,21 +1,10 @@
 import React, { createElement } from 'react';
+import PropTypes from 'prop-types';
 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 type { PConnProps } from '../../../../types/PConnProps';
-
-
-// Can't use PConnProps until getPConnect().getChildren() type is ok
-// interface DetailsProps extends PConnProps {
-//   // If any, enter additional props that only exist on this component
-// }
-
-
-export default function Details(props /* : DetailsProps */) {
-  // Get emitted components from map (so we can get any override that may exist)
-  const FieldGroup = getComponentFromMap('FieldGroup');
+import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
 
+export default function Details(props) {
   const { label, showLabel, getPConnect, showHighlightedData } = props;
 
   // Get the inherited props from the parent to determine label settings
@@ -48,8 +37,7 @@ export default function Details(props /* : DetailsProps */) {
         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);
     });
   }
 
@@ -74,3 +62,16 @@ export default function Details(props /* : DetailsProps */) {
     </FieldGroup>
   );
 }
+
+Details.defaultProps = {
+  label: undefined,
+  showLabel: true,
+  showHighlightedData: false
+};
+
+Details.propTypes = {
+  showLabel: PropTypes.bool,
+  label: PropTypes.string,
+  getPConnect: PropTypes.func.isRequired,
+  showHighlightedData: PropTypes.bool
+};

package/lib/template/Details/DetailsSubTabs/DetailsSubTabs.tsx

@@ -1,22 +1,12 @@
 import { useState, useEffect, Fragment } from 'react';
+import PropTypes from 'prop-types';
 import { getTransientTabs, getVisibleTabs, tabClick } from '@pega/react-sdk-components/lib/components/template/SubTabs/tabUtils';
 import React from 'react';
 import { Tab, Tabs, TextField } from '@material-ui/core';
 import { TabContext, TabPanel } from '@material-ui/lab';
-import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-
-interface DetailsSubTabsProps extends PConnProps {
-  // If any, enter additional props that only exist on this component
-  children: Array<any>,
-  showLabel: boolean,
-  label: string
-
-}
-
-
-export default function DetailsSubTabs(props: DetailsSubTabsProps) {
-  const { children = [], label, showLabel = true, getPConnect } = props;
+export default function DetailsSubTabs(props) {
+  const { children, label, showLabel, getPConnect } = props;
   // Get the inherited props from the parent to determine label settings
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
 
@@ -60,3 +50,16 @@ export default function DetailsSubTabs(props: DetailsSubTabsProps) {
     </Fragment>
   );
 }
+
+DetailsSubTabs.defaultProps = {
+  children: [],
+  label: undefined,
+  showLabel: true
+};
+
+DetailsSubTabs.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.node),
+  showLabel: PropTypes.bool,
+  label: PropTypes.string,
+  getPConnect: PropTypes.func.isRequired
+};

package/lib/template/Details/DetailsThreeColumn/DetailsThreeColumn.tsx

@@ -1,24 +1,11 @@
 import React, { createElement } from 'react';
+import PropTypes from 'prop-types';
 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 FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
 
-// import type { PConnProps } from '../../../../types/PConnProps';
-
-// Can't use PConnProps until getPConnect().getChildren() type is ok
-// interface DetailsThreeColumnProps extends PConnProps {
-//   // If any, enter additional props that only exist on this component
-//   showLabel: boolean,
-//   label: string,
-//   showHighlightedData: boolean
-// }
-
-
-export default function DetailsThreeColumn(props /* : DetailsThreeColumnProps */) {
-  // Get emitted components from map (so we can get any override that may exist)
-  const FieldGroup = getComponentFromMap('FieldGroup');
-
-  const { label, showLabel = true, getPConnect, showHighlightedData = false } = props;
+export default function DetailsThreeColumn(props) {
+  const { label, showLabel, getPConnect, showHighlightedData } = props;
 
   // Get the inherited props from the parent to determine label settings
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
@@ -50,8 +37,7 @@ export default function DetailsThreeColumn(props /* : DetailsThreeColumnProps */
         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);
     });
   }
 
@@ -76,3 +62,16 @@ export default function DetailsThreeColumn(props /* : DetailsThreeColumnProps */
     </FieldGroup>
   );
 }
+
+DetailsThreeColumn.defaultProps = {
+  label: undefined,
+  showLabel: true,
+  showHighlightedData: false
+};
+
+DetailsThreeColumn.propTypes = {
+  showLabel: PropTypes.bool,
+  label: PropTypes.string,
+  getPConnect: PropTypes.func.isRequired,
+  showHighlightedData: PropTypes.bool
+};