@pega/react-sdk-overrides 24.2.11 → 25.1.10

package/lib/widget/Attachment/Attachment.types.ts

@@ -0,0 +1,96 @@
+import type { ReactElement, Ref } from 'react';
+
+export interface ResponseProps {
+  ID: string;
+  extension: string;
+  createDateTime?: Date | string | number;
+  createUser?: string;
+  name: string;
+}
+
+export interface AttachmentActions {
+  rel: string;
+  href: string;
+  title: string;
+  type: string;
+}
+
+export interface AttachmentLinks {
+  delete: AttachmentActions;
+  download: AttachmentActions;
+  edit: AttachmentActions;
+}
+export interface FileObject extends File {
+  icon?: string;
+  ID: string;
+  fileName: string;
+  category: string;
+  responseType: string;
+  fileType: string;
+  mimeType: string;
+  extension: string;
+  thumbnail?: string;
+  nameWithExt: string;
+  inProgress?: boolean;
+  progress?: number;
+  handle: string;
+  label: string;
+  delete?: boolean;
+  error?: boolean;
+  description: string;
+
+  props: {
+    icon?: string;
+
+    ref?: Ref<HTMLDivElement>;
+    id: string;
+    error?: string;
+    format?: string;
+    name: string;
+    thumbnail?: string;
+    onPreview?: () => void;
+    onDelete?: () => void;
+    onOpen?: () => void;
+    onEdit?: () => void;
+    onCancel?: () => void;
+  };
+  responseProps: ResponseProps;
+  value?: {
+    filename: string;
+    ID: string;
+    thumbnail: string;
+  };
+  categoryName: string;
+  createTime: string;
+  createdBy: string;
+  createdByName: string;
+  links: AttachmentLinks;
+  name: string;
+  meta?: ReactElement;
+}
+
+export interface ReduxAttachments {
+  ID?: string;
+  pzInsKey?: string;
+  FileName: string;
+  Category: string;
+  MimeType?: string;
+  FileExtension: string;
+  error: string | null;
+  localAttachment: boolean;
+  thumbnail?: string;
+  fileIndex?: number;
+  instruction?: string;
+}
+
+export interface PageInstructionOptions {
+  allowMultiple: boolean;
+  isMultiAttachmentInInlineEditTable: boolean;
+  attachmentCount: number;
+  insertPageInstruction: boolean;
+  deletePageInstruction: boolean;
+  deleteIndex: number;
+  insertRedux: boolean;
+  isOldAttachment: boolean;
+  deleteRedux: boolean;
+}

package/lib/widget/Attachment/AttachmentUtils.ts

