@pega/dx-component-builder-sdk 0.25.5 → 0.25.6

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

@@ -1,5 +1,5 @@
 import { createElement } from 'react';
-import Grid from '@material-ui/core/Grid';
+import Grid2 from '@mui/material/Grid2';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
@@ -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,11 +19,14 @@ 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', 'LABELS_LEFT');
+  getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
   getPConnect().setInheritedProp('readOnly', true);
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {
@@ -50,23 +55,23 @@ 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' }}>
+          <Grid2 container spacing={1} style={{ padding: '0 0 1em' }}>
             {highlightedDataArr.map((child, i) => (
-              <Grid item xs={12} key={`hf-${i + 1}`}>
+              <Grid2 size={{ xs: 12 }} key={`hf-${i + 1}`}>
                 {child}
-              </Grid>
+              </Grid2>
             ))}
-          </Grid>
+          </Grid2>
         )}
-        <Grid container spacing={1}>
+        <Grid2 container spacing={1}>
           {children.map((child, i) => (
-            <Grid item xs={12} key={`r-${i + 1}`}>
+            <Grid2 size={{ xs: 12 }} key={`r-${i + 1}`}>
               {child}
-            </Grid>
+            </Grid2>
           ))}
-        </Grid>
+        </Grid2>
       </FieldGroup>
     </StyledPegaDxilMyDetailsWrapper>
   );

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyDetails/mock.ts

