@pega/dx-component-builder-sdk 23.1.14 → 24.1.10

package/src/tasks/create/templates/SDK-React/field/Integer/mock.ts.mustache

@@ -18,4 +18,4 @@ export const fieldMetadata = {
   type: 'Integer',
   displayAs: 'pxInteger',
   label: 'Integer sample'
-};
+};

package/src/tasks/create/templates/SDK-React/field/Picklist/index.tsx.mustache

@@ -62,6 +62,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
+// eslint-disable-next-line sonarjs/cognitive-complexity
 export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldValueList = getComponentFromMap('FieldValueList');
@@ -212,32 +213,31 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   //  So, hold off on rendering anything until options are available...
   return options.length === 0 ? null : (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    <TextField
-      fullWidth
-      variant={readOnly ? 'standard' : 'outlined'}
-      helperText={helperTextToDisplay}
-      placeholder={thePConn.getLocalizedValue(placeholder, '', '')} // 2nd and 3rd args empty string until typedef marked correctly
-      size='small'
-      required={required}
-      disabled={disabled}
-      onChange={!readOnly ? handleChange : undefined}
-      error={status === 'error'}
-      label={label}
-      value={value === '' && !readOnly ? placeholder : value}
-      select
-      {{! pick new delimiters for mustache }}
-      {{=<% %>=}}
-      InputProps={{ ...readOnlyProp, ...testProp }}
-      <%={{ }}=%>     {{! revert delimiters for mustache }}
-    >
-      {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>
-      ))}
-    </TextField>
+      <TextField
+        fullWidth
+        variant={readOnly ? 'standard' : 'outlined'}
+        helperText={helperTextToDisplay}
+        placeholder={thePConn.getLocalizedValue(placeholder, '', '')} // 2nd and 3rd args empty string until typedef marked correctly
+        size='small'
+        required={required}
+        disabled={disabled}
+        onChange={!readOnly ? handleChange : undefined}
+        error={status === 'error'}
+        label={label}
+        value={value === '' && !readOnly ? placeholder : value}
+        select
+        {{! pick new delimiters for mustache }}
+        {{=<% %>=}}
+        InputProps={{ ...readOnlyProp, ...testProp }}
+        <%={{ }}=%>     {{! revert delimiters for mustache }}
+      >
+        {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>
+        ))}
+      </TextField>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
-

package/src/tasks/create/templates/SDK-React/field/Picklist-RadioButtons/mock.ts.mustache

@@ -42,7 +42,6 @@ export const rawMetadata = {
   }
 };
 
