@pega/react-sdk-overrides 8.8.21 → 8.23.11-debug

package/lib/field/Phone/Phone.tsx

@@ -1,16 +1,8 @@
 import React from 'react';
 import MuiPhoneNumber from 'material-ui-phone-number';
-import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import type { 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');
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
+export default function Phone(props) {
   const {
     label,
     required,
@@ -39,7 +31,7 @@ export default function Phone(props: PhoneProps) {
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant="stacked" />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
   }
 
   if (readOnly) {
@@ -49,8 +41,8 @@ export default function Phone(props: PhoneProps) {
         <MuiPhoneNumber
           fullWidth
           helperText={helperTextToDisplay}
-          placeholder=""
-          size="small"
+          placeholder=''
+          size='small'
           required={required}
           disabled={disabled}
           onChange={onChange}
@@ -67,13 +59,13 @@ export default function Phone(props: PhoneProps) {
     );
   }
 
-  const handleChange = (inputVal) => {
+  const handleChange = inputVal => {
     let phoneValue = inputVal && inputVal.replace(/\D+/g, '');
     phoneValue = `+${phoneValue}`;
     onChange({ value: phoneValue });
   };
 
-  const handleBlur = (event) => {
+  const handleBlur = event => {
     const phoneValue = event?.target?.value;
     event.target.value = `+${phoneValue && phoneValue.replace(/\D+/g, '')}`;
     onBlur(event);
@@ -82,11 +74,11 @@ export default function Phone(props: PhoneProps) {
   return (
     <MuiPhoneNumber
       fullWidth
-      variant="outlined"
+      variant='outlined'
       helperText={helperTextToDisplay}
-      placeholder=""
-      size="small"
-      defaultCountry="us"
+      placeholder=''
+      size='small'
+      defaultCountry='us'
       required={required}
       disabled={disabled}
       onChange={handleChange}

package/lib/field/RadioButtons/RadioButtons.tsx

@@ -1,21 +1,18 @@
 import React, { useState, useEffect } from 'react';
-import { Radio, RadioGroup, FormControl, FormControlLabel, FormLabel, FormHelperText } from '@material-ui/core';
+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 { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
-
-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');
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
+export default function RadioButtons(props) {
   const {
     getPConnect,
     label,
@@ -43,7 +40,9 @@ export default function RadioButtons(props: RadioButtonsProps) {
   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;
+  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';
@@ -53,7 +52,7 @@ export default function RadioButtons(props: RadioButtonsProps) {
 
   // 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(thePConn.getContextName()));
+  const theOptions = Utils.getOptionList(theConfigProps, thePConn.getDataObject());
 
   useEffect(() => {
     // This update theSelectedButton which will update the UI to show the selected button correctly
@@ -64,7 +63,11 @@ export default function RadioButtons(props: RadioButtonsProps) {
     return (
       <FieldValueList
         name={hideLabel ? '' : label}
-        value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
+        value={thePConn.getLocalizedValue(
+          value,
+          localePath,
+          thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
+        )}
       />
     );
   }
@@ -73,25 +76,34 @@ export default function RadioButtons(props: RadioButtonsProps) {
     return (
       <FieldValueList
         name={hideLabel ? '' : label}
-        value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
-        variant="stacked"
+        value={thePConn.getLocalizedValue(
+          value,
+          localePath,
+          thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
+        )}
+        variant='stacked'
       />
     );
   }
 
-  const handleChange = (event) => {
+  const handleChange = event => {
     handleEvent(actionsApi, 'changeNblur', propName, event.target.value);
   };
 
-  const handleBlur = (event) => {
-    thePConn.getValidationApi().validate(event.target.value, ''); // 2nd arg empty string until typedef marked correctly as optional
+  const handleBlur = event => {
+    thePConn.getValidationApi().validate(event.target.value);
   };
 
   return (
     <FormControl error={status === 'error'} required={required}>
-      <FormLabel component="legend">{label}</FormLabel>
-      <RadioGroup value={theSelectedButton} onChange={handleChange} onBlur={!readOnly ? handleBlur : undefined} row={inline}>
-        {theOptions.map((theOption) => {
+      <FormLabel component='legend'>{label}</FormLabel>
+      <RadioGroup
+        value={theSelectedButton}
+        onChange={handleChange}
+        onBlur={!readOnly ? handleBlur : undefined}
+        row={inline}
+      >
+        {theOptions.map(theOption => {
           return (
             <FormControlLabel
               value={theOption.key}
@@ -101,7 +113,7 @@ export default function RadioButtons(props: RadioButtonsProps) {
                 localePath,
                 thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
               )}
-              control={<Radio key={theOption.key} color="primary" disabled={readOnly} />}
+              control={<Radio key={theOption.key} color='primary' disabled={readOnly} />}
             />
           );
         })}

package/lib/field/SemanticLink/SemanticLink.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+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 { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 /* 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. */
@@ -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,38 +39,37 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 
-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');
-
-  const { text, displayMode, label, hideLabel } = props;
+export default function SemanticLink(props) {
+  const {
+    text,
+    displayMode,
+    label,
+    hideLabel
+  } = props;
   const classes = useStyles();
 
-  if (displayMode === 'LABELS_LEFT' || (!displayMode && label !== undefined)) {
-    const value = text || '---';
+
+  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>
     );
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={text} variant="stacked" />;
+    return <FieldValueList name={hideLabel ? '' : label} value={text} variant='stacked' />;
   }
 }
+
+SemanticLink.propTypes = {
+  text: PropTypes.string.isRequired,
+  displayMode: PropTypes.string,
+  label: PropTypes.string,
+};

package/lib/field/TextArea/TextArea.tsx

@@ -1,17 +1,8 @@
 import React from 'react';
 import { TextField } from '@material-ui/core';
-import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
-
-interface TextAreaProps extends PConnFieldProps {
-  // If any, enter additional props that only exist on TextArea here
-  fieldMetadata?: any;
-}
-
-export default function TextArea(props: TextAreaProps) {
-  // Get emitted components from map (so we can get any override that may exist)
-  const FieldValueList = getComponentFromMap('FieldValueList');
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
+export default function TextArea(props) {
   const {
     label,
     required,
@@ -39,7 +30,7 @@ export default function TextArea(props: TextAreaProps) {
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant="stacked" />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
   }
 
   if (readOnly) {
@@ -62,8 +53,8 @@ export default function TextArea(props: TextAreaProps) {
       fullWidth
       variant={readOnly ? 'standard' : 'outlined'}
       helperText={helperTextToDisplay}
-      placeholder=""
-      size="small"
+      placeholder=''
+      size='small'
       required={required}
       disabled={disabled}
       onChange={onChange}

package/lib/field/TextContent/TextContent.tsx

@@ -1,16 +1,7 @@
 import React from 'react';
 import { Typography } from '@material-ui/core';
-import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-interface TextContentProps extends PConnProps {
-  // If any, enter additional props that only exist on TextContent here
-  content: string,
-  displayAs: 'Paragraph' | 'Heading 1' | 'Heading 2' | 'Heading 3' | 'Heading 4'
-}
-
-
-
-export default function TextContent(props: TextContentProps) {
+export default function TextContent(props) {
   type ExpectedDisplayAs = 'Paragraph' | 'Heading 1' | 'Heading 2' | 'Heading 3' | 'Heading 4';
   type ExpectedVariants = 'body1' | 'h1' | 'h2' | 'h3' | 'h4';
 

package/lib/field/TextInput/TextInput.tsx

@@ -1,18 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { TextField } from '@material-ui/core';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 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 type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
-
-interface TextInputProps extends PConnFieldProps {
-  // If any, enter additional props that only exist on TextInput here
-  fieldMetadata?: any;
-}
-
-export default function TextInput(props: TextInputProps) {
-  // Get emitted components from map (so we can get any override that may exist)
-  const FieldValueList = getComponentFromMap('FieldValueList');
 
+export default function TextInput(props) {
   const {
     getPConnect,
     label,
@@ -36,7 +27,7 @@ export default function TextInput(props: TextInputProps) {
 
   const helperTextToDisplay = validatemessage || helperText;
 
-  const [inputValue, setInputValue] = useState('');
+  const [inputValue, setInputValue] = useState();
   const maxLength = fieldMetadata?.maxLength;
 
   let readOnlyProp = {}; // Note: empty if NOT ReadOnly
@@ -50,7 +41,7 @@ export default function TextInput(props: TextInputProps) {
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant="stacked" />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
   }
 
   if (readOnly) {
@@ -77,8 +68,8 @@ export default function TextInput(props: TextInputProps) {
       fullWidth
       variant={readOnly ? 'standard' : 'outlined'}
       helperText={helperTextToDisplay}
-      placeholder=""
-      size="small"
+      placeholder=''
+      size='small'
       required={required}
       disabled={disabled}
       onChange={handleChange}

package/lib/field/Time/Time.tsx

@@ -1,20 +1,25 @@
 import React from 'react';
 import { KeyboardTimePicker } from '@material-ui/pickers';
-import AccessTimeIcon from '@material-ui/icons/AccessTime';
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
 import dayjs from 'dayjs';
-import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
-
-interface TimeProps extends PConnFieldProps {
-  // If any, enter additional props that only exist on Time here
-}
-
-export default function Time(props: TimeProps) {
-  // Get emitted components from map (so we can get any override that may exist)
-  const FieldValueList = getComponentFromMap('FieldValueList');
-  const TextInput = getComponentFromMap('TextInput');
+import AccessTimeIcon from '@material-ui/icons/AccessTime';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
-  const { label, required, disabled, value = '', validatemessage, status, onChange, readOnly, helperText, displayMode, hideLabel, testId } = props;
+export default function Time(props) {
+  const {
+    label,
+    required,
+    disabled,
+    value,
+    validatemessage,
+    status,
+    onChange,
+    readOnly,
+    helperText,
+    displayMode,
+    hideLabel,
+    testId
+  } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
   if (displayMode === 'LABELS_LEFT') {
@@ -22,7 +27,7 @@ export default function Time(props: TimeProps) {
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant="stacked" />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
   }
 
   if (readOnly) {
@@ -35,14 +40,14 @@ export default function Time(props: TimeProps) {
     'data-test-id': testId
   };
 
-  const handleChange = (date) => {
+  const handleChange = date => {
     const theValue = date && date.isValid() ? date.format('HH:mm') : null;
     onChange({ value: theValue });
   };
 
   let timeValue: any = null;
   if (value) {
-    const timeArray = value.split(':').map((itm) => Number(itm));
+    const timeArray = value.split(':').map(itm => Number(itm));
     timeValue = dayjs().hour(timeArray[0]).minute(timeArray[1]);
   }
 
@@ -53,9 +58,9 @@ export default function Time(props: TimeProps) {
 
   return (
     <KeyboardTimePicker
-      variant="inline"
-      inputVariant="outlined"
-      placeholder="hh:mm am"
+      variant='inline'
+      inputVariant='outlined'
+      placeholder='hh:mm am'
       keyboardIcon={<AccessTimeIcon />}
       fullWidth
       required={required}
@@ -63,11 +68,11 @@ export default function Time(props: TimeProps) {
       error={status === 'error'}
       helperText={helperTextToDisplay}
       minutesStep={5}
-      size="small"
+      size='small'
       label={label}
       autoOk
-      mask="__:__ _m"
-      format="hh:mm a"
+      mask='__:__ _m'
+      format='hh:mm a'
       value={timeValue}
       onChange={handleChange}
       InputProps={{ inputProps: { ...testProp } }}

package/lib/field/URL/URL.tsx

@@ -1,20 +1,12 @@
 import React from 'react';
 import { TextField } from '@material-ui/core';
-import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
-
-interface URLComponentProps extends PConnFieldProps {
-  // If any, enter additional props that only exist on URLComponent here
-}
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 // NOTE: that we had to change the name from URL to URLComponent
 //  Otherwise, we were getting all kinds of weird errors when we
 //  referred to URL as a component.
-export default function URLComponent(props: URLComponentProps) {
-  // Get emitted components from map (so we can get any override that may exist)
-  const FieldValueList = getComponentFromMap('FieldValueList');
-  const TextInput = getComponentFromMap('TextInput');
-
+export default function URLComponent(props) {
   const {
     label,
     required,
@@ -37,7 +29,7 @@ export default function URLComponent(props: URLComponentProps) {
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant="stacked" />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
   }
 
   if (readOnly) {
@@ -52,12 +44,12 @@ export default function URLComponent(props: URLComponentProps) {
 
   return (
     <TextField
-      type="url"
+      type='url'
       fullWidth
-      variant="outlined"
+      variant='outlined'
       helperText={helperTextToDisplay}
-      placeholder=""
-      size="small"
+      placeholder=''
+      size='small'
       required={required}
       disabled={disabled}
       onChange={onChange}