@@ -0,0 +1,316 @@
+import { useCallback, useRef } from 'react';
+import download from 'downloadjs';
+import equal from 'fast-deep-equal';
+
+import type { FileObject, PageInstructionOptions, ReduxAttachments } from './Attachment.types';
+
+export const isContentBinary = (headers: Record<string, string>) => {
+  return headers && headers['content-transfer-encoding'] === 'binary';
+};
+
+export const isContentBase64 = (headers: Record<string, string>) => {
+  return headers && headers['content-transfer-encoding'] === 'base64';
+};
+
+export const validateFileExtension = (fileObj: Record<string, string>, allowedExtensions: string) => {
+  if (!allowedExtensions) {
+    return true;
+  }
+  const allowedExtensionList = allowedExtensions
+    .toLowerCase()
+    .split(',')
+    .map(item => item.replaceAll('.', '').trim());
+  const extension = fileObj.name.split('.').pop()?.toLowerCase() || '';
+  return allowedExtensionList.includes(extension);
+};
+
+export const fileDownload = (data: string | Blob, fileName: string, ext: string | null, headers: Record<string, string>) => {
+  const name = ext ? `${fileName}.${ext}` : fileName;
+  // Temp fix: downloading EMAIl type attachment as html file
+  if (ext === 'html') {
+    download(isContentBase64(headers) ? atob(data as string) : data, name, 'text/html');
+  } else if (isContentBinary(headers)) {
+    download(data, name);
+  } else {
+    download(atob(data as string), name);
+  }
+};
+
+export const getIconFromFileType = (fileType: string) => {
+  let icon = 'document-doc';
+  if (!fileType) return icon;
+  if (fileType.startsWith('audio')) {
+    icon = 'audio';
+  } else if (fileType.startsWith('video')) {
+    icon = 'video';
+  } else if (fileType.startsWith('image')) {
+    icon = 'picture';
+  } else if (fileType.includes('pdf')) {
+    icon = 'document-pdf';
+  } else {
+    const [, subtype] = fileType.split('/');
+    const foundMatch = (sources: string[]) => {
+      return sources.some(key => subtype.includes(key));
+    };
+
+    if (foundMatch(['excel', 'spreadsheet'])) {
+      icon = 'document-xls';
+    } else if (foundMatch(['zip', 'compressed', 'gzip', 'rar', 'tar'])) {
+      icon = 'document-compress';
+    }
+  }
+
+  return icon;
+};
+
+export const fileDownloadVar = (content: { data: string; headers: Record<string, string> }, type: string, name: string, extension: string) => {
+  if (type === 'FILE' || type === undefined) {
+    fileDownload(content.data, name, extension, content.headers);
+  } else if (type === 'URL') {
+    let { data } = content;
+    if (!/^(http|https):\/\//.test(data)) {
+      data = `//${data}`;
+    }
+    window.open(content.data, '_blank');
+  } else if (type === 'EMAIL') {
+    // Temp Fix: for EMAIL type attachment
+    fileDownload(content.data, name, 'html', content.headers);
+  }
+};
+
+export const getMappedValue = (value: string): string => {
+  return PCore.getEnvironmentInfo().getKeyMapping(value) ?? value;
+};
+
+const generateInstructions = (
+  files: FileObject[],
+  pConn: typeof PConnect,
+  attachmentsInModal: ReduxAttachments[] | Pick<ReduxAttachments, 'instruction' | 'fileIndex'>[],
+  options: {
+    allowMultiple: boolean;
+    isMultiAttachmentInInlineEditTable: boolean;
+    attachmentCount: number;
+    insertPageInstruction: boolean;
+    deletePageInstruction: boolean;
+    deleteIndex: number;
+  }
+) => {
+  const { allowMultiple, isMultiAttachmentInInlineEditTable, attachmentCount, insertPageInstruction, deletePageInstruction, deleteIndex } = options;
+  const transformedAttachments: ReduxAttachments[] = [];
+  let valueRef = pConn.getStateProps().value;
+  valueRef = valueRef?.indexOf('.') === 0 ? valueRef.substring(1) : valueRef;
+  const uniqueKey = getMappedValue('pzInsKey');
+  files.forEach((file, index) => {
+    const filename = file.value?.filename || file.props?.name || '';
+    const payload = {
+      [uniqueKey]: file.value?.ID || file.props?.id,
+      FileName: filename,
+      Category: '',
+      // MimeType: getMimeTypeFromFile(filename),
+      FileExtension: filename.split('.').pop() ?? filename,
+      error: file.props?.error || null,
+      localAttachment: true,
+      thumbnail: file.value?.thumbnail
+    };
+    transformedAttachments.push(payload);
+    if (payload.error) {
+      return; // Don't process page instructions for error files, skip current iteration
+    }
+    if (allowMultiple) {
+      if (isMultiAttachmentInInlineEditTable) {
+        if (insertPageInstruction) {
+          attachmentsInModal.push({ ...payload, instruction: 'insert' } as any);
+        } else if (deletePageInstruction) {
+          (attachmentsInModal as Pick<ReduxAttachments, 'instruction' | 'fileIndex'>[]).push({
+            instruction: 'delete',
+            fileIndex: deleteIndex
+          });
+        }
+      } else if (insertPageInstruction) {
+        pConn.getListActions().insert({ ID: payload[uniqueKey] }, attachmentCount + index, undefined, {
+          skipStateUpdate: true
+        });
+      } else if (deletePageInstruction) {
+        pConn.getListActions().deleteEntry(deleteIndex, undefined, { skipStateUpdate: true });
+      }
+    } else if (insertPageInstruction) {
+      pConn.getListActions().replacePage(`.${valueRef}`, { ID: payload[uniqueKey] }, { skipStateUpdate: true });
+    } else if (deletePageInstruction) {
+      pConn.getListActions().deletePage(`.${valueRef}`, { skipStateUpdate: true });
+    }
+  });
+  return transformedAttachments;
+};
+
+export const updateReduxState = (
+  transformedAttachments: ReduxAttachments[],
+  pConn: typeof PConnect,
+  valueRef: string,
+  options: PageInstructionOptions
+) => {
+  const { allowMultiple, isOldAttachment, insertRedux, deleteRedux } = options;
+  let deleteIndex = -1;
+
+  if (allowMultiple || isOldAttachment) {
+    transformedAttachments.forEach(attachment => {
+      const key = isOldAttachment ? `${valueRef}.pxResults` : valueRef;
+      const existingAttachments: ReduxAttachments[] = PCore.getStoreValue(`.${key}`, pConn.getPageReference(), pConn.getContextName()) || [];
+
+      if (insertRedux) {
+        const actionPayLoad = {
+          type: 'LIST_ACTION',
+          payload: {
+            instruction: 'INSERT',
+            context: pConn.getContextName(),
+            referenceList: `${pConn.getPageReference()}.${key}`,
+            listIndex: existingAttachments.length,
+            content: attachment
+          }
+        };
+        PCore.getStore()?.dispatch(actionPayLoad);
+      } else if (deleteRedux) {
+        const uniqueKey = getMappedValue('pzInsKey');
+        deleteIndex = existingAttachments.findIndex(
+          existingAttachment =>
+            existingAttachment[uniqueKey as keyof ReduxAttachments] === transformedAttachments[0][uniqueKey as keyof ReduxAttachments]
+        );
+        const actionPayLoad = {
+          type: 'LIST_ACTION',
+          payload: {
+            instruction: 'DELETE',
+            context: pConn.getContextName(),
+            referenceList: `${pConn.getPageReference()}.${key}`,
+            listIndex: deleteIndex
+          }
+        };
+        PCore.getStore()?.dispatch(actionPayLoad);
+      }
+    });
+  } else if (insertRedux) {
+    const actionPayLoad = {
+      type: 'LIST_ACTION',
+      payload: {
+        instruction: 'REPLACE',
+        context: pConn.getContextName(),
+        referenceList: `${pConn.getPageReference()}.${valueRef}`,
+        content: transformedAttachments[0]
+      }
+    };
+    PCore.getStore()?.dispatch(actionPayLoad);
+  } else if (deleteRedux) {
+    const actionPayLoad = {
+      type: 'LIST_ACTION',
+      payload: {
+        instruction: 'DELETEPAGE',
+        context: pConn.getContextName(),
+        referenceList: `${pConn.getPageReference()}.${valueRef}`
+      }
+    };
+    PCore.getStore()?.dispatch(actionPayLoad);
+  }
+};
+
+export const insertAttachments = (
+  files: FileObject[],
+  pConn: typeof PConnect,
+  attachmentsInModal: ReduxAttachments[],
+  options: PageInstructionOptions
+) => {
+  const { isMultiAttachmentInInlineEditTable } = options;
+  let valueRef = pConn.getStateProps().value;
+  valueRef = valueRef?.indexOf('.') === 0 ? valueRef.substring(1) : valueRef;
+  const transformedAttachments = generateInstructions(files, pConn, attachmentsInModal, {
+    ...options,
+    insertPageInstruction: true
+  });
+
+  if (isMultiAttachmentInInlineEditTable) {
+    return; // For attachments within modal, redux update is not necessary yet, as modal isn't submitted at this stage
+  }
+  updateReduxState(transformedAttachments, pConn, valueRef, { ...options, insertRedux: true });
+};
+
+export const deleteAttachments = (
+  files: FileObject[],
+  pConn: typeof PConnect,
+  attachmentsInModal: Pick<ReduxAttachments, 'instruction' | 'fileIndex'>[],
+  options: PageInstructionOptions
+) => {
+  const { isMultiAttachmentInInlineEditTable } = options;
+  let valueRef = pConn.getStateProps().value;
+  valueRef = valueRef?.indexOf('.') === 0 ? valueRef.substring(1) : valueRef;
+  const transformedAttachments = generateInstructions(files, pConn, attachmentsInModal, {
+    ...options,
+    deletePageInstruction: true
+  });
+
+  if (isMultiAttachmentInInlineEditTable) {
+    return; // For attachments within modal, redux update is not necessary yet, as modal isn't submitted at this stage
+  }
+  updateReduxState(transformedAttachments, pConn, valueRef, { ...options, deleteRedux: true });
+};
+
+export const clearFieldErrorMessages = (pConn: typeof PConnect) => {
+  const fieldName = pConn.getStateProps().value;
+  PCore.getMessageManager().clearMessages({
+    type: PCore.getConstants().MESSAGES.MESSAGES_TYPE_ERROR,
+    property: fieldName,
+    pageReference: pConn.getPageReference(),
+    context: pConn.getContextName()
+  });
+};
+
+export const useFileDownload = (context: string) => {
+  return useCallback(
+    ({
+      ID,
+      name,
+      extension,
+      type,
+      category,
+      responseType
+    }: {
+      ID: string;
+      name: string;
+      extension: string;
+      type: string;
+      category: string;
+      responseType: string;
+    }) => {
+      if (category !== 'pxDocument') {
+        (
+          PCore.getAttachmentUtils().downloadAttachment(ID, context, responseType) as Promise<{
+            data: string;
+            headers: Record<string, string>;
+          }>
+        )
+          .then(content => {
+            fileDownloadVar(content, type, name, extension);
+          })
+
+          .catch(console.error);
+      } else {
+        (
+          PCore.getAttachmentUtils().downloadDocument(ID, context) as Promise<{
+            data: string;
+            headers: Record<string, string>;
+          }>
+        )
+          .then(content => {
+            fileDownloadVar(content, type, name, extension);
+          })
+
+          .catch(console.error);
+      }
+    },
+    [context]
+  );
+};
+
+export const useDeepMemo = (memoFn, key) => {
+  const ref: any = useRef();
+  if (!ref.current || !equal(key, ref.current.key)) {
+    ref.current = { key, value: memoFn() };
+  }
+  return ref.current.value;
+};

