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

package/lib/widget/Followers/Followers.tsx

@@ -1,15 +1,9 @@
 import React from "react";
+// import PropTypes from "prop-types";
 import { Card, CardContent, CardHeader, Typography } from "@material-ui/core";
 import { makeStyles } from '@material-ui/core/styles';
 // import { green } from "@material-ui/core/colors";
 
-// Followers does NOT have getPConnect. So, no need to extend from PConnProps
-interface FollowersProps {
-  // If any, enter additional props that only exist on this component
-  children: Array<any>
-}
-
-
 const useStyles = makeStyles((theme) => ({
   root: {
     paddingRight: theme.spacing(1),
@@ -25,10 +19,9 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-export default function Followers(props: FollowersProps) {
+export default function Followers(/* props */) {
   const componentName = "Followers";
-  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-  const { children } = props;
+  // const { children } = props;
   const classes = useStyles();
 
   return (
@@ -40,3 +33,11 @@ export default function Followers(props: FollowersProps) {
       </Card>
     );
 }
+
+Followers.defaultProps = {
+  // children: []
+}
+
+Followers.propTypes = {
+  // children: PropTypes.arrayOf(PropTypes.node)
+};

package/lib/widget/QuickCreate/QuickCreate.tsx

@@ -1,25 +1,19 @@
 import React from "react";
+import WssQuickCreate from '@pega/react-sdk-components/lib/components/designSystemExtension/WssQuickCreate';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
-import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-// import type { PConnProps } from '../../../types/PConnProps';
 
-// Can't add PConnTypes until we can resolve type problems with
-//  2nd arg to createWork
-// interface QuickCreateProps extends PConnProps {
-//   // If any, enter additional props that only exist on this component
-// }
+import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
 
+declare const PCore: typeof PCoreType;
 
-export default function QuickCreate(props /* : QuickCreateProps */) {
-  // Get emitted components from map (so we can get any override that may exist)
-  const WssQuickCreate = getComponentFromMap('WssQuickCreate');
 
+export default function QuickCreate(props) {
   const { getPConnect, heading, showCaseIcons, classFilter } = props;
   const pConn = getPConnect();
   const createCase = (className) => {
     pConn
       .getActionsApi()
-      .createWork(className, { })
+      .createWork(className, {})
       .catch((error) => {
         // eslint-disable-next-line no-console
         console.log('Error in case creation: ', error?.message)

package/lib/widget/SummaryItem/SummaryItem.tsx

@@ -4,17 +4,7 @@ import './SummaryItem.css'
 import  { IconButton, Menu, MenuItem } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 
-// SummaryItem does NOT have getPConnect. So, no need to extend from PConnProps
-
-interface SummaryItemProps {
-  // If any, enter additional props that only exist on this component
-  menuIconOverride$: string,
-  menuIconOverrideAction$: any,
-  arItems$: Array<any> | any
-}
-
-
-export default function SummaryItem(props:SummaryItemProps) {
+export default function SummaryItem(props) {
   let imagePath$ = "";
   let menuIconOverride$;
   menuIconOverride$ = props.menuIconOverride$

package/lib/widget/SummaryList/SummaryList.tsx

@@ -1,25 +1,11 @@
 import React from "react";
-import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import SummaryItem from '@pega/react-sdk-components/lib/components/widget/SummaryItem/index'
 
-// SummaryList does NOT have getPConnect. So, no need to extend from PConnProps
-
-interface SummaryListProps {
-  // If any, enter additional props that only exist on this component
-  arItems$: Array<any>,
-  menuIconOverride$?: string,
-  menuIconOverrideAction$?: any
-}
-
-
-export default function SummaryList(props: SummaryListProps) {
-  // Get emitted components from map (so we can get any override that may exist)
-  const SummaryItem = getComponentFromMap('SummaryItem');
-
-  const { menuIconOverride$: menuOverride = ""} = props;
+export default function SummaryList(props) {
   return (
     <div>
       {props.arItems$.map(file => (
-        <SummaryItem key={file.id} menuIconOverride$={menuOverride} arItems$={file} menuIconOverrideAction$={props.menuIconOverrideAction$}></SummaryItem>
+        <SummaryItem key={file.id} menuIconOverride$={props.menuIconOverride$} arItems$={file} menuIconOverrideAction$={props.menuIconOverrideAction$}></SummaryItem>
       ))}
     </div>
   );

package/lib/widget/ToDo/ToDo.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable no-shadow */
 /* eslint-disable @typescript-eslint/no-shadow */
 import React, { Fragment, useState } from 'react';
+import PropTypes from 'prop-types';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import {
   Box,
@@ -25,27 +26,13 @@ import { makeStyles } from '@material-ui/core/styles';
 import { useTheme } from '@material-ui/core/styles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 
-import './ToDo.css';
+import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
 
-import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import './ToDo.css';
 
-interface ToDoProps extends PConnProps {
-  // If any, enter additional props that only exist on this component
-  datasource?: any;
-  myWorkList?: any;
-  // eslint-disable-next-line react/no-unused-prop-types
-  caseInfoID?: string;
-  headerText?: string;
-  // eslint-disable-next-line react/no-unused-prop-types
-  itemKey?: string;
-  showTodoList?: boolean;
-  type?: string;
-  // eslint-disable-next-line react/no-unused-prop-types
-  context?: string;
-  isConfirm?: boolean;
-}
+declare const PCore: typeof PCoreType;
 
-const isChildCase = (assignment) => {
+const isChildCase = assignment => {
   return assignment.isChild;
 };
 
@@ -64,7 +51,7 @@ function getID(assignment: any) {
   }
 }
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
   root: {
     marginTop: theme.spacing(1),
     marginBottom: theme.spacing(1),
@@ -84,8 +71,8 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 
-export default function ToDo(props: ToDoProps) {
-  const { getPConnect, datasource = [], headerText = 'To do', showTodoList = true, myWorkList = {}, type = 'worklist', isConfirm = false } = props;
+export default function ToDo(props) {
+  const { datasource, getPConnect, headerText, showTodoList, myWorkList, type, isConfirm } = props;
 
   const CONSTS = PCore.getConstants();
 
@@ -121,15 +108,15 @@ export default function ToDo(props: ToDoProps) {
     }
   }
 
-  const getAssignmentId = (assignment) => {
+  const getAssignmentId = assignment => {
     return type === CONSTS.TODO ? assignment.ID : assignment.id;
   };
 
-  const getPriority = (assignment) => {
+  const getPriority = assignment => {
     return type === CONSTS.TODO ? assignment.urgency : assignment.priority;
   };
 
-  const getAssignmentName = (assignment) => {
+  const getAssignmentName = assignment => {
     return type === CONSTS.TODO ? assignment.name : assignment.stepName;
   };
 
@@ -164,7 +151,7 @@ export default function ToDo(props: ToDoProps) {
     const sTarget = thePConn.getContainerName();
     const sTargetContainerName = sTarget;
 
-    const options = { containerName: sTargetContainerName, channelName: '' };
+    const options = { containerName: sTargetContainerName };
 
     if (classname === null || classname === '') {
       classname = thePConn.getCaseInfo().getClassName();
@@ -199,26 +186,30 @@ export default function ToDo(props: ToDoProps) {
 
     if ((showTodoList && type !== CONSTS.TODO) || assignment.isChild === true) {
       /* Supress link for todo inside flow step */
-      return <Button size="small" color="primary">{`${assignment.name} ${getID(assignment)}`}</Button>;
+      return (
+        <Button size='small' color='primary'>{`${assignment.name} ${getID(assignment)}`}</Button>
+      );
     }
     return displayID;
   };
 
-  const getListItemComponent = (assignment) => {
+  const getListItemComponent = assignment => {
     if (isDesktop) {
       return (
         <>
           {localizedVal('Task in', localeCategory)}
           {renderTaskId(type, getPConnect, showTodoList, assignment)}
           {type === CONSTS.WORKLIST && assignment.status ? `\u2022 ` : undefined}
-          {type === CONSTS.WORKLIST && assignment.status ? <span className="psdk-todo-assignment-status">{assignment.status}</span> : undefined}
+          {type === CONSTS.WORKLIST && assignment.status ? (
+            <span className='psdk-todo-assignment-status'>{assignment.status}</span>
+          ) : undefined}
           {` \u2022  ${localizedVal('Urgency', localeCategory)}  ${getPriority(assignment)}`}
         </>
       );
     }
     return (
       <>
-        <Button size="small" color="primary">{`${assignment.name} ${getID(assignment)}`}</Button>
+        <Button size='small' color='primary'>{`${assignment.name} ${getID(assignment)}`}</Button>
         {` \u2022 ${localizedVal('Urgency', localeCategory)}  ${getPriority(assignment)}`}
       </>
     );
@@ -229,33 +220,37 @@ export default function ToDo(props: ToDoProps) {
       {showTodoList && (
         <CardHeader
           title={
-            <Badge badgeContent={assignmentCount} overlap="rectangular" color="primary">
-              <Typography variant="h6">{headerText}&nbsp;&nbsp;&nbsp;</Typography>
+            <Badge badgeContent={assignmentCount} color='primary'>
+              <Typography variant='h6'>{headerText}&nbsp;&nbsp;&nbsp;</Typography>
             </Badge>
           }
         ></CardHeader>
       )}
       <List>
-        {assignments.map((assignment) => (
-          <div className="psdk-todo-avatar-header" key={getAssignmentId(assignment)}>
-            <Avatar className={classes.avatar} style={{ marginRight: '16px' }}>
-              {currentUserInitials}
-            </Avatar>
-            <div style={{ display: 'block' }}>
-              <Typography variant="h6">{assignment?.name}</Typography>
-              {`${localizedVal('Task in', localeCategory)} ${renderTaskId(type, getPConnect, showTodoList, assignment)} \u2022  ${localizedVal(
-                'Urgency',
-                localeCategory
-              )}  ${getPriority(assignment)}`}
-            </div>
-            {!isConfirm && (
-              <div style={{ marginLeft: 'auto' }}>
-                <IconButton onClick={() => clickGo(assignment)}>
-                  <ArrowForwardIosOutlinedIcon />
-                </IconButton>
+        {assignments.map(assignment => (
+          <>
+            <div className='psdk-todo-avatar-header' key={getAssignmentId(assignment)}>
+              <Avatar className={classes.avatar} style={{ marginRight: '16px' }}>
+                {currentUserInitials}
+              </Avatar>
+              <div style={{ display: 'block' }}>
+                <Typography variant='h6'>{assignment?.name}</Typography>
+                {`${localizedVal('Task in', localeCategory)} ${renderTaskId(
+                  type,
+                  getPConnect,
+                  showTodoList,
+                  assignment
+                )} \u2022  ${localizedVal('Urgency', localeCategory)}  ${getPriority(assignment)}`}
               </div>
-            )}
-          </div>
+              {!isConfirm && (
+                <div style={{ marginLeft: 'auto' }}>
+                  <IconButton onClick={() => clickGo(assignment)}>
+                    <ArrowForwardIosOutlinedIcon />
+                  </IconButton>
+                </div>
+              )}
+            </div>
+          </>
         ))}
       </List>
     </>
@@ -268,8 +263,8 @@ export default function ToDo(props: ToDoProps) {
           {showTodoList && (
             <CardHeader
               title={
-                <Badge badgeContent={assignmentCount} overlap="rectangular" color="primary">
-                  <Typography variant="h6">{headerText}&nbsp;&nbsp;&nbsp;</Typography>
+                <Badge badgeContent={assignmentCount} color='primary'>
+                  <Typography variant='h6'>{headerText}&nbsp;&nbsp;&nbsp;</Typography>
                 </Badge>
               }
               avatar={<Avatar className={classes.avatar}>{currentUserInitials}</Avatar>}
@@ -277,9 +272,17 @@ export default function ToDo(props: ToDoProps) {
           )}
           <CardContent>
             <List>
-              {assignments.map((assignment) => (
-                <ListItem key={getAssignmentId(assignment)} dense divider onClick={() => clickGo(assignment)}>
-                  <ListItemText primary={getAssignmentName(assignment)} secondary={getListItemComponent(assignment)} />
+              {assignments.map(assignment => (
+                <ListItem
+                  key={getAssignmentId(assignment)}
+                  dense
+                  divider
+                  onClick={() => clickGo(assignment)}
+                >
+                  <ListItemText
+                    primary={getAssignmentName(assignment)}
+                    secondary={getListItemComponent(assignment)}
+                  />
                   <ListItemSecondaryAction>
                     <IconButton onClick={() => clickGo(assignment)}>
                       <ArrowForwardIosOutlinedIcon />
@@ -292,17 +295,21 @@ export default function ToDo(props: ToDoProps) {
         </Card>
       )}
 
-      {type === CONSTS.TODO && !isConfirm && <Card className={classes.todoWrapper}>{toDoContent}</Card>}
+      {type === CONSTS.TODO && !isConfirm && (
+        <Card className={classes.todoWrapper}>{toDoContent}</Card>
+      )}
       {type === CONSTS.TODO && isConfirm && <Fragment>{toDoContent}</Fragment>}
 
       {assignmentCount > 3 && (
-        <Box display="flex" justifyContent="center">
+        <Box display='flex' justifyContent='center'>
           {bShowMore ? (
-            <Button color="primary" onClick={_showMore}>
-              {showMoreLocalizedValue === 'show_more' ? 'Show more' : showMoreLocalizedValue}
+            <Button color='primary' onClick={_showMore}>
+              {showMoreLocalizedValue ===  'show_more' ? 'Show more': showMoreLocalizedValue}
             </Button>
           ) : (
-            <Button onClick={_showLess}>{showlessLocalizedValue === 'show_less' ? 'Show less' : showlessLocalizedValue}</Button>
+            <Button onClick={_showLess}>
+              {showlessLocalizedValue ===  'show_less' ? 'Show less': showlessLocalizedValue}
+            </Button>
           )}
         </Box>
       )}
@@ -313,11 +320,47 @@ export default function ToDo(props: ToDoProps) {
         onClose={handleSnackbarClose}
         message={snackbarMessage}
         action={
-          <IconButton size="small" aria-label="close" color="inherit" onClick={handleSnackbarClose}>
-            <CloseIcon fontSize="small" />
+          <IconButton size='small' aria-label='close' color='inherit' onClick={handleSnackbarClose}>
+            <CloseIcon fontSize='small' />
           </IconButton>
         }
       />
     </React.Fragment>
   );
 }
+
+ToDo.propTypes = {
+  datasource: PropTypes.instanceOf(Object),
+  myWorkList: PropTypes.instanceOf(Object),
+  // eslint-disable-next-line react/no-unused-prop-types
+  caseInfoID: PropTypes.string,
+  // buildName: PropTypes.string,
+  getPConnect: PropTypes.func.isRequired,
+  headerText: PropTypes.string,
+  // eslint-disable-next-line react/no-unused-prop-types
+  itemKey: PropTypes.string,
+  showTodoList: PropTypes.bool,
+  // target: PropTypes.string,
+  type: PropTypes.string,
+  // pageMessages: PropTypes.arrayOf(PropTypes.any),
+  // eslint-disable-next-line react/no-unused-prop-types
+  context: PropTypes.string,
+  // hideActionButtons: PropTypes.bool
+  isConfirm: PropTypes.bool
+};
+
+ToDo.defaultProps = {
+  caseInfoID: '',
+  datasource: [],
+  myWorkList: {},
+  // buildName: "",
+  headerText: 'To do',
+  itemKey: '',
+  showTodoList: true,
+  // target: "",
+  type: 'worklist',
+  // pageMessages: null,
+  context: '',
+  // hideActionButtons: false
+  isConfirm: false
+};

package/package.json

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

package/lib/designSystemExtension/RichTextEditor/RichTextEditor.tsx

@@ -1,121 +0,0 @@
-import React, { forwardRef } from 'react';
-import { Editor } from '@tinymce/tinymce-react';
-import { FormControl, FormHelperText, InputLabel, makeStyles } from '@material-ui/core';
-import { useAfterInitialEffect, useConsolidatedRef, useUID } from '@pega/react-sdk-components/lib/hooks';
-
-const useStyles = makeStyles((theme) => ({
-  fieldLabel: {
-    position: 'relative',
-    transform: 'translate(0, 0px) scale(1)',
-    marginBottom: '5px',
-    color: theme.palette.text.secondary
-  }
-}));
-
-interface RichTextEditorProps {
-  id?: string;
-  defaultValue: string;
-  label: string;
-  labelHidden: boolean;
-  info: string;
-  testId: string;
-  placeholder: string;
-  disabled: boolean;
-  required: boolean;
-  readOnly: boolean;
-  error: boolean;
-  onBlur: React.EventHandler<any>;
-  onChange: React.EventHandler<any>;
-}
-
-const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorProps, ref) {
-  const classes = useStyles();
-  const uid = useUID();
-  const { id = uid, defaultValue, label, labelHidden, info, testId, placeholder, disabled, required, readOnly, error, onBlur, onChange } = props;
-
-  const editorRef: any = useConsolidatedRef(ref);
-  let richTextComponent: any = null;
-
-  useAfterInitialEffect(() => {
-    editorRef?.current.mode.set(readOnly || disabled ? 'readonly' : 'design');
-  }, [readOnly, disabled]);
-
-  const filePickerCallback = (cb) => {
-    const input = document.createElement('input');
-    input.setAttribute('type', 'file');
-    input.setAttribute('accept', 'image/*');
-
-    input.addEventListener('change', (e: any) => {
-      const file = e.target.files[0];
-
-      const reader: any = new FileReader();
-      reader.addEventListener('load', () => {
-        /*
-          Note: Now we need to register the blob in TinyMCEs image blob
-          registry. In the next release this part hopefully won't be
-          necessary, as we are looking to handle it internally.
-        */
-        const blobId = `blobid${new Date().getTime()}`;
-        const blobCache = editorRef.current.editorUpload.blobCache;
-        const base64 = reader.result.split(',')[1];
-        const blobInfo = blobCache.create(blobId, file, base64);
-        blobCache.add(blobInfo);
-
-        /* call the callback and populate the Title field with the file name */
-        cb(blobInfo.blobUri(), { title: file.name });
-      });
-      reader.readAsDataURL(file);
-    });
-
-    input.click();
-  };
-
-  if (readOnly) {
-    const value = defaultValue || '--';
-    // eslint-disable-next-line react/no-danger
-    richTextComponent = <div key={id} id={id} className="readonly-richtext-editor" dangerouslySetInnerHTML={{ __html: value }} />;
-  } else {
-    richTextComponent = (
-      <Editor
-        tinymceScriptSrc="tinymce/tinymce.min.js"
-        onInit={(_evt, editor) => {
-          editorRef.current = editor;
-        }}
-        id={id}
-        initialValue={defaultValue}
-        disabled={disabled}
-        init={{
-          placeholder,
-          menubar: false,
-          statusbar: false,
-          min_height: 130,
-          plugins: ['lists', 'advlist', 'autolink', 'image', 'link', 'autoresize'],
-          autoresize_bottom_margin: 0,
-          toolbar: disabled ? false : 'blocks | bold italic strikethrough | bullist numlist outdent indent | link image',
-          toolbar_location: 'bottom',
-          content_style: 'body { font-family:Helvetica, Arial,sans-serif; font-size:14px }',
-          branding: false,
-          paste_data_images: true,
-          file_picker_types: 'image',
-          file_picker_callback: filePickerCallback
-        }}
-        onBlur={onBlur}
-        onEditorChange={onChange}
-      />
-    );
-  }
-
-  return (
-    <FormControl data-test-id={testId} error={error} required={required}>
-      {!labelHidden && (
-        <InputLabel id="demo-simple-select-error-label" className={classes.fieldLabel}>
-          {label}
-        </InputLabel>
-      )}
-      {richTextComponent}
-      {info && <FormHelperText>{info}</FormHelperText>}
-    </FormControl>
-  );
-});
-
-export default RichTextEditor;

package/lib/designSystemExtension/RichTextEditor/index.tsx

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

package/lib/field/RichText/RichText.tsx

@@ -1,93 +0,0 @@
-import React, { 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 type { 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().value;
-        pConn.clearErrorMessages({
-          property
-        });
-      }
-    };
-
-    const handleBlur = () => {
-      if (editorRef.current) {
-        const editorValue = editorRef.current.getContent({ format: 'html' });
-        const property = pConn.getStateProps().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

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