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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/tasks/create/templates/SDK-React/template/FORM-region/demo.stories.tsx.mustache +18 -20
  3. package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyTwoColumnForm/demo.stories.tsx +19 -21
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/dx-component-builder-sdk",
3
- "version": "0.242.6",
3
+ "version": "0.242.8",
4
4
  "description": "Utility for building custom UI components",
5
5
  "bin": "./bin/index.js",
6
6
  "scripts": {
package/src/tasks/create/templates/SDK-React/template/FORM-region/demo.stories.tsx.mustache CHANGED
@@ -23,7 +23,7 @@ export default meta;
23
23
  type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
24
24
 
25
25
  const renderField = resolvedProps => {
26
- const { displayMode, value = '', label = '', onChange, required, disabled, helperText, placeholder, validatemessage, status, testId } = resolvedProps;
26
+ const { displayMode, value = '', label = '', readOnly, onChange, onBlur, required, disabled, helperText, placeholder, validatemessage, status, testId } = resolvedProps;
27
27
 
28
28
  const helperTextToDisplay = validatemessage || helperText;
29
29
  let testProp = {};
@@ -72,27 +72,24 @@ const renderField = resolvedProps => {
72
72
  if (label === 'First Name' || label === 'Last Name' || label === 'Middle Name')
73
73
  val = <TextField value={value} fullWidth size='small' variant='outlined' style={{ fontSize: '14px' }} label={label} onChange={onChange} />;
74
74
 
75
- const disableDropdown = true;
76
75
  if (label === 'Phone Number')
77
76
  val = (
78
77
  <MuiTelInput
79
- fullWidth
80
- helperText={helperTextToDisplay}
81
- placeholder={placeholder ?? ''}
82
- size='small'
83
- defaultCountry='US'
84
- required={required}
85
- disabled={disabled}
86
- onChange={onChange}
87
- error={status === 'error'}
88
- label={label}
89
- value={value}
90
- InputProps={{
91
- readOnly: true,
92
- inputProps: { ...testProp }
93
- }}
94
- disableDropdown={disableDropdown}
95
- />
78
+ fullWidth
79
+ variant='outlined'
80
+ helperText={helperTextToDisplay}
81
+ placeholder={placeholder ?? ''}
82
+ size='small'
83
+ defaultCountry='US'
84
+ required={required}
85
+ disabled={disabled}
86
+ onChange={onChange}
87
+ onBlur={!readOnly ? onBlur : undefined}
88
+ error={status === 'error'}
89
+ label={label}
90
+ value={value}
91
+ InputProps={{ ...testProp }}
92
+ />
96
93
  );
97
94
  <%={{ }}=%> {{! revert delimiters for mustache }}
98
95
 
@@ -173,7 +170,8 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
173
170
  hasSuggestions: false,
174
171
  onChange: val => {
175
172
  setPhone(val);
176
- }
173
+ },
174
+ onBlur: () => {}
177
175
  },
178
176
  {
179
177
  readOnly: undefined,
package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyTwoColumnForm/demo.stories.tsx CHANGED
@@ -23,7 +23,7 @@ export default meta;
23
23
  type Story = StoryObj<typeof PegaDxilMyTwoColumnForm>;
24
24
 
25
25
  const renderField = resolvedProps => {
26
- const { displayMode, value = '', label = '', onChange, required, disabled, helperText, placeholder, validatemessage, status, testId } = resolvedProps;
26
+ const { displayMode, value = '', label = '', readOnly, onChange, onBlur, required, disabled, helperText, placeholder, validatemessage, status, testId } = resolvedProps;
27
27
 
28
28
  const helperTextToDisplay = validatemessage || helperText;
29
29
  let testProp = {};
@@ -33,7 +33,7 @@ const renderField = resolvedProps => {
33
33
  };
34
34
  const variant = displayMode === 'DISPLAY_ONLY' ? 'inline' : 'stacked';
35
35
  let val: any = '';
36
-
36
+
37
37
  if (label === 'Service Date')
38
38
  val = (
39
39
  <LocalizationProvider dateAdapter={AdapterDayjs}>
@@ -70,27 +70,24 @@ const renderField = resolvedProps => {
70
70
  if (label === 'First Name' || label === 'Last Name' || label === 'Middle Name')
71
71
  val = <TextField value={value} fullWidth size='small' variant='outlined' style={{ fontSize: '14px' }} label={label} onChange={onChange} />;
72
72
 
73
- const disableDropdown = true;
74
73
  if (label === 'Phone Number')
75
74
  val = (
76
75
  <MuiTelInput
77
- fullWidth
78
- helperText={helperTextToDisplay}
79
- placeholder={placeholder ?? ''}
80
- size='small'
81
- defaultCountry='US'
82
- required={required}
83
- disabled={disabled}
84
- onChange={onChange}
85
- error={status === 'error'}
86
- label={label}
87
- value={value}
88
- InputProps={{
89
- readOnly: true,
90
- inputProps: { ...testProp }
91
- }}
92
- disableDropdown={disableDropdown}
93
- />
76
+ fullWidth
77
+ variant='outlined'
78
+ helperText={helperTextToDisplay}
79
+ placeholder={placeholder ?? ''}
80
+ size='small'
81
+ defaultCountry='US'
82
+ required={required}
83
+ disabled={disabled}
84
+ onChange={onChange}
85
+ onBlur={!readOnly ? onBlur : undefined}
86
+ error={status === 'error'}
87
+ label={label}
88
+ value={value}
89
+ InputProps={{ ...testProp }}
90
+ />
94
91
  );
95
92
 
96
93
  if (variant === 'inline') {
@@ -170,7 +167,8 @@ export const BasePegaDxilMyTwoColumnForm: Story = args => {
170
167
  hasSuggestions: false,
171
168
  onChange: val => {
172
169
  setPhone(val);
173
- }
170
+ },
171
+ onBlur: () => {}
174
172
  },
175
173
  {
176
174
  readOnly: undefined,