@pega/react-sdk-overrides 0.23.26 → 8.8.21

package/lib/template/DataReference/DataReference.tsx

@@ -1,13 +1,36 @@
 import React, { useMemo, useState, useEffect } from 'react';
-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';
+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
+// }
+
 
 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) {
+
+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');
+
   const {
     children,
     getPConnect,
@@ -25,14 +48,14 @@ export default function DataReference(props) {
   let childrenToRender = children;
   const pConn = getPConnect();
   const [dropDownDataSource, setDropDownDataSource] = useState(null);
-  const propsToUse = { label, showLabel, ...pConn.getInheritedProps() };
+  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 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);
@@ -42,7 +65,7 @@ export default function DataReference(props) {
   useEffect(() => {
     if (
       firstChildMeta?.type === "Dropdown" &&
-      rawViewMetadata.config?.parameters
+      rawViewMetadata["config"]?.parameters
     ) {
       const { value, key, text } = firstChildMeta.config.datasource.fields;
       PCore.getDataApiUtils()
@@ -82,14 +105,14 @@ export default function DataReference(props) {
       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;
       }
     }
@@ -107,10 +130,10 @@ export default function DataReference(props) {
   const handleSelection = event => {
     const caseKey = pConn.getCaseInfo().getKey();
     const refreshOptions = { autoDetectRefresh: true };
-    if (canBeChangedInReviewMode && pConn.getValue('__currentPageTabViewName')) {
+    if (canBeChangedInReviewMode && pConn.getValue('__currentPageTabViewName', '')) {  // 2nd arg empty string until typedef marked correctly
       getPConnect()
         .getActionsApi()
-        .refreshCaseView(caseKey, pConn.getValue('__currentPageTabViewName'), null, refreshOptions);
+        .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', '');
@@ -168,8 +191,10 @@ export default function DataReference(props) {
   const recreatedFirstChild = useMemo(() => {
     const { type, config } = firstChildMeta;
     if (firstChildMeta?.type !== 'Region') {
-      pConn.clearErrorMessages({
-        property: propName
+      pConn.clearErrorMessages({  // Need to add empty string for category and context to match typdef
+        property: propName,
+        category: '',
+        context: ''
       });
       if (!canBeChangedInReviewMode && isDisplayModeEnabled && selectionMode === SELECTION_MODE.SINGLE) {
         return (
@@ -184,7 +209,7 @@ export default function DataReference(props) {
             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
             }
           />
         );
@@ -204,7 +229,7 @@ export default function DataReference(props) {
       // 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;
@@ -219,18 +244,19 @@ export default function DataReference(props) {
           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,
@@ -242,7 +268,7 @@ export default function DataReference(props) {
 
   // 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 {
@@ -260,31 +286,3 @@ export default function DataReference(props) {
     </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,15 +1,32 @@
 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';
 
-export default function DefaultForm(props) {
-  const { getPConnect, NumCols } = props;
+
+// 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;
   const instructions = getInstructions(getPConnect(), props.instructions);
-  const instructionText = instructions?.replace(/<\/?[^>]+(>|$)/g, '');
 
   let divClass: string;
 
@@ -35,26 +52,18 @@ export default function DefaultForm(props) {
   // 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, idx) =>
-    // eslint-disable-next-line react/no-array-index-key
-    createElement(createPConnectComponent(), { ...kid, key: idx })
-  );
+  const dfChildren = arChildren.map(kid => <Child key={getKeyForMappedField(kid)} {...kid} />);
 
   return (
     <>
-      {instructionText && (
-        <div className='psdk-default-form-instruction-text'>{instructionText}</div>
+      {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 }} />
+        </div>
       )}
       <div className={divClass}>{dfChildren}</div>
     </>
   );
 }
-
-DefaultForm.propTypes = {
-  // children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  NumCols: PropTypes.string
-};
-
-DefaultForm.defaultProps = {
-  NumCols: '1'
-};

package/lib/template/DefaultForm/utils/index.ts

@@ -0,0 +1,33 @@
+import { v4 as uuidv4 } from 'uuid';
+
+export const mapStateToProps: any = (_, ownProps) => {
+  const { getPConnect } = ownProps;
+
+  return {
+    visibility: getPConnect().getComputedVisibility(),
+    getPConnect
+  };
+};
+
+export const getKeyForMappedField = field => {
+  if (Array.isArray(field)) {
+    return field
+      .map(item => {
+        return getKeyForMappedField(item);
+      })
+      .join('__');
+  }
+
+  const pConnect = field?.getPConnect?.();
+
+  if (pConnect?.meta?.type && pConnect?.meta?.config?.name) {
+    return `${pConnect.meta.type}_${pConnect.meta.config.name}`;
+  }
+
+  // Using label as a fallback if name is not defined.
+  if (pConnect?.meta?.type && pConnect?.meta?.config?.label) {
+    return `${pConnect.meta.type}_${pConnect.meta.config.label}`;
+  }
+
+  return uuidv4();
+};

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

@@ -1,10 +1,21 @@
 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 FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
+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');
 
-export default function Details(props) {
   const { label, showLabel, getPConnect, showHighlightedData } = props;
 
   // Get the inherited props from the parent to determine label settings
@@ -37,7 +48,8 @@ export default function Details(props) {
         field.config.displayAsStatus = true;
       }
 
-      return getPConnect().createComponent(field);
+      return getPConnect().createComponent(field,
+        '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
     });
   }
 
@@ -62,16 +74,3 @@ export default function Details(props) {
     </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,12 +1,22 @@
 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';
 
-export default function DetailsSubTabs(props) {
-  const { children, label, showLabel, getPConnect } = props;
+
+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;
   // Get the inherited props from the parent to determine label settings
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
 
@@ -50,16 +60,3 @@ export default function DetailsSubTabs(props) {
     </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,11 +1,24 @@
 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 FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
-export default function DetailsThreeColumn(props) {
-  const { label, showLabel, getPConnect, showHighlightedData } = props;
+// 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;
 
   // Get the inherited props from the parent to determine label settings
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
@@ -37,7 +50,8 @@ export default function DetailsThreeColumn(props) {
         field.config.displayAsStatus = true;
       }
 
-      return getPConnect().createComponent(field);
+      return getPConnect().createComponent(field,
+        '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional);
     });
   }
 
@@ -62,16 +76,3 @@ export default function DetailsThreeColumn(props) {
     </FieldGroup>
   );
 }
-
-DetailsThreeColumn.defaultProps = {
-  label: undefined,
-  showLabel: true,
-  showHighlightedData: false
-};
-
-DetailsThreeColumn.propTypes = {
-  showLabel: PropTypes.bool,
-  label: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired,
-  showHighlightedData: PropTypes.bool
-};

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

@@ -1,11 +1,25 @@
 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 FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
-export default function DetailsTwoColumn(props) {
-  const { label, showLabel, getPConnect, showHighlightedData } = props;
+// 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
+// }
+
+
+export default function DetailsTwoColumn(props /* : DetailsTwoColumnProps */) {
+  // 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;
 
   // Get the inherited props from the parent to determine label settings
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
@@ -37,7 +51,8 @@ export default function DetailsTwoColumn(props) {
         field.config.displayAsStatus = true;
       }
 
-      return getPConnect().createComponent(field);
+      return getPConnect().createComponent(field,
+        '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
     });
   }
 
@@ -62,16 +77,3 @@ export default function DetailsTwoColumn(props) {
     </FieldGroup>
   );
 }
-
-DetailsTwoColumn.defaultProps = {
-  label: undefined,
-  showLabel: true,
-  showHighlightedData: false
-};
-
-DetailsTwoColumn.propTypes = {
-  showLabel: PropTypes.bool,
-  label: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired,
-  showHighlightedData: PropTypes.bool
-};

package/lib/template/FieldGroupTemplate/FieldGroupTemplate.tsx

@@ -1,21 +1,35 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
-
-import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
-import FieldGroupList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroupList';
 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';
+
+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
+}
 
-declare const PCore: any;
 
-export default function FieldGroupTemplate(props) {
+export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldGroup = getComponentFromMap('FieldGroup');
+  const FieldGroupList = getComponentFromMap('FieldGroupList');
+
   const {
-    referenceList,
+    referenceList = [],
     renderMode,
     contextClass,
     getPConnect,
     lookForChildInConfig,
-    heading,
+    heading = '',
     displayMode,
     fieldHeader,
     allowTableEdit: allowAddEdit
@@ -38,7 +52,7 @@ export default function FieldGroupTemplate(props) {
     if (PCore.getPCoreVersion()?.includes('8.7')) {
       pConn.getListActions().insert({ classID: contextClass }, referenceList.length, pageReference);
     } else {
-      pConn.getListActions().insert({ classID: contextClass }, referenceList.length);
+      pConn.getListActions().insert({}, referenceList.length, null);  // 3rd arg null until typedef marked correctly as optional
     }
   };
 
@@ -50,7 +64,7 @@ export default function FieldGroupTemplate(props) {
       if (PCore.getPCoreVersion()?.includes('8.7')) {
         pConn.getListActions().deleteEntry(index, pageReference);
       } else {
-        pConn.getListActions().deleteEntry(index);
+        pConn.getListActions().deleteEntry(index, null);  // 2nd arg null until typedef marked correctly as optional
       }
     };
     if (referenceList.length === 0 && allowAddEdit !== false) {
@@ -94,20 +108,3 @@ export default function FieldGroupTemplate(props) {
 
   return <div>{memoisedReadOnlyList}</div>;
 }
-
-FieldGroupTemplate.defaultProps = {
-  referenceList: [],
-  heading: undefined,
-  contextClass: null,
-  displayMode: undefined
-};
-
-FieldGroupTemplate.propTypes = {
-  referenceList: PropTypes.arrayOf(Object),
-  contextClass: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired,
-  renderMode: PropTypes.string.isRequired,
-  heading: PropTypes.string,
-  lookForChildInConfig: PropTypes.bool,
-  displayMode: PropTypes.string
-};

package/lib/template/InlineDashboard/InlineDashboard.tsx

@@ -1,7 +1,16 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 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';
+
+// 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
+}
+
 
 const useStyles = makeStyles((/* theme */) => ({
   headerStyles: {
@@ -30,7 +39,7 @@ const useStyles = makeStyles((/* theme */) => ({
   }
 }));
 
-export default function InlineDashboard(props) {
+export default function InlineDashboard(props: InlineDashboardProps) {
   const classes = useStyles();
 
   const { children, title, filterPosition } = props;
@@ -65,8 +74,3 @@ export default function InlineDashboard(props) {
     </>
   );
 }
-
-InlineDashboard.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired
-  // template: PropTypes.string.isRequired
-};

package/lib/template/InlineDashboardPage/InlineDashboardPage.tsx

@@ -1,12 +1,27 @@
 import React from 'react';
 import { useMemo, Children, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
 
 import { buildFilterComponents } from '@pega/react-sdk-components/lib/components/infra/DashboardFilter/filterUtils';
-import InlineDashboard from '@pega/react-sdk-components/lib/components/template/InlineDashboard';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
-export default function InlineDashboardPage(props) {
-  const { children, getPConnect } = props;
+import type { 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
+}
+
+
+export default function InlineDashboardPage(props: InlineDashboardPageProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const InlineDashboard = getComponentFromMap("InlineDashboard");
+
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  const { children, getPConnect, icon = '', filterPosition = 'block-start'  } = props;
   const [filterComponents, setFilterComponents] = useState([]);
   const childArray = useMemo(() => {
     return Children.toArray(children);
@@ -26,16 +41,3 @@ export default function InlineDashboardPage(props) {
 
   return <InlineDashboard {...inlineProps} />;
 }
-
-InlineDashboardPage.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  getPConnect: PropTypes.func.isRequired,
-  title: PropTypes.string.isRequired,
-  icon: PropTypes.string,
-  filterPosition: PropTypes.string
-};
-
-InlineDashboardPage.defaultProps = {
-  icon: '',
-  filterPosition: 'block-start'
-};