@pega/sdk 0.0.1

package/templates/react-sdk-reference/src/components/template/Details/DetailsSubTabs/DetailsSubTabs.tsx

@@ -0,0 +1,58 @@
+import { Children, type PropsWithChildren, useEffect, useState } from 'react';
+import { Tab, Tabs } from '@mui/material';
+import { TabContext, TabPanel } from '@mui/lab';
+
+import { getTransientTabs, getVisibleTabs, tabClick } from '../../SubTabs/tabUtils';
+import type { PConnProps } from '@pega/sdk-react';
+
+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 && <h3>{propsToUse.label}</h3>}
+      <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/templates/react-sdk-reference/src/components/template/Details/DetailsSubTabs/config-ext.json

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

package/templates/react-sdk-reference/src/components/template/Details/DetailsSubTabs/index.tsx

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

package/templates/react-sdk-reference/src/components/template/Details/DetailsThreeColumn/DetailsThreeColumn.tsx

@@ -0,0 +1,79 @@
+import { createElement } from 'react';
+import Grid from '@mui/material/Grid';
+
+import { getComponentFromRegistry, PConnectComponent } from '@pega/sdk-react';
+import type { PConnProps } from '@pega/sdk-react';
+
+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 = getComponentFromRegistry('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', 'DISPLAY_ONLY');
+  getPConnect().setInheritedProp('readOnly', true);
+  const children = (getPConnect().getChildren() as any[]).map(
+    (configObject, index) =>
+      createElement(PConnectComponent, {
+        ...configObject,
+
+        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, '', 0, {}); // 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 size={{ xs: 4 }} key={`hf-${i + 1}`}>
+              {child}
+            </Grid>
+          ))}
+        </Grid>
+      )}
+      <Grid container spacing={1}>
+        {children.map((child, i) => (
+          <Grid size={{ xs: 4 }} key={`r-${i + 1}`}>
+            {child}
+          </Grid>
+        ))}
+      </Grid>
+    </FieldGroup>
+  );
+}

package/templates/react-sdk-reference/src/components/template/Details/DetailsThreeColumn/config-ext.json

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

package/templates/react-sdk-reference/src/components/template/Details/DetailsThreeColumn/index.tsx

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

package/templates/react-sdk-reference/src/components/template/Details/DetailsTwoColumn/DetailsTwoColumn.tsx

@@ -0,0 +1,79 @@
+import { createElement } from 'react';
+import Grid from '@mui/material/Grid';
+
+import { getComponentFromRegistry, PConnectComponent } from '@pega/sdk-react';
+import type { PConnProps } from '@pega/sdk-react';
+
+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 = getComponentFromRegistry('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', 'DISPLAY_ONLY');
+  getPConnect().setInheritedProp('readOnly', true);
+  const children = (getPConnect().getChildren() as any[]).map(
+    (configObject, index) =>
+      createElement(PConnectComponent, {
+        ...configObject,
+
+        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, '', 0, {}); // 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 size={{ xs: 6 }} key={`hf-${i + 1}`}>
+              {child}
+            </Grid>
+          ))}
+        </Grid>
+      )}
+      <Grid container spacing={1}>
+        {children.map((child, i) => (
+          <Grid size={{ xs: 6 }} key={`r-${i + 1}`}>
+            {child}
+          </Grid>
+        ))}
+      </Grid>
+    </FieldGroup>
+  );
+}

package/templates/react-sdk-reference/src/components/template/Details/DetailsTwoColumn/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "DetailsTwoColumn",
+  "label": "Details (Two column)",
+  "description": "Details (Two column)",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "properties": []
+}

package/templates/react-sdk-reference/src/components/template/Details/DetailsTwoColumn/index.tsx

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

package/templates/react-sdk-reference/src/components/template/Details/DynamicTabs/DynamicTabs.tsx