@@ -108,7 +108,7 @@ export const pyReviewRaw = {
           value: 'John',
           label: 'First Name',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {
@@ -133,7 +133,7 @@ export const pyReviewRaw = {
           value: '',
           label: 'Middle Name',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {
@@ -158,7 +158,7 @@ export const pyReviewRaw = {
           value: 'Doe',
           label: 'Last Name',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {
@@ -183,13 +183,30 @@ export const pyReviewRaw = {
           required: true,
           testId: 'CE8AE9DA5B7CD6C3DF2929543A9AF92D',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT'
+          displayMode: 'DISPLAY_ONLY',
+          getPConnect: () => {
+            return {
+              getActionsApi: () => {
+                return {
+                  updateFieldValue: () => {
+                    /* nothing */
+                  },
+                  triggerFieldChange: () => {
+                    /* nothing */
+                  }
+                };
+              },
+              getStateProps: () => {
+                return { value: '.email' };
+              }
+            };
+          }
         },
         {
           readOnly: undefined,
           value: '+16397975093',
           label: 'Phone',
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           hasSuggestions: false,
           getPConnect: () => {
             return {
@@ -215,7 +232,7 @@ export const pyReviewRaw = {
           value: '90.99',
           label: 'Price',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {
@@ -237,7 +254,7 @@ export const pyReviewRaw = {
           value: '100 Mbps',
           label: 'Internet Plan',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {
@@ -347,7 +364,7 @@ export const pyReviewResolved = {
       }
     }
   ],
-  displayMode: 'LABELS_LEFT'
+  displayMode: 'DISPLAY_ONLY'
 };
 
 export const regionChildrenResolved = [
@@ -355,13 +372,13 @@ export const regionChildrenResolved = [
     readOnly: true,
     value: '',
     label: 'SLA Deadline',
-    displayMode: 'LABELS_LEFT'
+    displayMode: 'DISPLAY_ONLY'
   },
   {
     readOnly: true,
     value: '',
     label: 'SLA Goal',
-    displayMode: 'LABELS_LEFT'
+    displayMode: 'DISPLAY_ONLY'
   },
   {
     readOnly: true,
@@ -378,6 +395,6 @@ export const regionChildrenResolved = [
         value: 'Current Date Time'
       }
     ],
-    displayMode: 'LABELS_LEFT'
+    displayMode: 'DISPLAY_ONLY'
   }
 ];

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

@@ -4,22 +4,16 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import PegaDxilMyForm from './index';
 
-window.PCore = {
-  ...window.PCore,
-  getErrorHandler: (): any => {
-    return {
-      getGenericFailedMessage() {
-        /* nothing */
-      }
-    };
-  },
-  getConstants: (): any => {
-    return {
-      CASE_INFO: {
-        INSTRUCTIONS: ''
-      }
-    };
-  }
+window.PCore.getErrorHandler = (): any => {
+  return {
+    getOperatorDetails: () => {
+      return {
+        getGenericFailedMessage() {
+          /* nothing */
+        }
+      };
+    }
+  };
 };
 
 const meta: Meta<typeof PegaDxilMyForm> = {
@@ -274,6 +268,19 @@ export const BasePegaDxilMyForm: Story = args => {
                         },
                         getPConnect: () => {
                           return {
+                            getActionsApi: () => {
+                              return {
+                                updateFieldValue: () => {
+                                  /* nothing */
+                                },
+                                triggerFieldChange: () => {
+                                  /* nothing */
+                                }
+                              };
+                            },
+                            getStateProps: () => {
+                              return { value: '.email' };
+                            },
                             getComputedVisibility: () => {
                               return true;
                             }

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyPage/OneColumn.tsx

@@ -1,5 +1,5 @@
-import { Grid } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import Grid2 from '@mui/material/Grid2';
+import makeStyles from '@mui/styles/makeStyles';
 
 interface OneColumnProps {
   // If any, enter additional props that only exist on this component
@@ -20,12 +20,12 @@ export default function OneColumn(props: OneColumnProps) {
   const { children } = props;
 
   return (
-    <Grid container spacing={2}>
-      <Grid item xs={12} className={classes.colStyles}>
+    <Grid2 container spacing={2}>
+      <Grid2 size={{ xs: 12 }} className={classes.colStyles}>
         {children.map(child => {
           return child;
         })}
-      </Grid>
-    </Grid>
+      </Grid2>
+    </Grid2>
   );
 }

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

@@ -3,34 +3,14 @@ import type { Meta, StoryObj } from '@storybook/react';
 import PegaDxilMyTwoColumnDetails from './index';
 import operatorDetails, { pyReviewRaw } from './mock';
 
-window.PCore = {
-  ...window.PCore,
-  getUserApi: (): any => {
-    return {
-      getOperatorDetails: () => {
-        return new Promise(resolve => {
-          resolve(operatorDetails);
-        });
-      }
-    };
-  },
-  getLocaleUtils: (): any => {
-    return {
-      getLocaleValue: value => {
-        return value;
-      }
-    };
-  },
-  getEnvironmentInfo: (): any => {
-    return {
-      getUseLocale: () => {
-        return 'en-US';
-      },
-      getLocale: () => {
-        return 'en-GB';
-      }
-    };
-  }
+window.PCore.getUserApi = (): any => {
+  return {
+    getOperatorDetails: () => {
+      return new Promise(resolve => {
+        resolve(operatorDetails);
+      });
+    }
+  };
 };
 
 const meta: Meta<typeof PegaDxilMyTwoColumnDetails> = {

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

@@ -1,5 +1,5 @@
 import { createElement } from 'react';
-import Grid from '@material-ui/core/Grid';
+import Grid2 from '@mui/material/Grid2';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
@@ -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,11 +19,14 @@ 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
-  getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+  getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
   getPConnect().setInheritedProp('readOnly', true);
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {
@@ -50,23 +55,23 @@ 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' }}>
+          <Grid2 container spacing={1} style={{ padding: '0 0 1em' }}>
             {highlightedDataArr.map((child, i) => (
-              <Grid item xs={6} key={`hf-${i + 1}`}>
+              <Grid2 size={{ xs: 6 }} key={`hf-${i + 1}`}>
                 {child}
-              </Grid>
+              </Grid2>
             ))}
-          </Grid>
+          </Grid2>
         )}
-        <Grid container spacing={1}>
+        <Grid2 container spacing={1}>
           {children.map((child, i) => (
-            <Grid item xs={6} key={`r-${i + 1}`}>
+            <Grid2 size={{ xs: 6 }} key={`r-${i + 1}`}>
               {child}
-            </Grid>
+            </Grid2>
           ))}
-        </Grid>
+        </Grid2>
       </FieldGroup>
     </StyledPegaDxilMyTwoColumnDetailsWrapper>
   );

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyTwoColumnDetails/mock.ts

@@ -108,7 +108,7 @@ export const pyReviewRaw = {
           value: 'John',
           label: 'First Name',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {
@@ -133,7 +133,7 @@ export const pyReviewRaw = {
           value: '',
           label: 'Middle Name',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {
@@ -158,7 +158,7 @@ export const pyReviewRaw = {
           value: 'Doe',
           label: 'Last Name',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {
@@ -183,7 +183,7 @@ export const pyReviewRaw = {
           required: true,
           testId: 'CE8AE9DA5B7CD6C3DF2929543A9AF92D',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {
@@ -206,7 +206,7 @@ export const pyReviewRaw = {
           readOnly: undefined,
           value: '+16397975093',
           label: 'Phone',
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           hasSuggestions: false,
           getPConnect: () => {
             return {
@@ -232,7 +232,7 @@ export const pyReviewRaw = {
           value: '90.99',
           label: 'Price',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {
@@ -254,7 +254,7 @@ export const pyReviewRaw = {
           value: '100 Mbps',
           label: 'Internet Plan',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {
@@ -302,7 +302,7 @@ export const pyReviewRaw = {
           value: '',
           label: 'Middle Name',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {
@@ -327,7 +327,7 @@ export const pyReviewRaw = {
           value: 'Doe',
           label: 'Last Name',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {
@@ -352,7 +352,7 @@ export const pyReviewRaw = {
           required: true,
           testId: 'CE8AE9DA5B7CD6C3DF2929543A9AF92D',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {
@@ -375,7 +375,7 @@ export const pyReviewRaw = {
           readOnly: undefined,
           value: '+16397975093',
           label: 'Phone',
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           hasSuggestions: false,
           getPConnect: () => {
             return {
@@ -401,7 +401,7 @@ export const pyReviewRaw = {
           value: '90.99',
           label: 'Price',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {
@@ -423,7 +423,7 @@ export const pyReviewRaw = {
           value: '100 Mbps',
           label: 'Internet Plan',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {

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

@@ -1,10 +1,11 @@
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { TextField } from '@material-ui/core';
-import MuiPhoneNumber from 'material-ui-phone-number';
-import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
-import DayjsUtils from '@date-io/dayjs';
+import { TextField } from '@mui/material';
+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';
 
 import PegaDxilMyTwoColumnForm from './index';
 import { pyReviewRaw } from './mock';
@@ -22,26 +23,34 @@ 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 variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
+  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 = (
-      <MuiPickersUtilsProvider utils={DayjsUtils}>
-        <KeyboardDatePicker
-          variant='inline'
-          inputVariant='outlined'
-          placeholder='mm/dd/yyyy'
-          fullWidth
-          format='MM/DD/YYYY'
-          mask='__/__/____'
-          size='small'
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <DatePicker
           label={label}
-          value={value || null}
+          format='MM/DD/YYYY'
+          value={value ? dayjs(value) : null}
+          slotProps={{
+            textField: {
+              variant: 'outlined',
+              placeholder: 'mm/dd/yyyy',
+              size: 'small'
+            }
+          }}
           onChange={onChange}
         />
-      </MuiPickersUtilsProvider>
+      </LocalizationProvider>
     );
 
   if (label === 'Email')
@@ -61,18 +70,29 @@ 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}
+      slotProps={{
+        input: {
+          readOnly: true,
+          ...testProp,
+        },
+      }}
+      disableDropdown={disableDropdown}
+    />
     );
 
   if (variant === 'inline') {

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

@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactElement } from 'react';
-import { Grid, GridSize } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import Grid2, { type GridSize } from '@mui/material/Grid2';
+import makeStyles from '@mui/styles/makeStyles';
 
 import StyledPegaDxilMyTwoColumnFormWrapper from './styles';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
@@ -49,14 +49,14 @@ export default function PegaDxilMyTwoColumnForm(props: PropsWithChildren<PegaDxi
 
   return (
     <StyledPegaDxilMyTwoColumnFormWrapper>
-      <Grid container spacing={1}>
-        <Grid item xs={12} md={aSize} className={classes.colStyles}>
+      <Grid2 container spacing={1}>
+        <Grid2 size={{ xs: 12, md: aSize }} className={classes.colStyles}>
           {childrenToRender[0]}
-        </Grid>
-        <Grid item xs={12} md={bSize} className={classes.colStyles}>
+        </Grid2>
+        <Grid2 size={{ xs: 12, md: bSize }} className={classes.colStyles}>
           {childrenToRender[1]}
-        </Grid>
-      </Grid>
+        </Grid2>
+      </Grid2>
     </StyledPegaDxilMyTwoColumnFormWrapper>
   );
 }

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

@@ -3,6 +3,16 @@ import type { Meta, StoryObj } from '@storybook/react';
 import PegaDxilMyCaseWidget from './index';
 import { historyData } from './mock';
 
+window.PCore.getDataApiUtils = (): any => {
+  return {
+    getData: () => {
+      return new Promise(resolve => {
+        resolve(historyData);
+      });
+    }
+  };
+};
+
 const meta: Meta<typeof PegaDxilMyCaseWidget> = {
   title: 'PegaDxilMyCaseWidget',
   component: PegaDxilMyCaseWidget,
@@ -13,26 +23,6 @@ export default meta;
 type Story = StoryObj<typeof PegaDxilMyCaseWidget>;
 
 export const BasePegaDxilMyCaseWidget: Story = args => {
-  window.PCore = {
-    ...window.PCore,
-    getDataApiUtils: (): any => {
-      return {
-        getData: (): any => {
-          return new Promise(resolve => {
-            resolve(historyData);
-          });
-        }
-      };
-    },
-    getConstants: (): any => {
-      return {
-        CASE_INFO: {
-          CASE_INFO_ID: 'caseInfo.ID'
-        }
-      };
-    }
-  };
-
   const props = {
     label: 'Case history',