@pega/react-sdk-overrides 23.1.10 → 23.1.12

package/lib/template/SimpleTable/SimpleTableManual/SimpleTableManual.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import React, { useEffect, useState } from 'react';
+import React, { PropsWithChildren, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
@@ -8,15 +8,8 @@ import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import Paper from '@material-ui/core/Paper';
 import { makeStyles } from '@material-ui/core/styles';
-import { buildFieldsForTable, filterData } from '@pega/react-sdk-components/lib/components/helpers/simpleTableHelpers';
-import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/data_page';
 import Link from '@material-ui/core/Link';
-import { getReferenceList } from '@pega/react-sdk-components/lib/components/helpers/field-group-utils';
-import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { createElement } from 'react';
-
-import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
-
 import TableSortLabel from '@material-ui/core/TableSortLabel';
 import MoreIcon from '@material-ui/icons/MoreVert';
 import Menu from '@material-ui/core/Menu';
@@ -31,24 +24,34 @@ import Select from '@material-ui/core/Select';
 import Button from '@material-ui/core/Button';
 import TextField from '@material-ui/core/TextField';
 
-import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { getReferenceList } from '@pega/react-sdk-components/lib/components/helpers/field-group-utils';
+import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/data_page';
+import { buildFieldsForTable, filterData, getContext } from '@pega/react-sdk-components/lib/components/helpers/simpleTableHelpers';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 
 interface SimpleTableManualProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  hideAddRow?: boolean,
-  hideDeleteRow?: boolean,
-  // eslint-disable-next-line react/no-unused-prop-types
-  disableDragDrop?: boolean
-  referenceList?: Array<any>,
-  children?: Array<any>,
-  renderMode?: string,
-  presets?: Array<any>,
-  label?: string,
-  showLabel?: boolean,
-  dataPageName?: string,
-  contextClass?: string,
-  propertyLabel?: string,
-  fieldMetadata?: any
+  hideAddRow?: boolean;
+  hideDeleteRow?: boolean;
+  referenceList?: any[];
+  renderMode?: string;
+  presets?: any[];
+  label?: string;
+  showLabel?: boolean;
+  dataPageName?: string;
+  contextClass?: string;
+  propertyLabel?: string;
+  fieldMetadata?: any;
+  editMode?: string;
+  addAndEditRowsWithin?: any;
+  viewForAddAndEditModal?: any;
+  editModeConfig?: any;
+  displayMode?: string;
+  useSeparateViewForEdit: any;
+  viewForEditModal: any;
 }
 
 const useStyles = makeStyles((/* theme */) => ({
@@ -78,16 +81,14 @@ const useStyles = makeStyles((/* theme */) => ({
   }
 }));
 
-
 let menuColumnId = '';
 let menuColumnType = '';
 let menuColumnLabel = '';
 
-const filterByColumns: Array<any> = [];
-let myRows: Array<any>;
-
+const filterByColumns: any[] = [];
+let myRows: any[];
 
-export default function SimpleTableManual(props: SimpleTableManualProps) {
+export default function SimpleTableManual(props: PropsWithChildren<SimpleTableManualProps>) {
   const classes = useStyles();
   const {
     getPConnect,
@@ -102,7 +103,14 @@ export default function SimpleTableManual(props: SimpleTableManualProps) {
     hideAddRow,
     hideDeleteRow,
     propertyLabel,
-    fieldMetadata
+    fieldMetadata,
+    editMode,
+    addAndEditRowsWithin,
+    viewForAddAndEditModal,
+    editModeConfig,
+    displayMode,
+    useSeparateViewForEdit,
+    viewForEditModal
   } = props;
   const pConn = getPConnect();
   const [rowData, setRowData] = useState([]);
@@ -110,20 +118,21 @@ export default function SimpleTableManual(props: SimpleTableManualProps) {
   const [order, setOrder] = useState<Order>('asc');
   const [orderBy, setOrderBy] = useState<keyof any>('');
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [editAnchorEl, setEditAnchorEl] = useState<null | HTMLElement>(null);
   const [open, setOpen] = useState(false);
   const [filterBy, setFilterBy] = useState<string>();
   const [containsDateOrTime, setContainsDateOrTime] = useState<boolean>(false);
   const [filterType, setFilterType] = useState<string>('string');
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [displayDialogFilterName, setDisplayDialogFilterName] = useState<string>('');
-  const [displayDialogContainsFilter, setDisplayDialogContainsFilter] =
-    useState<string>('contains');
+  const [displayDialogContainsFilter, setDisplayDialogContainsFilter] = useState<string>('contains');
   const [displayDialogContainsValue, setDisplayDialogContainsValue] = useState<string>('');
   const [displayDialogDateFilter, setDisplayDialogDateFilter] = useState<string>('notequal');
   const [displayDialogDateValue, setDisplayDialogDateValue] = useState<string>('');
+  const selectedRowIndex: any = useRef(null);
 
   const parameters = fieldMetadata?.datasource?.parameters;
-
+  const { referenceListStr } = getContext(getPConnect());
   const label = labelProp || propertyLabel;
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
   if (propsToUse.showLabel === false) {
@@ -132,7 +141,6 @@ export default function SimpleTableManual(props: SimpleTableManualProps) {
   // Getting current context
   const context = getPConnect().getContextName();
   const resolvedList = getReferenceList(pConn);
-  const pageReference = `${pConn.getPageReference()}${resolvedList}`;
   pConn.setReferenceList(resolvedList);
   const menuIconOverride$ = Utils.getImageSrc('trash', Utils.getSDKStaticConentUrl());
 
@@ -141,7 +149,7 @@ export default function SimpleTableManual(props: SimpleTableManualProps) {
   //  but getRawMetadata() has each child.config with datasource and value showing their unresolved values (ex: "@P thePropName")
   //  We need to use the prop name as the "glue" to tie the table dataSource, displayColumns and data together.
   //  So, in the code below, we'll use the unresolved config.value (but replacing the space with an underscore to keep things happy)
-  const rawMetadata = getPConnect().getRawMetadata();
+  const rawMetadata: any = getPConnect().getRawMetadata();
 
   // get raw config since @P and other annotations are processed and don't appear in the resolved config.
   //  Destructure "raw" children into array var: "rawFields"
@@ -150,23 +158,36 @@ export default function SimpleTableManual(props: SimpleTableManualProps) {
   //    config.datasource (ex: "@ASSOCIATED .DeclarantChoice")
   //  Neither of these appear in the resolved props
 
-  const rawConfig = rawMetadata?.["config"];
-  const rawFields =
-    rawConfig?.children?.[0]?.children || rawConfig?.presets?.[0].children?.[0]?.children;
-
+  const rawConfig = rawMetadata?.config;
+  const rawFields = rawConfig?.children?.[0]?.children || rawConfig?.presets?.[0].children?.[0]?.children;
+  const isDisplayModeEnabled = displayMode === 'DISPLAY_ONLY';
   const readOnlyMode = renderMode === 'ReadOnly';
   const editableMode = renderMode === 'Editable';
   const showAddRowButton = !readOnlyMode && !hideAddRow;
-  const showDeleteButton = !readOnlyMode && !hideDeleteRow;
+  const allowEditingInModal =
+    (editMode ? editMode === 'modal' : addAndEditRowsWithin === 'modal') && !(renderMode === 'ReadOnly' || isDisplayModeEnabled);
+  const showDeleteButton = editableMode && !hideDeleteRow;
+  const defaultView = editModeConfig ? editModeConfig.defaultView : viewForAddAndEditModal;
+  const bUseSeparateViewForEdit = editModeConfig ? editModeConfig.useSeparateViewForEdit : useSeparateViewForEdit;
+  const editView = editModeConfig ? editModeConfig.editView : viewForEditModal;
+
+  const fieldsWithPropNames = rawFields.map((field, index) => {
+    return { ...resolvedFields[index], propName: field.config.value.replace('@P .', '') };
+  });
+
   useEffect(() => {
-    if (editableMode) {
+    if (editableMode && !allowEditingInModal) {
       // eslint-disable-next-line @typescript-eslint/no-use-before-define
       buildElementsForTable();
-    } else {
+    }
+  }, [referenceList.length]);
+
+  useEffect(() => {
+    if (readOnlyMode || allowEditingInModal) {
       // eslint-disable-next-line @typescript-eslint/no-use-before-define
       generateRowsData();
     }
-  }, [referenceList.length]);
+  }, [referenceList]);
 
   // fieldDefs will be an array where each entry will have a "name" which will be the
   //  "resolved" property name (that we can use as the colId) though it's not really
@@ -176,10 +197,37 @@ export default function SimpleTableManual(props: SimpleTableManualProps) {
   //  Constellation DX Components.
   const fieldDefs = buildFieldsForTable(rawFields, resolvedFields, showDeleteButton);
 
+  useLayoutEffect(() => {
+    if (allowEditingInModal) {
+      getPConnect()
+        .getListActions()
+        .initDefaultPageInstructions(
+          getPConnect().getReferenceList(),
+          fieldDefs.filter(item => item.name).map(item => item.name)
+        );
+    } else {
+      // @ts-ignore - An argument for 'fields' was not provided
+      getPConnect().getListActions().initDefaultPageInstructions(getPConnect().getReferenceList());
+    }
+  }, []);
+
   const displayedColumns = fieldDefs.map(field => {
     return field.name ? field.name : field.cellRenderer;
   });
 
+  const getFormattedValue = (val, key) => {
+    const rawField = fieldsWithPropNames.find(item => item.propName === key);
+    let options = {};
+    if (rawField && ['Boolean', 'Checkbox'].includes(rawField.type)) {
+      const { trueLabel, falseLabel } = rawField.config;
+      options = {
+        trueLabel,
+        falseLabel
+      };
+    }
+    return rawField ? format(val, rawField.type, options) : val;
+  };
+
   // console.log(`SimpleTable displayedColumns:`);
   // console.log(displayedColumns);
 
@@ -187,16 +235,16 @@ export default function SimpleTableManual(props: SimpleTableManualProps) {
   //  of the given row field
   function getRowValue(inRowData: Object, inColKey: string): any {
     // See what data (if any) we have to display
-    const refKeys: Array<string> = inColKey.split('.');
+    const refKeys: string[] = inColKey?.split('.');
     let valBuilder = inRowData;
     for (const key of refKeys) {
       valBuilder = valBuilder[key];
     }
-    return valBuilder;
+    return getFormattedValue(valBuilder, inColKey);
   }
 
   const formatRowsData = data => {
-    if(!data) return {};
+    if (!data) return {};
 
     return data.map(item => {
       return displayedColumns.reduce((dataForRow, colKey) => {
@@ -249,35 +297,55 @@ export default function SimpleTableManual(props: SimpleTableManualProps) {
   // console.log(JSON.stringify(rowData));
 
   const addRecord = () => {
-    if (PCore.getPCoreVersion()?.includes('8.7')) {
-      pConn.getListActions().insert({ classID: contextClass }, referenceList.length, pageReference);
+    if (allowEditingInModal && defaultView) {
+      pConn
+        .getActionsApi()
+        .openEmbeddedDataModal(defaultView, pConn, referenceListStr, referenceList.length, PCore.getConstants().RESOURCE_STATUS.CREATE);
     } else {
-      pConn.getListActions().insert({ classID: contextClass }, referenceList.length, '');  // 3rd arg null until typedef marked correctly as optional
+      pConn.getListActions().insert({ classID: contextClass }, referenceList.length);
     }
+
+    getPConnect().clearErrorMessages({
+      property: (getPConnect().getStateProps() as any)?.referenceList?.substring(1)
+    } as any);
   };
 
-  const deleteRecord = index => {
-    if (PCore.getPCoreVersion()?.includes('8.7')) {
-      pConn.getListActions().deleteEntry(index, pageReference);
-    } else {
-      pConn.getListActions().deleteEntry(index, '');  // 2nd arg empty string until typedef marked correctly as optional
+  const editRecord = () => {
+    setEditAnchorEl(null);
+    if (typeof selectedRowIndex.current === 'number') {
+      pConn
+        .getActionsApi()
+        .openEmbeddedDataModal(
+          bUseSeparateViewForEdit ? editView : defaultView,
+          pConn,
+          referenceListStr,
+          selectedRowIndex.current,
+          PCore.getConstants().RESOURCE_STATUS.UPDATE
+        );
     }
   };
 
+  const deleteRecord = () => {
+    setEditAnchorEl(null);
+    pConn.getListActions().deleteEntry(selectedRowIndex.current);
+  };
+
+  const deleteRecordFromInlineEditable = (index: number) => {
+    pConn.getListActions().deleteEntry(index);
+  };
+
   function buildElementsForTable() {
     const eleData: any = [];
     referenceList.forEach((element, index) => {
       const data: any = [];
       rawFields.forEach(item => {
         // removing label field from config to hide title in the table cell
-        item = {...item, config: {...item.config, label: ''}};
+        item = { ...item, config: { ...item.config, label: '' } };
         const referenceListData = getReferenceList(pConn);
         const isDatapage = referenceListData.startsWith('D_');
         const pageReferenceValue = isDatapage
           ? `${referenceListData}[${index}]`
-          : `${pConn.getPageReference()}${referenceListData.substring(
-              referenceListData.lastIndexOf('.')
-            )}[${index}]`;
+          : `${pConn.getPageReference()}${referenceListData.substring(referenceListData.lastIndexOf('.'))}[${index}]`;
         const config = {
           meta: item,
           options: {
@@ -306,10 +374,10 @@ export default function SimpleTableManual(props: SimpleTableManualProps) {
   };
 
   function descendingComparator<T>(a: T, b: T, orderedBy: keyof T) {
-    if (b[orderedBy] < a[orderedBy]) {
+    if (!b[orderedBy] || b[orderedBy] < a[orderedBy]) {
       return -1;
     }
-    if (b[orderedBy] > a[orderedBy]) {
+    if (!a[orderedBy] || b[orderedBy] > a[orderedBy]) {
       return 1;
     }
     return 0;
@@ -320,18 +388,14 @@ export default function SimpleTableManual(props: SimpleTableManualProps) {
   function getComparator<Key extends keyof any>(
     theOrder: Order,
     orderedBy: Key
-    // eslint-disable-next-line no-unused-vars
   ): (a: { [key in Key]: number | string }, b: { [key in Key]: number | string }) => number {
-    return theOrder === 'desc'
-      ? (a, b) => descendingComparator(a, b, orderedBy)
-      : (a, b) => -descendingComparator(a, b, orderedBy);
+    return theOrder === 'desc' ? (a, b) => descendingComparator(a, b, orderedBy) : (a, b) => -descendingComparator(a, b, orderedBy);
   }
 
-  // eslint-disable-next-line no-unused-vars
-  function stableSort<T>(array: Array<T>, comparator: (a: T, b: T) => number) {
+  function stableSort<T>(array: T[], comparator: (a: T, b: T) => number) {
     const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
     stabilizedThis.sort((a, b) => {
-      // eslint-disable-next-line @typescript-eslint/no-shadow, no-shadow
+      // eslint-disable-next-line @typescript-eslint/no-shadow
       const order = comparator(a[0], b[0]);
       if (order !== 0) return order;
       return a[1] - b[1];
@@ -348,8 +412,14 @@ export default function SimpleTableManual(props: SimpleTableManualProps) {
     setAnchorEl(event.currentTarget);
   }
 
+  function editMenuClick(event, index) {
+    selectedRowIndex.current = index;
+    setEditAnchorEl(event.currentTarget);
+  }
+
   function _menuClose() {
     setAnchorEl(null);
+    setEditAnchorEl(null);
   }
 
   function _filterMenu() {
@@ -360,11 +430,7 @@ export default function SimpleTableManual(props: SimpleTableManualProps) {
     for (const filterObj of filterByColumns) {
       if (filterObj.ref === menuColumnId) {
         setFilterBy(menuColumnLabel);
-        if (
-          filterObj.type === 'Date' ||
-          filterObj.type === 'DateTime' ||
-          filterObj.type === 'Time'
-        ) {
+        if (filterObj.type === 'Date' || filterObj.type === 'DateTime' || filterObj.type === 'Time') {
           setContainsDateOrTime(true);
           setFilterType(filterObj.type);
           setDisplayDialogDateFilter(filterObj.containsFilter);
@@ -439,14 +505,14 @@ export default function SimpleTableManual(props: SimpleTableManualProps) {
   function updateFilterWithInfo() {
     let bFound = false;
     for (const filterObj of filterByColumns) {
-      if (filterObj['ref'] === menuColumnId) {
-        filterObj['type'] = filterType;
+      if (filterObj.ref === menuColumnId) {
+        filterObj.type = filterType;
         if (containsDateOrTime) {
-          filterObj['containsFilter'] = displayDialogDateFilter;
-          filterObj['containsFilterValue'] = displayDialogDateValue;
+          filterObj.containsFilter = displayDialogDateFilter;
+          filterObj.containsFilterValue = displayDialogDateValue;
         } else {
-          filterObj['containsFilter'] = displayDialogContainsFilter;
-          filterObj['containsFilterValue'] = displayDialogContainsValue;
+          filterObj.containsFilter = displayDialogContainsFilter;
+          filterObj.containsFilterValue = displayDialogContainsValue;
         }
         bFound = true;
         break;
@@ -457,13 +523,13 @@ export default function SimpleTableManual(props: SimpleTableManualProps) {
       // add in
       const filterObj: any = {};
       filterObj.ref = menuColumnId;
-      filterObj['type'] = filterType;
+      filterObj.type = filterType;
       if (containsDateOrTime) {
-        filterObj['containsFilter'] = displayDialogDateFilter;
-        filterObj['containsFilterValue'] = displayDialogDateValue;
+        filterObj.containsFilter = displayDialogDateFilter;
+        filterObj.containsFilterValue = displayDialogDateValue;
       } else {
-        filterObj['containsFilter'] = displayDialogContainsFilter;
-        filterObj['containsFilterValue'] = displayDialogContainsValue;
+        filterObj.containsFilter = displayDialogContainsFilter;
+        filterObj.containsFilterValue = displayDialogContainsValue;
       }
 
       filterByColumns.push(filterObj);
@@ -479,9 +545,9 @@ export default function SimpleTableManual(props: SimpleTableManualProps) {
 
   function _showFilteredIcon(columnId) {
     for (const filterObj of filterByColumns) {
-      if (filterObj['ref'] === columnId) {
+      if (filterObj.ref === columnId) {
         // eslint-disable-next-line sonarjs/prefer-single-boolean-return
-        if (filterObj['containsFilterValue'] !== '') {
+        if (filterObj.containsFilterValue !== '') {
           return true;
         }
         return false;
@@ -502,8 +568,8 @@ export default function SimpleTableManual(props: SimpleTableManualProps) {
   }
 
   return (
-    <React.Fragment>
-      <TableContainer component={Paper} style={{ margin: '4px 0px' }} id="simple-table-manual">
+    <>
+      <TableContainer component={Paper} style={{ margin: '4px 0px' }} id='simple-table-manual'>
         {propsToUse.label && (
           <h3 className={classes.label}>
             {propsToUse.label} {results()}
@@ -522,14 +588,10 @@ export default function SimpleTableManual(props: SimpleTableManualProps) {
                           direction={orderBy === displayedColumns[index] ? order : 'asc'}
                           onClick={createSortHandler(displayedColumns[index])}
                         >
-                          {field.label}
-                          {_showFilteredIcon(field.name) && (
-                            <FilterListIcon className={classes.moreIcon} />
-                          )}
+                          {field.label || '---'}
+                          {_showFilteredIcon(field.name) && <FilterListIcon className={classes.moreIcon} />}
                           {orderBy === displayedColumns[index] ? (
-                            <span className={classes.visuallyHidden}>
-                              {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
-                            </span>
+                            <span className={classes.visuallyHidden}>{order === 'desc' ? 'sorted descending' : 'sorted ascending'}</span>
                           ) : null}
                         </TableSortLabel>
                         <MoreIcon
@@ -568,34 +630,49 @@ export default function SimpleTableManual(props: SimpleTableManualProps) {
                           type='button'
                           className='psdk-utility-button'
                           id='delete-button'
-                          onClick={() => deleteRecord(index)}
+                          aria-label='Delete Cell'
+                          onClick={() => deleteRecordFromInlineEditable(index)}
                         >
-                          <img
-                            className='psdk-utility-card-action-svg-icon'
-                            src={menuIconOverride$}
-                          ></img>
+                          <img className='psdk-utility-card-action-svg-icon' src={menuIconOverride$} />
                         </button>
                       </TableCell>
                     )}
                   </TableRow>
                 );
               })}
-            {readOnlyMode &&
+            {(readOnlyMode || allowEditingInModal) &&
               rowData &&
               rowData.length > 0 &&
               stableSort(rowData, getComparator(order, orderBy))
                 .slice(0)
-                .map(row => {
+                .map((row, index) => {
                   return (
-                    <TableRow key={row[displayedColumns[0]]}>
+                    // eslint-disable-next-line react/no-array-index-key
+                    <TableRow key={index}>
                       {displayedColumns.map(colKey => {
                         return (
                           <TableCell key={colKey} className={classes.tableCell}>
-                            {typeof row[colKey] === 'boolean' && !row[colKey]
-                              ? 'False'
-                              : typeof row[colKey] === 'boolean' && row[colKey]
-                              ? 'True'
-                              : row[colKey]}
+                            {showDeleteButton && colKey === 'DeleteIcon' ? (
+                              <div>
+                                <MoreIcon
+                                  id='table-edit-menu-icon'
+                                  className={classes.moreIcon}
+                                  onClick={event => {
+                                    editMenuClick(event, index);
+                                  }}
+                                />
+                                <Menu id='table-edit-menu' anchorEl={editAnchorEl} keepMounted open={Boolean(editAnchorEl)} onClose={_menuClose}>
+                                  <MenuItem onClick={() => editRecord()}>Edit</MenuItem>
+                                  <MenuItem onClick={() => deleteRecord()}>Delete</MenuItem>
+                                </Menu>
+                              </div>
+                            ) : typeof row[colKey] === 'boolean' && !row[colKey] ? (
+                              'False'
+                            ) : typeof row[colKey] === 'boolean' && row[colKey] ? (
+                              'True'
+                            ) : (
+                              row[colKey] || '---'
+                            )}
                           </TableCell>
                         );
                       })}
@@ -622,13 +699,7 @@ export default function SimpleTableManual(props: SimpleTableManualProps) {
           </Link>
         </div>
       )}
-      <Menu
-        id='simple-menu'
-        anchorEl={anchorEl}
-        keepMounted
-        open={Boolean(anchorEl)}
-        onClose={_menuClose}
-      >
+      <Menu id='simple-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={_menuClose}>
         <MenuItem onClick={_filterMenu}>
           <FilterListIcon /> Filter
         </MenuItem>
@@ -685,12 +756,7 @@ export default function SimpleTableManual(props: SimpleTableManualProps) {
             </>
           ) : (
             <>
-              <Select
-                id='filter'
-                fullWidth
-                onChange={_dialogContainsFilter}
-                value={displayDialogContainsFilter}
-              >
+              <Select id='filter' fullWidth onChange={_dialogContainsFilter} value={displayDialogContainsFilter}>
                 <MenuItem value='contains'>Contains</MenuItem>
                 <MenuItem value='equals'>Equals</MenuItem>
                 <MenuItem value='startswith'>Starts with</MenuItem>
@@ -716,6 +782,6 @@ export default function SimpleTableManual(props: SimpleTableManualProps) {
           </Button>
         </DialogActions>
       </Dialog>
-    </React.Fragment>
+    </>
   );
 }

package/lib/template/SimpleTable/SimpleTableSelect/SimpleTableSelect.tsx

@@ -1,22 +1,19 @@
-import React from "react";
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
-// import type { PConnProps } from '../../../../types/PConnProps';
-
-// Need to fix an error noted in comment below before typedefs will work correctly
-// interface SimpleTableSelectProps extends PConnProps {
-//   // If any, enter additional props that only exist on this component
-//   label: string,
-//   referenceList: Array<object> | string,
-//   renderMode: string,
-//   showLabel: boolean,
-//   promptedFilters: Array<object>,
-//   viewName: string,
-//   parameters: any,
-//   readonlyContextList: Array<object> | string,
-//   dataRelationshipContext: string
-// }
-
+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('.');
@@ -27,7 +24,7 @@ const isSelfReferencedProperty = (param, referenceProp) => {
  * SimpleTable react component
  * @param {*} props - props
  */
-export default function SimpleTableSelect(props /* : SimpleTableSelectProps */) {
+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');
@@ -42,7 +39,7 @@ export default function SimpleTableSelect(props /* : SimpleTableSelectProps */)
 
   const pConn = getPConnect();
   const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
-  const { selectionMode, selectionList } = pConn.getConfigProps();
+  const { selectionMode, selectionList } = pConn.getConfigProps() as any;
   const isMultiSelectMode = selectionMode === MULTI;
 
   if (isMultiSelectMode && renderMode === 'ReadOnly') {
@@ -52,7 +49,7 @@ export default function SimpleTableSelect(props /* : SimpleTableSelectProps */)
   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 = null;
+  let contextPageReference: string | null = null;
   if (props.dataRelationshipContext !== null && selectionMode === 'single') {
     referenceProp = dataRelationshipContext;
     contextPageReference = pageReference.concat('.').concat(referenceProp);
@@ -60,13 +57,15 @@ export default function SimpleTableSelect(props /* : SimpleTableSelectProps */)
 
   // Need to get this written so typedefs work
   const { datasource: { parameters: fieldParameters = {} } = {}, pageClass } = isMultiSelectMode
-    ? pConn.getFieldMetadata(`@P .${referenceProp}`)
-    : pConn.getCurrentPageFieldMetadata(contextPageReference);
+    ? // @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: Array<any> = [];
+  const compositeKeys: any[] = [];
   Object.values(fieldParameters).forEach((param: any) => {
     if (isSelfReferencedProperty(param, referenceProp)) {
-     compositeKeys.push(param.substring(param.lastIndexOf('.') + 1));
+      compositeKeys.push(param.substring(param.lastIndexOf('.') + 1));
     }
   });
 
@@ -105,7 +104,7 @@ export default function SimpleTableSelect(props /* : SimpleTableSelectProps */)
     parameters
   };
 
-  const filters = getPConnect().getRawMetadata().config.promotedFilters ?? [];
+  const filters = (getPConnect().getRawMetadata() as any).config.promotedFilters ?? [];
 
   const isSearchable = filters.length > 0;