@pega/react-sdk-overrides 0.23.8 → 0.23.10

package/lib/designSystemExtensions/FieldGroupList/FieldGroupList.tsx

@@ -24,26 +24,30 @@ const FieldGroupList = props => {
           {props.items.map(item => (
             <Grid item style={{ width: '100%' }}>
               <b>{item.name}</b>
-              <button
-                type='button'
-                style={{ float: 'right' }}
-                className='psdk-utility-button'
-                id={`delete-row-${Utils.getLastChar(item.name)}`}
-                onClick={() => {
-                  props.onDelete(item.id);
-                }}
-              >
-                <img className='psdk-utility-card-action-svg-icon' src={menuIconOverride$}></img>
-              </button>
+              {props.onDelete && (
+                <button
+                  type='button'
+                  style={{ float: 'right' }}
+                  className='psdk-utility-button'
+                  id={`delete-row-${item.id}`}
+                  onClick={() => {
+                    props.onDelete(item.id);
+                  }}
+                >
+                  <img className='psdk-utility-card-action-svg-icon' src={menuIconOverride$}></img>
+                </button>
+              )}
               {item.children}
               <br />
-              <Divider />
+              {props.onAdd && <Divider />}
               <br />
             </Grid>
           ))}
-          <Link onClick={props.onAdd} style={{ cursor: 'pointer' }}>
-            +Add
-          </Link>
+          {props.onAdd && (
+            <Link onClick={props.onAdd} style={{ cursor: 'pointer' }}>
+              +Add
+            </Link>
+          )}
         </Grid>
       </Grid>
     </Grid>

package/lib/forms/AutoComplete/AutoComplete.tsx

@@ -5,6 +5,7 @@ import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
 import isDeepEqual from 'fast-deep-equal/react';
 import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/data_page';
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 
 interface IOption {
   key: string;
@@ -42,7 +43,6 @@ export default function AutoComplete(props) {
     placeholder,
     value = '',
     validatemessage,
-    onChange,
     readOnly,
     testId,
     displayMode,
@@ -60,6 +60,11 @@ export default function AutoComplete(props) {
   let selectedValue: any = '';
   const helperTextToDisplay = validatemessage || helperText;
 
+  const thePConn = getPConnect();
+  const actionsApi = thePConn.getActionsApi();
+  const propName = thePConn.getStateProps().value;
+
+
   if (!isDeepEqual(datasource, theDatasource)) {
     // inbound datasource is different, so update theDatasource (to trigger useEffect)
     setDatasource(datasource);
@@ -137,7 +142,8 @@ export default function AutoComplete(props) {
   }
 
   const handleChange = (event: object, newValue) => {
-    onChange({ value: newValue ? newValue.key : '' });
+    const val = newValue ? newValue.key : '' ;
+    handleEvent(actionsApi, 'changeNblur', propName, val);
   };
 
   const handleInputValue = (event, newInputValue) => {

package/lib/forms/AutoComplete/config-ext.json

@@ -0,0 +1,11 @@
+{
+  "name": "AutoComplete",
+  "label": "Search box",
+  "description": "Picklist",
+  "type": "Field",
+  "subtype": "Picklist",
+  "componentKey" : "AutoComplete",
+  "icon": "",
+  "properties": [
+  ]
+}

package/lib/forms/Checkbox/config-ext.json

@@ -0,0 +1,10 @@
+{
+  "name": "Checkbox",
+  "label": "Checkbox",
+  "description": "Boolean",
+  "type": "Field",
+  "subtype": "Boolean",
+  "componentKey" : "Checkbox",
+  "properties": [
+  ]
+}

package/lib/forms/Currency/config-ext.json

@@ -0,0 +1,10 @@
+{
+  "name": "Currency",
+  "label": "Currency",
+  "description": "Currency",
+  "type": "Field",
+  "subtype": "Decimal-Currency",
+  "componentKey" : "Currency",
+  "properties": [
+  ]
+}

package/lib/forms/Date/config-ext.json

@@ -0,0 +1,10 @@
+{
+  "name": "Date",
+  "label": "Date only",
+  "description": "Date only",
+  "type": "Field",
+  "subtype": "Date",
+  "componentKey" : "Date",
+  "properties": [
+  ]
+}

package/lib/helpers/reactContextHelpers.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+
+// This file contains a shared access point for any React contexts that may need to be
+//  defined/used across various components.
+
+//  For example, the AppShell wants to use a NavContext that interacts with
+//  that context's consumption in the NavBar to handle clicks for opening/closing
+//  aspects of the NavBar
+export const NavContext = createContext({open: false, setOpen: f => f});
+export const useNavBar = () => useContext(NavContext);

package/lib/infra/Assignment/Assignment.tsx

@@ -10,7 +10,7 @@ import CloseIcon from '@material-ui/icons/Close';
 declare const PCore: any;
 
 export default function Assignment(props) {
-  const { getPConnect, children, itemKey, isCreateStage } = props;
+  const { getPConnect, children, itemKey, isInModal } = props;
   const thePConn = getPConnect();
 
   const [bHasNavigation, setHasNavigation] = useState(false);
@@ -164,7 +164,9 @@ export default function Assignment(props) {
           // check if create stage (modal)
           const { PUB_SUB_EVENTS } = PCore.getConstants();
           const { publish } = PCore.getPubSubUtils();
-          if (isCreateStage) {
+          const isAssignmentInCreateStage = thePConn.getCaseInfo().isAssignmentInCreateStage();
+          const isLocalAction = thePConn.getCaseInfo().isLocalAction() || getPConnect().getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION);
+          if (isAssignmentInCreateStage && isInModal && !isLocalAction) {
             const cancelPromise = cancelCreateStageAssignment(itemKey);
 
             cancelPromise
@@ -289,13 +291,13 @@ Assignment.propTypes = {
   children: PropTypes.node.isRequired,
   getPConnect: PropTypes.func.isRequired,
   itemKey: PropTypes.string,
-  isCreateStage: PropTypes.bool
+  isInModal: PropTypes.bool
   // actionButtons: PropTypes.object
   // buildName: PropTypes.string
 };
 
 Assignment.defaultProps = {
   itemKey: null,
-  isCreateStage: false
+  isInModal: false
   // buildName: null
 };

package/lib/infra/Containers/ModalViewContainer/ModalViewContainer.tsx

@@ -286,7 +286,7 @@ const ModalViewContainer = props => {
         </DialogTitle>
         <DialogContent className={classes.dlgContent}>
           {bShowModal ? (
-            <Assignment getPConnect={createdView.getPConnect} itemKey={itemKey} isCreateStage>
+            <Assignment getPConnect={createdView.getPConnect} itemKey={itemKey} isInModal>
               {arNewChildrenAsReact}
             </Assignment>
           ) : (

package/lib/infra/NavBar/NavBar.tsx

@@ -34,7 +34,7 @@ import ClearOutlinedIcon from '@material-ui/icons/ClearOutlined';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 
-import { useNavBar } from "@pega/react-sdk-components/lib/components/templates/AppShell/AppShell";
+import { useNavBar } from "@pega/react-sdk-components/lib/components/helpers/reactContextHelpers";
 import { logout } from '@pega/react-sdk-components/lib/components/helpers/authManager';
 
 declare const PCore;

package/lib/infra/VerticalTabs/VerticalTabs/VerticalTabs.tsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { makeStyles } from '@material-ui/core/styles'
 
 import Tabs from '@material-ui/core/Tabs';
-import LeftAlignVerticalTab from '@pega/react-sdk-components/lib/components/infra/VerticalTabs/LeftAlignVerticalTabs/LeftAlignVerticalTabs';
+import LeftAlignVerticalTab from '@pega/react-sdk-components/lib/components/infra/VerticalTabs/LeftAlignVerticalTabs';
 
 
 // The MuiTabs-indicator class is in a span whose parent is div (under the Tabs root component)

package/lib/templates/AppShell/AppShell.tsx

@@ -1,7 +1,9 @@
-import React, { useEffect, useState, createContext, useContext } from "react";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { makeStyles } from '@material-ui/core/styles';
 
+import { NavContext } from '@pega/react-sdk-components/lib/components/helpers/reactContextHelpers';
+
 // import {
 //   Avatar,
 //   Toaster,
@@ -33,9 +35,6 @@ const useStyles = makeStyles((theme) => ({
 declare const PCore;
 
 
-const NavContext = createContext({open: false, setOpen: f => f});
-export const useNavBar = () => useContext(NavContext);
-
 /*
  * The wrapper handles knowing how to take in just children and mapping
  * to the Cosmos template. This could be a combination of things but it knows...

package/lib/templates/AppShell/index.tsx

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

package/lib/templates/CaseViewActionsMenu/CaseViewActionsMenu.tsx

@@ -27,7 +27,7 @@ export default function CaseViewActionsMenu(props) {
     const actionsAPI = thePConn.getActionsApi();
     const openLocalAction = actionsAPI.openLocalAction.bind(actionsAPI);
 
-    openLocalAction( data.ID, { ...data});
+    openLocalAction( data.ID, { ...data, containerName: 'modal', type: 'express'});
     // after doing the action, close the menu...
     handleClose();
 

package/lib/templates/FieldGroupTemplate/FieldGroupTemplate.tsx

@@ -16,7 +16,9 @@ export default function FieldGroupTemplate(props) {
     getPConnect,
     lookForChildInConfig,
     heading,
-    displayMode
+    displayMode,
+    fieldHeader,
+    allowTableEdit: allowAddEdit
   } = props;
   const pConn = getPConnect();
   const resolvedList = getReferenceList(pConn);
@@ -25,13 +27,20 @@ export default function FieldGroupTemplate(props) {
   const isReadonlyMode = renderMode === 'ReadOnly' || displayMode === 'LABELS_LEFT';
   const HEADING = heading ?? 'Row';
 
+  const getDynamicHeaderProp = (item, index) => {
+    if (fieldHeader === 'propertyRef' && heading && item[heading.substring(1)]) {
+      return item[heading.substring(1)];
+    }
+    return `Row ${index + 1}`;
+  };
+
   const addRecord = () => {
     if (PCore.getPCoreVersion()?.includes('8.7')) {
       pConn.getListActions().insert({ classID: contextClass }, referenceList.length, pageReference);
     } else {
       pConn.getListActions().insert({ classID: contextClass }, referenceList.length);
     }
-  }
+  };
 
   if (!isReadonlyMode) {
     const addFieldGroupItem = () => {
@@ -44,14 +53,17 @@ export default function FieldGroupTemplate(props) {
         pConn.getListActions().deleteEntry(index);
       }
     };
-    if (referenceList.length === 0) {
+    if (referenceList.length === 0 && allowAddEdit !== false) {
       addFieldGroupItem();
     }
 
     const MemoisedChildren = useMemo(() => {
       return referenceList.map((item, index) => ({
         id: index,
-        name: `${HEADING} ${index + 1}`,
+        name:
+          fieldHeader === 'propertyRef'
+            ? getDynamicHeaderProp(item, index)
+            : `${HEADING} ${index + 1}`,
         children: buildView(pConn, index, lookForChildInConfig)
       }));
     }, [referenceList?.length]);
@@ -59,8 +71,8 @@ export default function FieldGroupTemplate(props) {
     return (
       <FieldGroupList
         items={MemoisedChildren}
-        onAdd={addFieldGroupItem}
-        onDelete={deleteFieldGroupItem}
+        onAdd={allowAddEdit !== false ? addFieldGroupItem : undefined}
+        onDelete={allowAddEdit !== false ? deleteFieldGroupItem : undefined}
       />
     );
   }

package/lib/widgets/FileUtility/FileUtility/FileUtility.tsx

@@ -8,7 +8,7 @@ import './FileUtility.css';
 import  { IconButton, Menu, MenuItem } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import { Button } from '@material-ui/core';
-import { validateMaxSize } from '@pega/react-sdk-components/lib/components/infra/Attachment/AttachmentUtils';
+import { validateMaxSize } from '@pega/react-sdk-components/lib/components/widgets/Attachment/AttachmentUtils';
 import { CircularProgress } from "@material-ui/core";
 
 declare const PCore;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/react-sdk-overrides",
-  "version": "0.23.8",
+  "version": "0.23.10",
   "description": "React SDK - Code for overriding components",
   "_filesComment": "During packing, npm ignores everything NOT in the files list",
   "files": [