@@ -0,0 +1,79 @@
+import React, { Children, useMemo, useState } from 'react';
+import { Tab, Tabs } from '@mui/material';
+import { TabContext, TabPanel } from '@mui/lab';
+import makeStyles from '@mui/styles/makeStyles';
+
+import { buildView } from '../../../helpers/field-group-utils';
+import type { PConnProps } from '@pega/sdk-react';
+
+const useStyles = makeStyles(() => ({
+  tab: {
+    minWidth: '72px'
+  }
+}));
+
+interface DynamicTabsProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  showLabel: boolean;
+  label: string;
+  referenceList?: 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: any = pConnect.getValue(`${referenceList}.pxResults`, ''); // 2nd arg empty string until typedefs properly allow optional
+  const memoisedTabViews = useMemo(() => {
+    pConnect.setInheritedProp('displayMode', 'DISPLAY_ONLY');
+    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/templates/react-sdk-reference/src/components/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/templates/react-sdk-reference/src/components/template/Details/DynamicTabs/index.tsx

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

package/templates/react-sdk-reference/src/components/template/FieldGroupTemplate/FieldGroupTemplate.tsx

@@ -0,0 +1,116 @@
+import { useLayoutEffect, useMemo } from 'react';
+
+import { getReferenceList, buildView } from '../../helpers/field-group-utils';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface FieldGroupTemplateProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  referenceList?: any[];
+  contextClass: string;
+  renderMode?: string;
+  heading?: string;
+  lookForChildInConfig?: boolean;
+  displayMode?: string;
+  fieldHeader?: string;
+  allowTableEdit: boolean;
+  allowActions?: any;
+}
+
+export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldGroup = getComponentFromRegistry('FieldGroup');
+  const FieldGroupList = getComponentFromRegistry('FieldGroupList');
+
+  const {
+    referenceList = [],
+    renderMode,
+    contextClass,
+    getPConnect,
+    lookForChildInConfig,
+    heading = '',
+    displayMode,
+    fieldHeader,
+    allowActions,
+    allowTableEdit: allowAddEdit
+  } = props;
+  const pConn = getPConnect();
+  const resolvedList = getReferenceList(pConn);
+  pConn.setReferenceList(resolvedList);
+  const pageReference = `${pConn.getPageReference()}${resolvedList}`;
+  const isReadonlyMode = renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY';
+  const HEADING = heading ?? 'Row';
+
+  const hasAllowActions = Object.keys(allowActions ?? {}).length > 0;
+  const { allowAdd: actionAdd, allowDelete: actionDelete } = allowActions ?? {};
+  const allowAdd = hasAllowActions ? (actionAdd ?? true) : (allowAddEdit ?? true);
+  const allowDelete = hasAllowActions ? (actionDelete ?? true) : (allowAddEdit ?? true);
+
+  useLayoutEffect(() => {
+    if (!isReadonlyMode) {
+      // @ts-expect-error - Expected 3 arguments, but got 1
+      pConn.getListActions().initDefaultPageInstructions(resolvedList);
+    }
+  }, [referenceList?.length]);
+
+  const getDynamicHeaderProp = (item, index) => {
+    if (fieldHeader === 'propertyRef' && heading && item[heading.substring(1)]) {
+      return item[heading.substring(1)];
+    }
+    return `Row ${index + 1}`;
+  };
+
+  const addRecord = () => {
+    if (PCore.getPCoreVersion()?.includes('8.7')) {
+      pConn.getListActions().insert({ classID: contextClass }, referenceList.length, pageReference);
+    } else {
+      pConn.getListActions().insert({}, referenceList.length);
+    }
+  };
+
+  if (!isReadonlyMode) {
+    const addFieldGroupItem = () => {
+      addRecord();
+    };
+    const deleteFieldGroupItem = index => {
+      if (PCore.getPCoreVersion()?.includes('8.7')) {
+        pConn.getListActions().deleteEntry(index, pageReference);
+      } else {
+        pConn.getListActions().deleteEntry(index);
+      }
+    };
+    if (referenceList.length === 0 && allowAdd) {
+      addFieldGroupItem();
+    }
+
+    const MemoisedChildren = useMemo(() => {
+      return referenceList.map((item, index) => ({
+        id: index,
+        name: fieldHeader === 'propertyRef' ? getDynamicHeaderProp(item, index) : `${HEADING} ${index + 1}`,
+        children: buildView(pConn, index, lookForChildInConfig)
+      }));
+    }, [referenceList?.length]);
+
+    return (
+      <FieldGroupList
+        items={MemoisedChildren}
+        onAdd={allowAdd ? addFieldGroupItem : undefined}
+        onDelete={allowDelete ? deleteFieldGroupItem : undefined}
+      />
+    );
+  }
+
+  pConn.setInheritedProp('displayMode', 'DISPLAY_ONLY');
+  const memoisedReadOnlyList = useMemo(() => {
+    return referenceList.map((item, index) => {
+      const key = item[heading] || `field-group-row-${index}`;
+      return (
+        <FieldGroup key={key} name={fieldHeader === 'propertyRef' ? getDynamicHeaderProp(item, index) : `${HEADING} ${index + 1}`}>
+          {buildView(pConn, index, lookForChildInConfig)}
+        </FieldGroup>
+      );
+    });
+  }, []);
+
+  return <div>{memoisedReadOnlyList}</div>;
+}

package/templates/react-sdk-reference/src/components/template/FieldGroupTemplate/index.tsx

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

package/templates/react-sdk-reference/src/components/template/HierarchicalForm/HierarchicalForm.tsx

@@ -0,0 +1,58 @@
+import { type PropsWithChildren } from 'react';
+import { Tab, Tabs, Box, Badge, Tooltip } from '@mui/material';
+import { TabContext, TabPanel } from '@mui/lab';
+
+import { useHierarchicalForm, type HierarchicalFormProps } from './hooks';
+
+export default function HierarchicalForm(props: PropsWithChildren<HierarchicalFormProps>) {
+  const { currentTabId, handleTabClick, processedTabs, instructions } = useHierarchicalForm(props);
+
+  if (!currentTabId) {
+    return null;
+  }
+
+  return (
+    <Box display='flex' flexDirection='column'>
+      {instructions && (
+        <Box mb={2}>
+          <div dangerouslySetInnerHTML={{ __html: instructions }} />
+        </Box>
+      )}
+      <Box sx={{ flexGrow: 1 }}>
+        <TabContext value={currentTabId.toString()}>
+          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+            <Tabs onChange={handleTabClick} value={currentTabId.toString()} variant='scrollable'>
+              {processedTabs.map((tab: any) => {
+                const tabLabel = tab.name || tab.label;
+                return (
+                  <Tab
+                    key={tab.id}
+                    sx={{ textTransform: 'none' }}
+                    label={
+                      tab.errors ? (
+                        <Tooltip title={`${tabLabel} has errors`} placement='top'>
+                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                            <span>{tabLabel}</span>
+                            <Badge badgeContent={tab.errors} color='error' sx={{ '& .MuiBadge-badge': { position: 'static', transform: 'none' } }} />
+                          </Box>
+                        </Tooltip>
+                      ) : (
+                        tabLabel
+                      )
+                    }
+                    value={tab.id?.toString()}
+                  />
+                );
+              })}
+            </Tabs>
+          </Box>
+          {processedTabs.map((tab: any) => (
+            <TabPanel key={tab.id} value={tab.id?.toString()} tabIndex={+tab.id} keepMounted sx={{ px: 0 }}>
+              <div>{tab.content ? tab.content : 'No content exists'}</div>
+            </TabPanel>
+          ))}
+        </TabContext>
+      </Box>
+    </Box>
+  );
+}