@pega/sdk 0.0.3 → 0.0.4

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

@@ -1,11 +1,4 @@
-import React, {
-  type PropsWithChildren,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { type PropsWithChildren, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
@@ -35,12 +28,7 @@ import { Utils } from '../../../helpers/utils';
 import { getReferenceList } from '../../../helpers/field-group-utils';
 import { getDataPage } from '../../../helpers/data_page';
 import { getGenericFieldsLocalizedValue } from '../../../helpers/common-utils';
-import {
-  buildFieldsForTable,
-  filterData,
-  getConfigFields,
-  getContext,
-} from '../../../helpers/simpleTableHelpers';
+import { buildFieldsForTable, filterData, getConfigFields, getContext } from '../../../helpers/simpleTableHelpers';
 import type { PConnProps } from '@pega/sdk-react';
 import { format } from '../../../helpers/formatters';
 import { initializeColumns } from '../../ListView/utils';
@@ -116,9 +104,7 @@ let menuColumnLabel = '';
 const filterByColumns: any[] = [];
 let myRows: any[];
 
-export default function SimpleTableManual(
-  props: PropsWithChildren<SimpleTableManualProps>,
-) {
+export default function SimpleTableManual(props: PropsWithChildren<SimpleTableManualProps>) {
   const classes = useStyles();
   const {
     getPConnect,
@@ -156,16 +142,11 @@ export default function SimpleTableManual(
   const [containsDateOrTime, setContainsDateOrTime] = useState<boolean>(false);
   const [filterType, setFilterType] = useState<string>('string');
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [displayDialogFilterName, setDisplayDialogFilterName] =
-    useState<string>('');
-  const [displayDialogContainsFilter, setDisplayDialogContainsFilter] =
-    useState<string>('contains');
-  const [displayDialogContainsValue, setDisplayDialogContainsValue] =
-    useState<string>('');
-  const [displayDialogDateFilter, setDisplayDialogDateFilter] =
-    useState<string>('notequal');
-  const [displayDialogDateValue, setDisplayDialogDateValue] =
-    useState<string>('');
+  const [displayDialogFilterName, setDisplayDialogFilterName] = useState<string>('');
+  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 localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'SimpleTable';
@@ -180,16 +161,10 @@ export default function SimpleTableManual(
   const context = getPConnect().getContextName();
   const resolvedList = getReferenceList(pConn);
   pConn.setReferenceList(resolvedList);
-  const menuIconOverride$ = Utils.getImageSrc(
-    'trash',
-    Utils.getSDKStaticConentUrl(),
-  );
+  const menuIconOverride$ = Utils.getImageSrc('trash', Utils.getSDKStaticConentUrl());
 
-  const resolvedFields =
-    children?.[0]?.children || presets?.[0].children?.[0].children;
-  const primaryFieldsViewIndex = resolvedFields.findIndex(
-    (field) => field.config.value === 'pyPrimaryFields',
-  );
+  const resolvedFields = children?.[0]?.children || presets?.[0].children?.[0].children;
+  const primaryFieldsViewIndex = resolvedFields.findIndex((field) => field.config.value === 'pyPrimaryFields');
   // 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.
@@ -204,9 +179,7 @@ export default function SimpleTableManual(
   //  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';
@@ -215,19 +188,11 @@ export default function SimpleTableManual(
     (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 defaultView = editModeConfig ? editModeConfig.defaultView : viewForAddAndEditModal;
+  const bUseSeparateViewForEdit = editModeConfig ? editModeConfig.useSeparateViewForEdit : useSeparateViewForEdit;
   const editView = editModeConfig ? editModeConfig.editView : viewForEditModal;
 
-  const configFields = getConfigFields(
-    rawFields,
-    contextClass,
-    primaryFieldsViewIndex,
-  );
+  const configFields = getConfigFields(rawFields, contextClass, primaryFieldsViewIndex);
 
   const fieldsWithPropNames = rawFields.map((field, index) => {
     return {
@@ -272,9 +237,7 @@ export default function SimpleTableManual(
         );
     } else {
       // @ts-expect-error - An argument for 'fields' was not provided
-      getPConnect()
-        .getListActions()
-        .initDefaultPageInstructions(getPConnect().getReferenceList());
+      getPConnect().getListActions().initDefaultPageInstructions(getPConnect().getReferenceList());
     }
   }, []);
 
@@ -380,15 +343,11 @@ export default function SimpleTableManual(
           PCore.getConstants().RESOURCE_STATUS.CREATE,
         );
     } else {
-      pConn
-        .getListActions()
-        .insert({ classID: contextClass }, referenceList.length);
+      pConn.getListActions().insert({ classID: contextClass }, referenceList.length);
     }
 
     getPConnect().clearErrorMessages({
-      property: (
-        getPConnect().getStateProps() as any
-      )?.referenceList?.substring(1),
+      property: (getPConnect().getStateProps() as any)?.referenceList?.substring(1),
     } as any);
   };
 
@@ -429,10 +388,7 @@ export default function SimpleTableManual(
             config: {
               ...item.config,
               label: '',
-              displayMode:
-                readOnlyMode || allowEditingInModal
-                  ? 'DISPLAY_ONLY'
-                  : undefined,
+              displayMode: readOnlyMode || allowEditingInModal ? 'DISPLAY_ONLY' : undefined,
             },
           };
           const referenceListData = getReferenceList(pConn);
@@ -458,19 +414,15 @@ export default function SimpleTableManual(
     setElementsData(eleData);
   }
 
-  const handleRequestSort = (
-    event: React.MouseEvent<unknown>,
-    property: keyof any,
-  ) => {
+  const handleRequestSort = (event: React.MouseEvent<unknown>, property: keyof any) => {
     const isAsc = orderBy === property && order === 'asc';
     setOrder(isAsc ? 'desc' : 'asc');
     setOrderBy(property);
   };
 
-  const createSortHandler =
-    (property: keyof any) => (event: React.MouseEvent<unknown>) => {
-      handleRequestSort(event, property);
-    };
+  const createSortHandler = (property: keyof any) => (event: React.MouseEvent<unknown>) => {
+    handleRequestSort(event, property);
+  };
 
   function descendingComparator<T>(a: T, b: T, orderedBy: keyof T) {
     if (!orderedBy || (!a[orderedBy] && !b[orderedBy])) {
@@ -515,12 +467,7 @@ export default function SimpleTableManual(
     return newElements;
   }
 
-  function _menuClick(
-    event,
-    columnId: string,
-    columnType: string,
-    labelValue: string,
-  ) {
+  function _menuClick(event, columnId: string, columnType: string, labelValue: string) {
     menuColumnId = columnId;
     menuColumnType = columnType;
     menuColumnLabel = labelValue;
@@ -546,11 +493,7 @@ export default function SimpleTableManual(
     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);
@@ -688,21 +631,13 @@ export default function SimpleTableManual(
 
   return (
     <>
-      <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} ${required ? classes.tableLabel : ''}`}
-          >
+          <h3 className={`${classes.label} ${required ? classes.tableLabel : ''}`}>
             {propsToUse.label} {results()}
           </h3>
         )}
-        {validatemessage && (
-          <div className={classes.message}>{validatemessage}</div>
-        )}
+        {validatemessage && <div className={classes.message}>{validatemessage}</div>}
         <Table>
           <TableHead className={classes.header}>
             <TableRow>
@@ -711,43 +646,28 @@ export default function SimpleTableManual(
                   return null; // Skip rendering if hide = true
                 }
                 return (
-                  <TableCell
-                    key={`head-${displayedColumns[index]}`}
-                    className={classes.tableCell}
-                  >
-                    {(readOnlyMode || allowEditingInModal) &&
-                    field.cellRenderer !== 'DeleteIcon' ? (
+                  <TableCell key={`head-${displayedColumns[index]}`} className={classes.tableCell}>
+                    {(readOnlyMode || allowEditingInModal) && field.cellRenderer !== 'DeleteIcon' ? (
                       <div style={{ display: 'flex' }}>
                         <TableSortLabel
                           style={{ width: '75%' }}
                           active={orderBy === displayedColumns[index]}
-                          direction={
-                            orderBy === displayedColumns[index] ? order : 'asc'
-                          }
+                          direction={orderBy === displayedColumns[index] ? order : 'asc'}
                           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'}
+                              {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
                             </span>
                           ) : null}
                         </TableSortLabel>
                         <MoreIcon
                           style={{ cursor: 'pointer', zIndex: 1000 }}
-                          id='menu-icon'
+                          id="menu-icon"
                           onClick={(event) => {
-                            _menuClick(
-                              event,
-                              field.name,
-                              field.meta.type,
-                              field.label,
-                            );
+                            _menuClick(event, field.name, field.meta.type, field.label);
                           }}
                         />
                       </div>
@@ -769,10 +689,7 @@ export default function SimpleTableManual(
                     {row.map((item, childIndex) => {
                       const theColKey = `data-${index}-${childIndex}`;
                       return (
-                        <TableCell
-                          key={theColKey}
-                          className={classes.tableCell}
-                        >
+                        <TableCell key={theColKey} className={classes.tableCell}>
                           {item}
                         </TableCell>
                       );
@@ -780,16 +697,13 @@ export default function SimpleTableManual(
                     {showDeleteButton && (
                       <TableCell>
                         <button
-                          type='button'
-                          className='psdk-utility-button'
-                          id='delete-button'
-                          aria-label='Delete Cell'
+                          type="button"
+                          className="psdk-utility-button"
+                          id="delete-button"
+                          aria-label="Delete Cell"
                           onClick={() => deleteRecordFromInlineEditable(index)}
                         >
-                          <img
-                            className='psdk-utility-card-action-svg-icon'
-                            src={menuIconOverride$}
-                          />
+                          <img className="psdk-utility-card-action-svg-icon" src={menuIconOverride$} />
                         </button>
                       </TableCell>
                     )}
@@ -807,40 +721,30 @@ export default function SimpleTableManual(
                       {row.map((item, childIndex) => {
                         const theColKey = displayedColumns[childIndex];
                         return (
-                          <TableCell
-                            key={theColKey}
-                            className={classes.tableCell}
-                          >
+                          <TableCell key={theColKey} className={classes.tableCell}>
                             {item}
                           </TableCell>
                         );
                       })}
                       {showDeleteButton && (
-                        <TableCell
-                          key='DeleteIcon'
-                          className={classes.tableCell}
-                        >
+                        <TableCell key="DeleteIcon" className={classes.tableCell}>
                           <div>
                             <MoreIcon
-                              id='table-edit-menu-icon'
+                              id="table-edit-menu-icon"
                               className={classes.moreIcon}
                               onClick={(event) => {
                                 editMenuClick(event, index);
                               }}
                             />
                             <Menu
-                              id='table-edit-menu'
+                              id="table-edit-menu"
                               anchorEl={editAnchorEl}
                               keepMounted
                               open={Boolean(editAnchorEl)}
                               onClose={_menuClose}
                             >
-                              <MenuItem onClick={() => editRecord()}>
-                                Edit
-                              </MenuItem>
-                              <MenuItem onClick={() => deleteRecord()}>
-                                Delete
-                              </MenuItem>
+                              <MenuItem onClick={() => editRecord()}>Edit</MenuItem>
+                              <MenuItem onClick={() => deleteRecord()}>Delete</MenuItem>
                             </Menu>
                           </div>
                         </TableCell>
@@ -851,34 +755,20 @@ export default function SimpleTableManual(
           </TableBody>
         </Table>
         {((readOnlyMode && (!rowData || rowData?.length === 0)) ||
-          (editableMode &&
-            (!referenceList || referenceList?.length === 0))) && (
-          <div className='no-records' id='no-records'>
-            {getGenericFieldsLocalizedValue(
-              'COSMOSFIELDS.lists',
-              'No records found.',
-            )}
+          (editableMode && (!referenceList || referenceList?.length === 0))) && (
+          <div className="no-records" id="no-records">
+            {getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.')}
           </div>
         )}
       </TableContainer>
       {showAddRowButton && (
         <div style={{ fontSize: '1rem' }}>
-          <Link
-            style={{ cursor: 'pointer' }}
-            onClick={addRecord}
-            underline='hover'
-          >
+          <Link style={{ cursor: 'pointer' }} onClick={addRecord} underline="hover">
             + {localizedVal('Add', localeCategory)}
           </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>
@@ -886,35 +776,26 @@ export default function SimpleTableManual(
           <SubjectIcon /> Group
         </MenuItem>
       </Menu>
-      <Dialog
-        open={open}
-        onClose={_closeDialog}
-        aria-labelledby='form-dialog-title'
-      >
-        <DialogTitle id='form-dialog-title'>Filter: {filterBy}</DialogTitle>
+      <Dialog open={open} onClose={_closeDialog} aria-labelledby="form-dialog-title">
+        <DialogTitle id="form-dialog-title">Filter: {filterBy}</DialogTitle>
         <DialogContent>
           {containsDateOrTime ? (
             <>
-              <Select
-                variant='standard'
-                value={displayDialogDateFilter}
-                onChange={_dialogDateFilter}
-                fullWidth
-              >
-                <MenuItem value='notequal'>is not equal to</MenuItem>
-                <MenuItem value='equal'>is equal to</MenuItem>
-                <MenuItem value='after'>after</MenuItem>
-                <MenuItem value='before'>before</MenuItem>
-                <MenuItem value='null'>is null</MenuItem>
-                <MenuItem value='notnull'>is not null</MenuItem>
+              <Select variant="standard" value={displayDialogDateFilter} onChange={_dialogDateFilter} fullWidth>
+                <MenuItem value="notequal">is not equal to</MenuItem>
+                <MenuItem value="equal">is equal to</MenuItem>
+                <MenuItem value="after">after</MenuItem>
+                <MenuItem value="before">before</MenuItem>
+                <MenuItem value="null">is null</MenuItem>
+                <MenuItem value="notnull">is not null</MenuItem>
               </Select>
               {filterType === 'Date' && (
                 <TextField
-                  variant='standard'
+                  variant="standard"
                   autoFocus
-                  margin='dense'
-                  id='containsFilter'
-                  type='date'
+                  margin="dense"
+                  id="containsFilter"
+                  type="date"
                   fullWidth
                   value={displayDialogDateValue}
                   onChange={_dialogDateValue}
@@ -922,11 +803,11 @@ export default function SimpleTableManual(
               )}
               {filterType === 'DateTime' && (
                 <TextField
-                  variant='standard'
+                  variant="standard"
                   autoFocus
-                  margin='dense'
-                  id='containsFilter'
-                  type='datetime-local'
+                  margin="dense"
+                  id="containsFilter"
+                  type="datetime-local"
                   fullWidth
                   value={displayDialogDateValue}
                   onChange={_dialogDateValue}
@@ -934,11 +815,11 @@ export default function SimpleTableManual(
               )}
               {filterType === 'Time' && (
                 <TextField
-                  variant='standard'
+                  variant="standard"
                   autoFocus
-                  margin='dense'
-                  id='containsFilter'
-                  type='time'
+                  margin="dense"
+                  id="containsFilter"
+                  type="time"
                   fullWidth
                   value={displayDialogDateValue}
                   onChange={_dialogDateValue}
@@ -948,22 +829,22 @@ export default function SimpleTableManual(
           ) : (
             <>
               <Select
-                variant='standard'
-                id='filter'
+                variant="standard"
+                id="filter"
                 fullWidth
                 onChange={_dialogContainsFilter}
                 value={displayDialogContainsFilter}
               >
-                <MenuItem value='contains'>Contains</MenuItem>
-                <MenuItem value='equals'>Equals</MenuItem>
-                <MenuItem value='startswith'>Starts with</MenuItem>
+                <MenuItem value="contains">Contains</MenuItem>
+                <MenuItem value="equals">Equals</MenuItem>
+                <MenuItem value="startswith">Starts with</MenuItem>
               </Select>
               <TextField
-                variant='standard'
+                variant="standard"
                 autoFocus
-                margin='dense'
-                id='containsFilter'
-                type='text'
+                margin="dense"
+                id="containsFilter"
+                type="text"
                 fullWidth
                 value={displayDialogContainsValue}
                 onChange={_dialogContainsValue}
@@ -972,10 +853,10 @@ export default function SimpleTableManual(
           )}
         </DialogContent>
         <DialogActions>
-          <Button onClick={_closeDialog} color='secondary'>
+          <Button onClick={_closeDialog} color="secondary">
             Cancel
           </Button>
-          <Button onClick={_submitFilter} color='primary'>
+          <Button onClick={_submitFilter} color="primary">
             Submit
           </Button>
         </DialogActions>

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

@@ -30,7 +30,15 @@ export default function SimpleTableSelect(props: SimpleTableSelectProps) {
   const SimpleTable = getComponentFromRegistry('SimpleTable');
   const PromotedFilters = getComponentFromRegistry('PromotedFilters');
 
-  const { label, getPConnect, renderMode = '', showLabel = true, viewName = '', parameters, dataRelationshipContext = null } = props;
+  const {
+    label,
+    getPConnect,
+    renderMode = '',
+    showLabel = true,
+    viewName = '',
+    parameters,
+    dataRelationshipContext = null,
+  } = props;
 
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
   if (propsToUse.showLabel === false) {
@@ -47,7 +55,9 @@ export default function SimpleTableSelect(props: SimpleTableSelectProps) {
   }
 
   const pageReference = pConn.getPageReference();
-  let referenceProp = isMultiSelectMode ? selectionList.substring(1) : pageReference.substring(pageReference.lastIndexOf('.') + 1);
+  let referenceProp = isMultiSelectMode
+    ? selectionList.substring(1)
+    : pageReference.substring(pageReference.lastIndexOf('.') + 1);
   // Replace here to use the context name instead
   let contextPageReference: string | null = null;
   if (props.dataRelationshipContext !== null && selectionMode === 'single') {
@@ -78,10 +88,10 @@ export default function SimpleTableSelect(props: SimpleTableSelectProps) {
     defaultFieldDef: {
       showMenu: false,
       noContextMenu: true,
-      grouping: false
+      grouping: false,
     },
     itemKey: '$key',
-    defaultRowHeight
+    defaultRowHeight,
   };
 
   const listViewProps = {
@@ -99,7 +109,7 @@ export default function SimpleTableSelect(props: SimpleTableSelectProps) {
     additionalTableConfig,
     compositeKeys,
     viewName,
-    parameters
+    parameters,
   };
 
   const filters = (getPConnect().getRawMetadata() as any).config.promotedFilters ?? [];

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

@@ -26,9 +26,7 @@ interface SimpleTableSelectReadonlyProps extends PConnProps {
   displayMode?: string;
 }
 
-export default function SimpleTableSelectReadonly(
-  props: SimpleTableSelectReadonlyProps,
-) {
+export default function SimpleTableSelectReadonly(props: SimpleTableSelectReadonlyProps) {
   const {
     label = '',
     getPConnect,
@@ -67,22 +65,15 @@ export default function SimpleTableSelectReadonly(
       .map((field: any) => field.config.value);
 
     const defaultFields: any[] = rawConfig?.detailsDisplay || [];
-    if (
-      defaultFields?.length === 2 &&
-      defaultFields[0].config.value === defaultFields[1].config.value
-    ) {
+    if (defaultFields?.length === 2 && defaultFields[0].config.value === defaultFields[1].config.value) {
       defaultFields.splice(0, 1);
     }
     defaultFields.forEach((field: any) => {
       if (
-        (referenceType.toUpperCase() === CASE &&
-          !caseFields.includes(field?.config?.value)) ||
-        (referenceType.toUpperCase() === DATA &&
-          !dataFields.includes(field?.config?.value))
+        (referenceType.toUpperCase() === CASE && !caseFields.includes(field?.config?.value)) ||
+        (referenceType.toUpperCase() === DATA && !dataFields.includes(field?.config?.value))
       ) {
-        (
-          getPConnect().getRawMetadata() as any
-        ).config?.presets?.[0].children?.[0]?.children?.unshift(field);
+        (getPConnect().getRawMetadata() as any).config?.presets?.[0].children?.[0]?.children?.unshift(field);
       }
     });
 
@@ -102,17 +93,13 @@ export default function SimpleTableSelectReadonly(
     }
 
     return (
-      <Dialog open={modalOpen} onClose={closeModal} maxWidth='md' fullWidth>
+      <Dialog open={modalOpen} onClose={closeModal} maxWidth="md" fullWidth>
         <DialogTitle>{label}</DialogTitle>
         <DialogContent>
-          <SimpleTableManual
-            {...props}
-            {...readonlyContextObject}
-            classId={SIMPLE_TABLE_MANUAL_READONLY}
-          />
+          <SimpleTableManual {...props} {...readonlyContextObject} classId={SIMPLE_TABLE_MANUAL_READONLY} />
         </DialogContent>
         <DialogActions>
-          <Button onClick={closeModal} variant='contained'>
+          <Button onClick={closeModal} variant="contained">
             {localizedVal('Close', localeCategory)}
           </Button>
         </DialogActions>
@@ -172,18 +159,17 @@ export default function SimpleTableSelectReadonly(
             </Fragment>
           );
         })}
-        {listLength > 5 &&
-          !['combobox', 'checkboxgroup'].includes(displayAs) && (
-            <Link component='button' onClick={openModal} underline='hover'>
-              ({listLength} {localizedVal('Total', localeCategory)})
-            </Link>
-          )}
+        {listLength > 5 && !['combobox', 'checkboxgroup'].includes(displayAs) && (
+          <Link component="button" onClick={openModal} underline="hover">
+            ({listLength} {localizedVal('Total', localeCategory)})
+          </Link>
+        )}
       </div>
     );
   }
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return displayComp ?? <Typography variant='body2'>---</Typography>;
+    return displayComp ?? <Typography variant="body2">---</Typography>;
   }
 
   return (
@@ -196,7 +182,7 @@ export default function SimpleTableSelectReadonly(
       }}
     >
       {!hideLabel && label && (
-        <Typography variant='body2' color='text.secondary'>
+        <Typography variant="body2" color="text.secondary">
           {label}
         </Typography>
       )}