@pega/react-sdk-overrides 0.25.1 → 0.25.3

package/lib/template/CaseView/CaseView.tsx

@@ -1,16 +1,14 @@
-/* eslint-disable react/jsx-boolean-value */
-
-import { PropsWithChildren, ReactElement, useContext, useEffect, useState } from 'react';
+import { type PropsWithChildren, type ReactElement, useContext, useEffect, useState } from 'react';
 import { Avatar, Card, CardHeader, Divider, Typography } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface CaseViewProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -45,7 +43,7 @@ const useStyles = makeStyles(theme => ({
     padding: theme.spacing(1)
   },
   caseViewIconImage: {
-    filter: 'invert(100%)'
+    filter: 'var(--svg-color)'
   }
 }));
 
@@ -114,7 +112,7 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
   const theTabsRegionChildren = theTabsRegion.props.getPConnect().getChildren();
 
   // vertTabInfo is sent to VerticalTabs component
-  const vertTabInfo: Object[] = [];
+  const vertTabInfo: object[] = [];
 
   // deferLoadInfo is sent to DeferLoad component (currently selected entry)
   const deferLoadInfo: any[] = [];
@@ -208,8 +206,8 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
     if (!displayOnlyFA) {
       // show full portal
       return (
-        <Grid container>
-          <Grid item xs={3}>
+        <Grid2 container>
+          <Grid2 size={{ xs: 3 }}>
             <div hidden={true} id='current-caseID'>
               {currentCaseID}
             </div>
@@ -238,29 +236,25 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
               <Divider />
               {vertTabInfo.length > 1 && <VerticalTabs tabconfig={vertTabInfo} />}
             </Card>
-          </Grid>
+          </Grid2>
 
-          <Grid item xs={6}>
+          <Grid2 size={{ xs: 6 }}>
             {theStagesRegion}
             {theTodoRegion}
             {deferLoadInfo.length > 0 && (
               <DeferLoad getPConnect={getPConnect} name={deferLoadInfo[activeVertTab].config.name} isTab lastUpdateCaseTime={lastUpdateCaseTime} />
             )}
-          </Grid>
+          </Grid2>
 
-          <Grid item xs={3}>
-            {theUtilitiesRegion}
-          </Grid>
-        </Grid>
+          <Grid2 size={{ xs: 3 }}>{theUtilitiesRegion}</Grid2>
+        </Grid2>
       );
     }
     // displayOnlyFA - only show the "todo" region
     return (
-      <Grid container>
-        <Grid item xs={12}>
-          {theTodoRegion}
-        </Grid>
-      </Grid>
+      <Grid2 container>
+        <Grid2 size={{ xs: 12 }}>{theTodoRegion}</Grid2>
+      </Grid2>
     );
   }
 

package/lib/template/CaseViewActionsMenu/CaseViewActionsMenu.tsx

@@ -3,7 +3,7 @@ import Button from '@mui/material/Button';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import Snackbar from '@mui/material/Snackbar';
 import IconButton from '@mui/material/IconButton';
 import CloseIcon from '@mui/icons-material/Close';

package/lib/template/Confirmation/Confirmation.tsx

