@pega/react-sdk-overrides 23.1.10 → 23.1.12

package/lib/template/DataReference/DataReference.tsx

@@ -1,12 +1,11 @@
-import React, { useMemo, useState, useEffect } from 'react';
-import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PropsWithChildren, ReactElement, useEffect, useMemo, useState } from 'react';
 
-import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/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;
@@ -15,18 +14,13 @@ interface DataReferenceProps extends PConnProps {
   selectionMode: string;
   displayAs: string;
   ruleClass: string;
-  parameters: Array<string>; // need to fix
+  parameters: string[]; // need to fix
   hideLabel: boolean;
 }
 
-
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
 
-// Remove this and use "real" PCore type once .d.ts is fixed (currently shows ~7 errors)
-declare const PCore: any;
-
-
-export default function DataReference(props: DataReferenceProps) {
+export default function DataReference(props: PropsWithChildren<DataReferenceProps>) {
   // Get emitted components from map (so we can get any override that may exist)
   const SingleReferenceReadonly = getComponentFromMap('SingleReferenceReadOnly');
   const MultiReferenceReadonly = getComponentFromMap('MultiReferenceReadOnly');
@@ -45,17 +39,17 @@ export default function DataReference(props: DataReferenceProps) {
     parameters,
     hideLabel
   } = props;
-  let childrenToRender = children;
+  let childrenToRender = children as ReactElement[];
   const pConn = getPConnect();
   const [dropDownDataSource, setDropDownDataSource] = useState(null);
   const propsToUse: any = { 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 rawViewMetadata: any = pConn.getRawMetadata();
+  const viewName = rawViewMetadata.name;
+  const [firstChildMeta] = rawViewMetadata.children;
+  const refList = rawViewMetadata.config.referenceList;
   const canBeChangedInReviewMode = allowAndPersistChangesInReviewMode && (displayAs === 'autocomplete' || displayAs === 'dropdown');
   let propName;
   const isDisplayModeEnabled = ['LABELS_LEFT', 'STACKED_LARGE_VAL'].includes(displayMode);
@@ -63,32 +57,34 @@ export default function DataReference(props: DataReferenceProps) {
 
   /* Only for dropdown when it has param use data api to get the data back and add it to datasource */
   useEffect(() => {
-    if (
-      firstChildMeta?.type === "Dropdown" &&
-      rawViewMetadata["config"]?.parameters
-    ) {
+    if (firstChildMeta?.type === 'Dropdown' && rawViewMetadata.config?.parameters) {
       const { value, key, text } = firstChildMeta.config.datasource.fields;
-      PCore.getDataApiUtils()
-        .getData(refList, {
-          dataViewParameters: parameters
-        })
-        .then((res) => {
+      (
+        PCore.getDataApiUtils().getData(
+          refList,
+          {
+            dataViewParameters: parameters
+          } as any,
+          ''
+        ) as Promise<any>
+      )
+        .then(res => {
           if (res.data.data !== null) {
             const ddDataSource = res.data.data
-              .map((listItem) => ({
-                key: listItem[key.split(" .", 2)[1]],
-                text: listItem[text.split(" .", 2)[1]],
-                value: listItem[value.split(" .", 2)[1]]
+              .map(listItem => ({
+                key: listItem[key.split(' .', 2)[1]],
+                text: listItem[text.split(' .', 2)[1]],
+                value: listItem[value.split(' .', 2)[1]]
               }))
-              .filter((item) => item.key);
+              .filter(item => item.key);
             // Filtering out undefined entries that will break preview
             setDropDownDataSource(ddDataSource);
           } else {
-            const ddDataSource: any = []
+            const ddDataSource: any = [];
             setDropDownDataSource(ddDataSource);
           }
         })
-        .catch((err) => {
+        .catch(err => {
           // eslint-disable-next-line no-console
           console.error(err?.stack);
           return Promise.resolve({
@@ -105,14 +101,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 +126,9 @@ 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
-      getPConnect()
-        .getActionsApi()
-        .refreshCaseView(caseKey, pConn.getValue('__currentPageTabViewName', ''), null, refreshOptions);  // 2nd arg empty string until typedef marked correctly
+    if (canBeChangedInReviewMode && pConn.getValue('__currentPageTabViewName', '')) {
+      // 2nd arg empty string until typedef marked correctly
+      getPConnect().getActionsApi().refreshCaseView(caseKey, pConn.getValue('__currentPageTabViewName', ''), null, refreshOptions); // 2nd arg empty string until typedef marked correctly
       PCore.getDeferLoadManager().refreshActiveComponents(pConn.getContextName());
     } else {
       const pgRef = pConn.getPageReference().replace('caseInfo.content', '');
@@ -143,45 +138,41 @@ export default function DataReference(props: DataReferenceProps) {
     // AutoComplete sets value on event.id whereas Dropdown sets it on event.target.value
     const propValue = event?.id || event?.target.value;
     if (propValue && canBeChangedInReviewMode && isDisplayModeEnabled) {
-      PCore.getDataApiUtils()
-        .getCaseEditLock(caseKey)
-        .then(caseResponse => {
-          const pageTokens = pConn.getPageReference().replace('caseInfo.content', '').split('.');
-          let curr = {};
-          const commitData = curr;
+      (PCore.getDataApiUtils().getCaseEditLock(caseKey, '') as Promise<any>).then(caseResponse => {
+        const pageTokens = pConn.getPageReference().replace('caseInfo.content', '').split('.');
+        let curr = {};
+        const commitData = curr;
 
-          pageTokens.forEach(el => {
-            if (el !== '') {
-              curr[el] = {};
-              curr = curr[el];
-            }
-          });
+        pageTokens.forEach(el => {
+          if (el !== '') {
+            curr[el] = {};
+            curr = curr[el];
+          }
+        });
 
-          // expecting format like {Customer: {pyID:"C-100"}}
-          const propArr = propName.split('.');
-          propArr.forEach((element, idx) => {
-            if (idx + 1 === propArr.length) {
-              curr[element] = propValue;
-            } else {
-              curr[element] = {};
-              curr = curr[element];
-            }
-          });
+        // expecting format like {Customer: {pyID:"C-100"}}
+        const propArr = propName.split('.');
+        propArr.forEach((element, idx) => {
+          if (idx + 1 === propArr.length) {
+            curr[element] = propValue;
+          } else {
+            curr[element] = {};
+            curr = curr[element];
+          }
+        });
 
-          PCore.getDataApiUtils()
-            .updateCaseEditFieldsData(
-              caseKey,
-              { [caseKey]: commitData },
-              caseResponse.headers.etag,
-              pConn.getContextName()
-            )
-            .then(response => {
-              PCore.getContainerUtils().updateChildContainersEtag(
-                pConn.getContextName(),
-                response.headers.etag
-              );
-            });
+        (
+          PCore.getDataApiUtils().updateCaseEditFieldsData(
+            caseKey,
+            { [caseKey]: commitData },
+            caseResponse.headers.etag,
+            pConn.getContextName()
+          ) as Promise<any>
+        ).then(response => {
+          PCore.getContainerUtils().updateParentLastUpdateTime(pConn.getContextName(), response.data.data.caseInfo.lastUpdateTime);
+          PCore.getContainerUtils().updateRelatedContextEtag(pConn.getContextName(), response.headers.etag);
         });
+      });
     }
   };
 
@@ -191,7 +182,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
+      pConn.clearErrorMessages({
+        // Need to add empty string for category and context to match typdef
         property: propName,
         category: '',
         context: ''
@@ -208,69 +200,51 @@ export default function DataReference(props: DataReferenceProps) {
             ruleClass={ruleClass}
             referenceType={referenceType}
             hideLabel={hideLabel}
-            dataRelationshipContext={
-              rawViewMetadata["config"].contextClass && rawViewMetadata["config"].name ? rawViewMetadata["config"].name : null
-            }
+            dataRelationshipContext={rawViewMetadata.config.contextClass && rawViewMetadata.config.name ? rawViewMetadata.config.name : null}
           />
         );
       }
 
       if (isDisplayModeEnabled && selectionMode === SELECTION_MODE.MULTI) {
-        return (
-          <MultiReferenceReadonly
-            config={config}
-            getPConnect={firstChildPConnect}
-            label={propsToUse.label}
-            hideLabel={hideLabel}
-          />
-        );
+        return <MultiReferenceReadonly config={config} getPConnect={firstChildPConnect} label={propsToUse.label} hideLabel={hideLabel} />;
       }
 
       // In the case of a datasource with parameters you cannot load the dropdown before the parameters
-      if (
-        type === 'Dropdown' &&
-        rawViewMetadata["config"]?.parameters &&
-        dropDownDataSource === null
-      ) {
+      if (type === 'Dropdown' && rawViewMetadata.config?.parameters && dropDownDataSource === null) {
         return null;
       }
 
-      return firstChildPConnect().createComponent({
-        type,
-        config: {
-          ...config,
-          required: propsToUse.required,
-          visibility: propsToUse.visibility,
-          disabled: propsToUse.disabled,
-          label: propsToUse.label,
-          viewName: getPConnect().getCurrentView(),
-          parameters: rawViewMetadata["config"].parameters,
-          readOnly: false,
-          localeReference: rawViewMetadata["config"].localeReference,
-          ...(selectionMode === SELECTION_MODE.SINGLE ? { referenceType } : ''),
-          dataRelationshipContext:
-            rawViewMetadata["config"].contextClass && rawViewMetadata["config"].name
-              ? rawViewMetadata["config"].name
-              : null,
-          hideLabel,
-          onRecordChange: handleSelection
+      return firstChildPConnect().createComponent(
+        {
+          type,
+          config: {
+            ...config,
+            required: propsToUse.required,
+            visibility: propsToUse.visibility,
+            disabled: propsToUse.disabled,
+            label: propsToUse.label,
+            viewName: getPConnect().getCurrentView(),
+            parameters: rawViewMetadata.config.parameters,
+            readOnly: false,
+            localeReference: rawViewMetadata.config.localeReference,
+            ...(selectionMode === SELECTION_MODE.SINGLE ? { referenceType } : ''),
+            dataRelationshipContext: rawViewMetadata.config.contextClass && rawViewMetadata.config.name ? rawViewMetadata.config.name : null,
+            hideLabel,
+            onRecordChange: handleSelection
+          }
         },
-      },
-      '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional);
+        '',
+        '',
+        {}
+      ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional);
     }
-  }, [
-    firstChildMeta.config?.datasource?.source,
-    parameters,
-    dropDownDataSource,
-    propsToUse.required,
-    propsToUse.disabled
-  ]);
+  }, [firstChildMeta.config?.datasource?.source, parameters, dropDownDataSource, propsToUse.required, propsToUse.disabled]);
 
   // Only include the views region for rendering when it has content
   if (firstChildMeta?.type !== 'Region') {
-    const viewsRegion = rawViewMetadata["children"][1];
+    const viewsRegion = rawViewMetadata.children[1];
     if (viewsRegion?.name === 'Views' && viewsRegion.children.length) {
-      childrenToRender = [recreatedFirstChild, ...children.slice(1)];
+      childrenToRender = [recreatedFirstChild, ...(children as ReactElement[]).slice(1)];
     } else {
       childrenToRender = [recreatedFirstChild];
     }
@@ -281,7 +255,7 @@ export default function DataReference(props: DataReferenceProps) {
   ) : (
     <div>
       {childrenToRender.map(child => (
-        <React.Fragment>{child}</React.Fragment>
+        <>{child}</>
       ))}
     </div>
   );

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

@@ -4,6 +4,5 @@
   "type": "Template",
   "icon": "DataReference.svg",
   "subtype": "DATAVIEW",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/template/DefaultForm/DefaultForm.css

@@ -16,15 +16,19 @@
   gap: calc(1rem);
 }
 
+.psdk-default-form-three-column .grid-column {
+  grid-column: 1 / span 3;
+}
+
 .psdk-default-form-two-column .grid-column {
   grid-column: 1 / span 2;
 }
 
-.psdk-default-form-three-column .grid-column {
-  grid-column: 1 / span 3;
+.psdk-default-form-one-column .grid-column {
+  grid-column: 1;
 }
 
-.psdk-default-form-instruction-text{
+.psdk-default-form-instruction-text {
   padding-top: 0.625rem;
   padding-bottom: 0.625rem;
 }

package/lib/template/DefaultForm/DefaultForm.tsx

@@ -1,22 +1,19 @@
-import React, { createElement } from 'react';
+import { createElement, PropsWithChildren } from 'react';
+
 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 { getKeyForMappedField, mapStateToProps } from './utils';
+import { PConnProps } from '@pega/react-sdk-components/lib/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
-
-// }
-
+interface DefaultFormProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  NumCols: string;
+  instructions: string;
+}
 
 const Child = connectToState(mapStateToProps)(props => {
   const { key, visibility, ...rest } = props;
@@ -24,7 +21,7 @@ const Child = connectToState(mapStateToProps)(props => {
   return createElement(createPConnectComponent(), { ...rest, key, visibility });
 });
 
-export default function DefaultForm(props /* : DefaultFormProps */) {
+export default function DefaultForm(props: PropsWithChildren<DefaultFormProps>) {
   const { getPConnect, NumCols = '1' } = props;
   const instructions = getInstructions(getPConnect(), props.instructions);
 
@@ -52,15 +49,15 @@ export default function DefaultForm(props /* : DefaultFormProps */) {
   // to take the children and create components for them, put in an array and pass as the
   // defaultForm kids
   const arChildren = getPConnect().getChildren()[0].getPConnect().getChildren();
-  const dfChildren = arChildren.map(kid => <Child key={getKeyForMappedField(kid)} {...kid} />);
+  const dfChildren = arChildren?.map(kid => <Child key={getKeyForMappedField(kid)} {...kid} />);
 
   return (
     <>
       {instructions && (
         <div className='psdk-default-form-instruction-text'>
           {/* server performs sanitization method for instructions html content */}
-          { /* eslint-disable react/no-danger */ }
-          <div key="instructions" id="instruction-text" dangerouslySetInnerHTML={{ __html: instructions }} />
+          {/* eslint-disable react/no-danger */}
+          <div key='instructions' id='instruction-text' dangerouslySetInnerHTML={{ __html: instructions }} />
         </div>
       )}
       <div className={divClass}>{dfChildren}</div>

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

@@ -4,6 +4,5 @@
   "description": "DefaultForm Template",
   "type": "Template",
   "subtype": "FORM",
-  "properties": [
-  ]
+  "properties": []
 }

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

@@ -1,18 +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 DetailsProps extends PConnProps {
-//   // If any, enter additional props that only exist on this component
-// }
-
+interface DetailsProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  label: string;
+  showLabel: boolean;
+  showHighlightedData: boolean;
+}
 
-export default function Details(props /* : DetailsProps */) {
+export default function Details(props: DetailsProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldGroup = getComponentFromMap('FieldGroup');
 
@@ -25,20 +25,18 @@ export default function Details(props /* : DetailsProps */) {
   // 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';
 
@@ -48,8 +46,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, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
     });
   }
 

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

@@ -1,27 +1,23 @@
-import { useState, useEffect, Fragment } from 'react';
-import { getTransientTabs, getVisibleTabs, tabClick } from '@pega/react-sdk-components/lib/components/template/SubTabs/tabUtils';
-import React from 'react';
+import { Children, PropsWithChildren, useEffect, useState } 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';
 
+import { getTransientTabs, getVisibleTabs, tabClick } from '@pega/react-sdk-components/lib/components/template/SubTabs/tabUtils';
+import { 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
-
+  showLabel: boolean;
+  label: string;
 }
 
-
-export default function DetailsSubTabs(props: DetailsSubTabsProps) {
+export default function DetailsSubTabs(props: PropsWithChildren<DetailsSubTabsProps>) {
   const { children = [], label, showLabel = true, getPConnect } = props;
   // Get the inherited props from the parent to determine label settings
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
 
   const defaultTabIndex = 0;
-  const deferLoadedTabs = children[0];
+  const deferLoadedTabs = Children.toArray(children)[0];
   let availableTabs = [];
 
   useEffect(() => {
@@ -42,7 +38,7 @@ export default function DetailsSubTabs(props: DetailsSubTabsProps) {
   };
 
   return (
-    <Fragment>
+    <>
       {propsToUse.showLabel && <TextField>{propsToUse.label}</TextField>}
       <TabContext value={currentTabId.toString()}>
         <Tabs onChange={handleTabClick} value={currentTabId}>
@@ -57,6 +53,6 @@ export default function DetailsSubTabs(props: DetailsSubTabsProps) {
           </TabPanel>
         ))}
       </TabContext>
-    </Fragment>
+    </>
   );
 }

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

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

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

@@ -1,20 +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 DetailsThreeColumnProps extends PConnProps {
-//   // If any, enter additional props that only exist on this component
-//   showLabel: boolean,
-//   label: string,
-//   showHighlightedData: boolean
-// }
-
+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 */) {
+export default function DetailsThreeColumn(props: DetailsThreeColumnProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldGroup = getComponentFromMap('FieldGroup');
 
@@ -27,20 +25,18 @@ export default function DetailsThreeColumn(props /* : DetailsThreeColumnProps */
   // 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';
 
@@ -50,8 +46,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, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional);
     });
   }
 

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

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