@pega/react-sdk-overrides 0.23.25 → 0.23.27

package/lib/field/SemanticLink/utils.ts

@@ -1,11 +1,9 @@
-declare const PCore;
-
 function getDataReferenceInfo(pConnect, dataRelationshipContext) {
   if (!pConnect) {
-    throw Error("PConnect parameter is required");
+    throw Error('PConnect parameter is required');
   }
 
-  let dataContext = "";
+  let dataContext = '';
   const payload = {};
   const pageReference = pConnect.getPageReference();
   const annotationUtils = PCore.getAnnotationUtils();
@@ -16,7 +14,7 @@ function getDataReferenceInfo(pConnect, dataRelationshipContext) {
     For page list the page refernce will be something like caseInfo.content.EmployeeRef[1].
     Need to extract EmployeeRef from caseInfo.content.EmployeeRef[1]
     */
-    const propertySplit = pageReference.split(".");
+    const propertySplit = pageReference.split('.');
 
     // Regex to match if the property is list type. Eg: EmployeeRef[1]
     const listPropertyRegex = /([a-z|A-Z]*[[][\d]*)[\]]$/gm;
@@ -25,9 +23,7 @@ function getDataReferenceInfo(pConnect, dataRelationshipContext) {
 
     let contextProperty = dataRelationshipContext !== null ? dataRelationshipContext : propertySplit.pop();
     const isListProperty = listPropertyRegex.test(contextProperty);
-    contextProperty = isListProperty
-      ? contextProperty.replace(indexRegex, "")
-      : contextProperty;
+    contextProperty = isListProperty ? contextProperty.replace(indexRegex, '') : contextProperty;
     fieldMetadata = pConnect.getFieldMetadata(contextProperty);
   }
 
@@ -35,7 +31,9 @@ function getDataReferenceInfo(pConnect, dataRelationshipContext) {
     const { name, parameters } = fieldMetadata.datasource;
     dataContext = name;
     for (const [key, value] of Object.entries(parameters)) {
-      const property = dataRelationshipContext !== null ? annotationUtils.getPropertyName(value) : annotationUtils.getLeafPropertyName(value)
+      const property =
+        // @ts-ignore - Property 'getLeafPropertyName' is private and only accessible within class 'AnnotationUtils'
+        dataRelationshipContext !== null ? annotationUtils.getPropertyName(value as string) : annotationUtils.getLeafPropertyName(value);
       payload[key] = pConnect.getValue(`.${property}`);
     }
     return { dataContext, dataContextParameters: payload };
@@ -45,7 +43,7 @@ function getDataReferenceInfo(pConnect, dataRelationshipContext) {
 }
 
 function isLinkTextEmpty(text) {
-  return text === "" || text === undefined || text === null;
+  return text === '' || text === undefined || text === null;
 }
 
 export default { getDataReferenceInfo, isLinkTextEmpty };

package/lib/field/TextArea/TextArea.tsx

@@ -1,8 +1,17 @@
-import React from 'react';
 import { TextField } from '@material-ui/core';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
-export default function TextArea(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 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');
+
   const {
     label,
     required,
@@ -17,7 +26,8 @@ export default function TextArea(props) {
     fieldMetadata,
     helperText,
     displayMode,
-    hideLabel
+    hideLabel,
+    placeholder
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -53,7 +63,7 @@ export default function TextArea(props) {
       fullWidth
       variant={readOnly ? 'standard' : 'outlined'}
       helperText={helperTextToDisplay}
-      placeholder=''
+      placeholder={placeholder ?? ''}
       size='small'
       required={required}
       disabled={disabled}

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

@@ -4,6 +4,5 @@
   "description": "Text (paragraph)",
   "type": "Field",
   "subtype": "Text-Paragraph",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/field/TextContent/TextContent.tsx

@@ -1,7 +1,14 @@
-import React from 'react';
 import { Typography } from '@material-ui/core';
 
-export default function TextContent(props) {
+import { 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) {
   type ExpectedDisplayAs = 'Paragraph' | 'Heading 1' | 'Heading 2' | 'Heading 3' | 'Heading 4';
   type ExpectedVariants = 'body1' | 'h1' | 'h2' | 'h3' | 'h4';
 

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

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

package/lib/field/TextInput/TextInput.tsx

@@ -1,30 +1,52 @@
-import React from 'react';
+import { useState, useEffect } from 'react';
 import { TextField } from '@material-ui/core';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
-export default function TextInput(props) {
+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 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');
+
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
+    /* onChange, onBlur */
     readOnly,
     testId,
     fieldMetadata,
     helperText,
     displayMode,
-    hideLabel
+    hideLabel,
+    placeholder
   } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+
   const helperTextToDisplay = validatemessage || helperText;
 
+  const [inputValue, setInputValue] = useState('');
   const maxLength = fieldMetadata?.maxLength;
 
   let readOnlyProp = {}; // Note: empty if NOT ReadOnly
 
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
   if (displayMode === 'LABELS_LEFT') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
@@ -43,20 +65,29 @@ export default function TextInput(props) {
     'data-test-id': testId
   };
 
+  function handleChange(event) {
+    // update internal value
+    setInputValue(event?.target?.value);
+  }
+
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
+  }
+
   return (
     <TextField
       fullWidth
       variant={readOnly ? 'standard' : 'outlined'}
       helperText={helperTextToDisplay}
-      placeholder=''
+      placeholder={placeholder ?? ''}
       size='small'
       required={required}
       disabled={disabled}
-      onChange={onChange}
-      onBlur={!readOnly ? onBlur : undefined}
+      onChange={handleChange}
+      onBlur={!readOnly ? handleBlur : undefined}
       error={status === 'error'}
       label={label}
-      value={value}
+      value={inputValue}
       InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
     />
   );

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

@@ -4,6 +4,5 @@
   "description": "Text (single line)",
   "type": "Field",
   "subtype": "Text",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/field/TextInput/index.tsx

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

package/lib/field/Time/Time.tsx

@@ -1,24 +1,20 @@
-import React from 'react';
 import { KeyboardTimePicker } from '@material-ui/pickers';
-import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
-import dayjs from 'dayjs';
 import AccessTimeIcon from '@material-ui/icons/AccessTime';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
+import dayjs from 'dayjs';
+
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { 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) {
-  const {
-    label,
-    required,
-    disabled,
-    value,
-    validatemessage,
-    status,
-    onChange,
-    readOnly,
-    helperText,
-    displayMode,
-    hideLabel
-  } = props;
+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');
+
+  const { label, required, disabled, value = '', validatemessage, status, onChange, readOnly, helperText, displayMode, hideLabel, testId } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
   if (displayMode === 'LABELS_LEFT') {
@@ -33,6 +29,12 @@ export default function Time(props) {
     return <TextInput {...props} />;
   }
 
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+
   const handleChange = date => {
     const theValue = date && date.isValid() ? date.format('HH:mm') : null;
     onChange({ value: theValue });
@@ -68,6 +70,7 @@ export default function Time(props) {
       format='hh:mm a'
       value={timeValue}
       onChange={handleChange}
+      InputProps={{ inputProps: { ...testProp } }}
     />
   );
 }

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

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

package/lib/field/URL/URL.tsx

@@ -1,12 +1,20 @@
-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';
+
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface URLComponentProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on URLComponent here
+}
 
 // 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) {
+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');
+
   const {
     label,
     required,
@@ -17,9 +25,11 @@ export default function URLComponent(props) {
     onChange,
     onBlur,
     readOnly,
+    testId,
     helperText,
     displayMode,
-    hideLabel
+    hideLabel,
+    placeholder
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -35,13 +45,19 @@ export default function URLComponent(props) {
     return <TextInput {...props} />;
   }
 
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+
   return (
     <TextField
       type='url'
       fullWidth
       variant='outlined'
       helperText={helperTextToDisplay}
-      placeholder=''
+      placeholder={placeholder ?? ''}
       size='small'
       required={required}
       disabled={disabled}
@@ -50,6 +66,7 @@ export default function URLComponent(props) {
       error={status === 'error'}
       label={label}
       value={value}
+      InputProps={{ inputProps: { ...testProp } }}
     />
   );
 }

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

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

package/lib/field/URL/index.tsx

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

package/lib/field/UserReference/UserReference.tsx

@@ -1,31 +1,56 @@
-import React, { Fragment, memo, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+import { memo, useEffect, useState } from 'react';
 import { Typography } from '@material-ui/core';
-import AutoComplete from '@pega/react-sdk-components/lib/components/field/AutoComplete';
-import Dropdown from '@pega/react-sdk-components/lib/components/field/Dropdown';
+
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import { getUserId, isUserNameAvailable } from './UserReferenceUtils';
 
-declare const PCore: any;
 const DROPDOWN_LIST = 'Drop-down list';
 const SEARCH_BOX = 'Search box';
 
-const UserReference = props => {
+interface UserReferenceProps extends PConnProps {
+  // If any, enter additional props that only exist on URLComponent here
+  displayAs?: string;
+  label?: string;
+  value?: any;
+  testId?: string;
+  placeholder?: string;
+  helperText?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  validatemessage?: string;
+  showAsFormattedText?: boolean;
+  additionalProps?: object;
+  hideLabel?: boolean;
+  variant?: string;
+  onChange?: any;
+}
+
+const UserReference = (props: UserReferenceProps) => {
+  // Get emitted components from map (so we can get any override that may exist)
+  const AutoComplete = getComponentFromMap('AutoComplete');
+  const Dropdown = getComponentFromMap('Dropdown');
+
   const {
-    label,
-    displayAs,
+    label = '',
+    displayAs = '',
     getPConnect,
-    value,
-    testId,
-    helperText,
-    validatemessage,
-    placeholder,
-    showAsFormattedText,
-    additionalProps,
-    hideLabel,
-    readOnly,
-    required,
-    disabled,
-    onChange
+    value = '',
+    testId = '',
+    helperText = '',
+    validatemessage = '',
+    placeholder = '',
+    showAsFormattedText = false,
+    additionalProps = {},
+    hideLabel = false,
+    readOnly = false,
+    required = false,
+    disabled = false,
+    onChange,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    variant = 'inline'
   } = props;
   const [dropDownDataSource, setDropDownDataSource] = useState([]);
   const [userName, setUserName] = useState('');
@@ -40,7 +65,7 @@ const UserReference = props => {
         // if same user ref field is referred in view as editable & readonly formatted text
         // referenced users won't be available, so get user details from dx api
         const { getOperatorDetails } = PCore.getUserApi();
-        getOperatorDetails(userId).then(res => {
+        getOperatorDetails(userId).then((res: any) => {
           if (res.data && res.data.pyOperatorInfo && res.data.pyOperatorInfo.pyUserName) {
             setUserName(res.data.pyOperatorInfo.pyUserName);
           }
@@ -50,9 +75,12 @@ const UserReference = props => {
       const queryPayload = {
         dataViewName: OPERATORS_DP
       };
+
       PCore.getRestClient()
+        // @ts-ignore - Argument of type '{ queryPayload: { dataViewName: string; }; }' is not assignable to parameter of type 'RestApiOptionsObject'
+        // @ts-ignore - Expected 3 arguments, but got 2
         .invokeRestApi('getListData', { queryPayload })
-        .then(res => {
+        .then((res: any) => {
           const ddDataSource = res.data.data.map(listItem => ({
             key: listItem.pyUserIdentifier,
             value: listItem.pyUserName
@@ -71,7 +99,7 @@ const UserReference = props => {
   if (readOnly && showAsFormattedText) {
     if (userId) {
       userReferenceComponent = (
-        <Fragment>
+        <>
           {/*
             TODO: This has to be replaced with Operator Component
           */}
@@ -79,7 +107,7 @@ const UserReference = props => {
             <Typography variant='caption'>{label}</Typography>
             <Typography variant='body1'>{userName}</Typography>
           </div>
-        </Fragment>
+        </>
       );
     }
   } else {
@@ -148,40 +176,6 @@ const UserReference = props => {
   return userReferenceComponent;
 };
 
-UserReference.propTypes = {
-  getPConnect: PropTypes.func.isRequired,
-  displayAs: PropTypes.string,
-  label: PropTypes.string,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.objectOf(PropTypes.any)]),
-  testId: PropTypes.string,
-  placeholder: PropTypes.string,
-  helperText: PropTypes.string,
-  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  validatemessage: PropTypes.string,
-  showAsFormattedText: PropTypes.bool,
-  additionalProps: PropTypes.objectOf(PropTypes.any),
-  hideLabel: PropTypes.bool
-};
-
-UserReference.defaultProps = {
-  displayAs: null,
-  label: null,
-  value: null,
-  readOnly: false,
-  testId: null,
-  placeholder: null,
-  helperText: null,
-  disabled: false,
-  required: false,
-  validatemessage: null,
-  showAsFormattedText: false,
-  additionalProps: {},
-  variant: 'inline',
-  hideLabel: false
-};
-
 // as objects are there in props, shallow comparision fails & re-rendering of comp happens even with
 // same key value pairs in obj. hence using custom comparison function on when to re-render
 const comparisonFn = (prevProps, nextProps) => {

package/lib/field/UserReference/UserReferenceUtils.ts

@@ -1,4 +1,4 @@
-export const getUserId = (user) => {
+export const getUserId = user => {
   let userId = '';
   if (typeof user === 'object' && user !== null && user.userId) {
     userId = user.userId;
@@ -8,6 +8,6 @@ export const getUserId = (user) => {
   return userId;
 };
 
-export const isUserNameAvailable = (user) => {
+export const isUserNameAvailable = user => {
   return typeof user === 'object' && user !== null && user.userName;
 };

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

@@ -3,6 +3,5 @@
   "description": "User reference",
   "type": "Field",
   "subtype": "DATA_CAPTURE",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/helpers/{attachmentHelpers.js → attachmentHelpers.ts}

@@ -1,6 +1,6 @@
 import download from 'downloadjs';
 
-export const validateMaxSize = (fileObj, maxSizeInMB) => {
+export const validateMaxSize = (fileObj: any, maxSizeInMB: string): boolean => {
   const fileSize = (fileObj.size / 1048576).toFixed(2);
   return parseFloat(fileSize) < parseFloat(maxSizeInMB);
 };
@@ -15,7 +15,7 @@ export const fileDownload = (data, fileName, ext) => {
   }
 };
 
-export const getIconFromFileType = (fileType) => {
+export const getIconFromFileType = (fileType): string => {
   let icon = 'document-doc';
   if (!fileType) return icon;
   if (fileType.startsWith('audio')) {
@@ -28,8 +28,8 @@ export const getIconFromFileType = (fileType) => {
     icon = 'document-pdf';
   } else {
     const [, subtype] = fileType.split('/');
-    const foundMatch = (sources) => {
-      return sources.some((key) => subtype.includes(key));
+    const foundMatch = sources => {
+      return sources.some(key => subtype.includes(key));
     };
 
     if (foundMatch(['excel', 'spreadsheet'])) {
@@ -42,22 +42,27 @@ export const getIconFromFileType = (fileType) => {
   return icon;
 };
 
-export const getIconForAttachment = (attachment) => {
+export const getIconForAttachment = (inThis: any, attachment: any): string => {
   let icon;
   switch (attachment.type) {
-    case "FILE":
-      icon = this.getIconFromFileType(attachment.mimeType);
+    case 'FILE':
+      icon = inThis.getIconFromFileType(attachment.mimeType);
       break;
-    case "URL":
-      icon = "chain";
+    case 'URL':
+      icon = 'chain';
       break;
     default:
-      icon = "document-doc";
+      icon = 'document-doc';
   }
   return icon;
 };
 
-export const buildFilePropsFromResponse = (respObj) => {
+export const buildFilePropsFromResponse = (
+  respObj
+): {
+  props: { meta: string; name: string; icon: string };
+  responseProps: any;
+} => {
   return {
     props: {
       meta: `${respObj.pyCategoryName}, ${respObj.pxCreateOperator}`,