@pega/dx-component-builder-sdk 8.23.15 → 8.23.17

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

@@ -0,0 +1,288 @@
+import React, { useMemo, useState, useEffect } from 'react';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+// import type { PConnProps } from '../../../types/PConnProps';
+
+// ReferenceProps can't be used until getComponentConfig() is NOT private
+// interface DataReferenceProps extends PConnProps {
+//   // If any, enter additional props that only exist on this component
+//   children: Array<any>,
+//   label: string,
+//   showLabel: any,
+//   displayMode: string,
+//   allowAndPersistChangesInReviewMode: boolean,
+//   referenceType: string,
+//   selectionMode: string,
+//   displayAs: string,
+//   ruleClass: string,
+//   parameters: Array<string>, // need to fix
+//   hideLabel: boolean
+// }
+
+
+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 */) {
+  // 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;
+  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 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
+        })
+        .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)
+        .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()
+            )
+            .then(response => {
+              PCore.getContainerUtils().updateChildContainersEtag(
+                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.slice(1)];
+    } else {
+      childrenToRender = [recreatedFirstChild];
+    }
+  }
+
+  return childrenToRender.length === 1 ? (
+    childrenToRender[0] ?? null
+  ) : (
+    <div>
+      {childrenToRender.map(child => (
+        <React.Fragment>{child}</React.Fragment>
+      ))}
+    </div>
+  );
+}

package/tests/assets/components/SDK-React/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/components/SDK-React/createAll/override-sdk/template/DataReference/index.tsx

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

package/tests/assets/components/SDK-React/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/components/SDK-React/createAll/override-sdk/template/DefaultForm/DefaultForm.tsx

@@ -0,0 +1,69 @@
+import React, { createElement } 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 './DefaultForm.css';
+
+
+// Can't use PConn props until proper props for getPConnect().getChildren()[0].getPConnect;
+// interface DefaultFormProps extends PConnProps {
+//   // If any, enter additional props that only exist on this component
+//   children: Array<any>,
+//   NumCols: string
+
+// }
+
+
+const Child = connectToState(mapStateToProps)(props => {
+  const { key, visibility, ...rest } = props;
+
+  return createElement(createPConnectComponent(), { ...rest, key, visibility });
+});
+
+export default function DefaultForm(props /* : DefaultFormProps */) {
+  const { getPConnect, NumCols = '1' } = props;
+  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/components/SDK-React/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/components/SDK-React/createAll/override-sdk/template/DefaultForm/index.tsx

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

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

@@ -0,0 +1,76 @@
+import React, { 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 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');
+
+  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()
+    .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;
+    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/components/SDK-React/createAll/override-sdk/template/Details/index.tsx

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

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

@@ -0,0 +1,62 @@
+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 { Tab, Tabs, TextField } from '@material-ui/core';
+import { TabContext, TabPanel } from '@material-ui/lab';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+
+interface DetailsSubTabsProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  children: Array<any>,
+  showLabel: boolean,
+  label: string
+
+}
+
+
+export default function DetailsSubTabs(props: DetailsSubTabsProps) {
+  const { children = [], label, showLabel = true, getPConnect } = props;
+  // Get the inherited props from the parent to determine label settings
+  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
+
+  const defaultTabIndex = 0;
+  const deferLoadedTabs = 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 (
+    <Fragment>
+      {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>
+    </Fragment>
+  );
+}

package/tests/assets/components/SDK-React/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/components/SDK-React/createAll/override-sdk/template/DetailsSubTabs/index.tsx

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

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

@@ -0,0 +1,78 @@
+import React, { 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 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() };
+
+  // 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()
+    .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;
+    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>
+  );
+}