@pega/react-sdk-overrides 0.25.1 → 0.25.3

package/lib/infra/DashboardFilter/DashboardFilter.tsx

@@ -1,11 +1,10 @@
-/* eslint-disable @typescript-eslint/no-shadow */
-import { forwardRef, PropsWithChildren, useEffect, useRef, useState } from 'react';
+import { forwardRef, type PropsWithChildren, useEffect, useRef, useState } from 'react';
 import { TextField } from '@mui/material';
 import { debounce } from 'throttle-debounce';
 import DatePicker from 'react-datepicker';
 
 import { createFilter, combineFilters, getFormattedDate, getFilterExpression } from './filterUtils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 import 'react-datepicker/dist/react-datepicker.css';
 
@@ -109,7 +108,6 @@ export default function DashboardFilter(props: PropsWithChildren<DashboardFilter
 
   const label = metadata.config.label.substring(3);
 
-  // eslint-disable-next-line react/no-unstable-nested-components
   const CustomDateInput = forwardRef<HTMLInputElement, TextProps>(({ value, onClick }, ref: any) => (
     <TextField label={label} variant='outlined' fullWidth value={value} size='small' onClick={onClick} ref={ref}>
       {value}

package/lib/infra/DashboardFilter/filterUtils.tsx

@@ -1,7 +1,6 @@
-/* eslint-disable prefer-template */
 /** This file contains various utility methods to generate filter components, regionLayout data, filter expressions, etc.  */
 
-import { Grid, Link } from '@mui/material';
+import { Grid2, Link } from '@mui/material';
 
 import DashboardFilter from './DashboardFilter';
 
@@ -77,7 +76,7 @@ export const buildFilterComponents = (getPConnect, allFilters) => {
   const filterComponents = allFilters.children.map((filter, index) => createFilterComponent(getPConnect, filter, index));
   if (filterComponents && filterComponents.length > 0) {
     filterComponents.push(
-      <Grid style={{ display: 'flex', alignItems: 'center' }}>
+      <Grid2 style={{ display: 'flex', alignItems: 'center' }}>
         <Link
           style={{ cursor: 'pointer' }}
           onClick={() => {
@@ -87,7 +86,7 @@ export const buildFilterComponents = (getPConnect, allFilters) => {
         >
           Clear All
         </Link>
-      </Grid>
+      </Grid2>
     );
   }
   return filterComponents;

package/lib/infra/DeferLoad/DeferLoad.tsx

@@ -4,7 +4,7 @@ import makeStyles from '@mui/styles/makeStyles';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface DeferLoadProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -115,14 +115,13 @@ export default function DeferLoad(props: DeferLoadProps) {
           .getActionsApi()
           .showData(name, dataContext, dataContextParameters, {
             skipSemanticUrl: true,
-            // @ts-ignore
+            // @ts-expect-error
             isDeferLoaded: true
           })
           .then(data => {
             onResponse(data);
           });
       } else {
-        // eslint-disable-next-line no-console
         console.error('Cannot load the defer loaded view without container information');
       }
     } else if (resourceType === PAGE) {
@@ -141,7 +140,6 @@ export default function DeferLoad(props: DeferLoadProps) {
           onResponse(data.root);
         })
         .catch(error => {
-          // eslint-disable-next-line no-console
           console.log(`deferload: ${error}`);
         });
     }

package/lib/infra/ErrorBoundary/ErrorBoundary.tsx

@@ -1,4 +1,4 @@
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface ErrorBoundaryProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -23,7 +23,6 @@ export default function ErrorBoundary(props: ErrorBoundaryProps) {
   const pConn = getPConnect();
 
   if (!isInternalError) {
-    // eslint-disable-next-line no-console
     console.error(`
   ${localizedVal('Unable to load the component', localeCategory)} ${pConn.getComponentName()}
   ${localizedVal('This might be due to the view metadata getting corrupted or the component file missing.', localeCategory)}
@@ -37,7 +36,6 @@ export default function ErrorBoundary(props: ErrorBoundaryProps) {
 
   if (pConn.getContainerName() === WORK_AREA || pConn.isInsideList() === true || pConn.getContainerName() === 'modal') {
     const { publish } = PCore.getPubSubUtils();
-    // @ts-ignore - second parameter “payload” for publish method should be optional
     publish(ERROR_WHILE_RENDERING);
     return null;
   }

package/lib/infra/MultiStep/MultiStep.css

@@ -17,7 +17,7 @@
 
 .psdk-current-svg-icon {
   width: 1rem;
-  filter: var(--app-primary-color-filter);
+  filter: var(--svg-color);
 }
 
 .psdk-not-current-svg-icon {
@@ -40,7 +40,7 @@ mat-horizontal-stepper {
 
 .psdk-sub-step-not-current {
   padding-left: 0.625rem;
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--step-label-color);
 }
 
 .psdk-flow-container-top {
@@ -80,7 +80,7 @@ mat-horizontal-stepper {
 .psdk-vertical-step-icon {
   margin-right: 12px;
   background-color: var(--app-neutral-color);
-  color: #fff;
+  color: var(--app-text-color);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -93,13 +93,13 @@ mat-horizontal-stepper {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  color: #fff;
+  color: var(--app-text-color);
 }
 
 .psdk-vertical-step-icon-selected {
   margin-right: 12px;
   background-color: var(--app-primary-color);
-  color: #fff;
+  color: var(--app-text-color);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -108,7 +108,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-vertical-step-label {
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--step-label-color);
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
@@ -180,7 +180,7 @@ mat-horizontal-stepper {
 
 .psdk-horizontal-step-icon {
   background-color: var(--app-neutral-color);
-  color: #fff;
+  color: var(--app-text-color);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -201,7 +201,7 @@ mat-horizontal-stepper {
 
 .psdk-horizontal-step-icon-selected {
   background-color: var(--app-primary-color);
-  color: #fff;
+  color: var(--app-text-color);
   border-radius: 50%;
   height: 24px;
   width: 24px;

package/lib/infra/MultiStep/MultiStep.tsx

@@ -1,7 +1,7 @@
-import React, { PropsWithChildren } from 'react';
+import React, { type PropsWithChildren } 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 './MultiStep.css';
 

package/lib/infra/NavBar/NavBar.css

@@ -154,7 +154,7 @@
   text-align: center;
   display: inline-flex;
   background: var(--app-neutral-color);
-  color: white;
+  color: var(--app-text-color);
   font-weight: normal;
   font-size: 1rem;
 }

package/lib/infra/NavBar/NavBar.tsx

@@ -7,9 +7,9 @@ import {
   Drawer,
   List,
   ListItem,
+  ListItemButton,
   ListItemIcon,
   ListItemText,
-  ListItemSecondaryAction,
   Collapse,
   Divider,
   IconButton,
@@ -36,13 +36,13 @@ import { logout } from '@pega/auth/lib/sdk-auth-manager';
 
 import { useNavBar } from '@pega/react-sdk-components/lib/components/helpers/reactContextHelpers';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 import './NavBar.css';
 
 interface NavBarProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  // eslint-disable-next-line react/no-unused-prop-types
+
   appName?: string;
   pages?: any[];
   caseTypes: any[];
@@ -93,7 +93,8 @@ const useStyles = makeStyles(theme => ({
   },
   appListLogo: {
     marginRight: theme.spacing(2),
-    width: '3.6rem'
+    width: '3.6rem',
+    filter: 'var(--svg-color)'
   },
   appListIcon: {
     color: theme.palette.getContrastText(theme.palette.primary.light)
@@ -145,7 +146,6 @@ export default function NavBar(props: NavBarProps) {
       .getActionsApi()
       .showPage(pyRuleName, pyClassName)
       .then(() => {
-        // eslint-disable-next-line no-console
         console.log(`${localizedVal('showPage completed', localeCategory)}`);
       });
   }
@@ -161,7 +161,6 @@ export default function NavBar(props: NavBarProps) {
       .getActionsApi()
       .createWork(sCaseType, actionInfo)
       .then(() => {
-        // eslint-disable-next-line no-console
         console.log(`${localizedVal('createWork completed', localeCategory)}`);
       });
   }
@@ -199,7 +198,14 @@ export default function NavBar(props: NavBarProps) {
     >
       {open ? (
         <List className={classes.appListItem}>
-          <ListItem onClick={handleDrawerOpen}>
+          <ListItem
+            onClick={handleDrawerOpen}
+            secondaryAction={
+              <IconButton edge='end' onClick={handleDrawerOpen} size='large'>
+                <ChevronLeftIcon className={classes.appListIcon} />
+              </IconButton>
+            }
+          >
             <ListItemIcon>
               <img src={portalLogoImage} className={classes.appListLogo} />
             </ListItemIcon>
@@ -210,11 +216,6 @@ export default function NavBar(props: NavBarProps) {
                 </Typography>
               }
             />
-            <ListItemSecondaryAction>
-              <IconButton edge='end' onClick={handleDrawerOpen} size='large'>
-                <ChevronLeftIcon className={classes.appListIcon} />
-              </IconButton>
-            </ListItemSecondaryAction>
           </ListItem>
         </List>
       ) : (
@@ -223,17 +224,16 @@ export default function NavBar(props: NavBarProps) {
         </div>
       )}
       <List>
-        <ListItem button onClick={handleCaseItemClick}>
+        <ListItemButton onClick={handleCaseItemClick}>
           <ListItemIcon>{bShowCaseTypes && open ? <ClearOutlinedIcon fontSize='large' /> : <AddIcon fontSize='large' />}</ListItemIcon>
           <ListItemText primary='Create' />
           {bShowCaseTypes ? <ExpandLess /> : <ExpandMore />}
-        </ListItem>
+        </ListItemButton>
       </List>
       <Collapse in={bShowCaseTypes && open} timeout='auto' unmountOnExit className='scrollable'>
         <List component='div' disablePadding>
           {caseTypes.map(caseType => (
-            <ListItem
-              button
+            <ListItemButton
               className={classes.nested}
               onClick={() => navPanelCreateCaseType(caseType.pyClassName, caseType.pyFlowType)}
               key={caseType.pyLabel}
@@ -242,33 +242,35 @@ export default function NavBar(props: NavBarProps) {
                 <WorkOutlineIcon fontSize='large' />
               </ListItemIcon>
               <ListItemText primary={localeUtils.getLocaleValue(caseType.pyLabel, '', localeReference)} />
-            </ListItem>
+            </ListItemButton>
           ))}
         </List>
       </Collapse>
       <List>
         {navPages.map(page => (
-          <ListItem button onClick={() => navPanelButtonClick(page)} key={page.pyLabel}>
+          <ListItemButton onClick={() => navPanelButtonClick(page)} key={page.pyLabel}>
             <ListItemIcon>{iconMap[page.pxPageViewIcon]}</ListItemIcon>
             <ListItemText primary={localeUtils.getLocaleValue(page.pyLabel, '', localeReference)} />
-          </ListItem>
+          </ListItemButton>
         ))}
       </List>
       <Divider />
       <List className='marginTopAuto'>
         <>
-          <ListItem onClick={navPanelOperatorButtonClick}>
+          <ListItem
+            onClick={navPanelOperatorButtonClick}
+            secondaryAction={
+              open ? (
+                <IconButton edge='end' onClick={navPanelOperatorButtonClick} size='large'>
+                  <ChevronRightIcon />
+                </IconButton>
+              ) : null
+            }
+          >
             <ListItemIcon id='person-icon'>
               <PersonOutlineIcon fontSize='large' />
             </ListItemIcon>
             <ListItemText primary={portalOperator} />
-            {open && (
-              <ListItemSecondaryAction>
-                <IconButton edge='end' onClick={navPanelOperatorButtonClick} size='large'>
-                  <ChevronRightIcon />
-                </IconButton>
-              </ListItemSecondaryAction>
-            )}
           </ListItem>
           <Menu
             anchorEl={anchorEl}

package/lib/infra/Reference/Reference.tsx

@@ -1,4 +1,4 @@
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface ReferenceProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -12,8 +12,7 @@ export default function Reference(props: ReferenceProps) {
   const { visibility = true, context = '', getPConnect, readOnly = false, displayMode = '' } = props;
 
   const pConnect = getPConnect();
-  // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'.
-  const referenceConfig = { ...pConnect.getComponentConfig() } || {};
+  const referenceConfig = { ...pConnect.getComponentConfig() };
 
   delete referenceConfig?.name;
   delete referenceConfig?.type;
@@ -34,7 +33,7 @@ export default function Reference(props: ReferenceProps) {
     }
   };
 
-  // @ts-ignore - Argument of type 'null' is not assignable to parameter of type 'string'.
+  // @ts-expect-error - Argument of type 'null' is not assignable to parameter of type 'string'.
   const viewComponent: any = pConnect.createComponent(viewObject, null, null, {
     pageReference: context && context.startsWith('@CLASS') ? '' : context
   });

package/lib/infra/Region/Region.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 
 // Region does NOT have getPConnect. So, no need to extend from PConnProps
 interface RegionProps {

package/lib/infra/RootContainer/RootContainer.tsx

@@ -1,11 +1,11 @@
-import { Children, createElement, PropsWithChildren, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Children, createElement, type PropsWithChildren, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Box, CircularProgress } from '@mui/material';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
 import { LazyMap as LazyComponentMap } from '@pega/react-sdk-components/lib/components_map';
 import { isEmptyObject } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface RootContainerProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -196,7 +196,6 @@ export default function RootContainer(props: PropsWithChildren<RootContainerProp
     );
   }
   if (renderingMode === 'noPortal') {
-    // eslint-disable-next-line no-console
     console.log(`${localizedVal('RootContainer rendering in noPortal mode', localeCategory)}`);
 
     const theChildren = pConn.getChildren() as any[];

package/lib/infra/Stages/Stages.tsx

@@ -3,7 +3,7 @@ import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
 import DoneIcon from '@mui/icons-material/Done';
 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 StagesProps extends PConnProps {
   // If any, enter additional props that only exist on this component

package/lib/infra/View/View.tsx

@@ -1,8 +1,8 @@
-import { PropsWithChildren, useEffect } from 'react';
+import { type PropsWithChildren, useEffect } from 'react';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { getAllFields } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 // Need to import any templates that we might render
 

package/lib/template/AdvancedSearch/AdvancedSearch.tsx

@@ -42,7 +42,6 @@ export default function AdvancedSearch(props) {
   const [firstChildMeta] = rawViewMetadata.children;
 
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
-  // @ts-ignore
   const cache = PCore.getNavigationUtils().getComponentCache(searchSelectCacheKey) ?? {};
 
   const editableFieldComp = firstChildPConnect().createComponent({

package/lib/template/AdvancedSearch/SearchGroup/persistUtils.ts

@@ -1,16 +1,10 @@
-const SKIP_CACHE_KEY = '';
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 
-export function getMappedKey(key) {
-  const mappedKey = PCore.getEnvironmentInfo().getKeyMapping(key);
-  if (!mappedKey) {
-    return key;
-  }
-  return mappedKey;
-}
+const SKIP_CACHE_KEY = '';
 
 const getComponentStateKey = (getPConnect, propertyName: string) => {
   const pConnect = getPConnect();
-  const caseID = `.${getMappedKey('pyID')}`; // Enhance this later when use-case arrives for data objects using S&S.
+  const caseID = `.${Utils.getMappedKey('pyID')}`; // Enhance this later when use-case arrives for data objects using S&S.
   const resolvedCaseID = pConnect.getValue(caseID);
 
   if (!resolvedCaseID) {

package/lib/template/AdvancedSearch/SearchGroups/SearchGroups.tsx

@@ -1,5 +1,5 @@
 import React, { createElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { Button, Grid, Select, MenuItem, Box } from '@mui/material';
+import { Button, Grid2, Select, MenuItem, Box } from '@mui/material';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import TemplateContext from '@pega/react-sdk-components/lib/components/template/AdvancedSearch/TemplateContext';
@@ -173,7 +173,7 @@ export default function SearchGroups(props) {
   useCacheWhenListViewReady(cache, viewName, useCache, getFilterData, searchSelectCacheKey);
 
   const searchDropdown = groups.length > 1 && (
-    <Grid container spacing={2}>
+    <Grid2 container spacing={2}>
       <Select value={activeGroupId} onChange={e => setActiveGroupId(e.target.value)} ref={searchByRef} fullWidth>
         {groups.map(group => (
           <MenuItem key={group.config.id} value={group.config.id}>
@@ -181,7 +181,7 @@ export default function SearchGroups(props) {
           </MenuItem>
         ))}
       </Select>
-    </Grid>
+    </Grid2>
   );
 
   const actionButtons = (
@@ -237,7 +237,6 @@ export default function SearchGroups(props) {
   return (
     <Box display='flex' flexDirection='column' gap={2}>
       {childrenToRender.map((child, index) => (
-        // eslint-disable-next-line react/no-array-index-key
         <React.Fragment key={index}>{child}</React.Fragment>
       ))}
     </Box>

package/lib/template/AdvancedSearch/SearchGroups/hooks.ts

@@ -9,7 +9,7 @@ const listViewConstants = {
  * This hook registers a callback for the whenever list view component is ready
  * then makes a call to get the data using the search fields pre-filled with cache data.
  */
-// eslint-disable-next-line import/prefer-default-export
+
 export function useCacheWhenListViewReady(
   cache: { searchFields: unknown },
   viewName: string,

package/lib/template/AppShell/AppShell.css

@@ -22,7 +22,7 @@
   align-items: center;
   height: 100%;
   width: 100%;
-  background-color: whitesmoke;
+  background-color: 'var(--app-background-color)';
   position: fixed;
   z-index: 999;
   top: 0rem;

package/lib/template/AppShell/AppShell.tsx

@@ -1,11 +1,11 @@
-import { PropsWithChildren, useEffect, useState } from 'react';
+import { type PropsWithChildren, useEffect, useState } from 'react';
 import makeStyles from '@mui/styles/makeStyles';
 import Avatar from '@mui/material/Avatar';
 
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { NavContext } from '@pega/react-sdk-components/lib/components/helpers/reactContextHelpers';
 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 './AppShell.css';
 
@@ -29,9 +29,7 @@ interface AppShellProps extends PConnProps {
 }
 
 const useStyles = makeStyles(theme => ({
-  root: {
-    display: 'flex'
-  },
+  root: {},
   content: {
     flexGrow: 1,
     height: '100vh',
@@ -117,7 +115,7 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
   }, []);
 
   useEffect(() => {
-    // @ts-ignore
+    // @ts-expect-error
     const caseTypesAvailableToCreateDP = PCore.getEnvironmentInfo().environmentInfoObject?.pxApplication?.pyCaseTypesAvailableToCreateDP;
     if (caseTypesAvailableToCreateDP) {
       const portalID = pConn.getValue('.pyOwner');
@@ -159,7 +157,6 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
           setFullIconURL(data);
         })
         .catch(() => {
-          // eslint-disable-next-line no-console
           console.error(`${localizedVal('Unable to load the image for the portal logo/icon with the insName', 'AppShell')}:${portalLogo}`);
         });
     }
@@ -213,7 +210,7 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
 
   if (portalTemplate === 'wss') {
     return (
-      <div id='AppShell'>
+      <div id='AppShell' className={classes.root}>
         <WssNavBar
           portalName={portalName}
           imageSrc={iconURL}
@@ -239,9 +236,8 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
   }
 
   return (
-    // eslint-disable-next-line react/jsx-no-constructed-context-values
     <NavContext.Provider value={{ open, setOpen }}>
-      <div id='AppShell' className={classes.root}>
+      <div id='AppShell' className={classes.root} style={{ display: 'flex' }}>
         <NavBar
           getPConnect={getPConnect}
           pConn={getPConnect()}

package/lib/template/BannerPage/BannerPage.tsx

@@ -1,7 +1,7 @@
-import { Children, PropsWithChildren, useMemo } from 'react';
+import { Children, type PropsWithChildren, useMemo } 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';
 
 interface BannerPageProps extends PConnProps {
   // If any, enter additional props that only exist on this component

package/lib/template/CaseSummary/CaseSummary.tsx

@@ -1,6 +1,6 @@
-import { PropsWithChildren, ReactElement } from 'react';
+import type { PropsWithChildren, ReactElement } 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';
 
 interface CaseSummaryProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -30,7 +30,6 @@ export default function CaseSummary(props: PropsWithChildren<CaseSummaryProps>)
   let arPrimaryFields: any[] = [];
   let arSecondaryFields: any[] = [];
 
-  /* eslint-disable @typescript-eslint/no-shadow */
   function prepareComponentInCaseSummary(pConnectMeta, getPConnect) {
     const { config, children } = pConnectMeta;
     const pConnect = getPConnect();