@pega/dx-component-builder-sdk 0.23.10 → 0.23.12

package/tests/assets/sdk-r/components/createAll/override-sdk/template/DataReference/DataReference.tsx

@@ -0,0 +1,262 @@
+import { PropsWithChildren, ReactElement, useEffect, useMemo, useState } from 'react';
+
+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
+  label: string;
+  showLabel: any;
+  displayMode: string;
+  allowAndPersistChangesInReviewMode: boolean;
+  referenceType: string;
+  selectionMode: string;
+  displayAs: string;
+  ruleClass: string;
+  parameters: string[]; // need to fix
+  hideLabel: boolean;
+}
+
+const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
+
+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');
+
+  const {
+    children,
+    getPConnect,
+    label,
+    showLabel,
+    displayMode,
+    allowAndPersistChangesInReviewMode,
+    referenceType,
+    selectionMode,
+    displayAs,
+    ruleClass,
+    parameters,
+    hideLabel
+  } = props;
+  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: 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);
+  let firstChildPConnect;
+
+  /* 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) {
+      const { value, key, text } = firstChildMeta.config.datasource.fields;
+      (
+        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]]
+              }))
+              .filter(item => item.key);
+            // Filtering out undefined entries that will break preview
+            setDropDownDataSource(ddDataSource);
+          } else {
+            const ddDataSource: any = [];
+            setDropDownDataSource(ddDataSource);
+          }
+        })
+        .catch(err => {
+          // eslint-disable-next-line no-console
+          console.error(err?.stack);
+          return Promise.resolve({
+            data: { data: [] }
+          });
+        });
+    }
+  }, [firstChildMeta, rawViewMetadata, parameters]);
+
+  if (firstChildMeta?.type !== 'Region') {
+    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
+        ? 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) {
+        firstChildMeta.config.parameters = parameters;
+      }
+    }
+    // set displayMode conditionally
+    if (!canBeChangedInReviewMode) {
+      firstChildMeta.config.displayMode = displayMode;
+    }
+    if (firstChildMeta.type === 'SimpleTableSelect' && selectionMode === SELECTION_MODE.MULTI) {
+      propName = PCore.getAnnotationUtils().getPropertyName(firstChildMeta.config.selectionList);
+    } else {
+      propName = PCore.getAnnotationUtils().getPropertyName(firstChildMeta.config.value);
+    }
+  }
+
+  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
+      PCore.getDeferLoadManager().refreshActiveComponents(pConn.getContextName());
+    } else {
+      const pgRef = pConn.getPageReference().replace('caseInfo.content', '');
+      getPConnect().getActionsApi().refreshCaseView(caseKey, viewName, pgRef, refreshOptions);
+    }
+
+    // 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, '') 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];
+          }
+        });
+
+        // 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()
+          ) as Promise<any>
+        ).then(response => {
+          PCore.getContainerUtils().updateParentLastUpdateTime(pConn.getContextName(), response.data.data.caseInfo.lastUpdateTime);
+          PCore.getContainerUtils().updateRelatedContextEtag(pConn.getContextName(), response.headers.etag);
+        });
+      });
+    }
+  };
+
+  // Re-create first child with overridden props
+  // Memoized child in order to stop unmount and remount of the child component when data reference
+  // rerenders without any actual change
+  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: ''
+      });
+      if (!canBeChangedInReviewMode && isDisplayModeEnabled && selectionMode === SELECTION_MODE.SINGLE) {
+        return (
+          <SingleReferenceReadonly
+            config={config}
+            getPConnect={firstChildPConnect}
+            label={propsToUse.label}
+            type={type}
+            displayAs={displayAs}
+            displayMode={displayMode}
+            ruleClass={ruleClass}
+            referenceType={referenceType}
+            hideLabel={hideLabel}
+            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} />;
+      }
+
+      // In the case of a datasource with parameters you cannot load the dropdown before the parameters
+      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
+          }
+        },
+        '',
+        '',
+        {}
+      ); // 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]);
+
+  // Only include the views region for rendering when it has content
+  if (firstChildMeta?.type !== 'Region') {
+    const viewsRegion = rawViewMetadata.children[1];
+    if (viewsRegion?.name === 'Views' && viewsRegion.children.length) {
+      childrenToRender = [recreatedFirstChild, ...(children as ReactElement[]).slice(1)];
+    } else {
+      childrenToRender = [recreatedFirstChild];
+    }
+  }
+
+  return childrenToRender.length === 1 ? (
+    childrenToRender[0] ?? null
+  ) : (
+    <div>
+      {childrenToRender.map(child => (
+        <>{child}</>
+      ))}
+    </div>
+  );
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/template/DataReference/config-ext.json

@@ -0,0 +1,10 @@
+{
+    "label": "DataReference",
+    "componentKey": "DataReference",
+    "name": "DataReference",
+    "description": "Data Reference Template",
+    "type": "Template",
+    "icon": "DataReference.svg",
+    "subtype": "DATAVIEW",
+    "properties": []
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/template/DataReference/index.tsx

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

package/tests/assets/sdk-r/components/createAll/override-sdk/template/DefaultForm/DefaultForm.css

@@ -0,0 +1,30 @@
+.psdk-default-form-one-column {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: calc(1rem);
+}
+
+.psdk-default-form-two-column {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: calc(1rem);
+}
+
+.psdk-default-form-three-column {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: calc(1rem);
+}
+
+.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-instruction-text {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/template/DefaultForm/DefaultForm.tsx

@@ -0,0 +1,66 @@
+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 { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+import './DefaultForm.css';
+
+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;
+
+  return createElement(createPConnectComponent(), { ...rest, key, visibility });
+});
+
+export default function DefaultForm(props: PropsWithChildren<DefaultFormProps>) {
+  const { getPConnect, NumCols = '1' } = props;
+  const instructions = getInstructions(getPConnect(), props.instructions);
+
+  let divClass: string;
+
+  const numCols = NumCols || '1';
+  switch (numCols) {
+    case '1':
+      divClass = 'psdk-default-form-one-column';
+      break;
+    case '2':
+      divClass = 'psdk-default-form-two-column';
+      break;
+    case '3':
+      divClass = 'psdk-default-form-three-column';
+      break;
+    default:
+      divClass = 'psdk-default-form-one-column';
+      break;
+  }
+
+  // debugger;
+
+  // repoint the children because they are in a region and we need to not render the region
+  // 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} />);
+
+  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 }} />
+        </div>
+      )}
+      <div className={divClass}>{dfChildren}</div>
+    </>
+  );
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/template/DefaultForm/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "DefaultForm",
+    "name": "DefaultForm",
+    "label": "Default form",
+    "description": "DefaultForm Template",
+    "type": "Template",
+    "subtype": "FORM",
+    "properties": []
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/template/DefaultForm/index.tsx

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

package/tests/assets/sdk-r/components/createAll/override-sdk/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/tests/assets/sdk-r/components/createAll/override-sdk/template/Details/Details.tsx

@@ -0,0 +1,73 @@
+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';
+
+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) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldGroup = getComponentFromMap('FieldGroup');
+
+  const { label, showLabel, getPConnect, showHighlightedData } = props;
+
+  // Get the inherited props from the parent to determine label settings
+  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
+
+  // Set display mode prop and re-create the children so this part of the dom tree renders
+  // in a readonly (display) mode instead of a editable
+  getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+  getPConnect().setInheritedProp('readOnly', true);
+  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() as any).config;
+    highlightedDataArr = highlightedData.map(field => {
+      field.config.displayMode = 'STACKED_LARGE_VAL';
+
+      // Mark as status display when using pyStatusWork
+      if (field.config.value === '@P .pyStatusWork') {
+        field.type = 'TextInput';
+        field.config.displayAsStatus = true;
+      }
+
+      return getPConnect().createComponent(field, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
+    });
+  }
+
+  return (
+    <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
+      {showHighlightedData && highlightedDataArr.length > 0 && (
+        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
+          {highlightedDataArr.map((child, i) => (
+            <Grid item xs={12} key={`hf-${i + 1}`}>
+              {child}
+            </Grid>
+          ))}
+        </Grid>
+      )}
+      <Grid container spacing={1}>
+        {children.map((child, i) => (
+          <Grid item xs={12} key={`r-${i + 1}`}>
+            {child}
+          </Grid>
+        ))}
+      </Grid>
+    </FieldGroup>
+  );
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/template/Details/index.tsx

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

package/tests/assets/sdk-r/components/createAll/override-sdk/template/DetailsSubTabs/DetailsSubTabs.tsx

@@ -0,0 +1,58 @@
+import { Children, PropsWithChildren, useEffect, useState } from 'react';
+import { Tab, Tabs, TextField } from '@material-ui/core';
+import { TabContext, TabPanel } from '@material-ui/lab';
+
+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
+  showLabel: boolean;
+  label: string;
+}
+
+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.toArray(children)[0];
+  let availableTabs = [];
+
+  useEffect(() => {
+    availableTabs = getVisibleTabs(deferLoadedTabs, 'detailsSubTabs');
+  }, [availableTabs]);
+
+  const [currentTabId, setCurrentTabId] = useState(defaultTabIndex.toString());
+
+  const [tabItems, setTabitem] = useState([]);
+  useEffect(() => {
+    const tempTabItems = getTransientTabs(availableTabs, currentTabId, tabItems);
+    setTabitem(tempTabItems);
+  }, [currentTabId]);
+
+  const handleTabClick = (id, index: string) => {
+    setCurrentTabId(index);
+    tabClick(index, availableTabs, currentTabId, setCurrentTabId, tabItems);
+  };
+
+  return (
+    <>
+      {propsToUse.showLabel && <TextField>{propsToUse.label}</TextField>}
+      <TabContext value={currentTabId.toString()}>
+        <Tabs onChange={handleTabClick} value={currentTabId}>
+          {tabItems.map((tab: any) => (
+            <Tab key={tab.id} label={tab.name} value={tab.id} />
+          ))}
+        </Tabs>
+
+        {tabItems.map((tab: any) => (
+          <TabPanel key={tab.id} value={tab.id} tabIndex={+tab.id}>
+            <div>{tab.content ? tab.content : 'No content exists'}</div>
+          </TabPanel>
+        ))}
+      </TabContext>
+    </>
+  );
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/template/DetailsSubTabs/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "DetailsSubTabs",
+    "name": "DetailsSubTabs",
+    "label": "Details (Sub tabs)",
+    "description": "Details (Sub tabs)",
+    "type": "Template",
+    "subtype": "DETAILS",
+    "properties": []
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/template/DetailsSubTabs/index.tsx

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

package/tests/assets/sdk-r/components/createAll/override-sdk/template/DetailsThreeColumn/DetailsThreeColumn.tsx

@@ -0,0 +1,73 @@
+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';
+
+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() };
+
+  // Set display mode prop and re-create the children so this part of the dom tree renders
+  // in a readonly (display) mode instead of a editable
+  getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+  getPConnect().setInheritedProp('readOnly', true);
+  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() as any).config;
+    highlightedDataArr = highlightedData.map(field => {
+      field.config.displayMode = 'STACKED_LARGE_VAL';
+
+      // Mark as status display when using pyStatusWork
+      if (field.config.value === '@P .pyStatusWork') {
+        field.type = 'TextInput';
+        field.config.displayAsStatus = true;
+      }
+
+      return getPConnect().createComponent(field, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional);
+    });
+  }
+
+  return (
+    <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
+      {showHighlightedData && highlightedDataArr.length > 0 && (
+        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
+          {highlightedDataArr.map((child, i) => (
+            <Grid item xs={4} key={`hf-${i + 1}`}>
+              {child}
+            </Grid>
+          ))}
+        </Grid>
+      )}
+      <Grid container spacing={1}>
+        {children.map((child, i) => (
+          <Grid item xs={4} key={`r-${i + 1}`}>
+            {child}
+          </Grid>
+        ))}
+      </Grid>
+    </FieldGroup>
+  );
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/template/DetailsThreeColumn/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "DetailsThreeColumn",
+    "name": "DetailsThreeColumn",
+    "label": "Details (Three column)",
+    "description": "Details (Three column)",
+    "type": "Template",
+    "subtype": "DETAILS",
+    "properties": []
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/template/DetailsThreeColumn/index.tsx

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