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

package/tests/assets/sdk-r/components/create/override-sdk/field/Percentage/Percentage.tsx

@@ -1,8 +1,8 @@
-import { TextField } from '@material-ui/core';
+import { useEffect, useState } from 'react';
 import { NumericFormat } from 'react-number-format';
-import { useState } from 'react';
+import { TextField } from '@mui/material';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
@@ -50,7 +50,11 @@ export default function Percentage(props: PercentageProps) {
   const helperTextToDisplay = validatemessage || helperText;
 
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
-  const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+  const formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);
+
+  useEffect(() => {
+    setValues(value.toString());
+  }, [value]);
 
   let readOnlyProp = {}; // Note: empty if NOT ReadOnly
 
@@ -58,7 +62,7 @@ export default function Percentage(props: PercentageProps) {
     readOnlyProp = { readOnly: true };
   }
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
   }
 
@@ -66,11 +70,7 @@ export default function Percentage(props: PercentageProps) {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   const theSymbols = getCurrencyCharacters(currencyISOCode);
   const theCurrDec = theSymbols.theDecimalIndicator;
@@ -105,7 +105,7 @@ export default function Percentage(props: PercentageProps) {
       thousandSeparator={showGroupSeparators ? theCurrSep : ''}
       decimalScale={decimalPrecision}
       suffix='%'
-      InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}
+      slotProps={{ input: { ...readOnlyProp, inputProps: { ...testProps } } }}
       customInput={TextField}
     />
   );

package/tests/assets/sdk-r/components/create/override-sdk/field/Phone/Phone.tsx

@@ -1,8 +1,8 @@
-import MuiPhoneNumber from 'material-ui-phone-number';
 import { useEffect, useState } from 'react';
