@pega/dx-component-builder-sdk 0.23.9 → 0.23.11

package/tests/assets/sdk-r/components/create/override-sdk/template/SimpleTableManual/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/template/SimpleTableSelect/SimpleTableSelect.tsx

@@ -0,0 +1,124 @@
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface SimpleTableSelectProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  label: string;
+  referenceList: object[] | string;
+  renderMode: string;
+  showLabel: boolean;
+  promptedFilters: object[];
+  viewName: string;
+  parameters: any;
+  readonlyContextList: object[] | string;
+  dataRelationshipContext: string;
+}
+
+const isSelfReferencedProperty = (param, referenceProp) => {
+  const [, parentPropName] = param.split('.');
+  return parentPropName === referenceProp;
+};
+
+/**
+ * SimpleTable react component
+ * @param {*} props - props
+ */
+export default function SimpleTableSelect(props: SimpleTableSelectProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const ListView = getComponentFromMap('ListView');
+  const SimpleTable = getComponentFromMap('SimpleTable');
+  const PromotedFilters = getComponentFromMap('PromotedFilters');
+
+  const { label, getPConnect, renderMode = '', showLabel = true, viewName = '', parameters, dataRelationshipContext = null } = props;
+
+  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
+  if (propsToUse.showLabel === false) {
+    propsToUse.label = '';
+  }
+
+  const pConn = getPConnect();
+  const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
+  const { selectionMode, selectionList } = pConn.getConfigProps() as any;
+  const isMultiSelectMode = selectionMode === MULTI;
+
+  if (isMultiSelectMode && renderMode === 'ReadOnly') {
+    return <SimpleTable {...props} showLabel={propsToUse.showLabel} />;
+  }
+
+  const pageReference = pConn.getPageReference();
+  let referenceProp = isMultiSelectMode ? selectionList.substring(1) : pageReference.substring(pageReference.lastIndexOf('.') + 1);
+  // Replace here to use the context name instead
+  let contextPageReference: string | null = null;
+  if (props.dataRelationshipContext !== null && selectionMode === 'single') {
+    referenceProp = dataRelationshipContext;
+    contextPageReference = pageReference.concat('.').concat(referenceProp);
+  }
+
+  // Need to get this written so typedefs work
+  const { datasource: { parameters: fieldParameters = {} } = {}, pageClass } = isMultiSelectMode
+    ? // @ts-ignore - Property 'getFieldMetadata' is private and only accessible within class 'C11nEnv'.
+      pConn.getFieldMetadata(`@P .${referenceProp}`)
+    : // @ts-ignore - Property 'getCurrentPageFieldMetadata' is private and only accessible within class 'C11nEnv'.
+      pConn.getCurrentPageFieldMetadata(contextPageReference);
+
+  const compositeKeys: any[] = [];
+  Object.values(fieldParameters).forEach((param: any) => {
+    if (isSelfReferencedProperty(param, referenceProp)) {
+      compositeKeys.push(param.substring(param.lastIndexOf('.') + 1));
+    }
+  });
+
+  // setting default row height for select table
+  const defaultRowHeight = '2';
+
+  const additionalTableConfig = {
+    rowDensity: false,
+    enableFreezeColumns: false,
+    autoSizeColumns: false,
+    resetColumnWidths: false,
+    defaultFieldDef: {
+      showMenu: false,
+      noContextMenu: true,
+      grouping: false
+    },
+    itemKey: '$key',
+    defaultRowHeight
+  };
+
+  const listViewProps = {
+    ...props,
+    title: propsToUse.label,
+    personalization: false,
+    grouping: false,
+    expandGroups: false,
+    reorderFields: false,
+    showHeaderIcons: false,
+    editing: false,
+    globalSearch: true,
+    toggleFieldVisibility: false,
+    basicMode: true,
+    additionalTableConfig,
+    compositeKeys,
+    viewName,
+    parameters
+  };
+
+  const filters = (getPConnect().getRawMetadata() as any).config.promotedFilters ?? [];
+
+  const isSearchable = filters.length > 0;
+
+  if (isSearchable) {
+    return (
+      <PromotedFilters
+        getPConnect={getPConnect}
+        viewName={viewName}
+        filters={filters}
+        listViewProps={listViewProps}
+        pageClass={pageClass}
+        parameters={parameters}
+      />
+    );
+  }
+  return <ListView {...listViewProps} />;
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/SimpleTableSelect/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/template/SingleReferenceReadOnly/SingleReferenceReadOnly.tsx

@@ -0,0 +1,63 @@
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface SingleReferenceReadOnlyProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  config: any;
+  displayAs?: string;
+  ruleClass?: string;
+  label?: string;
+  displayMode?: string;
+  type: string;
+  referenceType?: string;
+  hideLabel?: boolean;
+  dataRelationshipContext?: string;
+}
+
+export default function SingleReferenceReadOnly(props: SingleReferenceReadOnlyProps) {
+  const {
+    getPConnect,
+    displayAs = '',
+    ruleClass = '',
+    label = '',
+    type = '',
+    displayMode = '',
+    referenceType = '',
+    hideLabel = false,
+    dataRelationshipContext = null,
+    config
+  } = props;
+
+  const editableComponents = ['AutoComplete', 'SimpleTableSelect', 'Dropdown'];
+
+  if (editableComponents.includes(type)) {
+    config.caseClass = ruleClass;
+    config.text = config.primaryField;
+    config.caseID = config.value;
+    config.contextPage = `@P .${dataRelationshipContext}`;
+    config.resourceParams = {
+      workID: displayAs === 'table' ? config.selectionKey : config.value
+    };
+    config.resourcePayload = {
+      caseClassName: ruleClass
+    };
+  }
+
+  const component = getPConnect().createComponent(
+    {
+      type: 'SemanticLink',
+      config: {
+        ...config,
+        label,
+        displayMode,
+        referenceType,
+        hideLabel,
+        dataRelationshipContext
+      }
+    },
+    '',
+    '',
+    {}
+  ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
+
+  return <>{component}</>;
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/SingleReferenceReadOnly/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/template/SubTabs/SubTabs.tsx

@@ -0,0 +1,46 @@
+import { Children, PropsWithChildren, useEffect, useState } from 'react';
+import { Tab, Tabs } from '@material-ui/core';
+import { TabContext, TabPanel } from '@material-ui/lab';
+
+import { getTransientTabs, getVisibleTabs, tabClick } from './tabUtils';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface SubTabsProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+}
+
+export default function SubTabs(props: PropsWithChildren<SubTabsProps>) {
+  const { children = [] } = props;
+
+  const defaultTabIndex = 0;
+  const deferLoadedTabs = Children.toArray(children)[0];
+  const availableTabs = getVisibleTabs(deferLoadedTabs, 'tabsSubs');
+  const [currentTabId, setCurrentTabId] = useState(defaultTabIndex.toString());
+
+  const [tabItems, setTabitem] = useState<any[]>([]);
+  useEffect(() => {
+    const tempTabItems = getTransientTabs(availableTabs, currentTabId, tabItems);
+    setTabitem(tempTabItems);
+  }, [currentTabId]);
+
+  const handleTabClick = (id, index: string) => {
+    setCurrentTabId(index);
+    tabClick(index, availableTabs, currentTabId, setCurrentTabId, tabItems);
+  };
+
+  return (
+    <TabContext value={currentTabId.toString()}>
+      <Tabs onChange={handleTabClick} value={currentTabId} variant='scrollable'>
+        {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/create/override-sdk/template/SubTabs/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "SubTabs",
+    "name": "SubTabs",
+    "label": "Sub tabs",
+    "description": "Sub tabs view",
+    "type": "Template",
+    "subtype": "TAB",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/SubTabs/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/template/SubTabs/tabUtils.ts

@@ -0,0 +1,68 @@
+export const getDeferFriendlyTabs = allTabs => {
+  return allTabs.map(tab => {
+    const theTabCompConfig = tab.getPConnect().getConfigProps();
+    return { type: 'DeferLoad', config: theTabCompConfig };
+  });
+};
+
+export const getVisibleTabs = (allTabs, uuid) => {
+  let index = 0;
+  return allTabs.props
+    .getPConnect()
+    .getChildren()
+    ?.filter(child => {
+      // US-402838: Filter out tab entries if the config object does not contain the visibility attribute or it evaluates to the boolean true,
+      const config = child.getPConnect().getConfigProps();
+
+      // BUG-642335 - adding isChildDeferLoad prop
+      if (child.getPConnect().getComponentName() === 'DeferLoad') {
+        const { name: viewName, deferLoadId = `${viewName}_${uuid}_${index}` } = config;
+        child.getPConnect().registerAdditionalProps({
+          deferLoadId,
+          isChildDeferLoad: true
+        });
+      }
+      index += 1;
+      return !('visibility' in config) || config.visibility === true;
+    });
+};
+
+export const getTransientTabs = (availableTabs, currentTabId, tabItems) => {
+  return (
+    availableTabs?.map((child, i) => {
+      const config = child.getPConnect().getConfigProps();
+      const tabLabel =
+        config.label ||
+        config.inheritedProps?.find(obj => obj.prop === 'label')?.value ||
+        PCore.getLocaleUtils().getLocaleValue('No label specified in config', 'Generic');
+      const tabContent = () => {
+        if (i.toString() === currentTabId) {
+          return tabItems?.[i.toString()]?.content ? tabItems?.[i.toString()]?.content : child.getPConnect().getComponent();
+        }
+        return tabItems?.[i.toString()]?.content;
+      };
+      return {
+        name: tabLabel,
+        id: i.toString(),
+        content: tabContent()
+      };
+    }) || []
+  );
+};
+
+export const tabClick = (id, availableTabs, currentTabId, setCurrentTabId, tabItems) => {
+  const currentPConn = availableTabs[currentTabId].getPConnect();
+  const { deferLoadId } = currentPConn.getConfigProps();
+  PCore.getDeferLoadManager().deactivate(deferLoadId, currentPConn.getContextName());
+
+  setCurrentTabId(id);
+  const index = parseInt(id, 10);
+  if (tabItems[index]?.content === null) {
+    tabItems[index].content = availableTabs[index].getPConnect().getComponent();
+  }
+
+  const nextPConn = availableTabs[id].getPConnect();
+  const { deferLoadId: activeId } = nextPConn?.getConfigProps() || {};
+  PCore.getDeferLoadManager().activate(activeId, nextPConn?.getContextName());
+  PCore.getDeferLoadManager().refreshComponent(activeId, nextPConn?.getContextName());
+};

package/tests/assets/sdk-r/components/create/override-sdk/template/TwoColumn/TwoColumn.css

@@ -0,0 +1,12 @@
+.psdk-two-column {
+  display: flow-root;
+  height: 100%;
+}
+
+/* Create two equal columns that floats next to each other */
+.psdk-two-column-column {
+  width: 50%;
+  float: left;
+  padding: 0rem 0.3125rem;
+  height: 100%;
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/TwoColumn/TwoColumn.tsx

@@ -0,0 +1,55 @@
+import { PropsWithChildren, ReactElement } from 'react';
+import { Grid, GridSize } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface TwoColumnProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  templateCol?: string;
+}
+
+const useStyles = makeStyles(() => ({
+  colStyles: {
+    display: 'grid',
+    gap: '1rem',
+    alignContent: 'baseline'
+  }
+}));
+
+export default function TwoColumn(props: PropsWithChildren<TwoColumnProps>) {
+  const classes = useStyles();
+
+  const { children, templateCol = '1fr 1fr' } = props;
+  const childrenToRender = children as ReactElement[];
+
+  if (childrenToRender.length !== 2) {
+    // eslint-disable-next-line no-console
+    console.error(`TwoColumn template sees more than 2 columns: ${childrenToRender.length}`);
+  }
+
+  // Calculate the size
+  //  Default to assume the 2 columns are evenly split. However, override if templateCol
+  //  (example value: "1fr 1fr")
+  let aSize: GridSize = 6;
+  let bSize: GridSize = 6;
+
+  const colAArray = templateCol
+    .replaceAll(/[a-z]+/g, '')
+    .split(/\s/)
+    .map(itm => Number(itm));
+  const totalCols = colAArray.reduce((v, itm) => itm + v, 0);
+  const ratio = 12 / totalCols;
+  aSize = (ratio * colAArray[0]) as GridSize;
+  bSize = (ratio * colAArray[1]) as GridSize;
+
+  return (
+    <Grid container spacing={1}>
+      <Grid item xs={12} md={aSize} className={classes.colStyles}>
+        {childrenToRender[0]}
+      </Grid>
+      <Grid item xs={12} md={bSize} className={classes.colStyles}>
+        {childrenToRender[1]}
+      </Grid>
+    </Grid>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/TwoColumn/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "TwoColumn",
+    "name": "TwoColumn",
+    "label": "Two column",
+    "description": "TwoColumn Template",
+    "type": "Template",
+    "subtype": "FORM",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/TwoColumn/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/template/TwoColumnPage/TwoColumnPage.tsx

@@ -0,0 +1,17 @@
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface TwoColumnPageProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+}
+
+/*
+ * The wrapper handles knowing how to take in just children
+ *  and mapping to the TwoColumn template.
+ */
+export default function TwoColumnPage(props: TwoColumnPageProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const TwoColumn = getComponentFromMap('TwoColumn');
+
+  return <TwoColumn {...props} />;
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/TwoColumnPage/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "TwoColumnPage",
+    "name": "TwoColumnPage",
+    "label": "Two column",
+    "description": "TwoColumn Page Template",
+    "type": "Template",
+    "subtype": "PAGE",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/TwoColumnPage/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/template/TwoColumnTab/TwoColumnTab.css

@@ -0,0 +1,12 @@
+.psdk-two-column {
+  display: flow-root;
+  height: 100%;
+}
+
+/* Create two equal columns that floats next to each other */
+.psdk-two-column-column {
+  width: 50%;
+  float: left;
+  padding: 0rem 0.3125rem;
+  height: 100%;
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/TwoColumnTab/TwoColumnTab.tsx

@@ -0,0 +1,55 @@
+import { PropsWithChildren, ReactElement } from 'react';
+import { Grid, GridSize } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface TwoColumnTabProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  templateCol?: string;
+}
+
+const useStyles = makeStyles(() => ({
+  colStyles: {
+    display: 'grid',
+    gap: '1rem',
+    alignContent: 'baseline'
+  }
+}));
+
+export default function TwoColumnTab(props: PropsWithChildren<TwoColumnTabProps>) {
+  const classes = useStyles();
+
+  const { children, templateCol = '1fr 1fr' } = props;
+  const childrenToRender = children as ReactElement[];
+
+  if (childrenToRender.length !== 2) {
+    // eslint-disable-next-line no-console
+    console.error(`TwoColumn template sees more than 2 columns: ${childrenToRender.length}`);
+  }
+
+  // Calculate the size
+  //  Default to assume the 2 columns are evenly split. However, override if templateCol
+  //  (example value: "1fr 1fr")
+  let aSize: GridSize = 6;
+  let bSize: GridSize = 6;
+
+  const colAArray = templateCol
+    .replaceAll(/[a-z]+/g, '')
+    .split(/\s/)
+    .map(itm => Number(itm));
+  const totalCols = colAArray.reduce((v, itm) => itm + v, 0);
+  const ratio = 12 / totalCols;
+  aSize = (ratio * colAArray[0]) as GridSize;
+  bSize = (ratio * colAArray[1]) as GridSize;
+
+  return (
+    <Grid container spacing={1}>
+      <Grid item xs={12} md={aSize} className={classes.colStyles}>
+        {childrenToRender[0]}
+      </Grid>
+      <Grid item xs={12} md={bSize} className={classes.colStyles}>
+        {childrenToRender[1]}
+      </Grid>
+    </Grid>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/TwoColumnTab/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "TwoColumnTab",
+    "name": "TwoColumnTab",
+    "label": "Two column",
+    "description": "Two column",
+    "type": "Template",
+    "subtype": "TAB",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/TwoColumnTab/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/template/WideNarrow/WideNarrow.css

@@ -0,0 +1,19 @@
+.psdk-wide-narrow-column {
+  display: flow-root;
+  height: 100%;
+}
+
+/* Create two columns that float next to each other */
+.psdk-wide-narrow-column .psdk-narrow-column-column {
+  width: 30%;
+  float: left;
+  padding: 0rem 0rem 0rem 0.3125rem;
+  height: 100%;
+}
+
+.psdk-wide-narrow-column .psdk-wide-column-column {
+  width: 70%;
+  float: left;
+  padding: 0rem 0.3125rem 0rem 0rem;
+  height: 100%;
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/WideNarrow/WideNarrow.tsx

@@ -0,0 +1,37 @@
+import { PropsWithChildren, ReactElement } from 'react';
+import { PConnProps } from 'packages/react-sdk-components/src/types/PConnProps';
+import './WideNarrow.css';
+
+interface WideNarrowProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  a: any;
+  b: any;
+  // eslint-disable-next-line react/no-unused-prop-types
+  title?: string;
+  // eslint-disable-next-line react/no-unused-prop-types
+  cols?: string;
+  // eslint-disable-next-line react/no-unused-prop-types
+  icon?: string;
+}
+
+export default function WideNarrow(props: PropsWithChildren<WideNarrowProps>) {
+  // const {a, b /*, cols, icon, title */ } = props;
+  const { a, b, children = [] } = props;
+
+  return (
+    <>
+      {children && (children as ReactElement[]).length === 2 && (
+        <div className='psdk-wide-narrow-column'>
+          <div className='psdk-wide-column-column'>{children[0]}</div>
+          <div className='psdk-narrow-column-column'>{children[1]}</div>
+        </div>
+      )}
+      {a && b && (
+        <div className='psdk-wide-narrow-column'>
+          <div className='psdk-wide-column-column'>{a}</div>
+          <div className='psdk-narrow-column-column'>{b}</div>
+        </div>
+      )}
+    </>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/WideNarrow/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/template/WideNarrowDetails/WideNarrowDetails.tsx

@@ -0,0 +1,86 @@
+import { createElement } from 'react';
+import Grid, { GridSize } 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 WideNarrowDetailsProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  showLabel?: boolean;
+  label?: string;
+  showHighlightedData?: boolean;
+}
+
+const COLUMN_WIDTHS = [8, 4];
+
+export default function WideNarrowDetails(props: WideNarrowDetailsProps) {
+  // 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) => {
+    let theConfigObject: object = configObject;
+    if (!theConfigObject) {
+      theConfigObject = {};
+    }
+
+    return createElement(createPConnectComponent(), {
+      ...theConfigObject,
+      // 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
+    });
+  }
+
+  let theName = '';
+  if (propsToUse?.showLabel && propsToUse.label) {
+    theName = propsToUse.label;
+  }
+
+  return (
+    <FieldGroup name={theName}>
+      {showHighlightedData && highlightedDataArr.length > 0 && (
+        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
+          {highlightedDataArr.map((child, i) => (
+            <Grid item xs={COLUMN_WIDTHS[i] as GridSize} key={`hf-${i + 1}`}>
+              {child}
+            </Grid>
+          ))}
+        </Grid>
+      )}
+      <Grid container spacing={1}>
+        {children?.map((child, i) => (
+          <Grid item xs={COLUMN_WIDTHS[i] as GridSize} key={`r-${i + 1}`}>
+            {child}
+          </Grid>
+        ))}
+      </Grid>
+    </FieldGroup>
+  );
+}