@pega/react-sdk-overrides 0.25.3 → 0.25.5

package/lib/designSystemExtension/Banner/Banner.tsx

@@ -38,10 +38,13 @@ export default function Banner(props: BannerProps) {
         </div>
       </div>
       <Grid2 container size={12} className='banner-layout' spacing={1}>
-        <Grid2 size={{ xs: variantMap[variant][0] }} style={{ padding: '1em' }}>
+        <Grid2
+          size={{ xs: variantMap[variant][0] }}
+          style={{ padding: '1rem', backgroundColor: 'var(--app-form-bg-color)', borderRadius: '16px', height: 'fit-content' }}
+        >
           {a}
         </Grid2>
-        <Grid2 size={{ xs: variantMap[variant][1] }} style={{ padding: '1em' }}>
+        <Grid2 size={{ xs: variantMap[variant][1] }} style={{ padding: '0rem 1rem' }}>
           {b}
         </Grid2>
       </Grid2>

package/lib/designSystemExtension/RichTextEditor/RichTextEditor.tsx

@@ -1,12 +1,10 @@
 import React, { forwardRef } from 'react';
 import { Editor } from '@tinymce/tinymce-react';
-import { FormControl, FormHelperText, InputLabel } from '@mui/material';
+import { FormControl, FormHelperText, InputLabel, useTheme } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
-
 import { useAfterInitialEffect, useConsolidatedRef, useUID } from '@pega/react-sdk-components/lib/hooks';
-import { theme } from '@pega/react-sdk-components/lib/components/designSystemExtensi/theme';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles(theme => ({
   fieldLabel: {
     position: 'relative',
     transform: 'translate(0, 0px) scale(1)',
@@ -32,6 +30,7 @@ interface RichTextEditorProps {
 }
 
 const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorProps, ref) {
+  const theme = useTheme();
   const classes = useStyles();
   const uid = useUID();
   const { id = uid, defaultValue, label, labelHidden, info, testId, placeholder, disabled, required, readOnly, error, onBlur, onChange } = props;
@@ -88,30 +87,34 @@ const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorP
         initialValue={defaultValue}
         disabled={disabled}
         init={{
-          skin: 'oxide-dark', // or 'oxide' for light theme
+          skin: theme.palette.mode === 'dark' ? 'oxide-dark' : 'oxide',
           // ...other TinyMCE config...
           content_style: `
-        body {
-          font-family: ${theme.typography.fontFamily};
-          font-size: ${theme.typography.fontSize}px;
-          color: ${theme.palette.text.primary};
-          background: ${theme.palette.background.paper};
-        }
-        a { color: ${theme.palette.primary.main}; }
-        h1, h2, h3, h4, h5, h6 { color: ${theme.palette.text.primary}; font-family: ${theme.typography.fontFamily}; }
-        blockquote { color: ${theme.palette.text.secondary}; border-left: 4px solid ${theme.palette.primary.light}; padding-left: 8px; }
-        ul, ol { color: ${theme.palette.text.primary}; }
-        input, textarea, select {
-          background: ${theme.palette.background.paper};
-          color: ${theme.palette.text.primary};
-          border: 1px solid ${theme.palette.divider};
-          border-radius: 4px;
-          padding: 6px 10px;
-          font-size: 1em;
-          font-family: inherit;
-      }
-      /* Add more styles as needed */
-    `,
+            body {
+              font-family: ${theme.typography.fontFamily};
+              font-size: ${theme.typography.fontSize}px;
+              color: ${theme.palette.text.primary};
+              background: ${theme.palette.background.paper};
+            }
+            a { color: ${theme.palette.primary.main}; }
+            h1, h2, h3, h4, h5, h6 { color: ${theme.palette.text.primary}; font-family: ${theme.typography.fontFamily}; }
+            blockquote { color: ${theme.palette.text.secondary}; border-left: 4px solid ${theme.palette.primary.light}; padding-left: 8px; }
+            ul, ol { color: ${theme.palette.text.primary}; }
+            input, textarea, select {
+              background: ${theme.palette.background.paper};
+              color: ${theme.palette.text.primary};
+              border: 1px solid ${theme.palette.divider};
+              border-radius: 4px;
+              padding: 6px 10px;
+              font-size: 1em;
+              font-family: inherit;
+            }
+            .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
+              color: ${theme.palette.text.secondary};
+              opacity: 0.7;
+            }
+            /* Add more styles as needed */
+          `,
           placeholder,
           menubar: false,
           statusbar: false,

package/lib/designSystemExtension/WssQuickCreate/WssQuickCreate.css

@@ -1,36 +1,29 @@
 .quick-link-ul-list {
   list-style: none;
   padding: 0;
-  grid-template-columns: repeat(auto-fill, minmax(min(40ch, 100%), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
   display: grid;
   gap: calc(1rem);
 }
 
-.quick-link-list {
-  background-color: var(--link-button-color);
-  color: var(--app-text-color);
-  border-radius: 8px;
-}
-
 .quick-link-button {
   text-transform: capitalize !important;
   font-size: 16px !important;
   color: var(--app-text-color) !important;
-  padding: calc(0.5rem * 2) !important;
-  height: 6rem;
+  height: 10rem;
   width: 100%;
-  justify-content: start !important;
 }
 
 .quick-link-icon {
-  width: 1em;
-  height: 1em;
   flex-shrink: 0;
-  filter: var(--svg-color);
+  object-fit: contain;
+  width: 3rem;
+  height: 3rem;
 }
 
 .quick-link-button-span {
   display: flex;
+  flex-direction: column;
   align-items: center;
   gap: 0.5rem;
 }

package/lib/designSystemExtension/WssQuickCreate/WssQuickCreate.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 import './WssQuickCreate.css';
 
 // WssQuickCreate is one of the few components that does NOT have getPConnect.
@@ -9,8 +10,18 @@ interface WssQuickCreateProps {
   actions?: any[];
 }
 
+const useStyles = makeStyles(theme => ({
+  quickLinkList: {
+    backgroundColor: theme.palette.mode === 'dark' ? 'var(--app-background-color)' : 'var(--link-button-color)',
+    color: 'var(--app-text-color)',
+    borderRadius: '16px',
+    border: '1px solid var(--app-primary-color)'
+  }
+}));
+
 export default function WssQuickCreate(props: WssQuickCreateProps) {
   const { heading, actions } = props;
+  const classes = useStyles();
 
   return (
     <div>
@@ -21,7 +32,7 @@ export default function WssQuickCreate(props: WssQuickCreateProps) {
         {actions &&
           actions.map(element => {
             return (
-              <li className='quick-link-list' key={element.label}>
+              <li className={classes.quickLinkList} key={element.label}>
                 <Button className='quick-link-button' onClick={element.onClick}>
                   <span className='quick-link-button-span'>
                     {element.icon && <img className='quick-link-icon' src={element.icon} />}

package/lib/field/Group/Group.tsx

@@ -1,6 +1,6 @@
 import { type ReactElement, useMemo } from 'react';
 import Grid2 from '@mui/material/Grid2';
-import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
+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 GroupProps extends PConnFieldProps {
@@ -13,6 +13,8 @@ interface GroupProps extends PConnFieldProps {
 }
 
 export default function Group(props: GroupProps) {
+  const FieldGroup = getComponentFromMap('FieldGroup');
+
   const { children, heading, showHeading, instructions, collapsible, displayMode, type } = props;
 
   const isReadOnly = displayMode === 'DISPLAY_ONLY';

package/lib/field/Location/Location.css

@@ -0,0 +1,4 @@
+/* Support for google map autocomplete */
+.pac-container {
+  z-index: 2147483647;
+}

package/lib/field/Location/Location.tsx

@@ -8,6 +8,8 @@ import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpe
 import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 
+import './Location.css';
+
 interface LocationProps extends PConnFieldProps {
   coordinates?: string;
   onlyCoordinates?: boolean;

package/lib/field/RadioButtons/RadioButtons.tsx

@@ -108,7 +108,7 @@ export default function RadioButtons(props: RadioButtonsProps) {
     return (
       <div>
         <h4 style={{ marginTop: 0, marginBottom: 0 }}>{label}</h4>
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 40ch), 1fr))', gridAutoRows: '1fr', gap: '0.5rem' }}>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(200px, 100%), 1fr))', gap: '1rem' }}>
           <SelectableCard
             hideFieldLabels={hideFieldLabels}
             additionalProps={additionalProps}

package/lib/field/RichText/RichText.css

@@ -0,0 +1,79 @@
+.tox .tox-toolbar {
+  background-color: var(--app-background-color) !important;
+}
+
+.tox .tox-toolbar__primary {
+  background-color: var(--app-background-color) !important;
+}
+
+.tox .tox-toolbar__button {
+  color: var(--app-text-color) !important;
+}
+
+.tox .tox-toolbar__button--enabled {
+  background: var(--app-primary-color) !important;
+  color: #fff !important;
+}
+
+.tox .tox-dialog {
+  background-color: var(--modal-top-color) !important;
+  color: var(--app-text-color) !important;
+  border: 1px solid var(--modal-border-color) !important;
+  padding: 20px !important;
+  box-shadow: 0 0 10px 3px var(--modal-box-shadow-color) !important;
+}
+
+.tox .tox-dialog__header {
+  background-color: var(--modal-top-color) !important;
+  color: var(--app-text-color) !important;
+  font-weight: 500;
+  border-bottom: 1px solid var(--modal-border-color);
+}
+
+.tox .tox-dialog__footer {
+  background: transparent !important;
+  border-top: 1px solid var(--modal-border-color);
+}
+
+.tox .tox-dialog-wrap__backdrop {
+  background-color: var(--modal-background-color) !important;
+}
+
+.tox .tox-dialog__body input,
+.tox .tox-dialog__body textarea,
+.tox .tox-dialog__body select {
+  background: initial !important;
+  color: var(--app-text-color) !important;
+  border: 1px solid var(--app-neutral-color) !important;
+  border-radius: 4px !important;
+  padding: 6px 10px !important;
+  font-size: 1em !important;
+  font-family: inherit !important;
+}
+
+.tox .tox-dialog__body button {
+  background: transparent;
+  color: #fff !important;
+  border: none !important;
+  border-radius: 4px !important;
+  padding: 8px 16px !important;
+  font-size: 1em !important;
+  cursor: pointer !important;
+}
+
+.tox .tox-dialog__footer .tox-button {
+  background: var(--app-primary-color) !important;
+  color: #fff !important;
+  border: none !important;
+  border-radius: 4px !important;
+  padding: 8px 16px !important;
+  font-size: 1em !important;
+  cursor: pointer !important;
+}
+
+.tox .tox-dialog__footer .tox-button--secondary {
+  background: var(--app-secondary-color) !important;
+  color: var(--secondary-button-text-color) !important;
+  font-size: 0.875rem !important;
+  cursor: pointer !important;
+}

package/lib/field/RichText/RichText.tsx

@@ -4,6 +4,8 @@ import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
+import './RichText.css';
+
 interface RichTextProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextArea here
   additionalProps?: object;

package/lib/field/SelectableCard/SelectableCard.tsx

@@ -74,7 +74,7 @@ export default function SelectableCard(props) {
         }
 
         const component = (
-          <div style={{ paddingTop: '15px' }}>
+          <div key={item[recordKey]} style={{ paddingTop: '15px' }}>
             <Card className={className} style={{ display: 'flex', flexDirection: 'column', height: '100%' }} data-testid={testId}>
               <CardContent
                 style={{
@@ -93,7 +93,7 @@ export default function SelectableCard(props) {
                       alt={image.alt}
                       style={{
                         width: '100%',
-                        backgroundColor: 'rgb(233, 238, 243)',
+                        backgroundColor: 'transparent',
                         aspectRatio: '16 / 9',
                         maxHeight: '100%',
                         height: '100%',
@@ -152,7 +152,7 @@ export default function SelectableCard(props) {
                         margin: '5px'
                       }}
                     >
-                      <div style={{ color: 'rgba(0, 0, 0, 0.6)' }}>{field.name}</div>
+                      {field.name && <div>{field.name}</div>}
                       <div>{field?.value?.props.value}</div>
                     </div>
                   ))}

package/lib/field/UserReference/UserReference.tsx

@@ -4,7 +4,6 @@ import { Typography } from '@mui/material';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 import { getUserId, isUserNameAvailable } from './UserReferenceUtils';
 
 const DROPDOWN_LIST = 'Drop-down list';
@@ -34,6 +33,7 @@ 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 FieldValueList = getComponentFromMap('FieldValueList');
 
   const {
     label = '',

package/lib/helpers/simpleTableHelpers.ts

@@ -238,7 +238,7 @@ export const buildFieldsForTable = (configFields, pConnect, showDeleteButton, op
 
   // get resolved field labels for primary fields raw config included in configFields
   const fieldsLabels = updateFieldLabels(fields, configFields, primaryFieldsViewIndex, pConnect, {
-    columnsRawConfig: pConnect.getRawConfigProps()?.children.find(item => item?.name === 'Columns')?.children
+    columnsRawConfig: pConnect.getRawConfigProps()?.children?.find(item => item?.name === 'Columns')?.children
   });
 
   const fieldDefs = configFields.map((field, index) => {

package/lib/infra/Assignment/Assignment.tsx

@@ -97,37 +97,44 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
       const oWorkItem = firstChild.props.getPConnect();
       const oWorkData = oWorkItem.getDataObject();
       const oData: any = thePConn.getDataObject(''); // 1st arg empty string until typedefs allow it to be optional
+      const caseInfo = oData?.caseInfo;
+      if (!oWorkData?.caseInfo || oWorkData.caseInfo.assignments === null || !caseInfo) {
+        return;
+      }
 
-      if (oWorkData?.caseInfo && oWorkData.caseInfo.assignments !== null) {
-        const oCaseInfo = oData?.caseInfo;
+      // Set action buttons
+      if (caseInfo.actionButtons) {
+        setActionButtons(caseInfo.actionButtons);
+      }
 
-        if (oCaseInfo && oCaseInfo.actionButtons) {
-          setActionButtons(oCaseInfo.actionButtons);
-        }
+      // Handle navigation setup
+      const navigation = caseInfo.navigation;
+      if (!navigation) {
+        setHasNavigation(false);
+        return;
+      }
 
-        if (oCaseInfo?.navigation /* was oCaseInfo.navigation != null */) {
-          setHasNavigation(true);
+      const isStandardTemplate = navigation.template?.toLowerCase() === 'standard';
+      const hasSingleStep = navigation.steps?.length === 1;
+      const shouldHideNavigation = isStandardTemplate || hasSingleStep;
 
-          if (
-            (oCaseInfo.navigation.template && oCaseInfo.navigation.template.toLowerCase() === 'standard') ||
-            oCaseInfo?.navigation?.steps?.length === 1
-          ) {
-            setHasNavigation(false);
-          } else if (oCaseInfo.navigation.template && oCaseInfo.navigation.template.toLowerCase() === 'vertical') {
-            setIsVertical(true);
-          } else {
-            setIsVertical(false);
-          }
+      setHasNavigation(!shouldHideNavigation);
 
-          if (oCaseInfo?.navigation?.steps) {
-            const steps = JSON.parse(JSON.stringify(oCaseInfo?.navigation?.steps));
-            const formedSteps = getStepsInfo(steps);
-            setArNavigationSteps(formedSteps);
-          }
+      if (shouldHideNavigation) {
+        return;
+      }
 
-          setArCurrentStepIndicies(findCurrentIndicies(arNavigationSteps, arCurrentStepIndicies, 0));
-        }
+      // set vertical navigation
+      const isVerticalTemplate = navigation.template?.toLowerCase() === 'vertical';
+      setIsVertical(isVerticalTemplate);
+
+      if (navigation.steps) {
+        const steps = JSON.parse(JSON.stringify(navigation.steps));
+        const formedSteps = getStepsInfo(steps);
+        setArNavigationSteps(formedSteps);
       }
+
+      setArCurrentStepIndicies(findCurrentIndicies(arNavigationSteps, arCurrentStepIndicies, 0));
     }
   }, [children]);
 

package/lib/infra/MultiStep/MultiStep.css

@@ -79,32 +79,33 @@ mat-horizontal-stepper {
 
 .psdk-vertical-step-icon {
   margin-right: 12px;
-  background-color: var(--app-neutral-color);
-  color: var(--app-text-color);
   border-radius: 50%;
   height: 24px;
   width: 24px;
-  flex-shrink: 0;
   position: relative;
 }
 
-.psdk-vertical-step-icon-content {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+.success .psdk-vertical-step-icon {
+  background-color: var(--stepper-completed-bg-color);
   color: var(--app-text-color);
 }
 
-.psdk-vertical-step-icon-selected {
-  margin-right: 12px;
+.future .psdk-vertical-step-icon {
+  color: var(--app-neutral-color);
+  border: 1px solid var(--app-neutral-color);
+}
+
+.current .psdk-vertical-step-icon {
   background-color: var(--app-primary-color);
   color: var(--app-text-color);
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
   flex-shrink: 0;
-  position: relative;
+}
+
+.psdk-vertical-step-icon-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .psdk-vertical-step-label {
@@ -119,16 +120,8 @@ mat-horizontal-stepper {
   font-weight: 500;
 }
 
-.psdk-vertical-step-label-selected {
-  color: rgba(0, 0, 0, 0.87);
-  display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 50px;
-  vertical-align: middle;
-  font-size: 14px;
-  font-weight: 500;
+.current .psdk-vertical-step-label {
+  color: var(--text-primary-color);
 }
 
 .psdk-vertical-step-body {
@@ -150,7 +143,7 @@ mat-horizontal-stepper {
   border-left-style: solid;
   top: -16px;
   bottom: -16px;
-  border-left-color: rgba(0, 0, 0, 0.12);
+  border-left-color: var(--app-neutral-color);
 }
 
 .psdk-horizontal-stepper {
@@ -162,7 +155,6 @@ mat-horizontal-stepper {
   white-space: nowrap;
   display: flex;
   align-items: center;
-  text-align: left;
 }
 
 .psdk-horizontal-step-header {
@@ -175,20 +167,29 @@ mat-horizontal-stepper {
   height: 72px;
   overflow: hidden;
   align-items: center;
-  padding: 0 24px;
 }
 
 .psdk-horizontal-step-icon {
-  background-color: var(--app-neutral-color);
-  color: var(--app-text-color);
+  color: white;
   border-radius: 50%;
   height: 24px;
   width: 24px;
-  flex-shrink: 0;
   position: relative;
-  display: block;
-  margin-right: 8px;
-  flex: none;
+}
+
+.future .psdk-horizontal-step-icon {
+  color: var(--app-neutral-color);
+  border: 1px solid var(--app-neutral-color);
+}
+
+.current .psdk-horizontal-step-icon {
+  color: var(--app-text-color);
+  background-color: var(--app-primary-color);
+}
+
+.success .psdk-horizontal-step-icon {
+  color: var(--app-text-color);
+  background-color: var(--stepper-completed-bg-color);
 }
 
 .psdk-horizontal-step-icon-content {
@@ -199,45 +200,24 @@ mat-horizontal-stepper {
   transform: translate(-50%, -50%);
 }
 
-.psdk-horizontal-step-icon-selected {
-  background-color: var(--app-primary-color);
-  color: var(--app-text-color);
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
-  flex-shrink: 0;
-  position: relative;
-  display: block;
-  margin-right: 8px;
-  flex: none;
-}
-
 .psdk-horizontal-step-label {
-  color: rgba(0, 0, 0, 0.54);
-  display: inline-block;
-  min-width: 50px;
-  vertical-align: middle;
+  color: var(--text-secondary-color);
   font-size: 14px;
   font-weight: 500;
   white-space: initial;
 }
 
-.psdk-horizontal-step-label-selected {
-  color: rgba(0, 0, 0, 0.87);
-  display: inline-block;
-  min-width: 50px;
-  vertical-align: middle;
-  font-size: 14px;
-  font-weight: 500;
-  white-space: initial;
+.current .psdk-horizontal-step-label {
+  color: var(--text-primary-color);
+  margin-left: 8px;
 }
 
-.psdk-horizontal-step-line {
-  border-top-color: rgba(0, 0, 0, 0.12);
-  border-top-width: 1px;
-  border-top-style: solid;
+.flex-auto {
   flex: auto;
-  height: 0;
-  margin: 0 -16px;
+}
+
+.psdk-horizontal-step-line {
+  border-top: 1px solid var(--app-neutral-color);
   min-width: 32px;
+  margin: 0px 8px;
 }