package/lib/widget/CaseHistory/CaseHistory.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { Theme } from '@mui/material/styles';
+import type { Theme } from '@mui/material/styles';
 import withStyles from '@mui/styles/withStyles';
 import createStyles from '@mui/styles/createStyles';
 import Table from '@mui/material/Table';
@@ -11,7 +11,7 @@ import TableRow from '@mui/material/TableRow';
 import isDeepEqual from 'fast-deep-equal/react';
 
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface CaseHistoryProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -66,8 +66,8 @@ export default function CaseHistory(props: CaseHistoryProps) {
   const dataViewName = 'D_pyWorkHistory';
   const context = thePConn.getContextName();
 
-  function computeRowData(rows: Object[]): void {
-    const theRowData: Object[] = [];
+  function computeRowData(rows: object[]): void {
+    const theRowData: object[] = [];
 
     rows.forEach((row: any, rowIndex: number) => {
       // Now, for each property in the index of row properties (displayedColumns), add an object
@@ -142,7 +142,7 @@ export default function CaseHistory(props: CaseHistoryProps) {
     // Note: using rowData.current since we're using useRef as a mutatable
     //  value that's only updated when it changes.
     if (rowData.current.length > 0) {
-      rowData.current.forEach((dataRow: Object[], index) => {
+      rowData.current.forEach((dataRow: object[], index) => {
         // using dataRow[0]-dataRow[1] as the array key since it's a unique value
         const theKey = `CaseHistory-${index}`;
         theDataRows.push(

package/lib/widget/FileUtility/ActionButtonsForFileUtil/ActionButtonsForFileUtil.css

@@ -11,17 +11,3 @@
   justify-content: center;
   display: flex;
 }
-
-.primary-button {
-  background-color: #3f51b5 !important;
-  color: white !important;
-  padding: 6px 14px !important;
-  text-transform: unset !important;
-  font-size: 14px;
-}
-
-.secondary-button {
-  box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 20%);
-  text-transform: unset !important;
-  padding: 6px 14px !important;
-}

package/lib/widget/FileUtility/ActionButtonsForFileUtil/ActionButtonsForFileUtil.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@mui/material';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './ActionButtonsForFileUtil.css';
 
 interface ActionButtonsForFileUtilProps extends PConnProps {
@@ -15,14 +15,14 @@ export default function ActionButtonsForFileUtil(props: ActionButtonsForFileUtil
     <div className='psdk-actions'>
       <div className='psdk-action-buttons'>
         {props.arSecondaryButtons.map(file => (
-          <Button className='secondary-button' key={file.actionID} onClick={props.secondaryAction}>
+          <Button className='secondary-button' color='secondary' variant='contained' key={file.actionID} onClick={props.secondaryAction}>
             {file.name}
           </Button>
         ))}
       </div>
       <div className='psdk-action-buttons'>
         {props.arMainButtons.map(file => (
-          <Button className='primary-button' key={file.actionID} onClick={props.primaryAction}>
+          <Button className='primary-button' color='primary' variant='contained' key={file.actionID} onClick={props.primaryAction}>
             {file.name}
           </Button>
         ))}

package/lib/widget/FileUtility/FileUtility/FileUtility.css

@@ -2,7 +2,7 @@
   width: 100%;
   padding: 0.625rem 0rem;
   text-align: left;
-  background-color: white;
+  /* background-color: var(--utility-background-color); */
   border-radius: 0.6125rem;
   margin: 0.3125rem 0rem;
   position: relative;
@@ -16,6 +16,7 @@
 .psdk-file-utility-card-svg-icon {
   width: 1.4rem;
   display: inline-block;
+  filter: var(--svg-color);
 }
 
 .header-text {
@@ -25,7 +26,7 @@
 }
 
 .psdk-utility-count {
-  background: #65b5f5;
+  background: var(--utility-count-background-color);
   border-radius: calc(1.125 * 0.5rem);
   font-size: 0.75rem;
   font-weight: bold;
@@ -40,7 +41,7 @@
   align-items: center;
   height: 100%;
   width: 100%;
-  background-color: rgba(100, 100, 100, 0.4);
+  background-color: var(--modal-background-color);
   position: fixed;
   z-index: 999;
   top: 0px;
@@ -51,11 +52,11 @@
   display: table;
   margin: auto;
   min-width: 650px;
-  background-color: white;
-  border: 1px solid black;
+  background-color: var(--modal-top-color);
+  border: 1px solid var(--modal-border-color);
   border-radius: 10px;
   padding: 20px;
-  box-shadow: 0 0 10px 3px #777;
+  box-shadow: 0 0 10px 3px var(--modal-box-shadow-color);
 }
 
 .psdk-modal-file-selector {

package/lib/widget/FileUtility/FileUtility/FileUtility.tsx

@@ -7,15 +7,17 @@ import download from 'downloadjs';
 // import SummaryList from '../../SummaryList';
 // import ActionButtonsForFileUtil from '../ActionButtonsForFileUtil';
 import './FileUtility.css';
-import { IconButton, Menu, MenuItem, Button, CircularProgress } from '@mui/material';
+import { IconButton, Menu, MenuItem, Button, CircularProgress, Card, debounce } from '@mui/material';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 
-import { validateMaxSize } from '@pega/react-sdk-components/lib/components/helpers/attachmentHelpers';
+import { validateMaxSize } from '@pega/react-sdk-components/lib/components/helpers/attachmentShared';
+import { getResolvedConstantValue } from '@pega/react-sdk-components/lib/components/helpers/object-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface FileUtilityProps extends PConnProps {
   // If any, enter additional props that only exist on this component
+  caseId?: string;
 }
 
 export default function FileUtility(props: FileUtilityProps) {
@@ -23,8 +25,9 @@ export default function FileUtility(props: FileUtilityProps) {
   const SummaryList = getComponentFromMap('SummaryList');
   const ActionButtonsForFileUtil = getComponentFromMap('ActionButtonsForFileUtil');
 
-  const { getPConnect } = props;
+  const { getPConnect, caseId } = props;
   const thePConn = getPConnect();
+  const caseID = caseId ?? getResolvedConstantValue(thePConn, PCore.getConstants().CASE_INFO.CASE_INFO_ID);
   const required = true;
   const listTemp = {
     data: [],
@@ -179,7 +182,7 @@ export default function FileUtility(props: FileUtilityProps) {
     const context = thePConn.getContextName();
 
     attachUtils
-      // @ts-ignore - 3rd parameter "responseEncoding" is optional
+      // @ts-expect-error - 3rd parameter "responseEncoding" is optional
       .downloadAttachment(ID, context)
       .then((content: any) => {
         if (type === 'FILE') {
@@ -203,7 +206,6 @@ export default function FileUtility(props: FileUtilityProps) {
     attachUtils
       .deleteAttachment(ID, context)
       .then(() => {
-        // eslint-disable-next-line @typescript-eslint/no-use-before-define
         getAttachments();
       })
       .catch();
@@ -211,7 +213,6 @@ export default function FileUtility(props: FileUtilityProps) {
 
   const getAttachments = () => {
     const attachmentUtils = PCore.getAttachmentUtils();
-    const caseID = thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID, ''); // 2nd arg empty string until typedef marked correctly
 
     if (caseID && caseID !== '') {
       const attPromise = attachmentUtils.getCaseAttachments(caseID, thePConn.getContextName());
@@ -246,25 +247,32 @@ export default function FileUtility(props: FileUtilityProps) {
     }
   };
 
+  const debouncedGetAttachments = debounce(getAttachments, 1000);
+
   useEffect(() => {
-    getAttachments();
+    debouncedGetAttachments();
   }, []);
 
   useEffect(() => {
-    PCore.getPubSubUtils().subscribe(
-      (PCore.getEvents().getCaseEvent() as any).CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW,
-      getAttachments,
-      'caseAttachmentsUpdateFromCaseview'
-    );
-
-    return () => {
-      PCore.getPubSubUtils().unsubscribe(
-        (PCore.getEvents().getCaseEvent() as any).CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW,
-        'caseAttachmentsUpdateFromCaseview'
-      );
+    const attachSubObject = {
+      matcher: 'ATTACHMENTS',
+      criteria: {
+        ID: caseID
+      }
+    };
+    const attachSubId = PCore.getMessagingServiceManager().subscribe(attachSubObject, debouncedGetAttachments, getPConnect().getContextName());
+
+    return function cleanup() {
+      PCore.getMessagingServiceManager().unsubscribe(attachSubId);
     };
   }, []);
 
+  useEffect(() => {
+    thePConn.registerAdditionalProps({
+      lastRefreshTime: `@P ${PCore.getConstants().SUMMARY_OF_ATTACHMENTS_LAST_REFRESH_TIME}`
+    });
+  }, [thePConn]);
+
   function setNewFiles(arFiles) {
     let index = 0;
     for (const file of arFiles) {
@@ -488,7 +496,7 @@ export default function FileUtility(props: FileUtilityProps) {
   }
 
   return (
-    <div className='psdk-utility' id='file-utility'>
+    <Card className='psdk-utility' id='file-utility'>
       {inProgress && (
         <div className='progress-div'>
           <CircularProgress />
@@ -630,7 +638,6 @@ export default function FileUtility(props: FileUtilityProps) {
           <div className='psdk-modal-file-top'>
             <div className='psdk-view-all-header'>
               <h3>{thePConn.getLocalizedValue('Attachments', '', '')}</h3> {/* 2nd and 3rd args empty string until typedef marked correctly */}
-              {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
               <button type='button' className='psdk-close-button' onClick={() => setViewAll(false)}>
                 <img className='psdk-utility-card-actions-svg-icon' src={closeSvgIcon} />
               </button>
@@ -641,6 +648,6 @@ export default function FileUtility(props: FileUtilityProps) {
           </div>
         </div>
       )}
-    </div>
+    </Card>
   );
 }

package/lib/widget/Followers/Followers.tsx

@@ -1,7 +1,7 @@
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import { Card, CardContent, CardHeader, Typography } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface FollowersProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -17,8 +17,6 @@ const useStyles = makeStyles(theme => ({
     marginLeft: theme.spacing(1),
     marginTop: theme.spacing(1),
     marginBottom: theme.spacing(1)
-    // borderLeft: "6px solid",
-    // borderLeftColor: green[300]
   }
 }));