@@ -1,11 +1,10 @@
-/* eslint-disable no-nested-ternary */
-import { PropsWithChildren, useState } from 'react';
+import { type PropsWithChildren, useState } from 'react';
 import { Button, Card } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 
 import { getToDoAssignments } from '@pega/react-sdk-components/lib/components/infra/Containers/FlowContainer/helpers';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface ConfirmationProps extends PConnProps {
   // If any, enter additional props that only exist on this component

package/lib/template/DataReference/DataReference.tsx

@@ -1,11 +1,11 @@
-import React, { PropsWithChildren, ReactElement, useEffect, useMemo, useState } from 'react';
+import React, { type PropsWithChildren, type ReactElement, useEffect, useMemo, useState } from 'react';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import useIsMount from '@pega/react-sdk-components/lib/hooks/useIsMount';
 import componentCachePersistUtils from '@pega/react-sdk-components/lib/components/template/AdvancedSearch/SearchGroup/persistUtils';
-import { getMappedKey } from '@pega/react-sdk-components/lib/components/template/AdvancedSearch/SearchGroup/persistUtils';
 import DataReferenceAdvancedSearchContext from './DataReferenceAdvancedSearchContext';
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { getFirstChildConfig } from './utils';
 
 // ReferenceProps can't be used until getComponentConfig() is NOT private
@@ -77,7 +77,7 @@ export default function DataReference(props: PropsWithChildren<DataReferenceProp
   const isDDSourceDeferred =
     (firstChildMeta?.type === 'Dropdown' && selectionMode === SELECTION_MODE.SINGLE && refFieldMetadata?.descriptors) ||
     firstChildMeta.config.deferDatasource;
-  const pyID = getMappedKey('pyID');
+  const pyID = Utils.getMappedKey('pyID');
   const isInfinity = pyID === 'pyID';
   const { allowImplicitRefresh } = isInfinity
     ? PCore.getFieldDefaultUtils().fieldDefaults.DataReference || {}
@@ -139,7 +139,6 @@ export default function DataReference(props: PropsWithChildren<DataReferenceProp
             }
           })
           .catch(err => {
-            // eslint-disable-next-line no-console
             console.error(err?.stack);
             return Promise.resolve({
               data: { data: [] }
@@ -177,8 +176,9 @@ export default function DataReference(props: PropsWithChildren<DataReferenceProp
     const caseKey = pConn.getCaseInfo().getKey();
     const refreshOptions: any = { autoDetectRefresh: true };
 
-    if (pConn.getRawMetadata()?.children?.length > 0 && pConn.getRawMetadata()?.children[0].config?.value) {
-      refreshOptions.propertyName = pConn.getRawMetadata()?.children[0].config.value;
+    const children: any = pConn.getRawMetadata()?.children;
+    if (children?.length > 0 && children[0].config?.value) {
+      refreshOptions.propertyName = children[0].config.value;
       refreshOptions.classID = (pConn.getRawMetadata() as any).classID;
     }
 
@@ -342,13 +342,12 @@ export default function DataReference(props: PropsWithChildren<DataReferenceProp
         : firstChildMeta?.config?.datasource?.fields?.value;
       fieldMetaData.datasourceMetadata.datasource.name = rawViewMetadata.config?.referenceList;
     }
-    // @ts-ignore
+    // @ts-expect-error
     const { disableStartingFieldsForReference = false } = PCore.getEnvironmentInfo().environmentInfoObject?.features?.form || {};
-    // @ts-ignore
+    // @ts-expect-error
     let { isCreateNewReferenceEnabled = false } = PCore.getEnvironmentInfo().environmentInfoObject?.features?.form || {};
 
     if (isCreateNewReferenceEnabled) {
-      // @ts-ignore
       isCreateNewReferenceEnabled = isCreationOfNewRecordAllowedForReference && PCore.getAccessPrivilege().hasCreateAccess(contextClass);
     }
 
@@ -358,7 +357,6 @@ export default function DataReference(props: PropsWithChildren<DataReferenceProp
         if (!disableStartingFieldsForReference) {
           startingFields.pyAddCaseContextPage = { pyID: pConn.getCaseInfo().getKey()?.split(' ')?.pop() };
         }
-        // @ts-ignore
         return pConn.getActionsApi().createWork(contextClass, {
           openCaseViewAfterCreate: false,
           startingFields
@@ -464,7 +462,6 @@ export default function DataReference(props: PropsWithChildren<DataReferenceProp
   ) : (
     <div>
       {childrenToRender.map((child, index) => (
-        // eslint-disable-next-line react/no-array-index-key
         <React.Fragment key={index}>{child}</React.Fragment>
       ))}
     </div>

package/lib/template/DataReference/SearchForm.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { Tab, Tabs, Typography, RadioGroup, FormControlLabel, Radio, Select, MenuItem, Grid, Box } from '@mui/material';
+import { Tab, Tabs, Typography, RadioGroup, FormControlLabel, Radio, MenuItem, Box, TextField } from '@mui/material';
+import Grid2 from '@mui/material/Grid2';
 import { TabContext, TabPanel } from '@mui/lab';
 import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
 
@@ -91,15 +92,15 @@ const SearchForm = props => {
   let searchCategoriesComp;
   if (tabItems.length > 3) {
     searchCategoriesComp = (
-      <Grid container spacing={2}>
-        <Select value={currentTabId} onChange={handleTabClick} fullWidth>
+      <Grid2 container spacing={2}>
+        <TextField value={currentTabId} select onChange={handleTabClick} fullWidth>
           {tabItems.map(tab => (
             <MenuItem key={tab.id} value={tab.id}>
               {tab.name}
             </MenuItem>
           ))}
-        </Select>
-      </Grid>
+        </TextField>
+      </Grid2>
     );
   } else if (tabItems.length > 1) {
     searchCategoriesComp = (

package/lib/template/DataReference/{utils.js → utils.ts}

@@ -23,8 +23,8 @@ export function getFieldMeta(getPConnect, dataRelationshipContext) {
   const fieldMetadata =
     (isMultiSelectMode ? pConn.getFieldMetadata(`${referenceProp}`) : pConn.getCurrentPageFieldMetadata(contextPageReference)) ?? {};
   const { datasource: { parameters: fieldParameters = {} } = {} } = fieldMetadata;
-  const compositeKeys = [];
-  Object.values(fieldParameters).forEach(param => {
+  const compositeKeys: any = [];
+  Object.values(fieldParameters).forEach((param: any) => {
     if (isSelfReferencedProperty(param, referenceProp)) compositeKeys.push(param.substring(param.lastIndexOf('.') + 1));
   });
 
@@ -38,7 +38,7 @@ export function getFieldMeta(getPConnect, dataRelationshipContext) {
 const getCompositeKeys = (pConnect, property) => {
   const fieldMetadata = pConnect.getFieldMetadata(property) || {};
   const { datasource: { parameters: fieldParameters = {} } = {} } = fieldMetadata;
-  const compositeKeys = [];
+  const compositeKeys: any = [];
   Object.values(fieldParameters).forEach(param => {
     if (isSelfReferencedProperty(param, property)) {
       compositeKeys.push(param);

package/lib/template/DefaultForm/DefaultForm.tsx

@@ -1,11 +1,11 @@
-import { createElement, PropsWithChildren } from 'react';
+import { createElement, type PropsWithChildren } from 'react';
 
 import { getInstructions } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import connectToState from '@pega/react-sdk-components/lib/components/helpers/state-utils';
 
 import { getKeyForMappedField, mapStateToProps } from './utils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 import './DefaultForm.css';
 
@@ -56,7 +56,7 @@ export default function DefaultForm(props: PropsWithChildren<DefaultFormProps>)
       {instructions && (
         <div className='psdk-default-form-instruction-text'>
           {/* server performs sanitization method for instructions html content */}
-          {/* eslint-disable react/no-danger */}
+          {}
           <div key='instructions' id='instruction-text' dangerouslySetInnerHTML={{ __html: instructions }} />
         </div>
       )}

package/lib/template/Details/Details/Details.tsx

@@ -1,9 +1,9 @@
 import { createElement } from 'react';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface DetailsProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -28,7 +28,7 @@ export default function Details(props: DetailsProps) {
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {
       ...configObject,
-      // eslint-disable-next-line react/no-array-index-key
+
       key: index.toString()
     })
   );
@@ -53,21 +53,21 @@ export default function Details(props: DetailsProps) {
   return (
     <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
       {showHighlightedData && highlightedDataArr.length > 0 && (
-        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
+        <Grid2 container spacing={1} style={{ padding: '0 0 1em' }}>
           {highlightedDataArr.map((child, i) => (
-            <Grid item xs={12} key={`hf-${i + 1}`}>
+            <Grid2 size={{ xs: 12 }} key={`hf-${i + 1}`}>
               {child}
-            </Grid>
+            </Grid2>
           ))}
-        </Grid>
+        </Grid2>
       )}
-      <Grid container spacing={1}>
+      <Grid2 container spacing={1}>
         {children.map((child, i) => (
-          <Grid item xs={12} key={`r-${i + 1}`}>
+          <Grid2 size={{ xs: 12 }} key={`r-${i + 1}`}>
             {child}
-          </Grid>
+          </Grid2>
         ))}
-      </Grid>
+      </Grid2>
     </FieldGroup>
   );
 }

package/lib/template/Details/DetailsSubTabs/DetailsSubTabs.tsx

@@ -1,9 +1,9 @@
-import { Children, PropsWithChildren, useEffect, useState } from 'react';
+import { Children, type PropsWithChildren, useEffect, useState } from 'react';
 import { Tab, Tabs } from '@mui/material';
 import { TabContext, TabPanel } from '@mui/lab';
 
 import { getTransientTabs, getVisibleTabs, tabClick } from '@pega/react-sdk-components/lib/components/template/SubTabs/tabUtils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface DetailsSubTabsProps extends PConnProps {
   // If any, enter additional props that only exist on this component

package/lib/template/Details/DetailsThreeColumn/DetailsThreeColumn.tsx

@@ -1,9 +1,9 @@
 import { createElement } from 'react';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface DetailsThreeColumnProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -28,7 +28,7 @@ export default function DetailsThreeColumn(props: DetailsThreeColumnProps) {
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {
       ...configObject,
-      // eslint-disable-next-line react/no-array-index-key
+
       key: index.toString()
     })
   );
@@ -53,21 +53,21 @@ export default function DetailsThreeColumn(props: DetailsThreeColumnProps) {
   return (
     <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
       {showHighlightedData && highlightedDataArr.length > 0 && (
-        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
+        <Grid2 container spacing={1} style={{ padding: '0 0 1em' }}>
           {highlightedDataArr.map((child, i) => (
-            <Grid item xs={4} key={`hf-${i + 1}`}>
+            <Grid2 size={{ xs: 4 }} key={`hf-${i + 1}`}>
               {child}
-            </Grid>
+            </Grid2>
           ))}
-        </Grid>
+        </Grid2>
       )}
-      <Grid container spacing={1}>
+      <Grid2 container spacing={1}>
         {children.map((child, i) => (
-          <Grid item xs={4} key={`r-${i + 1}`}>
+          <Grid2 size={{ xs: 4 }} key={`r-${i + 1}`}>
             {child}
-          </Grid>
+          </Grid2>
         ))}
-      </Grid>
+      </Grid2>
     </FieldGroup>
   );
 }

package/lib/template/Details/DetailsTwoColumn/DetailsTwoColumn.tsx

@@ -1,9 +1,9 @@
 import { createElement } from 'react';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface DetailsTwoColumnProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -28,7 +28,7 @@ export default function DetailsTwoColumn(props: DetailsTwoColumnProps) {
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {
       ...configObject,
-      // eslint-disable-next-line react/no-array-index-key
+
       key: index.toString()
     })
   );
@@ -53,21 +53,21 @@ export default function DetailsTwoColumn(props: DetailsTwoColumnProps) {
   return (
     <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
       {showHighlightedData && highlightedDataArr.length > 0 && (
-        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
+        <Grid2 container spacing={1} style={{ padding: '0 0 1em' }}>
           {highlightedDataArr.map((child, i) => (
-            <Grid item xs={6} key={`hf-${i + 1}`}>
+            <Grid2 size={{ xs: 6 }} key={`hf-${i + 1}`}>
               {child}
-            </Grid>
+            </Grid2>
           ))}
-        </Grid>
+        </Grid2>
       )}
-      <Grid container spacing={1}>
+      <Grid2 container spacing={1}>
         {children.map((child, i) => (
-          <Grid item xs={6} key={`r-${i + 1}`}>
+          <Grid2 size={{ xs: 6 }} key={`r-${i + 1}`}>
             {child}
-          </Grid>
+          </Grid2>
         ))}
-      </Grid>
+      </Grid2>
     </FieldGroup>
   );
 }

package/lib/template/Details/DynamicTabs/DynamicTabs.tsx

@@ -4,7 +4,7 @@ import { TabContext, TabPanel } from '@mui/lab';
 import makeStyles from '@mui/styles/makeStyles';
 
 import { buildView } from '@pega/react-sdk-components/lib/components/helpers/field-group-utils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 const useStyles = makeStyles(() => ({
   tab: {

package/lib/template/FieldGroupTemplate/FieldGroupTemplate.tsx

@@ -1,9 +1,8 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import { useLayoutEffect, useMemo } from 'react';
 
 import { getReferenceList, buildView } from '@pega/react-sdk-components/lib/components/helpers/field-group-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface FieldGroupTemplateProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -42,7 +41,7 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
 
   useLayoutEffect(() => {
     if (!isReadonlyMode) {
-      // @ts-ignore - Expected 3 arguments, but got 1
+      // @ts-expect-error - Expected 3 arguments, but got 1
       pConn.getListActions().initDefaultPageInstructions(resolvedList);
     }
   }, [referenceList?.length]);

package/lib/template/InlineDashboard/InlineDashboard.tsx

@@ -1,7 +1,7 @@
-import { PropsWithChildren, ReactElement } from 'react';
-import { Grid, Typography } from '@mui/material';
+import type { PropsWithChildren, ReactElement } from 'react';
+import { Grid2, Typography } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface InlineDashboardProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -50,24 +50,22 @@ export default function InlineDashboard(props: PropsWithChildren<InlineDashboard
       </Typography>
 
       {filterPosition === 'block-start' && (
-        <Grid container spacing={2} direction='column-reverse' className={classes.containerStyles}>
-          <Grid item xs={12} className={classes.colStyles}>
+        <Grid2 container spacing={2} direction='column-reverse' className={classes.containerStyles}>
+          <Grid2 size={{ xs: 12 }} className={classes.colStyles}>
             {childrenToRender[0]}
-          </Grid>
-          <Grid id='filters' item xs={12} className={classes.filterContainerStyles}>
+          </Grid2>
+          <Grid2 id='filters' size={{ xs: 12 }} className={classes.filterContainerStyles}>
             {childrenToRender[1]}
-          </Grid>
-        </Grid>
+          </Grid2>
+        </Grid2>
       )}
       {filterPosition !== 'block-start' && (
-        <Grid container spacing={2} direction={direction} className={classes.containerStyles}>
-          <Grid item xs={9}>
-            {childrenToRender[0]}
-          </Grid>
-          <Grid id='filters' item xs={3} className={classes.inlineStyles}>
+        <Grid2 container spacing={2} direction={direction} className={classes.containerStyles}>
+          <Grid2 size={{ xs: 9 }}>{childrenToRender[0]}</Grid2>
+          <Grid2 id='filters' size={{ xs: 3 }} className={classes.inlineStyles}>
             {childrenToRender[1]}
-          </Grid>
-        </Grid>
+          </Grid2>
+        </Grid2>
       )}
     </>
   );

package/lib/template/InlineDashboardPage/InlineDashboardPage.tsx

@@ -1,8 +1,8 @@
-import { useMemo, Children, useEffect, useState, PropsWithChildren } from 'react';
+import { useMemo, Children, useEffect, useState, type PropsWithChildren } from 'react';
 
 import { buildFilterComponents } from '@pega/react-sdk-components/lib/components/infra/DashboardFilter/filterUtils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface InlineDashboardPageProps extends PConnProps {
   // If any, enter additional props that only exist on this component

package/lib/template/ListPage/ListPage.tsx

@@ -1,5 +1,5 @@
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface ListPageProps extends PConnProps {
   // If any, enter additional props that only exist on this component

package/lib/template/ListView/ListView.tsx

@@ -1,10 +1,5 @@
-/* eslint-disable no-plusplus */
-
-/* eslint-disable @typescript-eslint/no-use-before-define */
-/* eslint-disable @typescript-eslint/no-shadow */
-
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { Theme } from '@mui/material/styles';
+import type { Theme } from '@mui/material/styles';
 import createStyles from '@mui/styles/createStyles';
 import makeStyles from '@mui/styles/makeStyles';
 import Table from '@mui/material/Table';
@@ -21,7 +16,7 @@ import FilterListIcon from '@mui/icons-material/FilterList';
 import SubjectIcon from '@mui/icons-material/Subject';
 import SearchIcon from '@mui/icons-material/Search';
 import TextField from '@mui/material/TextField';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import Dialog from '@mui/material/Dialog';
@@ -46,7 +41,7 @@ import { getGenericFieldsLocalizedValue } from '@pega/react-sdk-components/lib/c
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 
 import useInit from './hooks';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface ListViewProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -102,8 +97,6 @@ export default function ListView(props: ListViewProps) {
   // List component context
   const [listContext, setListContext] = useState<any>({});
   const { meta } = listContext;
-  const xRayApis = PCore.getDebugger().getXRayRuntime();
-  const xRayUid = xRayApis.startXRay();
   const { current: uniqueId } = useRef(crypto.randomUUID());
 
   useInit({
@@ -111,7 +104,6 @@ export default function ListView(props: ListViewProps) {
     setListContext,
     ref,
     showDynamicFields,
-    xRayUid,
     cosmosTableRef
   });
 
@@ -330,7 +322,6 @@ export default function ListView(props: ListViewProps) {
     if (selectionMode === SELECTION_MODE.SINGLE || selectionMode === SELECTION_MODE.MULTI) {
       const record = arTableData?.length > 0 ? arTableData[0] : '';
       if (typeof record === 'object' && !('pyGUID' in record) && !('pyID' in record)) {
-        // eslint-disable-next-line no-console
         console.error('pyGUID or pyID values are mandatory to select the required row from the list');
       }
     }
@@ -398,7 +389,6 @@ export default function ListView(props: ListViewProps) {
       const filter = filters.current[filterExp];
       // If the filter is null then we can skip this iteration
       if (filter === null) {
-        // eslint-disable-next-line no-continue
         continue;
       }
 
@@ -407,7 +397,6 @@ export default function ListView(props: ListViewProps) {
       field = getFieldFromFilter(filter, isDateRange);
 
       if (!(columnList.current.length && columnList.current.includes(field))) {
-        // eslint-disable-next-line no-continue
         continue;
       }
       // If we reach here that implies we've at least one valid filter, hence setting the flag
@@ -726,7 +715,7 @@ export default function ListView(props: ListViewProps) {
 
   function showToast(message: string) {
     const theMessage = `Assignment: ${message}`;
-    // eslint-disable-next-line no-console
+
     console.error(theMessage);
     setSnackbarMessage(message);
     setShowSnackbar(true);
@@ -856,7 +845,6 @@ export default function ListView(props: ListViewProps) {
   function _showFilteredIcon(columnId) {
     for (const filterObj of filterByColumns) {
       if (filterObj.ref === columnId) {
-        // eslint-disable-next-line sonarjs/prefer-single-boolean-return
         if (filterObj.containsFilterValue !== '') {
           return true;
         }
@@ -1081,11 +1069,11 @@ export default function ListView(props: ListViewProps) {
             {_listTitle()}
           </Typography>
           {globalSearch && (
-            <Grid container spacing={1} alignItems='flex-end' className={classes.search}>
-              <Grid item>
+            <Grid2 container spacing={1} alignItems='flex-end' className={classes.search}>
+              <Grid2>
                 <SearchIcon />
-              </Grid>
-              <Grid item>
+              </Grid2>
+              <Grid2>
                 <TextField
                   label={PCore.getLocaleUtils().getLocaleValue('Search', 'Search')}
                   fullWidth
@@ -1095,8 +1083,8 @@ export default function ListView(props: ListViewProps) {
                   id='search'
                   onChange={_onSearch}
                 />
-              </Grid>
-            </Grid>
+              </Grid2>
+            </Grid2>
           )}
           <>
             {!bInForm ? (