-
 export const stateProps = {
   value: '.PicklistRadioButtonsSample',
   placeholder: 'Select...',

package/src/tasks/create/templates/SDK-React/field/Text/config.json.mustache

@@ -10,7 +10,7 @@
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-url-active.svg",
-   "properties": [
+  "properties": [
     {
       "name": "label",
       "label": "Field label",

package/src/tasks/create/templates/SDK-React/field/Text/index.tsx.mustache

@@ -101,4 +101,3 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
-

package/src/tasks/create/templates/SDK-React/field/Text/mock.ts.mustache

@@ -13,4 +13,4 @@ export const configProps = {
   status: '',
   hideLabel: false,
   validatemessage: ''
-};
+};

package/src/tasks/create/templates/SDK-React/field/Text-Email/config.json.mustache

@@ -10,7 +10,7 @@
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-email-active.svg",
- "properties": [
+  "properties": [
     {
       "name": "label",
       "label": "Field label",

package/src/tasks/create/templates/SDK-React/field/Text-Email/mock.ts.mustache

@@ -12,4 +12,4 @@ export const configProps = {
   disabled: false,
   displayMode: '',
   validatemessage: ''
-};
+};

package/src/tasks/create/templates/SDK-React/field/Text-Input/config.json.mustache

@@ -10,7 +10,7 @@
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-url-active.svg",
-   "properties": [
+  "properties": [
     {
       "name": "label",
       "label": "Field label",

package/src/tasks/create/templates/SDK-React/field/Text-Input/index.tsx.mustache

@@ -101,4 +101,3 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
-

package/src/tasks/create/templates/SDK-React/field/Text-Input/mock.ts.mustache

@@ -19,4 +19,4 @@ export const fieldMetadata = {
   maxLength: 256,
   displayAs: 'pxTextInput',
   label: 'TextInput Sample'
-};
+};

package/src/tasks/create/templates/SDK-React/field/Text-Paragraph/index.tsx.mustache

@@ -9,7 +9,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   fieldMetadata?: any;
 }
 
-
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
@@ -83,7 +82,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
         <%={{ }}=%>     {{! revert delimiters for mustache }}
       />
-     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
-

package/src/tasks/create/templates/SDK-React/field/Text-Paragraph/mock.ts.mustache

@@ -19,4 +19,4 @@ export const fieldMetadata = {
   displayAs: 'pxTextArea',
   label: 'Paragraph sample',
   maxLength: 256
-};
+};

package/src/tasks/create/templates/SDK-React/field/Text-Phone/index.tsx.mustache

@@ -1,7 +1,9 @@
 import MuiPhoneNumber from 'material-ui-phone-number';
+import { useEffect, useState } from 'react';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
@@ -17,6 +19,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const FieldValueList = getComponentFromMap('FieldValueList');
 
   const {
+    getPConnect,
     label,
     required,
     disabled,
@@ -24,7 +27,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     validatemessage,
     status,
     onChange,
-    onBlur,
     readOnly,
     testId,
     helperText,
@@ -32,6 +34,14 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     hideLabel,
     placeholder
   } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+
+  const [inputValue, setInputValue] = useState(value);
+  useEffect(() => setInputValue(value), [value]);
+
   const helperTextToDisplay = validatemessage || helperText;
 
   let testProp = {};
@@ -73,21 +83,20 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
             <%={{ }}=%>     {{! revert delimiters for mustache }}
             disableDropdown={disableDropdown}
           />
-         </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+        </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       </div>
     );
   }
 
   const handleChange = inputVal => {
-    let phoneValue = inputVal && inputVal.replace(/\D+/g, '');
-    phoneValue = `+${phoneValue}`;
-    onChange({ value: phoneValue });
+    setInputValue(inputVal);
   };
 
   const handleBlur = event => {
     const phoneValue = event?.target?.value;
-    event.target.value = `+${phoneValue && phoneValue.replace(/\D+/g, '')}`;
-    onBlur(event);
+    let phoneNumber = phoneValue.split(' ').slice(1).join();
+    phoneNumber = phoneNumber ? `+${phoneValue && phoneValue.replace(/\D+/g, '')}` : '';
+    handleEvent(actions, 'changeNblur', propName, phoneNumber);
   };
 
   return (
@@ -105,7 +114,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         onBlur={!readOnly ? handleBlur : undefined}
         error={status === 'error'}
         label={label}
-        value={value}
+        value={inputValue}
         {{! pick new delimiters for mustache }}
         {{=<% %>=}}
         InputProps={{ ...testProp }}
@@ -114,4 +123,3 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
-

package/src/tasks/create/templates/SDK-React/field/Text-URL/index.tsx.mustache

@@ -73,7 +73,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         InputProps={{ inputProps: { ...testProp } }}
         <%={{ }}=%>     {{! revert delimiters for mustache }}
       />
-     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
-

package/src/tasks/create/templates/SDK-React/field/Text-URL/mock.ts.mustache

@@ -13,4 +13,4 @@ export const configProps = {
   status: '',
   hideLabel: false,
   validatemessage: ''
-};
+};

package/src/tasks/create/templates/SDK-React/field/TimeOfDay/demo.stories.tsx.mustache

@@ -4,14 +4,14 @@ import type { Meta, StoryObj } from '@storybook/react';
 import {{COMPONENT_CLASS_NAME}} from './index';
 import { configProps, stateProps } from './mock';
 
-const meta: Meta<typeof {{COMPONENT_CLASS_NAME}} > = {
-  title: '{{COMPONENT_CLASS_NAME}} ',
-  component: {{COMPONENT_CLASS_NAME}} ,
+const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  component: {{COMPONENT_CLASS_NAME}},
   excludeStories: /.*Data$/
 };
 
 export default meta;
-type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}} >;
+type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   const [value, setValue] = useState(configProps.value);

package/src/tasks/create/templates/SDK-React/field/TimeOfDay/index.tsx.mustache

@@ -11,7 +11,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
 }
 
-
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
@@ -87,4 +86,3 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
-

package/src/tasks/create/templates/SDK-React/field/TimeOfDay/mock.ts.mustache

@@ -1,8 +1,8 @@
 export const configProps = {
-  value: "",
-  label: "Time Sample",
-  helperText: "Time Helper Text",
-  testId: "time-12345678",
+  value: '',
+  label: 'Time Sample',
+  helperText: 'Time Helper Text',
+  testId: 'time-12345678',
   disabled: false,
   required: false,
   readOnly: false,
@@ -13,6 +13,6 @@ export const configProps = {
 };
 
 export const stateProps = {
-  value: ".TimeSample",
+  value: '.TimeSample',
   hasSuggestions: false
-};
+};

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

@@ -26,6 +26,13 @@ window.PCore = {
       }
     };
   },
+  getLocaleUtils: (): any => {
+    return {
+      getLocaleValue: value => {
+        return value;
+      }
+    };
+  },
   getEnvironmentInfo: (): any => {
     return {
       getUseLocale: () => {
@@ -71,7 +78,4 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />;
 };
 
-Base{{COMPONENT_CLASS_NAME}}.args = {
-  label: 'Details',
-  showLabel: true
-};
+Base{{COMPONENT_CLASS_NAME}}.args = {};

package/src/tasks/create/templates/SDK-React/template/DETAILS/index.tsx.mustache

@@ -5,12 +5,10 @@ import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-import Styled{{COMPONENT_CLASS_NAME}}Wrapper from "./styles";
+import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props 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
@@ -19,10 +17,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   // Get emitted components from map (so we can get any override that may exist)
   const FieldGroup = getComponentFromMap('FieldGroup');
 
-  const { label, showLabel, getPConnect, showHighlightedData } = props;
-
-  // Get the inherited props from the parent to determine label settings
-  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
+  const { getPConnect, showHighlightedData } = props;
 
   // 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
@@ -49,7 +44,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         field.config.displayAsStatus = true;
       }
 
-      return getPConnect().createComponent(field, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
+      return getPConnect().createComponent(field, '', 0, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
     });
   }
 
@@ -57,7 +52,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       {{! pick new delimiters for mustache }}
       {{=<% %>=}}
-      <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
+      <FieldGroup>
         {showHighlightedData && highlightedDataArr.length > 0 && (
           <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
             {highlightedDataArr.map((child, i) => (