@pega/react-sdk-overrides 0.23.26 → 0.23.28

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, 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,6 +24,36 @@ import Select from '@material-ui/core/Select';
 import Button from '@material-ui/core/Button';
 import TextField from '@material-ui/core/TextField';
 
+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;
+  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 */) => ({
   label: {
     margin: '8px'
@@ -58,15 +81,14 @@ const useStyles = makeStyles((/* theme */) => ({
   }
 }));
 
-declare const PCore: any;
-
 let menuColumnId = '';
 let menuColumnType = '';
 let menuColumnLabel = '';
 
-const filterByColumns: Array<any> = [];
-let myRows: Array<any>;
-export default function SimpleTableManual(props) {
+const filterByColumns: any[] = [];
+let myRows: any[];
+
+export default function SimpleTableManual(props: PropsWithChildren<SimpleTableManualProps>) {
   const classes = useStyles();
   const {
     getPConnect,
@@ -81,7 +103,14 @@ export default function SimpleTableManual(props) {
     hideAddRow,
     hideDeleteRow,
     propertyLabel,
-    fieldMetadata
+    fieldMetadata,
+    editMode,
+    addAndEditRowsWithin,
+    viewForAddAndEditModal,
+    editModeConfig,
+    displayMode,
+    useSeparateViewForEdit,
+    viewForEditModal
   } = props;
   const pConn = getPConnect();
   const [rowData, setRowData] = useState([]);
@@ -89,20 +118,21 @@ export default function SimpleTableManual(props) {
   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) {
@@ -113,14 +143,14 @@ export default function SimpleTableManual(props) {
   const resolvedList = getReferenceList(pConn);
   const pageReference = `${pConn.getPageReference()}${resolvedList}`;
   pConn.setReferenceList(resolvedList);
-  const menuIconOverride$ = Utils.getImageSrc('trash', PCore.getAssetLoader().getStaticServerUrl());
+  const menuIconOverride$ = Utils.getImageSrc('trash', Utils.getSDKStaticConentUrl());
 
   const resolvedFields = children?.[0]?.children || presets?.[0].children?.[0].children;
   // NOTE: props has each child.config with datasource and value undefined
   //  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"
@@ -130,22 +160,35 @@ export default function SimpleTableManual(props) {
   //  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 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
@@ -159,6 +202,19 @@ export default function SimpleTableManual(props) {
     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);
 
@@ -166,16 +222,16 @@ export default function SimpleTableManual(props) {
   //  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) => {
@@ -186,8 +242,8 @@ export default function SimpleTableManual(props) {
   };
 
   function generateRowsData() {
-    // if dataPageName property value exists then make a datapage fetch call and get the list of data.
-    if (dataPageName) {
+    // if referenceList is empty and dataPageName property value exists then make a datapage fetch call and get the list of data.
+    if (!referenceList.length && dataPageName) {
       getDataPage(dataPageName, parameters, context).then(listData => {
         const data = formatRowsData(listData);
         myRows = data;
@@ -228,18 +284,38 @@ export default function SimpleTableManual(props) {
   // console.log(JSON.stringify(rowData));
 
   const addRecord = () => {
-    if (PCore.getPCoreVersion()?.includes('8.7')) {
+    if (allowEditingInModal && defaultView) {
+      pConn
+        .getActionsApi()
+        .openEmbeddedDataModal(defaultView, pConn, referenceListStr, referenceList.length, PCore.getConstants().RESOURCE_STATUS.CREATE);
+    } else if (PCore.getPCoreVersion()?.includes('8.7')) {
       pConn.getListActions().insert({ classID: contextClass }, referenceList.length, pageReference);
     } else {
-      pConn.getListActions().insert({ classID: contextClass }, referenceList.length);
+      pConn.getListActions().insert({ classID: contextClass }, referenceList.length, ''); // 3rd arg null 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 = index => {
+  const deleteRecord = () => {
+    setEditAnchorEl(null);
     if (PCore.getPCoreVersion()?.includes('8.7')) {
-      pConn.getListActions().deleteEntry(index, pageReference);
+      pConn.getListActions().deleteEntry(selectedRowIndex.current, pageReference);
     } else {
-      pConn.getListActions().deleteEntry(index);
+      pConn.getListActions().deleteEntry(selectedRowIndex.current, ''); // 2nd arg empty string until typedef marked correctly as optional
     }
   };
 
@@ -249,14 +325,12 @@ export default function SimpleTableManual(props) {
       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: {
@@ -299,18 +373,14 @@ export default function SimpleTableManual(props) {
   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];
@@ -327,8 +397,14 @@ export default function SimpleTableManual(props) {
     setAnchorEl(event.currentTarget);
   }
 
+  function editMenuClick(event, index) {
+    selectedRowIndex.current = index;
+    setEditAnchorEl(event.currentTarget);
+  }
+
   function _menuClose() {
     setAnchorEl(null);
+    setEditAnchorEl(null);
   }
 
   function _filterMenu() {
@@ -339,11 +415,7 @@ export default function SimpleTableManual(props) {
     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);
@@ -418,14 +490,14 @@ export default function SimpleTableManual(props) {
   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;
@@ -436,13 +508,13 @@ export default function SimpleTableManual(props) {
       // 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);
@@ -458,9 +530,9 @@ export default function SimpleTableManual(props) {
 
   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;
@@ -481,8 +553,8 @@ export default function SimpleTableManual(props) {
   }
 
   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()}
@@ -502,13 +574,9 @@ export default function SimpleTableManual(props) {
                           onClick={createSortHandler(displayedColumns[index])}
                         >
                           {field.label}
-                          {_showFilteredIcon(field.name) && (
-                            <FilterListIcon className={classes.moreIcon} />
-                          )}
+                          {_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
@@ -547,34 +615,48 @@ export default function SimpleTableManual(props) {
                           type='button'
                           className='psdk-utility-button'
                           id='delete-button'
-                          onClick={() => deleteRecord(index)}
+                          aria-label='Delete Cell'
+                          onClick={() => deleteRecord()}
                         >
-                          <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]]}>
                       {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>
                         );
                       })}
@@ -601,13 +683,7 @@ export default function SimpleTableManual(props) {
           </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>
@@ -664,12 +740,7 @@ export default function SimpleTableManual(props) {
             </>
           ) : (
             <>
-              <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>
@@ -695,6 +766,6 @@ export default function SimpleTableManual(props) {
           </Button>
         </DialogActions>
       </Dialog>
-    </React.Fragment>
+    </>
   );
 }

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

@@ -1,21 +1,36 @@
-import PropTypes from 'prop-types';
-import React from "react";
-import ListView from '@pega/react-sdk-components/lib/components/template/ListView';
-import SimpleTable from '@pega/react-sdk-components/lib/components/template/SimpleTable/SimpleTable';
-
-import PromotedFilters from '@pega/react-sdk-components/lib/components/template/PromotedFilters';
+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;
 };
-declare const PCore;
+
 /**
  * SimpleTable react component
  * @param {*} props - props
  */
-export default function SimpleTableSelect(props) {
-  const { label, getPConnect, renderMode, showLabel, viewName, parameters, dataRelationshipContext } = 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) {
@@ -24,7 +39,7 @@ export default function SimpleTableSelect(props) {
 
   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') {
@@ -34,20 +49,23 @@ export default function SimpleTableSelect(props) {
   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);
   }
 
+  // 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));
     }
   });
 
@@ -86,7 +104,7 @@ export default function SimpleTableSelect(props) {
     parameters
   };
 
-  const filters = getPConnect().getRawMetadata().config.promotedFilters ?? [];
+  const filters = (getPConnect().getRawMetadata() as any).config.promotedFilters ?? [];
 
   const isSearchable = filters.length > 0;
 
@@ -104,27 +122,3 @@ export default function SimpleTableSelect(props) {
   }
   return <ListView {...listViewProps} />;
 }
-
-SimpleTableSelect.defaultProps = {
-  label: undefined,
-  renderMode: '',
-  showLabel: true,
-  promptedFilters: [],
-  viewName: '',
-  parameters: undefined,
-  readonlyContextList: [],
-  dataRelationshipContext: null
-};
-
-SimpleTableSelect.propTypes = {
-  label: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired,
-  referenceList: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.string]).isRequired,
-  renderMode: PropTypes.string,
-  showLabel: PropTypes.bool,
-  promptedFilters: PropTypes.arrayOf(PropTypes.object),
-  viewName: PropTypes.string,
-  parameters: PropTypes.objectOf(PropTypes.any),
-  readonlyContextList: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.string]),
-  dataRelationshipContext: PropTypes.string
-};