@pega/react-sdk-overrides 0.23.25 → 0.23.27

package/lib/field/Group/Group.tsx

@@ -0,0 +1,37 @@
+import { ReactElement, useMemo } from 'react';
+import { Grid } from '@material-ui/core';
+import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface GroupProps extends PConnFieldProps {
+  children: ReactElement[];
+  heading: string;
+  showHeading: boolean;
+  instructions?: string;
+  collapsible: boolean;
+  type: string;
+}
+
+export default function Group(props: GroupProps) {
+  const { children, heading, showHeading, instructions, collapsible, displayMode, type } = props;
+
+  const isReadOnly = displayMode === 'LABELS_LEFT';
+
+  const content = useMemo(() => {
+    return (
+      <Grid container spacing={2}>
+        {children?.map(child => (
+          <Grid item xs={12} key={child.key}>
+            {child}
+          </Grid>
+        ))}
+      </Grid>
+    );
+  }, [children, type, isReadOnly]);
+
+  return (
+    <FieldGroup name={showHeading ? heading : undefined} collapsible={collapsible} instructions={instructions}>
+      {content}
+    </FieldGroup>
+  );
+}

package/lib/field/Group/config-ext.json

@@ -0,0 +1,7 @@
+{
+  "name": "Group",
+  "label": "Field Group",
+  "description": "Field Group",
+  "type": "Group",
+  "properties": []
+}

package/lib/field/Group/index.tsx

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

package/lib/field/Integer/Integer.tsx

@@ -1,9 +1,17 @@
-import React from 'react';
 import { TextField } from '@material-ui/core';
