@pega/react-sdk-overrides 8.23.10 → 23.1.10

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 '@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;
+  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()
@@ -76,20 +99,20 @@ export default function DataReference(props) {
   }, [firstChildMeta, rawViewMetadata, parameters]);
 
   if (firstChildMeta?.type !== 'Region') {
-    firstChildPConnect = getPConnect().getChildren()[0].getPConnect;
+    firstChildPConnect = getPConnect().getChildren()?.[0].getPConnect;
     /* remove refresh When condition from those old view so that it will not be used for runtime */
     if (firstChildMeta.config?.readOnly) {
       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/Details/DynamicTabs/DynamicTabs.tsx

@@ -0,0 +1,78 @@
+import React, { Children, useState, useMemo } 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';
+
+const useStyles = makeStyles(() => ({
+  tab: {
+    minWidth: '72px'
+  }
+}));
+
+// 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>;
+// }
+
+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;
+  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 memoisedTabViews = useMemo(() => {
+    pConnect.setInheritedProp('displayMode', 'LABELS_LEFT');
+    pConnect.setInheritedProp('readOnly', true);
+
+    return (
+      referenceListData &&
+      Children.toArray(
+        referenceListData.map((item, index) => {
+          return <React.Fragment key={item[tablabelProp]}>{buildView(pConnect, index, '')}</React.Fragment>;
+        })
+      )
+    );
+  }, [referenceListData]);
+  const [panelShown, changePanel] = useState(defaultTabIndex);
+  const handleTabClick = (e, id) => {
+    changePanel(parseInt(id, 10));
+  };
+  // Loop over the tab contents and and pull out the labels for the navigation
+  const tabItems =
+    referenceListData?.map((item, i) => {
+      const currentTabLabel = item[tablabelProp] || PCore.getLocaleUtils().getLocaleValue('No label specified in config', 'Generic');
+      return {
+        name: currentTabLabel,
+        id: i
+      };
+    }) || [];
+
+  return (
+    <>
+      {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">
+          {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">
+            <div>{memoisedTabViews[parseInt(tab.id, 10)] || 'No content exists'}</div>
+          </TabPanel>
+        ))}
+      </TabContext>
+    </>
+  );
+}
+
+export default DynamicTabs;

package/lib/template/Details/DynamicTabs/config.json

@@ -0,0 +1,36 @@
+{
+  "name": "DynamicTabs",
+  "label": "Dynamic tabs (list)",
+  "description": "Dynamic tabs (list)",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "icon": "DynamicTabs.svg",
+  "hideTemplateEdit": true,
+  "hideFromTemplatePicker": true,
+  "viewHeadingLabel": "Default heading",
+  "properties": [
+    {
+      "name": "referenceList",
+      "label": "Data page",
+      "format": "CONTENTPICKERSOURCE"
+    },
+    {
+      "name": "parameters",
+      "label": "Parameters",
+      "format": "PARAMETERS",
+      "showOverride": false
+    },
+    {
+      "name": "tablabel",
+      "label": "Tab label",
+      "format": "PROPERTY",
+      "ofContextClass": true
+    },
+    {
+      "format": "VIEWPICKER",
+      "name": "Views",
+      "label": "Tab content",
+      "ofContextClass": true
+    }
+  ]
+}

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

@@ -0,0 +1 @@
+export { default } from './DynamicTabs';