@pega/dx-component-builder-sdk 24.2.11 → 24.2.12

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDate/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
@@ -46,6 +46,10 @@ export default function PegaDxilMyDate(props: PegaDxilMyDateProps) {
   dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;
   dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;
 
+  useEffect(() => {
+    setDateValue(dayjs(value));
+  }, [value]);
+
   if (displayMode === 'DISPLAY_ONLY') {
     const formattedDate = format(props.value, 'date', {
       format: dateFormatInfo.dateFormatString

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDateTime/demo.stories.tsx

@@ -13,6 +13,9 @@ window.PCore = {
       },
       getLocale: () => {
         return 'en-GB';
+      },
+      getTimeZone: () => {
+        return '';
       }
     };
   },

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDateTime/index.tsx

@@ -1,9 +1,9 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import dayjs, { Dayjs } from 'dayjs';
-
+import DateFormatter from '@pega/react-sdk-components/lib/components/helpers/formatters/Date';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 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';
@@ -26,7 +26,10 @@ export default function PegaDxilMyDateTime(props: PegaDxilMyDateTimeProps) {
 
   const { getPConnect, label, required, disabled, value = '', validatemessage, status, readOnly, testId, helperText, displayMode, hideLabel } = props;
 
-  const [dateValue, setDateValue] = useState<Dayjs | null>(value ? dayjs(value) : null);
+  const environmentInfo = PCore.getEnvironmentInfo();
+  const timezone = environmentInfo && environmentInfo.getTimeZone();
+
+  const [dateValue, setDateValue] = useState<Dayjs | null>(value ? dayjs(DateFormatter.convertToTimezone(value, { timezone })) : null);
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
@@ -41,6 +44,10 @@ export default function PegaDxilMyDateTime(props: PegaDxilMyDateTimeProps) {
   dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;
   dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;
 
+  useEffect(() => {
+    setDateValue(dayjs(DateFormatter.convertToTimezone(value, { timezone })));
+  }, [value]);
+
   if (displayMode === 'DISPLAY_ONLY') {
     const formattedDateTime = format(props.value, 'datetime', {
       format: `${dateFormatInfo.dateFormatString} hh:mm a`
@@ -67,8 +74,9 @@ export default function PegaDxilMyDateTime(props: PegaDxilMyDateTimeProps) {
   };
 
   const handleChange = date => {
-    setDateValue(date);
-    const changeValue = date && date.isValid() ? date.toISOString() : null;
+    const timeZoneDateTime = dayjs.tz(date.format('YYYY-MM-DDTHH:mm:ss'), timezone);
+    const changeValue = timeZoneDateTime && timeZoneDateTime.isValid() ? timeZoneDateTime.toISOString() : '';
+    setDateValue(timeZoneDateTime);
     handleEvent(actions, 'changeNblur', propName, changeValue);
   };
 

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDecimal/index.tsx

@@ -1,6 +1,6 @@
 import { NumericFormat } from 'react-number-format';
 import { TextField } from '@mui/material';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 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';
@@ -63,6 +63,10 @@ export default function PegaDxilMyDecimal(props: PegaDxilMyDecimalProps) {
 
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
 
+  useEffect(() => {
+    setValues(value.toString());
+  }, [value]);
+
   let readOnlyProp = {}; // Note: empty if NOT ReadOnly
 
   if (readOnly) {
@@ -115,6 +119,7 @@ export default function PegaDxilMyDecimal(props: PegaDxilMyDecimalProps) {
         }}
         onBlur={!readOnly ? decimalOnBlur : undefined}
         prefix={readOnly && formatter === 'Currency' ? theCurrSym : ''}
+        suffix={readOnly && formatter === 'Percentage' ? '%' : ''}
         decimalSeparator={theCurrDec}
         thousandSeparator={showGroupSeparators ? theCurrSep : ''}
         decimalScale={readOnly && formatter === 'Currency' ? undefined : decimalPrecision}

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyEmail/demo.stories.tsx

@@ -25,6 +25,9 @@ export const BasePegaDxilMyEmail: Story = args => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
+            },
+            triggerFieldChange: (propName, theValue) => {
+              setValue(theValue);
             }
           };
         },

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyIconButtonURL/index.tsx

@@ -125,7 +125,7 @@ export default function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlPr
         </Tooltip>
         {
           // eslint-disable-next-line jsx-a11y/control-has-associated-label
-          <a href={validUrl} style={{ display: 'flex' }}>
+          <a href={validUrl} target='_blank' style={{ display: 'flex' }} rel='noreferrer'>
             <LanguageIcon />
           </a>
         }

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyInteger/demo.stories.tsx

@@ -26,6 +26,9 @@ export const BasePegaDxilMyInteger: Story = args => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
+            },
+            triggerFieldChange: (propName, theValue) => {
+              setValue(theValue);
             }
           };
         },

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyParagraph/demo.stories.tsx

@@ -27,6 +27,9 @@ export const BasePegaDxilMyParagraph: Story = args => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
+            },
+            triggerFieldChange: (propName, theValue) => {
+              setValue(theValue);
             }
           };
         },

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPercentage/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+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';
@@ -56,6 +56,10 @@ export default function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
   const formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);
 