-import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
-export default function Integer(props) {
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface IntegerProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on Integer here
+}
+
+export default function Integer(props: IntegerProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const TextInput = getComponentFromMap('TextInput');
+  const FieldValueList = getComponentFromMap('FieldValueList');
+
   const {
     label,
     required,
@@ -17,7 +25,8 @@ export default function Integer(props) {
     testId,
     helperText,
     displayMode,
-    hideLabel
+    hideLabel,
+    placeholder
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -63,7 +72,7 @@ export default function Integer(props) {
       fullWidth
       variant={readOnly ? 'standard' : 'outlined'}
       helperText={helperTextToDisplay}
-      placeholder=''
+      placeholder={placeholder ?? ''}
       size='small'
       required={required}
       disabled={disabled}

package/lib/field/Integer/config-ext.json

@@ -4,6 +4,5 @@
   "description": "Integer",
   "type": "Field",
   "subtype": "Integer",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/field/Percentage/Percentage.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
 import { TextField } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 
-import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 // Inspired by https://stackoverflow.com/questions/50823182/material-ui-remove-up-down-arrow-dials-from-textview
 const useStyles = makeStyles((/* theme */) => ({
@@ -22,7 +21,15 @@ const useStyles = makeStyles((/* theme */) => ({
   }
 }));
 
-export default function Percentage(props) {
+interface PercentageProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on Percentage here
+}
+
+export default function Percentage(props: PercentageProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const TextInput = getComponentFromMap('TextInput');
+  const FieldValueList = getComponentFromMap('FieldValueList');
+
   const classes = useStyles();
 
   const {
@@ -38,7 +45,8 @@ export default function Percentage(props) {
     testId,
     helperText,
     displayMode,
-    hideLabel
+    hideLabel,
+    placeholder
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -68,7 +76,7 @@ export default function Percentage(props) {
       fullWidth
       variant={readOnly ? 'standard' : 'outlined'}
       helperText={helperTextToDisplay}
-      placeholder=''
+      placeholder={placeholder ?? ''}
       size='small'
       required={required}
       disabled={disabled}

package/lib/field/Percentage/config-ext.json

@@ -4,6 +4,5 @@
   "description": "Percentage",
   "type": "Field",
   "subtype": "Decimal-Percentage",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/field/Phone/Phone.tsx

@@ -1,8 +1,16 @@
-import React from 'react';
 import MuiPhoneNumber from 'material-ui-phone-number';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
-export default function Phone(props) {
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface PhoneProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on Phone here
+}
+
+export default function Phone(props: PhoneProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromMap('FieldValueList');
+
   const {
     label,
     required,
@@ -16,7 +24,8 @@ export default function Phone(props) {
     testId,
     helperText,
     displayMode,
-    hideLabel
+    hideLabel,
+    placeholder
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -41,7 +50,7 @@ export default function Phone(props) {
         <MuiPhoneNumber
           fullWidth
           helperText={helperTextToDisplay}
-          placeholder=''
+          placeholder={placeholder ?? ''}
           size='small'
           required={required}
           disabled={disabled}
@@ -50,7 +59,8 @@ export default function Phone(props) {
           label={label}
           value={value}
           InputProps={{
-            readOnly: true
+            readOnly: true,
+            inputProps: { ...testProp }
           }}
           disableDropdown={disableDropdown}
         />
@@ -75,7 +85,7 @@ export default function Phone(props) {
       fullWidth
       variant='outlined'
       helperText={helperTextToDisplay}
-      placeholder=''
+      placeholder={placeholder ?? ''}
       size='small'
       defaultCountry='us'
       required={required}

package/lib/field/Phone/index.tsx

@@ -1 +1 @@
-export { default } from './Phone';
+export { default } from './Phone';

package/lib/field/RadioButtons/RadioButtons.tsx

@@ -1,18 +1,22 @@
-import React, { useState, useEffect } from 'react';
-import {
-  Radio,
-  RadioGroup,
-  FormControl,
-  FormControlLabel,
-  FormLabel,
-  FormHelperText
-} from '@material-ui/core';
+import { useState, useEffect } from 'react';
+import { Radio, RadioGroup, FormControl, FormControlLabel, FormLabel, FormHelperText } from '@material-ui/core';
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { 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;
+}
+
+export default function RadioButtons(props: RadioButtonsProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromMap('FieldValueList');
 
-export default function RadioButtons(props) {
   const {
     getPConnect,
     label,
@@ -24,19 +28,33 @@ export default function RadioButtons(props) {
     required,
     inline,
     displayMode,
-    hideLabel
+    hideLabel,
+    fieldMetadata
   } = props;
   const [theSelectedButton, setSelectedButton] = useState(value);
 
   const thePConn = getPConnect();
   const theConfigProps = thePConn.getConfigProps();
   const actionsApi = thePConn.getActionsApi();
-  const propName = thePConn.getStateProps().value;
+  const propName = (thePConn.getStateProps() as any).value;
   const helperTextToDisplay = validatemessage || helperText;
+  const className = thePConn.getCaseInfo().getClassName();
+
+  let configProperty = (thePConn.getRawMetadata() as any)?.config?.value || '';
+  configProperty = configProperty.startsWith('@P') ? configProperty.substring(3) : configProperty;
+  configProperty = configProperty.startsWith('.') ? configProperty.substring(1) : configProperty;
+
+  const metaData = Array.isArray(fieldMetadata) ? fieldMetadata.filter(field => field?.classID === className)[0] : fieldMetadata;
+  let displayName = metaData?.datasource?.propertyForDisplayText;
+  displayName = displayName?.slice(displayName.lastIndexOf('.') + 1);
+  const localeContext = metaData?.datasource?.tableType === 'DataPage' ? 'datapage' : 'associated';
+  const localeClass = localeContext === 'datapage' ? '@baseclass' : className;
+  const localeName = localeContext === 'datapage' ? metaData?.datasource?.name : configProperty;
+  const localePath = localeContext === 'datapage' ? displayName : localeName;
 
   // theOptions will be an array of JSON objects that are literally key/value pairs.
   //  Ex: [ {key: "Basic", value: "Basic"} ]
-  const theOptions = Utils.getOptionList(theConfigProps, thePConn.getDataObject());
+  const theOptions = Utils.getOptionList(theConfigProps, thePConn.getDataObject(''));
 
   useEffect(() => {
     // This update theSelectedButton which will update the UI to show the selected button correctly
@@ -44,11 +62,24 @@ export default function RadioButtons(props) {
   }, [value]);
 
   if (displayMode === 'LABELS_LEFT') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+    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))}
+      />
+    );
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+    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'
+      />
+    );
   }
 
   const handleChange = event => {
@@ -56,24 +87,24 @@ export default function RadioButtons(props) {
   };
 
   const handleBlur = event => {
-    thePConn.getValidationApi().validate(event.target.value);
+    thePConn.getValidationApi().validate(event.target.value, ''); // 2nd arg empty string until typedef marked correctly as optional
   };
 
   return (
     <FormControl error={status === 'error'} required={required}>
       <FormLabel component='legend'>{label}</FormLabel>
-      <RadioGroup
-        value={theSelectedButton}
-        onChange={handleChange}
-        onBlur={!readOnly ? handleBlur : undefined}
-        row={inline}
-      >
+      <RadioGroup value={theSelectedButton} onChange={handleChange} onBlur={!readOnly ? handleBlur : undefined} row={inline}>
         {theOptions.map(theOption => {
           return (
             <FormControlLabel
               value={theOption.key}
               key={theOption.key}
-              label={theOption.value}
+              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/lib/field/RadioButtons/config-ext.json

@@ -4,6 +4,5 @@
   "description": "Picklist",
   "type": "Field",
   "subtype": "Picklist",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/field/RichText/RichText.tsx

@@ -0,0 +1,96 @@
+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';
+
+interface RichTextProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextArea here
+  additionalProps?: object;
+}
+
+export default function RichText(props: RichTextProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromMap('FieldValueList');
+  const RichTextEditor = getComponentFromMap('RichTextEditor');
+
+  const { getPConnect, value, placeholder, validatemessage, label, hideLabel, helperText, testId, displayMode, additionalProps } = props;
+  const pConn = getPConnect();
+  const editorRef: any = useRef(null);
+
+  let { readOnly, required, disabled } = props;
+  [readOnly, required, disabled] = [readOnly, required, disabled].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
+
+  const helperTextToDisplay = validatemessage || helperText;
+
+  if (displayMode === 'LABELS_LEFT') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+  }
+
+  let richTextComponent;
+
+  if (readOnly) {
+    // Rich Text read-only component
+    richTextComponent = (
+      <RichTextEditor
+        {...additionalProps}
+        label={label}
+        labelHidden={hideLabel}
+        defaultValue={value}
+        testId={testId}
+        info={helperTextToDisplay}
+        ref={editorRef}
+        readOnly
+      />
+    );
+  } else {
+    // Rich Text editable component
+    const actionsApi = pConn.getActionsApi();
+    let status = '';
+    if (validatemessage !== '') {
+      status = 'error';
+    }
+    const handleChange = () => {
+      if (status === 'error') {
+        const property = (pConn.getStateProps() as any).value;
+        pConn.clearErrorMessages({
+          property,
+          category: '',
+          context: ''
+        });
+      }
+    };
+
+    const handleBlur = () => {
+      if (editorRef.current) {
+        const editorValue = editorRef.current.getContent({ format: 'html' });
+        const property = (pConn.getStateProps() as any).value;
+        handleEvent(actionsApi, 'changeNblur', property, editorValue);
+      }
+    };
+
+    richTextComponent = (
+      <RichTextEditor
+        {...additionalProps}
+        label={label}
+        labelHidden={hideLabel}
+        info={helperTextToDisplay}
+        defaultValue={value}
+        placeholder={placeholder}
+        disabled={disabled}
+        required={required}
+        testId={testId}
+        ref={editorRef}
+        error={status === 'error'}
+        onBlur={handleBlur}
+        onChange={handleChange}
+      />
+    );
+  }
+
+  return richTextComponent;
+}

package/lib/field/RichText/index.tsx

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

package/lib/field/ScalarList/ScalarList.tsx

@@ -0,0 +1,63 @@
+/* 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';
+
+// ScalarListProps can't extend PConnFieldProps because its 'value' has a different type
+interface ScalarListProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  displayInModal: boolean;
+  hideLabel: boolean;
+  value: any[];
+  componentType: string;
+  label: string;
+  displayMode: string;
+}
+
+function CommaSeparatedList(props) {
+  const { items } = props;
+
+  return (
+    <ul style={{ padding: '0', margin: '0' }}>
+      {items.map((value, index) => {
+        return <span key={index}>{value}</span>;
+      })}
+    </ul>
+  );
+}
+
+export default function ScalarList(props: ScalarListProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromMap('FieldValueList');
+
+  const { label, getPConnect, componentType, value: scalarValues, displayMode, hideLabel, ...restProps } = props;
+
+  const items = scalarValues?.map(scalarValue => {
+    return getPConnect().createComponent(
+      {
+        type: componentType,
+        config: {
+          value: scalarValue,
+          displayMode: 'LABELS_LEFT',
+          label,
+          ...restProps,
+          readOnly: 'true'
+        }
+      },
+      '',
+      '',
+      {}
+    ); // 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)) {
+    return (
+      <div>
+        <CommaSeparatedList items={items} />
+      </div>
+    );
+  }
+
+  const displayComp = <CommaSeparatedList items={items} />;
+
+  return <FieldValueList name={hideLabel ? '' : label} value={displayComp} variant='stacked' />;
+}

package/lib/field/ScalarList/config-ext.json

@@ -0,0 +1,7 @@
+{
+  "label": "ScalarList",
+  "componentKey": "ScalarList",
+  "name": "ScalarList",
+  "type": "Field",
+  "properties": []
+}

package/lib/field/ScalarList/index.tsx

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

package/lib/field/SemanticLink/SemanticLink.tsx

@@ -1,14 +1,14 @@
-import React from "react";
-import PropTypes from "prop-types";
 import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
+
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 /* although this is called the SemanticLink component, we are not yet displaying as a
 SemanticLink in SDK and only showing the value as a read only text field. */
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
   root: {
     paddingRight: theme.spacing(1),
     paddingLeft: theme.spacing(1),
@@ -17,7 +17,7 @@ const useStyles = makeStyles((theme) => ({
     marginRight: theme.spacing(1),
     marginLeft: theme.spacing(1),
     marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(1),
+    marginBottom: theme.spacing(1)
   },
   fieldMargin: {
     paddingRight: theme.spacing(1),
@@ -27,7 +27,7 @@ const useStyles = makeStyles((theme) => ({
     marginRight: theme.spacing(1),
     marginLeft: theme.spacing(1),
     marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(1),
+    marginBottom: theme.spacing(1)
   },
   fieldLabel: {
     fontWeight: 400,
@@ -39,25 +39,32 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 
-export default function SemanticLink(props) {
-  const {
-    text,
-    displayMode,
-    label,
-    hideLabel
-  } = props;
-  const classes = useStyles();
+interface SemanticLinkProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on SemanticLink here
+  // from previous PropTypes
+  text: string;
+}
 
+export default function SemanticLink(props: SemanticLinkProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromMap('FieldValueList');
 
-  if (displayMode === "LABELS_LEFT" || (!displayMode && label !== undefined)) {
-    const value = text ||  "---";
+  const { text, displayMode, label, hideLabel } = props;
+  const classes = useStyles();
+
+  if (displayMode === 'LABELS_LEFT' || (!displayMode && label !== undefined)) {
+    const value = text || '---';
     return (
-      <Grid container spacing={1} style={{padding: "4px 0px"}}  id="semantic-link-grid">
+      <Grid container spacing={1} style={{ padding: '4px 0px' }} id='semantic-link-grid'>
         <Grid item xs={6}>
-          <Typography variant="body2" component="span" className={`${classes.fieldLabel} ${classes.fieldMargin}`}>{label}</Typography>
+          <Typography variant='body2' component='span' className={`${classes.fieldLabel} ${classes.fieldMargin}`}>
+            {label}
+          </Typography>
         </Grid>
         <Grid item xs={6}>
-          <Typography variant="body2" component="span" className={classes.fieldValue}>{value}</Typography>
+          <Typography variant='body2' component='span' className={classes.fieldValue}>
+            {value}
+          </Typography>
         </Grid>
       </Grid>
     );
@@ -67,9 +74,3 @@ export default function SemanticLink(props) {
     return <FieldValueList name={hideLabel ? '' : label} value={text} variant='stacked' />;
   }
 }
-
-SemanticLink.propTypes = {
-  text: PropTypes.string.isRequired,
-  displayMode: PropTypes.string,
-  label: PropTypes.string,
-};

package/lib/field/SemanticLink/config-ext.json

@@ -3,6 +3,5 @@
   "description": "SemanticLink",
   "type": "Field",
   "subtype": "ACTION",
-  "properties": [
-  ]
+  "properties": []
 }