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

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPercentage/mock.ts

@@ -18,4 +18,4 @@ export const fieldMetadata = {
   type: 'Decimal',
   displayAs: 'pxPercentage',
   label: 'Percentage sample'
-};
+};

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

@@ -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 StyledPegaDxilMyPhoneWrapper from './styles';
 
@@ -17,6 +19,7 @@ export default function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
   const FieldValueList = getComponentFromMap('FieldValueList');
 
   const {
+    getPConnect,
     label,
     required,
     disabled,
@@ -24,7 +27,6 @@ export default function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
     validatemessage,
     status,
     onChange,
-    onBlur,
     readOnly,
     testId,
     helperText,
@@ -32,6 +34,14 @@ export default function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
     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 = {};
@@ -70,21 +80,20 @@ export default function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
             }}
             disableDropdown={disableDropdown}
           />
-         </StyledPegaDxilMyPhoneWrapper>
+        </StyledPegaDxilMyPhoneWrapper>
       </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 (
@@ -102,10 +111,9 @@ export default function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
         onBlur={!readOnly ? handleBlur : undefined}
         error={status === 'error'}
         label={label}
-        value={value}
+        value={inputValue}
         InputProps={{ ...testProp }}
       />
     </StyledPegaDxilMyPhoneWrapper>
   );
 }
-

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

@@ -62,6 +62,7 @@ interface PegaDxilMyPicklistProps 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 PegaDxilMyPicklist(props: PegaDxilMyPicklistProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldValueList = getComponentFromMap('FieldValueList');
@@ -212,29 +213,28 @@ export default function PegaDxilMyPicklist(props: PegaDxilMyPicklistProps) {
   //  So, hold off on rendering anything until options are available...
   return options.length === 0 ? null : (
     <StyledPegaDxilMyPicklistWrapper>
-    <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
-      InputProps={{ ...readOnlyProp, ...testProp }}
-    >
-      {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
+        InputProps={{ ...readOnlyProp, ...testProp }}
+      >
+        {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>
     </StyledPegaDxilMyPicklistWrapper>
   );
 }
-

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyRadiobuttons/mock.ts

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

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyText/config.json

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

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

@@ -98,4 +98,3 @@ export default function PegaDxilMyText(props: PegaDxilMyTextProps) {
     </StyledPegaDxilMyTextWrapper>
   );
 }
-

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyText/mock.ts

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

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyTextInput/config.json

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

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

@@ -98,4 +98,3 @@ export default function PegaDxilMyTextInput(props: PegaDxilMyTextInputProps) {
     </StyledPegaDxilMyTextInputWrapper>
   );
 }
-

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyTextInput/mock.ts

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

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

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

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

@@ -11,7 +11,6 @@ interface PegaDxilMyTimeOfDayProps 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
@@ -84,4 +83,3 @@ export default function PegaDxilMyTimeOfDay(props: PegaDxilMyTimeOfDayProps) {
     </StyledPegaDxilMyTimeOfDayWrapper>
   );
 }
-

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyTimeOfDay/mock.ts

@@ -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/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyURL/index.tsx

@@ -70,7 +70,6 @@ export default function PegaDxilMyUrl(props: PegaDxilMyUrlProps) {
         value={value}
         InputProps={{ inputProps: { ...testProp } }}
       />
-     </StyledPegaDxilMyUrlWrapper>
+    </StyledPegaDxilMyUrlWrapper>
   );
 }
-

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyURL/mock.ts

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

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

@@ -70,9 +70,6 @@ export const BasePegaDxilMyDetails: Story = args => {
         },
         resolveConfigProps: () => {
           /* nothing */
-        },
-        createComponent: () => {
-          /* nothing */
         }
       };
     }
@@ -81,7 +78,4 @@ export const BasePegaDxilMyDetails: Story = args => {
   return <PegaDxilMyDetails {...props} {...args} />;
 };
 
-BasePegaDxilMyDetails.args = {
-  label: 'Details',
-  showLabel: true
-};
+BasePegaDxilMyDetails.args = {};

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

@@ -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 StyledPegaDxilMyDetailsWrapper from "./styles";
+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
@@ -19,10 +17,7 @@ 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 { 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,13 +44,13 @@ export default function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
         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
     });
   }
 
   return (
     <StyledPegaDxilMyDetailsWrapper>
-      <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
+      <FieldGroup>
         {showHighlightedData && highlightedDataArr.length > 0 && (
           <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
             {highlightedDataArr.map((child, i) => (