@pega/dx-component-builder-sdk 0.242.7 → 0.242.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/dx-component-builder-sdk",
-  "version": "0.242.7",
+  "version": "0.242.8",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/tasks/create/templates/SDK-React/template/FORM-region/demo.stories.tsx.mustache

@@ -23,7 +23,7 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 const renderField = resolvedProps => {
-  const { displayMode, value = '', label = '', onChange, required, disabled, helperText, placeholder, validatemessage, status, testId } = resolvedProps;
+  const { displayMode, value = '', label = '', readOnly, onChange, onBlur, required, disabled, helperText, placeholder, validatemessage, status, testId } = resolvedProps;
 
   const helperTextToDisplay = validatemessage || helperText;
   let testProp = {};
@@ -72,27 +72,24 @@ 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 = (
       <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}
-    />
+        fullWidth
+        variant='outlined'
+        helperText={helperTextToDisplay}
+        placeholder={placeholder ?? ''}
+        size='small'
+        defaultCountry='US'
+        required={required}
+        disabled={disabled}
+        onChange={onChange}
+        onBlur={!readOnly ? onBlur : undefined}
+        error={status === 'error'}
+        label={label}
+        value={value}
+        InputProps={{ ...testProp }}
+      />
     );
 <%={{ }}=%>     {{! revert delimiters for mustache }}
 
@@ -173,7 +170,8 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
       hasSuggestions: false,
       onChange: val => {
         setPhone(val);
-      }
+      },
+      onBlur: () => {}
     },
     {
       readOnly: undefined,

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

@@ -23,7 +23,7 @@ export default meta;
 type Story = StoryObj<typeof PegaDxilMyTwoColumnForm>;
 
 const renderField = resolvedProps => {
-  const { displayMode, value = '', label = '', onChange, required, disabled, helperText, placeholder, validatemessage, status, testId } = resolvedProps;
+  const { displayMode, value = '', label = '', readOnly, onChange, onBlur, required, disabled, helperText, placeholder, validatemessage, status, testId } = resolvedProps;
 
   const helperTextToDisplay = validatemessage || helperText;
   let testProp = {};
@@ -70,27 +70,24 @@ 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 = (
       <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}
-    />
+        fullWidth
+        variant='outlined'
+        helperText={helperTextToDisplay}
+        placeholder={placeholder ?? ''}
+        size='small'
+        defaultCountry='US'
+        required={required}
+        disabled={disabled}
+        onChange={onChange}
+        onBlur={!readOnly ? onBlur : undefined}
+        error={status === 'error'}
+        label={label}
+        value={value}
+        InputProps={{ ...testProp }}
+      />
     );
 
   if (variant === 'inline') {
@@ -170,7 +167,8 @@ export const BasePegaDxilMyTwoColumnForm: Story = args => {
       hasSuggestions: false,
       onChange: val => {
         setPhone(val);
-      }
+      },
+      onBlur: () => {}
     },
     {
       readOnly: undefined,