@pega/react-sdk-components 23.1.10 → 23.1.12

package/lib/components/template/SimpleTable/SimpleTable/SimpleTable.js

@@ -1,9 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable react-hooks/rules-of-hooks */
-import React from 'react';
-import { buildMetaForListView, getContext } from '../../../helpers/simpleTableHelpers';
 import { useRef } from 'react';
+import { buildMetaForListView, getContext } from '../../../helpers/simpleTableHelpers';
 import { getComponentFromMap } from '../../../../bridge/helpers/sdk_component_map';
-export default function SimpleTable(props /* : SimpleTableProps */) {
+export default function SimpleTable(props) {
     // Get emitted components from map (so we can get any override that may exist)
     const ListView = getComponentFromMap('ListView');
     const FieldGroupTemplate = getComponentFromMap('FieldGroupTemplate');
@@ -11,12 +11,14 @@ export default function SimpleTable(props /* : SimpleTableProps */) {
     const { getPConnect, multiRecordDisplayAs, allowTableEdit, label: labelProp, propertyLabel, displayMode, fieldMetadata, hideLabel, parameters, isDataObject, type, ruleClass, authorContext, name } = props;
     let { contextClass } = props;
     if (!contextClass) {
+        // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'.
         let listName = getPConnect().getComponentConfig().referenceList;
         listName = PCore.getAnnotationUtils().getPropertyName(listName);
         // was... contextClass = getPConnect().getFieldMetadata(listName)?.pageClass;
+        // @ts-ignore - Property 'getFieldMetadata' is private and only accessible within class 'C11nEnv'.
         const theFieldMetadata = getPConnect().getFieldMetadata(listName);
         if (theFieldMetadata) {
-            contextClass = theFieldMetadata['pageClass'];
+            contextClass = theFieldMetadata.pageClass;
         }
         else {
             contextClass = undefined;
@@ -24,14 +26,12 @@ export default function SimpleTable(props /* : SimpleTableProps */) {
     }
     if (multiRecordDisplayAs === 'fieldGroup') {
         const fieldGroupProps = { ...props, contextClass };
-        return React.createElement(FieldGroupTemplate, { ...fieldGroupProps });
+        return _jsx(FieldGroupTemplate, { ...fieldGroupProps });
     }
     const label = labelProp || propertyLabel;
     const propsToUse = { label, ...getPConnect().getInheritedProps() };
     const isDisplayModeEnabled = displayMode === 'DISPLAY_ONLY';
-    if (fieldMetadata &&
-        fieldMetadata.type === 'Page List' &&
-        fieldMetadata.dataRetrievalType === 'refer') {
+    if (fieldMetadata && fieldMetadata.type === 'Page List' && fieldMetadata.dataRetrievalType === 'refer') {
         const { children: [{ children: rawFields }], parameters: rawParams } = getPConnect().getRawMetadata().config;
         if (isDisplayModeEnabled && hideLabel) {
             propsToUse.label = '';
@@ -39,8 +39,8 @@ export default function SimpleTable(props /* : SimpleTableProps */) {
         const metaForListView = buildMetaForListView(fieldMetadata, rawFields, type, ruleClass, name, propsToUse.label, isDataObject, parameters // resolved params
         );
         const metaForPConnect = JSON.parse(JSON.stringify(metaForListView));
-        metaForPConnect.config.parameters =
-            rawParams ?? PCore.getMetadataUtils().getPropertyMetadata(name)?.datasource?.parameters;
+        // @ts-ignore - PCore.getMetadataUtils().getPropertyMetadata - An argument for 'currentClassID' was not provided.
+        metaForPConnect.config.parameters = rawParams ?? PCore.getMetadataUtils().getPropertyMetadata(name)?.datasource?.parameters;
         const { referenceListStr: referenceList } = getContext(getPConnect());
         let requiredContextForQueryInDisplayMode = {};
         if (isDisplayModeEnabled) {
@@ -62,17 +62,14 @@ export default function SimpleTable(props /* : SimpleTableProps */) {
             fieldName: authorContext,
             bInForm: true
         };
-        const listViewComponent = React.createElement(ListView, { ...listViewProps });
-        return listViewComponent;
+        return _jsx(ListView, { ...listViewProps });
     }
-    else {
-        const simpleTableManualProps = { ...props, contextClass };
-        if (allowTableEdit === false) {
-            simpleTableManualProps.hideAddRow = true;
-            simpleTableManualProps.hideDeleteRow = true;
-            simpleTableManualProps.disableDragDrop = true;
-        }
-        return React.createElement(SimpleTableManual, { ...simpleTableManualProps });
+    const simpleTableManualProps = { ...props, contextClass };
+    if (allowTableEdit === false) {
+        simpleTableManualProps.hideAddRow = true;
+        simpleTableManualProps.hideDeleteRow = true;
+        simpleTableManualProps.disableDragDrop = true;
     }
+    return _jsx(SimpleTableManual, { ...simpleTableManualProps });
 }
 //# sourceMappingURL=SimpleTable.js.map

package/lib/components/template/SimpleTable/SimpleTable/SimpleTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleTable.js","sourceRoot":"","sources":["../../../../../src/components/template/SimpleTable/SimpleTable/SimpleTable.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport React from 'react';\nimport { buildMetaForListView, getContext } from '../../../helpers/simpleTableHelpers';\nimport { useRef } from 'react';\nimport { getComponentFromMap } from '../../../../bridge/helpers/sdk_component_map';\n\n// import type { PConnProps } from '../../../../types/PConnProps';\n\n// Can't use SimpleTableProps until getComponentConfig() and getFieldMetadata() are NOT private\n// interface SimpleTableProps extends PConnProps {\n//   // If any, enter additional props that only exist on this component\n//   multiRecordDisplayAs: string,\n//   allowTableEdit: boolean,\n//   contextClass: any\n// }\ndeclare const PCore: any;\n\nexport default function SimpleTable(props /* : SimpleTableProps */) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const ListView = getComponentFromMap('ListView');\n  const FieldGroupTemplate = getComponentFromMap('FieldGroupTemplate');\n  const SimpleTableManual = getComponentFromMap('SimpleTableManual');\n\n  const {\n    getPConnect,\n    multiRecordDisplayAs,\n    allowTableEdit,\n    label: labelProp,\n    propertyLabel,\n    displayMode,\n    fieldMetadata,\n    hideLabel,\n    parameters,\n    isDataObject,\n    type,\n    ruleClass,\n    authorContext,\n    name\n  } = props;\n\n  let { contextClass } = props;\n  if (!contextClass) {\n    let listName = getPConnect().getComponentConfig().referenceList;\n    listName = PCore.getAnnotationUtils().getPropertyName(listName);\n    // was... contextClass = getPConnect().getFieldMetadata(listName)?.pageClass;\n    const theFieldMetadata = getPConnect().getFieldMetadata(listName);\n    if (theFieldMetadata) {\n      contextClass = theFieldMetadata['pageClass'];\n    } else {\n      contextClass = undefined;\n    }\n  }\n  if (multiRecordDisplayAs === 'fieldGroup') {\n    const fieldGroupProps = { ...props, contextClass };\n    return <FieldGroupTemplate {...fieldGroupProps} />;\n  }\n\n  const label = labelProp || propertyLabel;\n  const propsToUse = { label, ...getPConnect().getInheritedProps() };\n  const isDisplayModeEnabled = displayMode === 'DISPLAY_ONLY';\n\n  if (\n    fieldMetadata &&\n    fieldMetadata.type === 'Page List' &&\n    fieldMetadata.dataRetrievalType === 'refer'\n  ) {\n    const {\n      children: [{ children: rawFields }],\n      parameters: rawParams\n    } = getPConnect().getRawMetadata().config;\n    if (isDisplayModeEnabled && hideLabel) {\n      propsToUse.label = '';\n    }\n\n    const metaForListView = buildMetaForListView(\n      fieldMetadata,\n      rawFields,\n      type,\n      ruleClass,\n      name,\n      propsToUse.label,\n      isDataObject,\n      parameters // resolved params\n    );\n\n    const metaForPConnect = JSON.parse(JSON.stringify(metaForListView));\n    metaForPConnect.config.parameters =\n      rawParams ?? PCore.getMetadataUtils().getPropertyMetadata(name)?.datasource?.parameters;\n\n    const { referenceListStr: referenceList } = getContext(getPConnect());\n    let requiredContextForQueryInDisplayMode = {};\n    if (isDisplayModeEnabled) {\n      requiredContextForQueryInDisplayMode = {\n        referenceList\n      };\n    }\n    const options = {\n      context: getPConnect().getContextName(),\n      pageReference: getPConnect().getPageReference(),\n      ...requiredContextForQueryInDisplayMode\n    };\n\n    const refToPConnect = useRef(\n      PCore.createPConnect({ meta: metaForPConnect, options }).getPConnect\n    ).current; // getPConnect should be created only once.\n    /* BUG-637178 : need to send context */\n    const listViewProps = {\n      ...metaForListView.config,\n      getPConnect: refToPConnect,\n      displayMode,\n      fieldName: authorContext,\n      bInForm: true\n    };\n    const listViewComponent = <ListView {...listViewProps} />;\n    return listViewComponent;\n  } else {\n    const simpleTableManualProps = { ...props, contextClass };\n    if (allowTableEdit === false) {\n      simpleTableManualProps.hideAddRow = true;\n      simpleTableManualProps.hideDeleteRow = true;\n      simpleTableManualProps.disableDragDrop = true;\n    }\n    return <SimpleTableManual {...simpleTableManualProps} />;\n  }\n}\n"]}
+{"version":3,"file":"SimpleTable.js","sourceRoot":"","sources":["../../../../../src/components/template/SimpleTable/SimpleTable/SimpleTable.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport { useRef } from 'react';\n\nimport { buildMetaForListView, getContext } from '../../../helpers/simpleTableHelpers';\nimport { getComponentFromMap } from '../../../../bridge/helpers/sdk_component_map';\n\nimport { PConnProps } from '../../../../types/PConnProps';\n\n// Can't use SimpleTableProps until getComponentConfig() and getFieldMetadata() are NOT private\ninterface SimpleTableProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n  multiRecordDisplayAs: string;\n  allowTableEdit: boolean;\n  contextClass: any;\n  label: string;\n  propertyLabel?: string;\n  displayMode?: string;\n  fieldMetadata?: any;\n  hideLabel?: boolean;\n  parameters?: any;\n  isDataObject?: boolean;\n  type?: string;\n  ruleClass?: string;\n  authorContext?: string;\n  name?: string;\n}\n\nexport default function SimpleTable(props: SimpleTableProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const ListView = getComponentFromMap('ListView');\n  const FieldGroupTemplate = getComponentFromMap('FieldGroupTemplate');\n  const SimpleTableManual = getComponentFromMap('SimpleTableManual');\n\n  const {\n    getPConnect,\n    multiRecordDisplayAs,\n    allowTableEdit,\n    label: labelProp,\n    propertyLabel,\n    displayMode,\n    fieldMetadata,\n    hideLabel,\n    parameters,\n    isDataObject,\n    type,\n    ruleClass,\n    authorContext,\n    name\n  } = props;\n\n  let { contextClass } = props;\n  if (!contextClass) {\n    // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'.\n    let listName = getPConnect().getComponentConfig().referenceList;\n    listName = PCore.getAnnotationUtils().getPropertyName(listName);\n    // was... contextClass = getPConnect().getFieldMetadata(listName)?.pageClass;\n    // @ts-ignore - Property 'getFieldMetadata' is private and only accessible within class 'C11nEnv'.\n    const theFieldMetadata = getPConnect().getFieldMetadata(listName);\n    if (theFieldMetadata) {\n      contextClass = theFieldMetadata.pageClass;\n    } else {\n      contextClass = undefined;\n    }\n  }\n  if (multiRecordDisplayAs === 'fieldGroup') {\n    const fieldGroupProps = { ...props, contextClass };\n    return <FieldGroupTemplate {...fieldGroupProps} />;\n  }\n\n  const label = labelProp || propertyLabel;\n  const propsToUse = { label, ...getPConnect().getInheritedProps() };\n  const isDisplayModeEnabled = displayMode === 'DISPLAY_ONLY';\n\n  if (fieldMetadata && fieldMetadata.type === 'Page List' && fieldMetadata.dataRetrievalType === 'refer') {\n    const {\n      children: [{ children: rawFields }],\n      parameters: rawParams\n    } = (getPConnect().getRawMetadata() as any).config;\n    if (isDisplayModeEnabled && hideLabel) {\n      propsToUse.label = '';\n    }\n\n    const metaForListView = buildMetaForListView(\n      fieldMetadata,\n      rawFields,\n      type,\n      ruleClass,\n      name,\n      propsToUse.label,\n      isDataObject,\n      parameters // resolved params\n    );\n\n    const metaForPConnect = JSON.parse(JSON.stringify(metaForListView));\n    // @ts-ignore - PCore.getMetadataUtils().getPropertyMetadata - An argument for 'currentClassID' was not provided.\n    metaForPConnect.config.parameters = rawParams ?? PCore.getMetadataUtils().getPropertyMetadata(name)?.datasource?.parameters;\n\n    const { referenceListStr: referenceList } = getContext(getPConnect());\n    let requiredContextForQueryInDisplayMode = {};\n    if (isDisplayModeEnabled) {\n      requiredContextForQueryInDisplayMode = {\n        referenceList\n      };\n    }\n    const options = {\n      context: getPConnect().getContextName(),\n      pageReference: getPConnect().getPageReference(),\n      ...requiredContextForQueryInDisplayMode\n    };\n\n    const refToPConnect = useRef(PCore.createPConnect({ meta: metaForPConnect, options }).getPConnect).current; // getPConnect should be created only once.\n    /* BUG-637178 : need to send context */\n    const listViewProps = {\n      ...metaForListView.config,\n      getPConnect: refToPConnect,\n      displayMode,\n      fieldName: authorContext,\n      bInForm: true\n    };\n    return <ListView {...listViewProps} />;\n  }\n  const simpleTableManualProps: any = { ...props, contextClass };\n  if (allowTableEdit === false) {\n    simpleTableManualProps.hideAddRow = true;\n    simpleTableManualProps.hideDeleteRow = true;\n    simpleTableManualProps.disableDragDrop = true;\n  }\n  return <SimpleTableManual {...simpleTableManualProps} />;\n}\n"]}

package/lib/components/template/SimpleTable/SimpleTableManual/SimpleTableManual.d.ts

@@ -1,20 +1,25 @@
-/// <reference types="react" />
-import type { PConnProps } from '../../../../types/PConnProps';
+import { PropsWithChildren } from 'react';
+import { PConnProps } from '../../../../types/PConnProps';
 interface SimpleTableManualProps extends PConnProps {
     hideAddRow?: boolean;
     hideDeleteRow?: boolean;
-    disableDragDrop?: boolean;
-    referenceList?: Array<any>;
-    children?: Array<any>;
+    referenceList?: any[];
     renderMode?: string;
-    presets?: Array<any>;
+    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;
 }
-export default function SimpleTableManual(props: SimpleTableManualProps): JSX.Element;
+export default function SimpleTableManual(props: PropsWithChildren<SimpleTableManualProps>): JSX.Element;
 export {};
 //# sourceMappingURL=SimpleTableManual.d.ts.map

package/lib/components/template/SimpleTable/SimpleTableManual/SimpleTableManual.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleTableManual.d.ts","sourceRoot":"","sources":["../../../../../src/components/template/SimpleTable/SimpleTableManual/SimpleTableManual.tsx"],"names":[],"mappings":";AAiCA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAE/D,UAAU,sBAAuB,SAAQ,UAAU;IAEjD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,aAAa,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,GAAG,CAAA;CACpB;AAsCD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAunBtE"}
+{"version":3,"file":"SimpleTableManual.d.ts","sourceRoot":"","sources":["../../../../../src/components/template/SimpleTable/SimpleTableManual/SimpleTableManual.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,iBAAiB,EAAgD,MAAM,OAAO,CAAC;AA8B/F,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAG1D,UAAU,sBAAuB,SAAQ,UAAU;IAEjD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,GAAG,EAAE,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oBAAoB,CAAC,EAAE,GAAG,CAAC;IAC3B,sBAAsB,CAAC,EAAE,GAAG,CAAC;IAC7B,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,EAAE,GAAG,CAAC;IAC5B,gBAAgB,EAAE,GAAG,CAAC;CACvB;AAoCD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAAK,EAAE,iBAAiB,CAAC,sBAAsB,CAAC,eAwrBzF"}

package/lib/components/template/SimpleTable/SimpleTableManual/SimpleTableManual.js

@@ -1,5 +1,6 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable no-nested-ternary */
-import React, { useEffect, useState } from 'react';
+import { 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,13 +9,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 '../../../helpers/simpleTableHelpers';
-import { getDataPage } from '../../../helpers/data_page';
 import Link from '@material-ui/core/Link';
-import { getReferenceList } from '../../../helpers/field-group-utils';
-import { Utils } from '../../../helpers/utils';
 import { createElement } from 'react';
-import createPConnectComponent from '../../../../bridge/react_pconnect';
 import TableSortLabel from '@material-ui/core/TableSortLabel';
 import MoreIcon from '@material-ui/icons/MoreVert';
 import Menu from '@material-ui/core/Menu';
@@ -28,6 +24,12 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import Select from '@material-ui/core/Select';
 import Button from '@material-ui/core/Button';
 import TextField from '@material-ui/core/TextField';
+import createPConnectComponent from '../../../../bridge/react_pconnect';
+import { Utils } from '../../../helpers/utils';
+import { getReferenceList } from '../../../helpers/field-group-utils';
+import { getDataPage } from '../../../helpers/data_page';
+import { buildFieldsForTable, filterData, getContext } from '../../../helpers/simpleTableHelpers';
+import { format } from '../../../helpers/formatters';
 const useStyles = makeStyles(( /* theme */) => ({
     label: {
         margin: '8px'
@@ -62,24 +64,27 @@ let myRows;
 export default function SimpleTableManual(props) {
     const classes = useStyles();
     const { getPConnect, referenceList = [], // if referenceList not in configProps$, default to empy list
-    children, renderMode, presets, label: labelProp, showLabel, dataPageName, contextClass, hideAddRow, hideDeleteRow, propertyLabel, fieldMetadata } = props;
+    children, renderMode, presets, label: labelProp, showLabel, dataPageName, contextClass, hideAddRow, hideDeleteRow, propertyLabel, fieldMetadata, editMode, addAndEditRowsWithin, viewForAddAndEditModal, editModeConfig, displayMode, useSeparateViewForEdit, viewForEditModal } = props;
     const pConn = getPConnect();
     const [rowData, setRowData] = useState([]);
     const [elements, setElementsData] = useState([]);
     const [order, setOrder] = useState('asc');
     const [orderBy, setOrderBy] = useState('');
     const [anchorEl, setAnchorEl] = useState(null);
+    const [editAnchorEl, setEditAnchorEl] = useState(null);
     const [open, setOpen] = useState(false);
     const [filterBy, setFilterBy] = useState();
     const [containsDateOrTime, setContainsDateOrTime] = useState(false);
     const [filterType, setFilterType] = useState('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('');
     const [displayDialogContainsFilter, setDisplayDialogContainsFilter] = useState('contains');
     const [displayDialogContainsValue, setDisplayDialogContainsValue] = useState('');
     const [displayDialogDateFilter, setDisplayDialogDateFilter] = useState('notequal');
     const [displayDialogDateValue, setDisplayDialogDateValue] = useState('');
+    const selectedRowIndex = 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) {
@@ -88,7 +93,6 @@ export default function SimpleTableManual(props) {
     // 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());
     const resolvedFields = children?.[0]?.children || presets?.[0].children?.[0].children;
@@ -103,22 +107,32 @@ export default function SimpleTableManual(props) {
     //    config.value (ex: "@P .DeclarantChoice") or
     //    config.datasource (ex: "@ASSOCIATED .DeclarantChoice")
     //  Neither of these appear in the resolved props
-    const rawConfig = rawMetadata?.["config"];
+    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
     //  resolved. The buildFieldsForTable helper just removes the "@P " (which is what
@@ -126,21 +140,44 @@ export default function SimpleTableManual(props) {
     //  unchanged config info. For now, much of the info here is carried over from
     //  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);
     // return the value that should be shown as the contents for the given row data
     //  of the given row field
     function getRowValue(inRowData, inColKey) {
         // See what data (if any) we have to display
-        const refKeys = inColKey.split('.');
+        const refKeys = inColKey?.split('.');
         let valBuilder = inRowData;
         for (const key of refKeys) {
             valBuilder = valBuilder[key];
         }
-        return valBuilder;
+        return getFormattedValue(valBuilder, inColKey);
     }
     const formatRowsData = data => {
         if (!data)
@@ -194,21 +231,33 @@ export default function SimpleTableManual(props) {
     // console.log(`SimpleTable rowData (${rowData.length} row(s)):`);
     // 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()?.referenceList?.substring(1)
+        });
     };
-    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) => {
+        pConn.getListActions().deleteEntry(index);
+    };
     function buildElementsForTable() {
         const eleData = [];
         referenceList.forEach((element, index) => {
@@ -246,26 +295,21 @@ export default function SimpleTableManual(props) {
         handleRequestSort(event, property);
     };
     function descendingComparator(a, b, orderedBy) {
-        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;
     }
-    function getComparator(theOrder, orderedBy
-    // eslint-disable-next-line no-unused-vars
-    ) {
-        return theOrder === 'desc'
-            ? (a, b) => descendingComparator(a, b, orderedBy)
-            : (a, b) => -descendingComparator(a, b, orderedBy);
+    function getComparator(theOrder, 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(array, comparator) {
         const stabilizedThis = array.map((el, index) => [el, index]);
         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;
@@ -279,8 +323,13 @@ export default function SimpleTableManual(props) {
         menuColumnLabel = labelValue;
         setAnchorEl(event.currentTarget);
     }
+    function editMenuClick(event, index) {
+        selectedRowIndex.current = index;
+        setEditAnchorEl(event.currentTarget);
+    }
     function _menuClose() {
         setAnchorEl(null);
+        setEditAnchorEl(null);
     }
     function _filterMenu() {
         setAnchorEl(null);
@@ -288,9 +337,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);
@@ -353,15 +400,15 @@ 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;
@@ -371,14 +418,14 @@ export default function SimpleTableManual(props) {
             // add in
             const filterObj = {};
             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);
         }
@@ -390,9 +437,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;
@@ -402,89 +449,32 @@ export default function SimpleTableManual(props) {
     }
     function results() {
         const len = editableMode ? elements.length : rowData.length;
-        return len ? (React.createElement("span", { style: { fontSize: '0.9em', opacity: '0.7' } },
-            len,
-            " result",
-            len > 1 ? 's' : '')) : null;
+        return len ? (_jsxs("span", { style: { fontSize: '0.9em', opacity: '0.7' }, children: [len, " result", len > 1 ? 's' : ''] })) : null;
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(TableContainer, { component: Paper, style: { margin: '4px 0px' }, id: "simple-table-manual" },
-            propsToUse.label && (React.createElement("h3", { className: classes.label },
-                propsToUse.label,
-                " ",
-                results())),
-            React.createElement(Table, null,
-                React.createElement(TableHead, { className: classes.header },
-                    React.createElement(TableRow, null, fieldDefs.map((field, index) => {
-                        return (React.createElement(TableCell, { key: `head-${displayedColumns[index]}`, className: classes.tableCell }, readOnlyMode ? (React.createElement("div", null,
-                            React.createElement(TableSortLabel, { active: orderBy === displayedColumns[index], direction: orderBy === displayedColumns[index] ? order : 'asc', onClick: createSortHandler(displayedColumns[index]) },
-                                field.label,
-                                _showFilteredIcon(field.name) && (React.createElement(FilterListIcon, { className: classes.moreIcon })),
-                                orderBy === displayedColumns[index] ? (React.createElement("span", { className: classes.visuallyHidden }, order === 'desc' ? 'sorted descending' : 'sorted ascending')) : null),
-                            React.createElement(MoreIcon, { id: 'menu-icon', className: classes.moreIcon, onClick: event => {
-                                    _menuClick(event, field.name, field.meta.type, field.label);
-                                } }))) : (field.label)));
-                    }))),
-                React.createElement(TableBody, null,
-                    editableMode &&
-                        elements.map((row, index) => {
-                            const theKey = `row-${index}`;
-                            return (React.createElement(TableRow, { key: theKey },
-                                row.map((item, childIndex) => {
-                                    const theColKey = `data-${index}-${childIndex}`;
-                                    return (React.createElement(TableCell, { key: theColKey, className: classes.tableCell }, item));
-                                }),
-                                showDeleteButton && (React.createElement(TableCell, null,
-                                    React.createElement("button", { type: 'button', className: 'psdk-utility-button', id: 'delete-button', onClick: () => deleteRecord(index) },
-                                        React.createElement("img", { className: 'psdk-utility-card-action-svg-icon', src: menuIconOverride$ }))))));
-                        }),
-                    readOnlyMode &&
-                        rowData &&
-                        rowData.length > 0 &&
-                        stableSort(rowData, getComparator(order, orderBy))
-                            .slice(0)
-                            .map(row => {
-                            return (React.createElement(TableRow, { key: row[displayedColumns[0]] }, displayedColumns.map(colKey => {
-                                return (React.createElement(TableCell, { key: colKey, className: classes.tableCell }, typeof row[colKey] === 'boolean' && !row[colKey]
-                                    ? 'False'
-                                    : typeof row[colKey] === 'boolean' && row[colKey]
-                                        ? 'True'
-                                        : row[colKey]));
-                            })));
-                        }))),
-            readOnlyMode && rowData && rowData.length === 0 && (React.createElement("div", { className: 'no-records', id: 'no-records' }, "No records found.")),
-            editableMode && referenceList && referenceList.length === 0 && (React.createElement("div", { className: 'no-records', id: 'no-records' }, "No records found."))),
-        showAddRowButton && (React.createElement("div", { style: { fontSize: '1rem' } },
-            React.createElement(Link, { style: { cursor: 'pointer' }, onClick: addRecord }, "+ Add"))),
-        React.createElement(Menu, { id: 'simple-menu', anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: _menuClose },
-            React.createElement(MenuItem, { onClick: _filterMenu },
-                React.createElement(FilterListIcon, null),
-                " Filter"),
-            React.createElement(MenuItem, { onClick: _groupMenu },
-                React.createElement(SubjectIcon, null),
-                " Group")),
-        React.createElement(Dialog, { open: open, onClose: _closeDialog, "aria-labelledby": 'form-dialog-title' },
-            React.createElement(DialogTitle, { id: 'form-dialog-title' },
-                "Filter: ",
-                filterBy),
-            React.createElement(DialogContent, null, containsDateOrTime ? (React.createElement(React.Fragment, null,
-                React.createElement(Select, { value: displayDialogDateFilter, onChange: _dialogDateFilter, fullWidth: true },
-                    React.createElement(MenuItem, { value: 'notequal' }, "is not equal to"),
-                    React.createElement(MenuItem, { value: 'equal' }, "is equal to"),
-                    React.createElement(MenuItem, { value: 'after' }, "after"),
-                    React.createElement(MenuItem, { value: 'before' }, "before"),
-                    React.createElement(MenuItem, { value: 'null' }, "is null"),
-                    React.createElement(MenuItem, { value: 'notnull' }, "is not null")),
-                filterType === 'Date' && (React.createElement(TextField, { autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'date', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue })),
-                filterType === 'DateTime' && (React.createElement(TextField, { autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'datetime-local', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue })),
-                filterType === 'Time' && (React.createElement(TextField, { autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'time', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue })))) : (React.createElement(React.Fragment, null,
-                React.createElement(Select, { id: 'filter', fullWidth: true, onChange: _dialogContainsFilter, value: displayDialogContainsFilter },
-                    React.createElement(MenuItem, { value: 'contains' }, "Contains"),
-                    React.createElement(MenuItem, { value: 'equals' }, "Equals"),
-                    React.createElement(MenuItem, { value: 'startswith' }, "Starts with")),
-                React.createElement(TextField, { autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'text', fullWidth: true, value: displayDialogContainsValue, onChange: _dialogContainsValue })))),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { onClick: _closeDialog, color: 'secondary' }, "Cancel"),
-                React.createElement(Button, { onClick: _submitFilter, color: 'primary' }, "Submit")))));
+    return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { component: Paper, style: { margin: '4px 0px' }, id: 'simple-table-manual', children: [propsToUse.label && (_jsxs("h3", { className: classes.label, children: [propsToUse.label, " ", results()] })), _jsxs(Table, { children: [_jsx(TableHead, { className: classes.header, children: _jsx(TableRow, { children: fieldDefs.map((field, index) => {
+                                        return (_jsx(TableCell, { className: classes.tableCell, children: readOnlyMode ? (_jsxs("div", { children: [_jsxs(TableSortLabel, { active: orderBy === displayedColumns[index], direction: orderBy === displayedColumns[index] ? order : 'asc', onClick: createSortHandler(displayedColumns[index]), children: [field.label || '---', _showFilteredIcon(field.name) && _jsx(FilterListIcon, { className: classes.moreIcon }), orderBy === displayedColumns[index] ? (_jsx("span", { className: classes.visuallyHidden, children: order === 'desc' ? 'sorted descending' : 'sorted ascending' })) : null] }), _jsx(MoreIcon, { id: 'menu-icon', className: classes.moreIcon, onClick: event => {
+                                                            _menuClick(event, field.name, field.meta.type, field.label);
+                                                        } })] })) : (field.label) }, `head-${displayedColumns[index]}`));
+                                    }) }) }), _jsxs(TableBody, { children: [editableMode &&
+                                        elements.map((row, index) => {
+                                            const theKey = `row-${index}`;
+                                            return (_jsxs(TableRow, { children: [row.map((item, childIndex) => {
+                                                        const theColKey = `data-${index}-${childIndex}`;
+                                                        return (_jsx(TableCell, { className: classes.tableCell, children: item }, theColKey));
+                                                    }), showDeleteButton && (_jsx(TableCell, { children: _jsx("button", { type: 'button', className: 'psdk-utility-button', id: 'delete-button', "aria-label": 'Delete Cell', onClick: () => deleteRecordFromInlineEditable(index), children: _jsx("img", { className: 'psdk-utility-card-action-svg-icon', src: menuIconOverride$ }) }) }))] }, theKey));
+                                        }), (readOnlyMode || allowEditingInModal) &&
+                                        rowData &&
+                                        rowData.length > 0 &&
+                                        stableSort(rowData, getComparator(order, orderBy))
+                                            .slice(0)
+                                            .map((row, index) => {
+                                            return (
+                                            // eslint-disable-next-line react/no-array-index-key
+                                            _jsx(TableRow, { children: displayedColumns.map(colKey => {
+                                                    return (_jsx(TableCell, { className: classes.tableCell, children: showDeleteButton && colKey === 'DeleteIcon' ? (_jsxs("div", { children: [_jsx(MoreIcon, { id: 'table-edit-menu-icon', className: classes.moreIcon, onClick: event => {
+                                                                        editMenuClick(event, index);
+                                                                    } }), _jsxs(Menu, { id: 'table-edit-menu', anchorEl: editAnchorEl, keepMounted: true, open: Boolean(editAnchorEl), onClose: _menuClose, children: [_jsx(MenuItem, { onClick: () => editRecord(), children: "Edit" }), _jsx(MenuItem, { onClick: () => deleteRecord(), children: "Delete" })] })] })) : typeof row[colKey] === 'boolean' && !row[colKey] ? ('False') : typeof row[colKey] === 'boolean' && row[colKey] ? ('True') : (row[colKey] || '---') }, colKey));
+                                                }) }, index));
+                                        })] })] }), readOnlyMode && rowData && rowData.length === 0 && (_jsx("div", { className: 'no-records', id: 'no-records', children: "No records found." })), editableMode && referenceList && referenceList.length === 0 && (_jsx("div", { className: 'no-records', id: 'no-records', children: "No records found." }))] }), showAddRowButton && (_jsx("div", { style: { fontSize: '1rem' }, children: _jsx(Link, { style: { cursor: 'pointer' }, onClick: addRecord, children: "+ Add" }) })), _jsxs(Menu, { id: 'simple-menu', anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: _menuClose, children: [_jsxs(MenuItem, { onClick: _filterMenu, children: [_jsx(FilterListIcon, {}), " Filter"] }), _jsxs(MenuItem, { onClick: _groupMenu, children: [_jsx(SubjectIcon, {}), " Group"] })] }), _jsxs(Dialog, { open: open, onClose: _closeDialog, "aria-labelledby": 'form-dialog-title', children: [_jsxs(DialogTitle, { id: 'form-dialog-title', children: ["Filter: ", filterBy] }), _jsx(DialogContent, { children: containsDateOrTime ? (_jsxs(_Fragment, { children: [_jsxs(Select, { value: displayDialogDateFilter, onChange: _dialogDateFilter, fullWidth: true, children: [_jsx(MenuItem, { value: 'notequal', children: "is not equal to" }), _jsx(MenuItem, { value: 'equal', children: "is equal to" }), _jsx(MenuItem, { value: 'after', children: "after" }), _jsx(MenuItem, { value: 'before', children: "before" }), _jsx(MenuItem, { value: 'null', children: "is null" }), _jsx(MenuItem, { value: 'notnull', children: "is not null" })] }), filterType === 'Date' && (_jsx(TextField, { autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'date', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue })), filterType === 'DateTime' && (_jsx(TextField, { autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'datetime-local', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue })), filterType === 'Time' && (_jsx(TextField, { autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'time', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue }))] })) : (_jsxs(_Fragment, { children: [_jsxs(Select, { id: 'filter', fullWidth: true, onChange: _dialogContainsFilter, value: displayDialogContainsFilter, children: [_jsx(MenuItem, { value: 'contains', children: "Contains" }), _jsx(MenuItem, { value: 'equals', children: "Equals" }), _jsx(MenuItem, { value: 'startswith', children: "Starts with" })] }), _jsx(TextField, { autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'text', fullWidth: true, value: displayDialogContainsValue, onChange: _dialogContainsValue })] })) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: _closeDialog, color: 'secondary', children: "Cancel" }), _jsx(Button, { onClick: _submitFilter, color: 'primary', children: "Submit" })] })] })] }));
 }
 //# sourceMappingURL=SimpleTableManual.js.map