+import { MuiTelInput } from 'mui-tel-input';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 
 interface PhoneProps extends PConnFieldProps {
@@ -45,7 +45,7 @@ export default function Phone(props: PhoneProps) {
     'data-test-id': testId
   };
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 
@@ -57,20 +57,23 @@ export default function Phone(props: PhoneProps) {
     const disableDropdown = true;
     return (
       <div>
-        <MuiPhoneNumber
+        <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 }
+          slotProps={{
+            input: {
+              readOnly: true,
+              ...testProp
+            }
           }}
           disableDropdown={disableDropdown}
         />
@@ -90,13 +93,13 @@ export default function Phone(props: PhoneProps) {
   };
 
   return (
-    <MuiPhoneNumber
+    <MuiTelInput
       fullWidth
       variant='outlined'
       helperText={helperTextToDisplay}
       placeholder={placeholder ?? ''}
       size='small'
-      defaultCountry='us'
+      defaultCountry='US'
       required={required}
       disabled={disabled}
       onChange={handleChange}
@@ -104,7 +107,7 @@ export default function Phone(props: PhoneProps) {
       error={status === 'error'}
       label={label}
       value={inputValue}
-      InputProps={{ ...testProp }}
+      slotProps={{ input: { ...testProp } }}
     />
   );
 }

package/tests/assets/sdk-r/components/create/override-sdk/field/Phone/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "Phone",
+    "name": "Phone",
+    "label": "Phone",
+    "description": "Phone",
+    "type": "Field",
+    "subtype": "DATA_CAPTURE",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/RadioButtons/RadioButtons.tsx

@@ -1,21 +1,29 @@
 import { useState, useEffect } from 'react';
-import { Radio, RadioGroup, FormControl, FormControlLabel, FormLabel, FormHelperText } from '@material-ui/core';
+import { Radio, RadioGroup, FormControl, FormControlLabel, FormLabel, FormHelperText } from '@mui/material';
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 // Can't use RadioButtonProps until getLocaleRuleNameFromKeys is NOT private
 interface RadioButtonsProps extends PConnFieldProps {
   // If any, enter additional props that only exist on RadioButtons here
   inline: boolean;
   fieldMetadata?: any;
+  variant?: string;
+  hideFieldLabels?: boolean;
+  additionalProps?: any;
+  imagePosition?: string;
+  imageSize?: string;
+  showImageDescription?: boolean;
+  datasource?: any;
 }
 
 export default function RadioButtons(props: RadioButtonsProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldValueList = getComponentFromMap('FieldValueList');
+  const SelectableCard = getComponentFromMap('SelectableCard');
 
   const {
     getPConnect,
@@ -29,7 +37,14 @@ export default function RadioButtons(props: RadioButtonsProps) {
     inline,
     displayMode,
     hideLabel,
-    fieldMetadata
+    fieldMetadata,
+    variant,
+    hideFieldLabels,
+    additionalProps,
+    datasource,
+    imagePosition,
+    imageSize,
+    showImageDescription
   } = props;
   const [theSelectedButton, setSelectedButton] = useState(value);
 
@@ -61,11 +76,10 @@ export default function RadioButtons(props: RadioButtonsProps) {
     setSelectedButton(value);
   }, [value]);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return (
       <FieldValueList
         name={hideLabel ? '' : label}
-        // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
         value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
       />
     );
@@ -75,7 +89,6 @@ export default function RadioButtons(props: RadioButtonsProps) {
     return (
       <FieldValueList
         name={hideLabel ? '' : label}
-        // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
         value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
         variant='stacked'
       />
@@ -90,8 +103,38 @@ export default function RadioButtons(props: RadioButtonsProps) {
     thePConn.getValidationApi().validate(event.target.value, ''); // 2nd arg empty string until typedef marked correctly as optional
   };
 
+  if (variant === 'card') {
+    const stateProps = thePConn.getStateProps();
+    return (
+      <div>
+        <h4 style={{ marginTop: 0, marginBottom: 0 }}>{label}</h4>
+        <div id='selectable-card' style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(200px, 100%), 1fr))', gap: '1rem' }}>
+          <SelectableCard
+            hideFieldLabels={hideFieldLabels}
+            additionalProps={additionalProps}
+            getPConnect={getPConnect}
+            dataSource={datasource}
+            image={{
+              imagePosition,
+              imageSize,
+              showImageDescription,
+              imageField: stateProps.image?.split('.').pop(),
+              imageDescription: stateProps.imageDescription?.split('.').pop()
+            }}
+            onChange={handleChange}
+            recordKey={stateProps.value?.split('.').pop()}
+            cardLabel={stateProps.primaryField?.split('.').pop()}
+            radioBtnValue={value}
+            type='radio'
+            setIsRadioCardSelected={displayMode !== 'DISPLAY_ONLY' ? setSelectedButton : undefined}
+          />
+        </div>
+      </div>
+    );
+  }
+
   return (
-    <FormControl error={status === 'error'} required={required}>
+    <FormControl variant='standard' error={status === 'error'} required={required}>
       <FormLabel component='legend'>{label}</FormLabel>
       <RadioGroup value={theSelectedButton} onChange={handleChange} onBlur={!readOnly ? handleBlur : undefined} row={inline}>
         {theOptions.map(theOption => {
@@ -102,7 +145,6 @@ export default function RadioButtons(props: RadioButtonsProps) {
               label={thePConn.getLocalizedValue(
                 theOption.value,
                 localePath,
-                // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
                 thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
               )}
               control={<Radio key={theOption.key} color='primary' disabled={readOnly} />}

package/tests/assets/sdk-r/components/create/override-sdk/field/RichText/RichText.css

@@ -0,0 +1,79 @@
+.tox .tox-toolbar {
+  background-color: var(--app-background-color) !important;
+}
+
+.tox .tox-toolbar__primary {
+  background-color: var(--app-background-color) !important;
+}
+
+.tox .tox-toolbar__button {
+  color: var(--app-text-color) !important;
+}
+
+.tox .tox-toolbar__button--enabled {
+  background: var(--app-primary-color) !important;
+  color: #fff !important;
+}
+
+.tox .tox-dialog {
+  background-color: var(--modal-top-color) !important;
+  color: var(--app-text-color) !important;
+  border: 1px solid var(--modal-border-color) !important;
+  padding: 20px !important;
+  box-shadow: 0 0 10px 3px var(--modal-box-shadow-color) !important;
+}
+
+.tox .tox-dialog__header {
+  background-color: var(--modal-top-color) !important;
+  color: var(--app-text-color) !important;
+  font-weight: 500;
+  border-bottom: 1px solid var(--modal-border-color);
+}
+
+.tox .tox-dialog__footer {
+  background: transparent !important;
+  border-top: 1px solid var(--modal-border-color);
+}
+
+.tox .tox-dialog-wrap__backdrop {
+  background-color: var(--modal-background-color) !important;
+}
+
+.tox .tox-dialog__body input,
+.tox .tox-dialog__body textarea,
+.tox .tox-dialog__body select {
+  background: initial !important;
+  color: var(--app-text-color) !important;
+  border: 1px solid var(--app-neutral-color) !important;
+  border-radius: 4px !important;
+  padding: 6px 10px !important;
+  font-size: 1em !important;
+  font-family: inherit !important;
+}
+
+.tox .tox-dialog__body button {
+  background: transparent;
+  color: #fff !important;
+  border: none !important;
+  border-radius: 4px !important;
+  padding: 8px 16px !important;
+  font-size: 1em !important;
+  cursor: pointer !important;
+}
+
+.tox .tox-dialog__footer .tox-button {
+  background: var(--app-primary-color) !important;
+  color: #fff !important;
+  border: none !important;
+  border-radius: 4px !important;
+  padding: 8px 16px !important;
+  font-size: 1em !important;
+  cursor: pointer !important;
+}
+
+.tox .tox-dialog__footer .tox-button--secondary {
+  background: var(--app-secondary-color) !important;
+  color: var(--secondary-button-text-color) !important;
+  font-size: 0.875rem !important;
+  cursor: pointer !important;
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/RichText/RichText.tsx

@@ -2,7 +2,9 @@ import { useRef } from 'react';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+import './RichText.css';
 
 interface RichTextProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextArea here
@@ -23,7 +25,7 @@ export default function RichText(props: RichTextProps) {
 
   const helperTextToDisplay = validatemessage || helperText;
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} isHtml />;
   }
 

package/tests/assets/sdk-r/components/create/override-sdk/field/RichText/config-ext.json

@@ -0,0 +1,11 @@
+{
+    "componentKey": "RichText",
+    "name": "RichText",
+    "label": "Rich text editor",
+    "description": "Text (paragraph)",
+    "type": "Field",
+    "subtype": "Text-Paragraph",
+    "icon": "images/pz-text-area-active.svg",
+    "properties": [],
+    "defaultConfig": {}
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/ScalarList/ScalarList.tsx

@@ -1,6 +1,5 @@
-/* eslint-disable react/no-array-index-key */
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 // ScalarListProps can't extend PConnFieldProps because its 'value' has a different type
 interface ScalarListProps extends PConnProps {
@@ -36,22 +35,21 @@ export default function ScalarList(props: ScalarListProps) {
       {
         type: componentType,
         config: {
-          // @ts-ignore - Type '{ readOnly: true; displayInModal: boolean; value: any; displayMode: string; label: string; }' is not assignable to type 'ComponentMetadataConfig'.
           value: scalarValue,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           label,
           ...restProps,
-          // @ts-ignore - Type 'string' is not assignable to type 'boolean | undefined'.
           readOnly: 'true'
         }
       },
       '',
+      // @ts-expect-error
       '',
       {}
     ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional;
   });
 
-  if (['LABELS_LEFT', 'STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode)) {
+  if (['STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode)) {
     return (
       <div>
         <CommaSeparatedList items={items} />

package/tests/assets/sdk-r/components/create/override-sdk/field/SelectableCard/SelectableCard.tsx

@@ -0,0 +1,175 @@
+import { Radio, Checkbox, FormControlLabel, Card, CardContent, Typography } from '@mui/material';
+import { resolveReferenceFields } from './utils';
+
+export default function SelectableCard(props) {
+  const {
+    getPConnect,
+    type,
+    image: { imagePosition, imageSize, showImageDescription, imageField = '', imageDescription = '' },
+    dataSource,
+    recordKey = '',
+    className,
+    cardLabel,
+    hideFieldLabels = false,
+    readOnly,
+    disabled,
+    readOnlyList = [],
+    displayMode,
+    radioBtnValue,
+    onChange,
+    onBlur,
+    onClick,
+    onKeyDown,
+    additionalProps,
+    testId,
+    setIsRadioCardSelected,
+    showNoValue = false
+  } = props;
+
+  const pConn = getPConnect();
+
+  if (showNoValue) return <Typography>No Value</Typography>;
+
+  const cardDataSource = readOnly || displayMode === 'DISPLAY_ONLY' ? readOnlyList || [] : dataSource?.source;
+  const imageDescriptionKey = showImageDescription ? imageDescription : undefined;
+
+  let radioItemSelected = false;
+
+  return (
+    <>
+      {(cardDataSource || []).map(item => {
+        const resolvedFields = resolveReferenceFields(item, hideFieldLabels, recordKey, pConn);
+
+        const commonProps = {
+          id: item[recordKey],
+          key: item[recordKey],
+          fields: resolvedFields,
+          label: item[cardLabel]
+        };
+
+        const image = item[imageField]
+          ? {
+              src: item[imageField],
+              alt: showImageDescription && imageDescriptionKey ? item[imageDescriptionKey] : '',
+              style: { width: imageSize, objectPosition: imagePosition }
+            }
+          : undefined;
+
+        const cardContent = (
+          <Card className={className} style={{ display: 'flex' }} data-testid={testId}>
+            {image && <img src={image.src} alt={image.alt} style={{ width: '100px' }} />}
+            <CardContent>
+              <Typography variant='body1'>{item[cardLabel]}</Typography>
+              {commonProps.fields.map((field, index) => (
+                <Typography key={index} variant='body2'>
+                  {field.value}
+                </Typography>
+              ))}
+            </CardContent>
+          </Card>
+        );
+
+        if (displayMode === 'DISPLAY_ONLY') {
+          return cardContent;
+        }
+
+        const component = (
+          <div key={item[recordKey]} style={{ paddingTop: '15px' }}>
+            <Card className={className} style={{ display: 'flex', flexDirection: 'column', height: '100%' }} data-testid={testId}>
+              <CardContent
+                style={{
+                  ...((imagePosition === 'inline-start' || imagePosition === 'inline-end') && { display: 'flex', height: '100%' }),
+                  ...(imagePosition === 'inline-end' && { flexDirection: 'row-reverse' })
+                }}
+              >
+                <div
+                  style={{
+                    ...((imagePosition === 'inline-start' || imagePosition === 'inline-end') && { width: '40%' })
+                  }}
+                >
+                  {image && (
+                    <img
+                      src={image.src}
+                      alt={image.alt}
+                      style={{
+                        width: '100%',
+                        backgroundColor: 'transparent',
+                        aspectRatio: '16 / 9',
+                        maxHeight: '100%',
+                        height: '100%',
+                        objectFit: 'contain',
+                        maxWidth: '100%'
+                      }}
+                    />
+                  )}
+                </div>
+                <div
+                  style={{
+                    ...((imagePosition === 'inline-start' || imagePosition === 'inline-end') && { width: '60%' })
+                  }}
+                >
+                  {type === 'radio' ? (
+                    <FormControlLabel
+                      control={
+                        <Radio
+                          value={item[recordKey]}
+                          checked={radioBtnValue === item[recordKey]}
+                          onChange={onChange}
+                          onBlur={onBlur}
+                          onClick={onClick}
+                          onKeyDown={onKeyDown}
+                          disabled={disabled}
+                          {...additionalProps}
+                        />
+                      }
+                      label={<Typography variant='body1'>{item[cardLabel]}</Typography>}
+                    />
+                  ) : (
+                    <FormControlLabel
+                      control={
+                        <Checkbox
+                          id={item[recordKey]}
+                          getPConnect={getPConnect}
+                          checked={readOnlyList.some(data => data[recordKey] === item[recordKey])}
+                          onChange={onChange}
+                          onBlur={onBlur}
+                          onClick={onClick}
+                          onKeyDown={onKeyDown}
+                          disabled={disabled}
+                          {...additionalProps}
+                        />
+                      }
+                      label={<Typography variant='body1'>{item[cardLabel]}</Typography>}
+                    />
+                  )}
+
+                  {commonProps.fields.map((field, index) => (
+                    <div
+                      key={index}
+                      style={{
+                        fontSize: '0.875rem',
+                        ...(field.type !== 'TextArea' && { display: 'grid', gridTemplateColumns: '1fr 1fr' }),
+                        margin: '5px'
+                      }}
+                    >
+                      {field.name && <div>{field.name}</div>}
+                      <div>{field?.value?.props.value}</div>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        );
+
+        if (type === 'radio' && radioBtnValue === item[recordKey]) {
+          radioItemSelected = true;
+        }
+
+        return component;
+      })}
+
+      {type === 'radio' && setIsRadioCardSelected && setIsRadioCardSelected(radioItemSelected)}
+    </>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/SelectableCard/index.tsx

@@ -0,0 +1 @@
+export { default } from './SelectableCard';