+  useEffect(() => {
+      setValues(value.toString());
+    }, [value]);
+
   let readOnlyProp = {}; // Note: empty if NOT ReadOnly
 
   if (readOnly) {

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPhone/demo.stories.tsx

@@ -25,6 +25,9 @@ export const BasePegaDxilMyPhone: Story = args => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
+            },
+            triggerFieldChange: (propName, theValue) => {
+              setValue(theValue);
             }
           };
         },

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPhone/index.tsx

@@ -1,5 +1,5 @@
-import MuiPhoneNumber from 'material-ui-phone-number';
 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';
@@ -63,12 +63,12 @@ export default function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
     return (
       <div>
         <StyledPegaDxilMyPhoneWrapper>
-          <MuiPhoneNumber
+          <MuiTelInput
             fullWidth
             helperText={helperTextToDisplay}
             placeholder={placeholder ?? ''}
             size='small'
-            defaultCountry='us'
+            defaultCountry='US'
             required={required}
             disabled={disabled}
             onChange={onChange}
@@ -99,13 +99,13 @@ export default function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
 
   return (
     <StyledPegaDxilMyPhoneWrapper>
-      <MuiPhoneNumber
+      <MuiTelInput
         fullWidth
         variant='outlined'
         helperText={helperTextToDisplay}
         placeholder={placeholder ?? ''}
         size='small'
-        defaultCountry='us'
+        defaultCountry='US'
         required={required}
         disabled={disabled}
         onChange={handleChange}

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPicklist/index.tsx

@@ -143,7 +143,7 @@ export default function PegaDxilMyPicklist(props: PegaDxilMyPicklistProps) {
   }, [theDatasource]);
 
   useEffect(() => {
-    if (!displayMode && listType !== 'associated' && typeof datasource === 'string') {
+    if (listType !== 'associated' && typeof datasource === 'string') {
       getDataPage(datasource, parameters, context).then((results: any) => {
         const optionsData: any[] = [];
         const displayColumn = getDisplayFieldsMetaData(columns);
@@ -171,25 +171,31 @@ export default function PegaDxilMyPicklist(props: PegaDxilMyPicklistProps) {
 
   let readOnlyProp = {};
 
-  if (displayMode === 'DISPLAY_ONLY') {
-    return (
-      <FieldValueList
-        name={hideLabel ? '' : label}
-        // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
-        value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
-      />
-    );
-  }
+  const displayFn = (displayM, val) => {
+    if (displayM === 'DISPLAY_ONLY') {
+      return (
+        <FieldValueList
+          name={hideLabel ? '' : label}
+          value={thePConn.getLocalizedValue(val, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
+        />
+      );
+    }
+
+    if (displayM === 'STACKED_LARGE_VAL') {
+      return (
+        <FieldValueList
+          name={hideLabel ? '' : label}
+          value={thePConn.getLocalizedValue(val, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
+          variant='stacked'
+        />
+      );
+    }
+
+    return null;
+  };
 
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    return (
-      <FieldValueList
-        name={hideLabel ? '' : label}
-        // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
-        value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
-        variant='stacked'
-      />
-    );
+  if (displayMode) {
+    return displayFn(displayMode, options.find(option => option.key === value)?.value || value);
   }
 
   if (readOnly) {
@@ -231,7 +237,6 @@ export default function PegaDxilMyPicklist(props: PegaDxilMyPicklistProps) {
       >
         {options.map((option: any) => (
           <MenuItem key={option.key} value={option.key}>
-            {/* @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'  */}
             {thePConn.getLocalizedValue(option.value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
           </MenuItem>
         ))}

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyRadiobuttons/index.tsx

@@ -70,7 +70,6 @@ export default function PegaDxilMyRadiobuttons(props: PegaDxilMyRadiobuttonsProp
     return (
       <FieldValueList
         name={hideLabel ? '' : label}
-        // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
         value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
       />
     );
@@ -80,7 +79,6 @@ export default function PegaDxilMyRadiobuttons(props: PegaDxilMyRadiobuttonsProp
     return (
       <FieldValueList
         name={hideLabel ? '' : label}
-        // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
         value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
         variant='stacked'
       />
@@ -97,7 +95,7 @@ export default function PegaDxilMyRadiobuttons(props: PegaDxilMyRadiobuttonsProp
 
   return (
     <StyledPegaDxilMyRadiobuttonsWrapper>
-      <FormControl error={status === 'error'} required={required}>
+      <FormControl variant='standard' error={status === 'error'} required={required}>
         <FormLabel component='legend'>{label}</FormLabel>
         <RadioGroup value={theSelectedButton} onChange={handleChange} onBlur={!readOnly ? handleBlur : undefined} row={inline}>
           {theOptions.map(theOption => {
@@ -108,7 +106,6 @@ export default function PegaDxilMyRadiobuttons(props: PegaDxilMyRadiobuttonsProp
                 label={thePConn.getLocalizedValue(
                   theOption.value,
                   localePath,
-                  // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
                   thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
                 )}
                 control={<Radio key={theOption.key} color='primary' disabled={readOnly} />}

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyText/demo.stories.tsx

@@ -26,6 +26,9 @@ export const BasePegaDxilMyText: Story = args => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
+            },
+            triggerFieldChange: (propName, theValue) => {
+              setValue(theValue);
             }
           };
         },

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyTextInput/demo.stories.tsx

@@ -27,6 +27,9 @@ export const BasePegaDxilMyTextInput: Story = args => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
+            },
+            triggerFieldChange: (propName, theValue) => {
+              setValue(theValue);
             }
           };
         },

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyTimeOfDay/index.tsx

@@ -47,7 +47,7 @@ export default function PegaDxilMyTimeOfDay(props: PegaDxilMyTimeOfDayProps) {
   };
 
   const handleChange = date => {
-    const theValue = date && date.isValid() ? date.format('HH:mm') : null;
+    const theValue = date && date.isValid() ? date.format('HH:mm:ss') : null;
     handleEvent(actions, 'changeNblur', propName, theValue);
   };
 

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyURL/demo.stories.tsx

@@ -25,6 +25,9 @@ export const BasePegaDxilMyUrl: Story = args => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
+            },
+            triggerFieldChange: (propName, theValue) => {
+              setValue(theValue);
             }
           };
         },

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyDetails/index.tsx

@@ -9,6 +9,8 @@ import StyledPegaDxilMyDetailsWrapper from './styles';
 
 interface PegaDxilMyDetailsProps extends PConnProps {
   // If any, enter additional props that only exist on this component
+  label: string;
+  showLabel: boolean;
   showHighlightedData: boolean;
 }
 // Duplicated runtime code from React SDK
@@ -17,8 +19,11 @@ export default function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldGroup = getComponentFromMap('FieldGroup');
 
-  const { getPConnect, showHighlightedData } = props;
+  const { label, showLabel, getPConnect, showHighlightedData } = props;
 
+  // Get the inherited props from the parent to determine label settings
+  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
+  
   // Set display mode prop and re-create the children so this part of the dom tree renders
   // in a readonly (display) mode instead of a editable
   getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
@@ -50,7 +55,7 @@ export default function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
 
   return (
     <StyledPegaDxilMyDetailsWrapper>
-      <FieldGroup>
+      <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
         {showHighlightedData && highlightedDataArr.length > 0 && (
           <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
             {highlightedDataArr.map((child, i) => (

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyTwoColumnDetails/index.tsx

@@ -9,6 +9,8 @@ import StyledPegaDxilMyTwoColumnDetailsWrapper from './styles';
 
 interface PegaDxilMyTwoColumnDetailsProps extends PConnProps {
   // If any, enter additional props that only exist on this component
+  showLabel: boolean;
+  label: string;
   showHighlightedData: boolean;
 }
 // Duplicated runtime code from React SDK
@@ -17,7 +19,10 @@ export default function PegaDxilMyTwoColumnDetails(props: PegaDxilMyTwoColumnDet
   // Get emitted components from map (so we can get any override that may exist)
   const FieldGroup = getComponentFromMap('FieldGroup');
 
-  const { getPConnect, showHighlightedData = false } = props;
+  const { label, showLabel = true, getPConnect, showHighlightedData = false } = props;
+
+  // Get the inherited props from the parent to determine label settings
+  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
 
   // Set display mode prop and re-create the children so this part of the dom tree renders
   // in a readonly (display) mode instead of a editable
@@ -50,7 +55,7 @@ export default function PegaDxilMyTwoColumnDetails(props: PegaDxilMyTwoColumnDet
 
   return (
     <StyledPegaDxilMyTwoColumnDetailsWrapper>
-      <FieldGroup>
+      <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
         {showHighlightedData && highlightedDataArr.length > 0 && (
           <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
             {highlightedDataArr.map((child, i) => (

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyTwoColumnForm/demo.stories.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { TextField } from '@mui/material';
-import MuiPhoneNumber from 'material-ui-phone-number';
+import { MuiTelInput } from 'mui-tel-input';
 import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import dayjs from 'dayjs';
@@ -23,11 +23,17 @@ export default meta;
 type Story = StoryObj<typeof PegaDxilMyTwoColumnForm>;
 
 const renderField = resolvedProps => {
-  const { displayMode, value = '', label = '', onChange } = resolvedProps;
+  const { displayMode, value = '', label = '', onChange, required, disabled, helperText, placeholder, validatemessage, status, testId } = resolvedProps;
 
+  const helperTextToDisplay = validatemessage || helperText;
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
   const variant = displayMode === 'DISPLAY_ONLY' ? 'inline' : 'stacked';
   let val: any = '';
-  
+
   if (label === 'Service Date')
     val = (
       <LocalizationProvider dateAdapter={AdapterDayjs}>
@@ -64,18 +70,27 @@ const renderField = resolvedProps => {
   if (label === 'First Name' || label === 'Last Name' || label === 'Middle Name')
     val = <TextField value={value} fullWidth size='small' variant='outlined' style={{ fontSize: '14px' }} label={label} onChange={onChange} />;
 
+  const disableDropdown = true;
   if (label === 'Phone Number')
     val = (
-      <MuiPhoneNumber
-        value={value}
-        fullWidth
-        variant='outlined'
-        size='small'
-        style={{ fontSize: '14px' }}
-        defaultCountry='us'
-        label={label}
-        onChange={onChange}
-      />
+      <MuiTelInput
+      fullWidth
+      helperText={helperTextToDisplay}
+      placeholder={placeholder ?? ''}
+      size='small'
+      defaultCountry='US'
+      required={required}
+      disabled={disabled}
+      onChange={onChange}
+      error={status === 'error'}
+      label={label}
+      value={value}
+      InputProps={{
+        readOnly: true,
+        inputProps: { ...testProp }
+      }}
+      disableDropdown={disableDropdown}
+    />
     );
 
   if (variant === 'inline') {

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyTwoColumnForm/index.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren, ReactElement } from 'react';
-import { Grid } from '@mui/material';
+import { Grid, GridSize } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 
 import StyledPegaDxilMyTwoColumnFormWrapper from './styles';
@@ -35,8 +35,8 @@ export default function PegaDxilMyTwoColumnForm(props: PropsWithChildren<PegaDxi
   // Calculate the size
   //  Default to assume the 2 columns are evenly split. However, override if templateCol
   //  (example value: "1fr 1fr")
-  let aSize = 6;
-  let bSize = 6;
+  let aSize: GridSize = 6;
+  let bSize: GridSize = 6;
 
   const colAArray = templateCol
     .replaceAll(/[a-z]+/g, '')
@@ -44,8 +44,8 @@ export default function PegaDxilMyTwoColumnForm(props: PropsWithChildren<PegaDxi
     .map(itm => Number(itm));
   const totalCols = colAArray.reduce((v, itm) => itm + v, 0);
   const ratio = 12 / totalCols;
-  aSize = (ratio * colAArray[0]) as number;
-  bSize = (ratio * colAArray[1]) as number;
+  aSize = (ratio * colAArray[0]) as GridSize;
+  bSize = (ratio * colAArray[1]) as GridSize;
 
   return (
     <StyledPegaDxilMyTwoColumnFormWrapper>

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyCaseWidget/index.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { Theme } from '@mui/material/styles';
 import withStyles from '@mui/styles/withStyles';
 import createStyles from '@mui/styles/createStyles';
 import Table from '@mui/material/Table';
@@ -18,7 +19,7 @@ interface PegaDxilMyCaseWidgetProps extends PConnProps {
   // If any, enter additional props that only exist on this component
 }
 
-const StyledTableCell = withStyles((myTheme) =>
+const StyledTableCell = withStyles((myTheme: Theme) =>
   createStyles({
     head: {
       borderWidth: '1px',

package/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/FieldValueList/FieldValueList.tsx

@@ -51,7 +51,7 @@ export default function FieldValueList(props: FieldValueListProps) {
 
   function getGridItemLabel() {
     return (
-      <Grid item xs={variant === 'stacked' ? 12 : 6} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
+      <Grid item xs={variant === 'stacked' ? 12 : 4} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
         <Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>
           {name}
         </Typography>
@@ -63,7 +63,7 @@ export default function FieldValueList(props: FieldValueListProps) {
     const formattedValue = formatItemValue(value);
 
     return (
-      <Grid item xs={variant === 'stacked' ? 12 : 6} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
+      <Grid item xs={variant === 'stacked' ? 12 : 8} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
         {isHtml ? (
           // eslint-disable-next-line react/no-danger
           <div dangerouslySetInnerHTML={{ __html: formattedValue }} />

package/tests/assets/sdk-r/components/createAll/override-sdk/field/Phone/Phone.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import MuiPhoneNumber from 'material-ui-phone-number';
+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';
@@ -57,12 +57,12 @@ export default function Phone(props: PhoneProps) {
     const disableDropdown = true;
     return (
       <div>
-        <MuiPhoneNumber
+        <MuiTelInput
           fullWidth
           helperText={helperTextToDisplay}
           placeholder={placeholder ?? ''}
           size='small'
-          defaultCountry='us'
+          defaultCountry='US'
           required={required}
           disabled={disabled}
           onChange={onChange}
@@ -91,13 +91,13 @@ export default function Phone(props: PhoneProps) {
   };
 
   return (
-    <MuiPhoneNumber
+    <MuiTelInput
       fullWidth
       variant='outlined'
       helperText={helperTextToDisplay}
       placeholder={placeholder ?? ''}
       size='small'
-      defaultCountry='us'
+      defaultCountry='US'
       required={required}
       disabled={disabled}
       onChange={handleChange}