@pega/react-sdk-overrides 0.23.26 → 0.23.28

package/lib/widget/FileUtility/FileUtility/config-ext.json

@@ -4,6 +4,5 @@
   "description": "Attachments",
   "type": "Widget",
   "subtype": "CASE",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/widget/Followers/Followers.tsx

@@ -1,10 +1,13 @@
-import React from "react";
-// import PropTypes from "prop-types";
-import { Card, CardContent, CardHeader, Typography } from "@material-ui/core";
+import { PropsWithChildren } from 'react';
+import { Card, CardContent, CardHeader, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-// import { green } from "@material-ui/core/colors";
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-const useStyles = makeStyles((theme) => ({
+interface FollowersProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+}
+
+const useStyles = makeStyles(theme => ({
   root: {
     paddingRight: theme.spacing(1),
     paddingLeft: theme.spacing(1),
@@ -13,31 +16,30 @@ const useStyles = makeStyles((theme) => ({
     marginRight: theme.spacing(1),
     marginLeft: theme.spacing(1),
     marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(1),
+    marginBottom: theme.spacing(1)
     // borderLeft: "6px solid",
     // borderLeftColor: green[300]
-  },
+  }
 }));
 
-export default function Followers(/* props */) {
-  const componentName = "Followers";
-  // const { children } = props;
+export default function Followers(props: PropsWithChildren<FollowersProps>) {
+  const componentName = 'Followers';
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { children } = props;
   const classes = useStyles();
 
   return (
-      <Card className={classes.root}>
-        <CardHeader title={<Typography variant="h6" component="div">{componentName} - <em>unsupported</em></Typography>} />
-        <CardContent>
-          <Typography>{componentName} content</Typography>
-        </CardContent>
-      </Card>
-    );
+    <Card className={classes.root}>
+      <CardHeader
+        title={
+          <Typography variant='h6' component='div'>
+            {componentName} - <em>unsupported</em>
+          </Typography>
+        }
+      />
+      <CardContent>
+        <Typography>{componentName} content</Typography>
+      </CardContent>
+    </Card>
+  );
 }
-
-Followers.defaultProps = {
-  // children: []
-}
-
-Followers.propTypes = {
-  // children: PropTypes.arrayOf(PropTypes.node)
-};

package/lib/widget/Followers/config-ext.json

@@ -4,6 +4,5 @@
   "description": "Followers",
   "type": "Widget",
   "subtype": "CASE",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/widget/QuickCreate/QuickCreate.tsx

@@ -1,19 +1,27 @@
-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 { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-declare const PCore: any;
+interface QuickCreateProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  heading: string;
+  showCaseIcons: boolean;
+  classFilter: any[];
+}
+
+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) => {
+  const createCase = className => {
     pConn
       .getActionsApi()
-      .createWork(className, {})
-      .catch((error) => {
+      .createWork(className, {} as any)
+      .catch(error => {
         // eslint-disable-next-line no-console
-        console.log('Error in case creation: ', error?.message)
+        console.log('Error in case creation: ', error?.message);
       });
   };
 
@@ -25,12 +33,12 @@ export default function QuickCreate(props) {
     envInfo.environmentInfoObject.pyCaseTypeList &&
     envInfo.environmentInfoObject.pyCaseTypeList.length > 0
   ) {
-    classFilter.forEach((item) => {
-      let icon = Utils.getImageSrc('polaris-solid', PCore.getAssetLoader().getStaticServerUrl());
+    classFilter.forEach(item => {
+      let icon = Utils.getImageSrc('polaris-solid', Utils.getSDKStaticConentUrl());
       let label = '';
-      envInfo.environmentInfoObject.pyCaseTypeList.forEach((casetype) => {
+      envInfo.environmentInfoObject.pyCaseTypeList.forEach(casetype => {
         if (casetype.pyWorkTypeImplementationClassName === item) {
-          icon = casetype.pxIcon && Utils.getImageSrc(casetype?.pxIcon, PCore.getAssetLoader().getStaticServerUrl());
+          icon = casetype.pxIcon && Utils.getImageSrc(casetype?.pxIcon, Utils.getSDKStaticConentUrl());
           label = casetype.pyWorkTypeName ?? '';
         }
       });
@@ -47,8 +55,8 @@ export default function QuickCreate(props) {
   }
 
   return (
-      <div>
-        <WssQuickCreate heading={heading} actions={cases}></WssQuickCreate>
-      </div>
-    );
+    <div>
+      <WssQuickCreate heading={heading} actions={cases} />
+    </div>
+  );
 }

package/lib/widget/SummaryItem/SummaryItem.css

@@ -10,7 +10,7 @@
   display: flex;
   flex-direction: row;
   padding: 0.25rem 0rem 0.25rem 0.25rem;
-  margin-bottom: 0.5rem
+  margin-bottom: 0.5rem;
 }
 
 .psdk-utility-card-icon {
@@ -43,17 +43,17 @@
 }
 
 .psdk-utility-card {
-display: flex;
-align-items: center;
-border: 0.0625rem solid rgb(207, 207, 207);
-border-radius: calc(0.25rem);
-min-height: 3rem;
+  display: flex;
+  align-items: center;
+  border: 0.0625rem solid rgb(207, 207, 207);
+  border-radius: calc(0.25rem);
+  min-height: 3rem;
 }
 
 .psdk-utility-button {
-background: none;
-border: none;
-cursor: pointer;
+  background: none;
+  border: none;
+  cursor: pointer;
 }
 
 .psdk-utility-action {

package/lib/widget/SummaryItem/SummaryItem.tsx

@@ -1,29 +1,36 @@
-import React, { useState } from "react";
-import { Utils } from "@pega/react-sdk-components/lib/components/helpers/utils";
-import './SummaryItem.css'
-import  { IconButton, Menu, MenuItem } from '@material-ui/core';
+import { useState } from 'react';
+import { IconButton, Menu, MenuItem } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-declare const PCore: any;
+import './SummaryItem.css';
 
-export default function SummaryItem(props) {
-  let imagePath$ = "";
+interface SummaryItemProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  menuIconOverride$: string;
+  menuIconOverrideAction$: any;
+  arItems$: any[] | any;
+}
+
+export default function SummaryItem(props: SummaryItemProps) {
+  let imagePath$ = '';
   let menuIconOverride$;
-  menuIconOverride$ = props.menuIconOverride$
-  imagePath$ = Utils.getIconPath(PCore.getAssetLoader().getStaticServerUrl());
+  menuIconOverride$ = props.menuIconOverride$;
+  imagePath$ = Utils.getIconPath(Utils.getSDKStaticConentUrl());
   const item = props.arItems$;
-  const srcImg = `${imagePath$}${item.visual.icon}.svg`
+  const srcImg = `${imagePath$}${item.visual.icon}.svg`;
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
   if (menuIconOverride$) {
-    menuIconOverride$ = Utils.getImageSrc(menuIconOverride$ , PCore.getAssetLoader().getStaticServerUrl());
+    menuIconOverride$ = Utils.getImageSrc(menuIconOverride$, Utils.getSDKStaticConentUrl());
   }
 
   function removeAttachment() {
-    props.menuIconOverrideAction$(item)
+    props.menuIconOverrideAction$(item);
   }
 
-  const handleClick = (event) => {
+  const handleClick = event => {
     setAnchorEl(event.currentTarget);
   };
 
@@ -32,49 +39,50 @@ export default function SummaryItem(props) {
   };
 
   return (
-    <div className="psdk-utility-card">
-      <div className="psdk-utility-card-icon">
-        <img className="psdk-utility-card-svg-icon" src={srcImg}></img>
+    <div className='psdk-utility-card'>
+      <div className='psdk-utility-card-icon'>
+        <img className='psdk-utility-card-svg-icon' src={srcImg} />
       </div>
-      <div className="psdk-utility-card-main">
-        {item.primary.type !== 'URL' && (<div className="psdk-utility-card-main-primary-label">{item.primary.name}</div>)}
-        {item.primary.type === 'URL' && (<div className="psdk-utility-card-main-primary-url">
-          <button type="button" className="psdk-link-button">
-            {item.primary.name}&nbsp;
-            <img className="psdk-utility-card-actions-svg-icon" src={`${imagePath$}${item.primary.icon}.svg`}></img>
-          </button>
-        </div>)}
-        {item.secondary.text && (<div style={{ color: item.secondary.error ? 'red' : undefined }}>{item.secondary.text}</div>)}
+      <div className='psdk-utility-card-main'>
+        {item.primary.type !== 'URL' && <div className='psdk-utility-card-main-primary-label'>{item.primary.name}</div>}
+        {item.primary.type === 'URL' && (
+          <div className='psdk-utility-card-main-primary-url'>
+            <button type='button' className='psdk-link-button'>
+              {item.primary.name}&nbsp;
+              <img className='psdk-utility-card-actions-svg-icon' src={`${imagePath$}${item.primary.icon}.svg`} />
+            </button>
+          </div>
+        )}
+        {item.secondary.text && <div style={{ color: item.secondary.error ? 'red' : undefined }}>{item.secondary.text}</div>}
       </div>
-      <div className="psdk-utility-action">
-        {menuIconOverride$ && (<button type="button" className="psdk-utility-button" onClick={removeAttachment}>
-            <img className="psdk-utility-card-action-svg-icon" src={menuIconOverride$}></img>
-        </button>)}
-        {!menuIconOverride$ && (<div>
-          <IconButton
-            id="setting-button"
-            aria-controls={open ? 'file-menu' : undefined}
-            aria-expanded={open ? 'true' : undefined}
-            aria-haspopup="true"
-            onClick={handleClick}
-          >
-          <MoreVertIcon />
-          </IconButton>
-          <Menu style={{marginTop: '3rem'}}
-            id="file-menu"
-            anchorEl={anchorEl}
-            keepMounted
-            open={Boolean(anchorEl)}
-            onClose={handleClose}
-          >
-          {item.actions && item.actions.map((option) => (
-            <MenuItem style={{fontSize: '14px'}} key={option.id || option.text} onClick={option.onClick}>
-              {option.text}
-            </MenuItem>
-          ))}
-          </Menu>
-        </div>)}
+      <div className='psdk-utility-action'>
+        {menuIconOverride$ && (
+          <button type='button' className='psdk-utility-button' aria-label='Delete Attachment' onClick={removeAttachment}>
+            <img className='psdk-utility-card-action-svg-icon' src={menuIconOverride$} />
+          </button>
+        )}
+        {!menuIconOverride$ && (
+          <div>
+            <IconButton
+              id='setting-button'
+              aria-controls={open ? 'file-menu' : undefined}
+              aria-expanded={open ? 'true' : undefined}
+              aria-haspopup='true'
+              onClick={handleClick}
+            >
+              <MoreVertIcon />
+            </IconButton>
+            <Menu style={{ marginTop: '3rem' }} id='file-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
+              {item.actions &&
+                item.actions.map(option => (
+                  <MenuItem style={{ fontSize: '14px' }} key={option.id || option.text} onClick={option.onClick}>
+                    {option.text}
+                  </MenuItem>
+                ))}
+            </Menu>
+          </div>
+        )}
       </div>
     </div>
-  )
+  );
 }

package/lib/widget/SummaryItem/index.tsx

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

package/lib/widget/SummaryList/SummaryList.tsx

@@ -1,11 +1,22 @@
-import React from "react";
-import SummaryItem from '@pega/react-sdk-components/lib/components/widget/SummaryItem/index'
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-export default function SummaryList(props) {
+interface SummaryListProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  arItems$: 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;
   return (
     <div>
       {props.arItems$.map(file => (
-        <SummaryItem key={file.id} menuIconOverride$={props.menuIconOverride$} arItems$={file} menuIconOverrideAction$={props.menuIconOverrideAction$}></SummaryItem>
+        <SummaryItem key={file.id} menuIconOverride$={menuOverride} arItems$={file} menuIconOverrideAction$={props.menuIconOverrideAction$} />
       ))}
     </div>
   );

package/lib/widget/ToDo/ToDo.css

@@ -18,9 +18,9 @@
 
 .psdk-assignment-count {
   background-color: var(--app-primary-light-color);
-  margin: .5rem;
+  margin: 0.5rem;
   border-radius: 45%;
-  padding: 0.15rem .4rem;
+  padding: 0.15rem 0.4rem;
 }
 
 .psdk-todo-id {
@@ -48,7 +48,7 @@
 
 .psdk-todo-assignment {
   display: inline-flex;
-  width:100%;
+  width: 100%;
   padding: 0.625rem 0rem;
 }
 
@@ -86,7 +86,7 @@
   text-align: center;
 }
 
-.psdk-todo-avatar-header{
+.psdk-todo-avatar-header {
   display: flex;
   align-items: center;
   padding: 16px;