@pega/dx-component-builder-sdk 0.242.14 → 0.242.16

package/tests/assets/sdk-r/components/create/override-sdk/template/DynamicTabs/DynamicTabs.tsx

@@ -0,0 +1,80 @@
+import React, { Children, useMemo, useState } from 'react';
+import { Tab, Tabs } from '@mui/material';
+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';
+
+const useStyles = makeStyles(() => ({
+  tab: {
+    minWidth: '72px'
+  }
+}));
+
+interface DynamicTabsProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  showLabel: boolean;
+  label: string;
+  referenceList?: any[];
+}
+
+function DynamicTabs(props: DynamicTabsProps) {
+  const classes = useStyles();
+  const { referenceList, showLabel, label, getPConnect } = props;
+  const pConnect = getPConnect();
+  // Get the inherited props from the parent to determine label settings
+  const propsToUse = { label, showLabel, ...pConnect.getInheritedProps() };
+  const defaultTabIndex = 0;
+  // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'.
+  const { tablabel } = pConnect.getComponentConfig();
+  const tablabelProp = PCore.getAnnotationUtils().getPropertyName(tablabel);
+  const referenceListData: any = pConnect.getValue(`${referenceList}.pxResults`, ''); // 2nd arg empty string until typedefs properly allow optional
+  const memoisedTabViews = useMemo(() => {
+    pConnect.setInheritedProp('displayMode', 'DISPLAY_ONLY');
+    pConnect.setInheritedProp('readOnly', true);
+
+    return (
+      referenceListData &&
+      Children.toArray(
+        referenceListData.map((item, index) => {
+          return <React.Fragment key={item[tablabelProp]}>{buildView(pConnect, index, '')}</React.Fragment>;
+        })
+      )
+    );
+  }, [referenceListData]);
+  const [panelShown, changePanel] = useState(defaultTabIndex);
+  const handleTabClick = (e, id) => {
+    changePanel(parseInt(id, 10));
+  };
+  // Loop over the tab contents and and pull out the labels for the navigation
+  const tabItems =
+    referenceListData?.map((item, i) => {
+      const currentTabLabel = item[tablabelProp] || PCore.getLocaleUtils().getLocaleValue('No label specified in config', 'Generic');
+      return {
+        name: currentTabLabel,
+        id: i
+      };
+    }) || [];
+
+  return (
+    <>
+      {propsToUse.label && <h3 id='dynamic-tabs-title'>{propsToUse.label}</h3>}
+      <TabContext value={panelShown.toString()}>
+        <Tabs onChange={handleTabClick} value={panelShown} variant='scrollable' scrollButtons='auto' indicatorColor='primary' id='dynamic-tabs'>
+          {tabItems.map((tab: any) => (
+            <Tab key={tab.id} label={tab.name} value={tab.id} className={classes.tab} />
+          ))}
+        </Tabs>
+
+        {tabItems.map((tab: any) => (
+          <TabPanel key={tab.id} value={tab.id.toString()} tabIndex={+tab.id} id='dynamic-tabpanel'>
+            <div>{memoisedTabViews[parseInt(tab.id, 10)] || 'No content exists'}</div>
+          </TabPanel>
+        ))}
+      </TabContext>
+    </>
+  );
+}
+
+export default DynamicTabs;

package/tests/assets/sdk-r/components/create/override-sdk/template/DynamicTabs/config.json

