@pega/react-sdk-overrides 0.25.1 → 0.25.2

package/lib/designSystemExtension/CaseSummaryFields/CaseSummaryFields.css

@@ -7,7 +7,6 @@
   font-weight: bold;
   line-height: calc(0.5rem * 2.5);
   height: calc(0.5rem * 2.5);
-  padding: 0 0.5rem;
   text-transform: uppercase;
 }
 

package/lib/designSystemExtension/CaseSummaryFields/CaseSummaryFields.tsx

@@ -46,9 +46,11 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
               variant='standard'
               value='---'
               label={field.config.label}
-              InputProps={{
-                readOnly: true,
-                disableUnderline: true
+              slotProps={{
+                input: {
+                  readOnly: true,
+                  disableUnderline: true
+                }
               }}
             />
           );
@@ -65,9 +67,11 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
             variant='standard'
             value={field.config.value}
             label={field.config.label}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -82,9 +86,11 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
             variant='standard'
             value={fieldValue}
             label={fieldLabel}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -97,9 +103,11 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
             className='psdk-csf-status-style'
             value={field.config.value}
             label={field.config.label}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -112,11 +120,13 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
               variant='standard'
               value={field.config.value}
               label={field.config.label}
-              InputProps={{
-                readOnly: true,
-                inputProps: {
-                  style: { cursor: 'pointer' },
-                  disableUnderline: true
+              slotProps={{
+                input: {
+                  readOnly: true,
+                  inputProps: {
+                    style: { cursor: 'pointer' },
+                    disableUnderline: true
+                  }
                 }
               }}
             />
@@ -132,10 +142,12 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
               variant='standard'
               value={field.config.value}
               label={field.config.label}
-              InputProps={{
-                readOnly: true,
-                disableUnderline: true,
-                inputProps: { style: { cursor: 'pointer' } }
+              slotProps={{
+                input: {
+                  readOnly: true,
+                  disableUnderline: true,
+                  inputProps: { style: { cursor: 'pointer' } }
+                }
               }}
             />
           </a>
@@ -156,9 +168,11 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
               format: theFormat
             })}
             label={field.config.label}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -171,9 +185,11 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
             variant='standard'
             value={format(field.config.value, field.type, theCurrencyOptions)}
             label={field.config.label}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -186,9 +202,11 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
             variant='standard'
             value={format(field.config.value, field.type)}
             label={field.config.label}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );

package/lib/designSystemExtension/FieldGroup/FieldGroup.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useState } from 'react';
+import { type PropsWithChildren, useState } from 'react';
 import Grid from '@mui/material/Grid';
 import makeStyles from '@mui/styles/makeStyles';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';

package/lib/designSystemExtension/Operator/Operator.tsx

@@ -6,7 +6,7 @@ import Typography from '@mui/material/Typography';
 import makeStyles from '@mui/styles/makeStyles';
 
 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';
 
 // Operator is one of the few components that does NOT have getPConnect.
 //  So, no need to extend PConnProps
@@ -193,15 +193,16 @@ export default function Operator(props: OperatorProps) {
         defaultValue={caseOpName}
         label={caseOpLabel}
         onClick={showOperatorDetails}
-        InputProps={{
-          readOnly: true,
-          disableUnderline: true,
-          inputProps: { style: { cursor: 'pointer' } }
+        slotProps={{
+          input: {
+            readOnly: true,
+            disableUnderline: true,
+            inputProps: { style: { cursor: 'pointer' } }
+          }
         }}
       />
       <br />
       {Utils.generateDateTime(caseTime, 'DateTime-Since')}
-
       <Popover
         id={popoverId}
         open={popoverOpen}
@@ -209,7 +210,9 @@ export default function Operator(props: OperatorProps) {
         onClose={handlePopoverClose}
         anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
         transformOrigin={{ vertical: 'top', horizontal: 'center' }}
-        PaperProps={{ style: { maxWidth: '45ch' } }}
+        slotProps={{
+          paper: { style: { maxWidth: '45ch' } }
+        }}
       >
         {getPopoverGrid()}
       </Popover>

package/lib/designSystemExtension/Pulse/Pulse.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import { Card, CardContent, CardHeader, Typography } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 

package/lib/field/AutoComplete/AutoComplete.tsx

@@ -7,7 +7,7 @@ import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/data_page';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface IOption {
   key: string;

package/lib/field/CancelAlert/CancelAlert.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Button, Grid, IconButton, Snackbar } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './CancelAlert.css';
 
 interface CancelAlertProps extends PConnFieldProps {

package/lib/field/Checkbox/Checkbox.tsx

@@ -6,7 +6,7 @@ import makeStyles from '@mui/styles/makeStyles';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { insertInstruction, deleteInstruction, updateNewInstuctions } from '@pega/react-sdk-components/lib/components/helpers/instructions-utils';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
   // If any, enter additional props that only exist on Checkbox here

package/lib/field/Currency/Currency.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { NumericFormat } from 'react-number-format';
 import { TextField } from '@mui/material';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { getCurrencyCharacters, getCurrencyOptions } from './currency-utils';
@@ -45,7 +45,7 @@ export default function Currency(props: CurrrencyProps) {
   const helperTextToDisplay = validatemessage || helperText;
   const [values, setValues] = useState(value.toString());
 
-  const testProp = { 'data-test-id': testId };
+  const testProps: any = { 'data-test-id': testId };
 
   useEffect(() => {
     setValues(value.toString());
@@ -104,7 +104,7 @@ export default function Currency(props: CurrrencyProps) {
       {...currencyProp}
       decimalScale={allowDecimals !== false ? 2 : 0}
       fixedDecimalScale={allowDecimals}
-      InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}
+      slotProps={{ input: { ...readOnlyProp, inputProps: { ...testProps } } }}
       customInput={TextField}
     />
   );

package/lib/field/Date/Date.tsx

@@ -6,7 +6,7 @@ import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 // Will return the date string in YYYY-MM-DD format which we'll be POSTing to the server
 function getFormattedDate(date) {
@@ -62,11 +62,7 @@ export default function Date(props: DateProps) {
     return <TextInput {...props} />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   const handleChange = date => {
     if (date && date.isValid()) {
@@ -89,7 +85,7 @@ export default function Date(props: DateProps) {
           error: status === 'error',
           helperText: helperTextToDisplay,
           size: 'small',
-          InputProps: { ...testProp }
+          InputProps: { ...testProps }
         }
       }}
       onChange={handleChange}

package/lib/field/DateTime/DateTime.tsx

@@ -6,7 +6,7 @@ import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface DateTimeProps extends PConnFieldProps {
   // If any, enter additional props that only exist on DateTime here
@@ -60,11 +60,7 @@ export default function DateTime(props: DateTimeProps) {
     return <TextInput {...props} value={formattedDateTime} />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   const handleChange = date => {
     const timeZoneDateTime = (dayjs as any).tz(date.format('YYYY-MM-DDTHH:mm:ss'), timezone);
@@ -89,7 +85,6 @@ export default function DateTime(props: DateTimeProps) {
       label={label}
       value={dateValue}
       onChange={handleChange}
-      data-test-id={testId}
       slotProps={{
         textField: {
           variant: 'outlined',
@@ -98,7 +93,7 @@ export default function DateTime(props: DateTimeProps) {
           error: status === 'error',
           helperText: helperTextToDisplay,
           size: 'small',
-          InputProps: { ...testProp }
+          InputProps: { ...testProps }
         }
       }}
     />

package/lib/field/Decimal/Decimal.tsx

@@ -5,7 +5,7 @@ import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-compo
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 /* Using react-number-format component here, since it allows formatting decimal values,
 as per the locale.
@@ -83,9 +83,7 @@ export default function Decimal(props: DecimalProps) {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
   }
 
-  const testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   function decimalOnBlur() {
     handleEvent(actions, 'changeNblur', propName, values);
@@ -117,7 +115,7 @@ export default function Decimal(props: DecimalProps) {
       decimalSeparator={theCurrDec}
       thousandSeparator={showGroupSeparators ? theCurrSep : ''}
       decimalScale={readOnly && formatter === 'Currency' ? undefined : decimalPrecision}
-      InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}
+      slotProps={{ input: { ...readOnlyProp, inputProps: { ...testProps } } }}
       customInput={TextField}
     />
   );

package/lib/field/Dropdown/Dropdown.tsx

@@ -6,7 +6,7 @@ import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/data_page';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface IOption {
   key: string;
@@ -198,9 +198,7 @@ export default function Dropdown(props: DropdownProps) {
     readOnlyProp = { readOnly: true };
   }
 
-  let testProp = {};
-
-  testProp = {
+  const testProps: any = {
     'data-test-id': testId
   };
 
@@ -228,7 +226,9 @@ export default function Dropdown(props: DropdownProps) {
       label={label}
       value={value === '' && !readOnly ? placeholder : value}
       select
-      InputProps={{ ...readOnlyProp, ...testProp }}
+      slotProps={{
+        input: { ...readOnlyProp, ...testProps }
+      }}
     >
       {options.map((option: any) => (
         <MenuItem key={option.key} value={option.key}>

package/lib/field/Email/Email.tsx

@@ -3,7 +3,7 @@ import { InputAdornment, TextField } from '@mui/material';
 import MailOutlineIcon from '@mui/icons-material/MailOutline';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 
 interface EmailProps extends PConnFieldProps {
@@ -55,11 +55,7 @@ export default function Email(props: EmailProps) {
     return <TextInput {...props} />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   function handleChange(event) {
     // update internal value
@@ -85,13 +81,15 @@ export default function Email(props: EmailProps) {
       label={label}
       value={inputValue}
       type='email'
-      InputProps={{
-        startAdornment: (
-          <InputAdornment position='start'>
-            <MailOutlineIcon />
-          </InputAdornment>
-        ),
-        inputProps: { ...testProp }
+      slotProps={{
+        input: {
+          startAdornment: (
+            <InputAdornment position='start'>
+              <MailOutlineIcon />
+            </InputAdornment>
+          ),
+          inputProps: { ...testProps }
+        }
       }}
     />
   );

package/lib/field/Group/Group.tsx

@@ -1,7 +1,7 @@
-import { ReactElement, useMemo } from 'react';
+import { type ReactElement, useMemo } from 'react';
 import { Grid } from '@mui/material';
 import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface GroupProps extends PConnFieldProps {
   children: ReactElement[];

package/lib/field/Integer/Integer.tsx

@@ -3,7 +3,7 @@ import { TextField } from '@mui/material';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface IntegerProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Integer here
@@ -54,11 +54,7 @@ export default function Integer(props: IntegerProps) {
     return <TextInput {...props} />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   function intOnChange(event) {
     // console.log(`Integer intOnChange inValue: ${event.target.value}`);
@@ -96,7 +92,9 @@ export default function Integer(props: IntegerProps) {
       label={label}
       value={inputValue}
       type='text'
-      inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', ...testProp }}
+      slotProps={{
+        htmlInput: { inputMode: 'numeric', pattern: '[0-9]*', ...testProps }
+      }}
     />
   );
 }

package/lib/field/Percentage/Percentage.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { NumericFormat } from 'react-number-format';
 import { TextField } from '@mui/material';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
@@ -70,11 +70,7 @@ export default function Percentage(props: PercentageProps) {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   const theSymbols = getCurrencyCharacters(currencyISOCode);
   const theCurrDec = theSymbols.theDecimalIndicator;
@@ -109,7 +105,7 @@ export default function Percentage(props: PercentageProps) {
       thousandSeparator={showGroupSeparators ? theCurrSep : ''}
       decimalScale={decimalPrecision}
       suffix='%'
-      InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}
+      slotProps={{ input: { ...readOnlyProp, inputProps: { ...testProps } } }}
       customInput={TextField}
     />
   );

package/lib/field/Phone/Phone.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { MuiTelInput } from 'mui-tel-input';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 
 interface PhoneProps extends PConnFieldProps {
@@ -69,9 +69,11 @@ export default function Phone(props: PhoneProps) {
           error={status === 'error'}
           label={label}
           value={value}
-          InputProps={{
-            readOnly: true,
-            inputProps: { ...testProp }
+          slotProps={{
+            input: {
+              readOnly: true,
+              ...testProp
+            }
           }}
           disableDropdown={disableDropdown}
         />
@@ -105,7 +107,7 @@ export default function Phone(props: PhoneProps) {
       error={status === 'error'}
       label={label}
       value={inputValue}
-      InputProps={{ ...testProp }}
+      slotProps={{ input: { ...testProp } }}
     />
   );
 }

package/lib/field/RadioButtons/RadioButtons.tsx

@@ -4,7 +4,7 @@ import { Radio, RadioGroup, FormControl, FormControlLabel, FormLabel, FormHelper
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 // Can't use RadioButtonProps until getLocaleRuleNameFromKeys is NOT private
 interface RadioButtonsProps extends PConnFieldProps {

package/lib/field/RichText/RichText.tsx

@@ -2,7 +2,7 @@ import { useRef } from 'react';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface RichTextProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextArea here

package/lib/field/ScalarList/ScalarList.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-array-index-key */
 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';
 
 // ScalarListProps can't extend PConnFieldProps because its 'value' has a different type
 interface ScalarListProps extends PConnProps {

package/lib/field/SemanticLink/SemanticLink.tsx

@@ -3,7 +3,7 @@ import Grid from '@mui/material/Grid';
 import makeStyles from '@mui/styles/makeStyles';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 /* although this is called the SemanticLink component, we are not yet displaying as a
 SemanticLink in SDK and only showing the value as a read only text field. */

package/lib/field/TextArea/TextArea.tsx

@@ -3,7 +3,7 @@ import { TextField } from '@mui/material';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface TextAreaProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextArea here
@@ -58,11 +58,7 @@ export default function TextArea(props: TextAreaProps) {
     readOnlyProp = { readOnly: true };
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   function handleChange(event) {
     // update internal value
@@ -90,7 +86,9 @@ export default function TextArea(props: TextAreaProps) {
       error={status === 'error'}
       label={label}
       value={inputValue}
-      InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
+      slotProps={{
+        input: { ...readOnlyProp, inputProps: { maxLength, ...testProps } }
+      }}
     />
   );
 }

package/lib/field/TextContent/TextContent.tsx

@@ -1,6 +1,6 @@
 import { Typography } from '@mui/material';
 
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface TextContentProps extends PConnProps {
   // If any, enter additional props that only exist on TextContent here