@@ -0,0 +1,36 @@
+{
+  "name": "DynamicTabs",
+  "label": "Dynamic tabs (list)",
+  "description": "Dynamic tabs (list)",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "icon": "DynamicTabs.svg",
+  "hideTemplateEdit": true,
+  "hideFromTemplatePicker": true,
+  "viewHeadingLabel": "Default heading",
+  "properties": [
+    {
+      "name": "referenceList",
+      "label": "Data page",
+      "format": "CONTENTPICKERSOURCE"
+    },
+    {
+      "name": "parameters",
+      "label": "Parameters",
+      "format": "PARAMETERS",
+      "showOverride": false
+    },
+    {
+      "name": "tablabel",
+      "label": "Tab label",
+      "format": "PROPERTY",
+      "ofContextClass": true
+    },
+    {
+      "format": "VIEWPICKER",
+      "name": "Views",
+      "label": "Tab content",
+      "ofContextClass": true
+    }
+  ]
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/DynamicTabs/index.tsx

@@ -0,0 +1 @@
+export { default } from './DynamicTabs';

package/tests/assets/sdk-r/components/create/override-sdk/template/ListView/ListView.tsx

@@ -1034,34 +1034,35 @@ export default function ListView(props: ListViewProps) {
                     </TableRow>
                   </TableHead>
                   <TableBody>
-                    {stableSort(arRows, getComparator(order, orderBy))
-                      .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                      .map(row => {
-                        return (
-                          <TableRow key={row.pxRefObjectInsName || row.pyID}>
-                            {arColumns.map(column => {
-                              const value = row[column.id];
-                              return (
-                                <TableCell key={column.id} align={column.align} className={classes.cell}>
-                                  {_showButton(column.id, row) || column.displayAsLink ? (
-                                    <Link
-                                      component='button'
-                                      onClick={() => {
-                                        _listViewClick(row, column);
-                                      }}
-                                      underline='hover'
-                                    >
-                                      {column.format && typeof value === 'number' ? column.format(value) : value}
-                                    </Link>
-                                  ) : (
-                                    <>{column.format && typeof value === 'number' ? column.format(value) : value || '---'}</>
-                                  )}
-                                </TableCell>
-                              );
-                            })}
-                          </TableRow>
-                        );
-                      })}
+                    {arRows &&
+                      stableSort(arRows, getComparator(order, orderBy))
+                        .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                        .map(row => {
+                          return (
+                            <TableRow key={row.pxRefObjectInsName || row.pyID}>
+                              {arColumns.map(column => {
+                                const value = row[column.id];
+                                return (
+                                  <TableCell key={column.id} align={column.align} className={classes.cell}>
+                                    {_showButton(column.id, row) || column.displayAsLink ? (
+                                      <Link
+                                        component='button'
+                                        onClick={() => {
+                                          _listViewClick(row, column);
+                                        }}
+                                        underline='hover'
+                                      >
+                                        {column.format && typeof value === 'number' ? column.format(value) : value}
+                                      </Link>
+                                    ) : (
+                                      <>{column.format && typeof value === 'number' ? column.format(value) : value || '---'}</>
+                                    )}
+                                  </TableCell>
+                                );
+                              })}
+                            </TableRow>
+                          );
+                        })}
                   </TableBody>
                 </Table>
               </TableContainer>

package/tests/assets/sdk-r/components/create/override-sdk/template/SimpleTableManual/SimpleTableManual.tsx

@@ -258,11 +258,16 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   function generateRowsData() {
     // if referenceList is empty and dataPageName property value exists then make a datapage fetch call and get the list of data.
     if (!referenceList.length && dataPageName) {
-      getDataPage(dataPageName, parameters, context).then(listData => {
-        const data = formatRowsData(listData);
-        myRows = data;
-        setRowData(data);
-      });
+      getDataPage(dataPageName, parameters, context)
+        .then(listData => {
+          const data = formatRowsData(listData);
+          myRows = data;
+          setRowData(data);
+        })
+        .catch(e => {
+          // eslint-disable-next-line no-console
+          console.log(e);
+        });
     } else {
       // The referenceList prop has the JSON data for each row to be displayed
       //  in the table. So, iterate over referenceList to create the dataRows that
@@ -378,6 +383,9 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   };
 
   function descendingComparator<T>(a: T, b: T, orderedBy: keyof T) {
+    if (!orderedBy || (!a[orderedBy] && !b[orderedBy])) {
+      return 0;
+    }
     if (!b[orderedBy] || b[orderedBy] < a[orderedBy]) {
       return -1;
     }

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

@@ -77,9 +77,7 @@ function PegaDxilMyRadiobuttons(props: PegaDxilMyRadiobuttonsProps) {
   const propName: string = stateProps.value;
   const configProps = pConn.getConfigProps();
   const className = pConn.getCaseInfo().getClassName();
-  // @ts-ignore
-  const { getLocaleRuleNameFromKeys, getLocalizedValue } = pConn;
-
+ 
   // @ts-ignore
   let configProperty = pConn.getRawMetadata()?.config?.value || '';
   configProperty = configProperty.startsWith('@P') ? configProperty.substring(3) : configProperty;
@@ -141,10 +139,10 @@ function PegaDxilMyRadiobuttons(props: PegaDxilMyRadiobuttonsProps) {
         id={`${fullReference}.${item.key}`}
         value={item.key}
         key={`${fullReference}.${item.key}`}
-        label={getLocalizedValue(
+        label={pConn.getLocalizedValue(
           isDatapage ? item.text : item.value,
           localePath,
-          getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
+          pConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
         )}
         name={fullReference}
       />

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

@@ -48,8 +48,8 @@ function PegaDxilMyCaseWidget(props: PegaDxilMyCaseWidgetProps) {
                 description: <Text style={{ wordBreak: 'break-word' }}>{entry.pyMessageKey}</Text>,
                 user: entry.pyPerformer,
                 id: index
-              };
-            })
+              } as any;
+            }) as any
           );
         } else {
           setHistory([]);

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyCurrency/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';
@@ -55,6 +55,10 @@ export default function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
     'data-test-id': testId
   };
 
+  useEffect(() => {
+    setValues(value.toString());
+  }, [value]);
+  
   // currencySymbols looks like this: { theCurrencySymbol: '$', theDecimalIndicator: '.', theSeparator: ',' }
   const theSymbols = getCurrencyCharacters(currencyISOCode);
   const theCurrSym = theSymbols.theCurrencySymbol;
@@ -93,6 +97,7 @@ export default function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
     <StyledPegaDxilMyCurrencyWrapper>
       <NumericFormat
         valueIsNumericString
+        variant={readOnly ? 'standard' : 'outlined'}
         label={label}
         helperText={helperTextToDisplay}
         placeholder={placeholder ?? ''}

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

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

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);
             }
           };
         },