@pega/react-sdk-overrides 24.2.10 → 25.1.10

package/lib/template/DataReference/utils.ts

@@ -0,0 +1,90 @@
+const isSelfReferencedProperty = (param, referenceProp) => {
+  const [, parentPropName] = param.split('.');
+  const referencePropParent = referenceProp?.split('.').pop();
+  return parentPropName === referencePropParent;
+};
+
+export function getFieldMeta(getPConnect, dataRelationshipContext) {
+  const pConn = getPConnect();
+  const { selectionMode, selectionList } = pConn.getConfigProps();
+  const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
+
+  const isMultiSelectMode = selectionMode === MULTI;
+
+  const pageReference = pConn.getPageReference();
+  let referenceProp = isMultiSelectMode ? selectionList.substring(1) : pageReference.substring(pageReference.lastIndexOf('.') + 1);
+  // Replace here to use the context name instead
+  let contextPageReference = null;
+  if (dataRelationshipContext !== null && selectionMode === 'single') {
+    referenceProp = dataRelationshipContext;
+    contextPageReference = pageReference.concat('.').concat(referenceProp);
+  }
+
+  const fieldMetadata =
+    (isMultiSelectMode ? pConn.getFieldMetadata(`${referenceProp}`) : pConn.getCurrentPageFieldMetadata(contextPageReference)) ?? {};
+  const { datasource: { parameters: fieldParameters = {} } = {} } = fieldMetadata;
+  const compositeKeys: any = [];
+  Object.values(fieldParameters).forEach((param: any) => {
+    if (isSelfReferencedProperty(param, referenceProp)) compositeKeys.push(param.substring(param.lastIndexOf('.') + 1));
+  });
+
+  return { compositeKeys, fieldMetadata };
+}
+
+/**
+ * returns array of self-referenced properties of the datasource
+ * Ex: returns ["@P .DataRef.pyGUID", "@P .DataRef.customerID"]
+ */
+const getCompositeKeys = (pConnect, property) => {
+  const fieldMetadata = pConnect.getFieldMetadata(property) || {};
+  const { datasource: { parameters: fieldParameters = {} } = {} } = fieldMetadata;
+  const compositeKeys: any = [];
+  Object.values(fieldParameters).forEach(param => {
+    if (isSelfReferencedProperty(param, property)) {
+      compositeKeys.push(param);
+    }
+  });
+  return compositeKeys;
+};
+
+export const getFirstChildConfig = ({
+  firstChildMeta,
+  getPConnect,
+  rawViewMetadata,
+  contextClass,
+  dataReferenceConfigToChild,
+  isCreateNewReferenceEnabled,
+  disableStartingFieldsForReference,
+  pyID
+}) => {
+  const config = {
+    ...firstChildMeta.config,
+    ...dataReferenceConfigToChild
+  };
+  const compositeKeys = getCompositeKeys(getPConnect(), dataReferenceConfigToChild?.dataRelationshipContext);
+  return {
+    ...config,
+    viewName: getPConnect().getCurrentView(),
+    referenceList: config.referenceList ?? rawViewMetadata.config.referenceList,
+    parameters: rawViewMetadata.config.parameters,
+    localeReference: rawViewMetadata.config.localeReference,
+    contextClass: config.contextClass || rawViewMetadata?.config?.contextClass || rawViewMetadata?.config?.targetObjectClass,
+    allowAddingNewRecords: firstChildMeta.type === 'SimpleTableSelect' && isCreateNewReferenceEnabled ? true : undefined,
+    actions: firstChildMeta.type === 'SimpleTableSelect' &&
+      isCreateNewReferenceEnabled && [
+        {
+          action: 'ADD_CASE',
+          config: {
+            label: '@L Add',
+            caseType: contextClass,
+            inputFields: disableStartingFieldsForReference
+              ? {}
+              : {
+                  [`.pyAddCaseContextPage.${pyID}`]: `@P .${pyID}`
+                }
+          }
+        }
+      ],
+    compositeKeys
+  };
+};

package/lib/template/DefaultForm/DefaultForm.tsx

@@ -1,11 +1,11 @@
-import { createElement, PropsWithChildren } from 'react';
+import { createElement, type PropsWithChildren } from 'react';
 
 import { getInstructions } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import connectToState from '@pega/react-sdk-components/lib/components/helpers/state-utils';
 
 import { getKeyForMappedField, mapStateToProps } from './utils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 import './DefaultForm.css';
 
@@ -56,7 +56,7 @@ export default function DefaultForm(props: PropsWithChildren<DefaultFormProps>)
       {instructions && (
         <div className='psdk-default-form-instruction-text'>
           {/* server performs sanitization method for instructions html content */}
-          {/* eslint-disable react/no-danger */}
+          {}
           <div key='instructions' id='instruction-text' dangerouslySetInnerHTML={{ __html: instructions }} />
         </div>
       )}

package/lib/template/DefaultForm/utils/index.ts

@@ -1,5 +1,3 @@
-import { v4 as uuidv4 } from 'uuid';
-
 export const mapStateToProps: any = (_, ownProps) => {
   const { getPConnect } = ownProps;
 
@@ -24,5 +22,5 @@ export const getKeyForMappedField = field => {
     return JSON.stringify(pConnect.meta);
   }
 
-  return uuidv4();
+  return crypto.randomUUID();
 };

package/lib/template/DefaultPage/DefaultPage.tsx

@@ -0,0 +1,108 @@
+import { useMemo, Children } from 'react';
+import type { ReactNode } from 'react';
+import { Grid2 } from '@mui/material';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+export interface CommonPageProps {
+  /** Page title */
+  title: string;
+
+  /** Page icon */
+  icon: string;
+
+  /** Region children */
+  children: ReactNode | ReactNode[];
+
+  /** Dynamic page pconnect object */
+  // getPConnect: () => PConnect;
+
+  /** Enable GetNextWork in page */
+  enableGetNextWork?: boolean;
+
+  /** GetAI coaches configured in page */
+  // coaches?: GenAICoach[];
+
+  /** Locale reference */
+  localeReference: string;
+}
+interface DefaultPageProps extends CommonPageProps {
+  /** Default page layout one or two columns */
+  layout: 'one-column' | 'two-column' | 'wide-narrow' | 'narrow-wide' | 'dynamic';
+
+  /** Flag to enable banner/hero */
+  enableBanner?: boolean;
+
+  /** Banner - Heading displayed */
+  heading?: string;
+
+  /** Banner - Message displayed */
+  message?: string;
+
+  /** Banner - Theme of the image */
+  imageTheme?: 'light' | 'dark' | undefined;
+
+  /** Banner - Background image */
+  backgroundImage?: string;
+
+  /** Banner - Background color */
+  backgroundColor?: string;
+
+  /** Banner - Tint image */
+  tintImage?: boolean;
+
+  /** Flag to enable layout model */
+  // layoutModel?: GridLayoutModel | undefined;
+}
+
+const COLUMNS_WIDTHS = {
+  'one-column': [12],
+  'two-column': [6, 6],
+  'narrow-wide': [4, 8],
+  'wide-narrow': [8, 4]
+};
+
+export default function DefaultPage({
+  layout = 'one-column',
+  children,
+  enableBanner,
+  heading = '',
+  message = '',
+  imageTheme,
+  backgroundImage = '',
+  backgroundColor = '',
+  tintImage
+}: DefaultPageProps) {
+  const Banner = getComponentFromMap('Banner');
+
+  const childArray = useMemo(() => {
+    return Children.toArray(children);
+  }, [children]);
+
+  if (enableBanner) {
+    return (
+      <Banner
+        variant={layout === 'one-column' ? 'two-column' : layout}
+        a={[childArray[0]]}
+        b={[childArray[1]]}
+        banner={{
+          variant: imageTheme,
+          backgroundColor,
+          title: heading,
+          message,
+          backgroundImage,
+          tintImage
+        }}
+      />
+    );
+  }
+
+  return (
+    <Grid2 container spacing={1}>
+      {childArray.map((child, index) => (
+        <Grid2 key={index} size={COLUMNS_WIDTHS[layout][index]}>
+          {child}
+        </Grid2>
+      ))}
+    </Grid2>
+  );
+}

package/lib/template/DefaultPage/index.tsx

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

package/lib/template/Details/Details/Details.tsx

@@ -1,9 +1,9 @@
 import { createElement } from 'react';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 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 DetailsProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -28,7 +28,7 @@ export default function Details(props: DetailsProps) {
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {
       ...configObject,
-      // eslint-disable-next-line react/no-array-index-key
+
       key: index.toString()
     })
   );
@@ -53,21 +53,21 @@ export default function Details(props: DetailsProps) {
   return (
     <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
       {showHighlightedData && highlightedDataArr.length > 0 && (
-        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
+        <Grid2 container spacing={1} style={{ padding: '0 0 1em' }}>
           {highlightedDataArr.map((child, i) => (
-            <Grid item xs={12} key={`hf-${i + 1}`}>
+            <Grid2 size={{ xs: 12 }} key={`hf-${i + 1}`}>
               {child}
-            </Grid>
+            </Grid2>
           ))}
-        </Grid>
+        </Grid2>
       )}
-      <Grid container spacing={1}>
+      <Grid2 container spacing={1}>
         {children.map((child, i) => (
-          <Grid item xs={12} key={`r-${i + 1}`}>
+          <Grid2 size={{ xs: 12 }} key={`r-${i + 1}`}>
             {child}
-          </Grid>
+          </Grid2>
         ))}
-      </Grid>
+      </Grid2>
     </FieldGroup>
   );
 }

package/lib/template/Details/DetailsSubTabs/DetailsSubTabs.tsx

@@ -1,9 +1,9 @@
-import { Children, PropsWithChildren, useEffect, useState } from 'react';
+import { Children, type PropsWithChildren, useEffect, useState } from 'react';
 import { Tab, Tabs } from '@mui/material';
 import { TabContext, TabPanel } from '@mui/lab';
 
 import { getTransientTabs, getVisibleTabs, tabClick } from '@pega/react-sdk-components/lib/components/template/SubTabs/tabUtils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface DetailsSubTabsProps extends PConnProps {
   // If any, enter additional props that only exist on this component

package/lib/template/Details/DetailsThreeColumn/DetailsThreeColumn.tsx

@@ -1,9 +1,9 @@
 import { createElement } from 'react';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 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 DetailsThreeColumnProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -28,7 +28,7 @@ export default function DetailsThreeColumn(props: DetailsThreeColumnProps) {
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {
       ...configObject,
-      // eslint-disable-next-line react/no-array-index-key
+
       key: index.toString()
     })
   );
@@ -53,21 +53,21 @@ export default function DetailsThreeColumn(props: DetailsThreeColumnProps) {
   return (
     <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
       {showHighlightedData && highlightedDataArr.length > 0 && (
-        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
+        <Grid2 container spacing={1} style={{ padding: '0 0 1em' }}>
           {highlightedDataArr.map((child, i) => (
-            <Grid item xs={4} key={`hf-${i + 1}`}>
+            <Grid2 size={{ xs: 4 }} key={`hf-${i + 1}`}>
               {child}
-            </Grid>
+            </Grid2>
           ))}
-        </Grid>
+        </Grid2>
       )}
-      <Grid container spacing={1}>
+      <Grid2 container spacing={1}>
         {children.map((child, i) => (
-          <Grid item xs={4} key={`r-${i + 1}`}>
+          <Grid2 size={{ xs: 4 }} key={`r-${i + 1}`}>
             {child}
-          </Grid>
+          </Grid2>
         ))}
-      </Grid>
+      </Grid2>
     </FieldGroup>
   );
 }

package/lib/template/Details/DetailsTwoColumn/DetailsTwoColumn.tsx

@@ -1,9 +1,9 @@
 import { createElement } from 'react';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 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 DetailsTwoColumnProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -28,7 +28,7 @@ export default function DetailsTwoColumn(props: DetailsTwoColumnProps) {
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {
       ...configObject,
-      // eslint-disable-next-line react/no-array-index-key
+
       key: index.toString()
     })
   );
@@ -53,21 +53,21 @@ export default function DetailsTwoColumn(props: DetailsTwoColumnProps) {
   return (
     <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
       {showHighlightedData && highlightedDataArr.length > 0 && (
-        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
+        <Grid2 container spacing={1} style={{ padding: '0 0 1em' }}>
           {highlightedDataArr.map((child, i) => (
-            <Grid item xs={6} key={`hf-${i + 1}`}>
+            <Grid2 size={{ xs: 6 }} key={`hf-${i + 1}`}>
               {child}
-            </Grid>
+            </Grid2>
           ))}
-        </Grid>
+        </Grid2>
       )}
-      <Grid container spacing={1}>
+      <Grid2 container spacing={1}>
         {children.map((child, i) => (
-          <Grid item xs={6} key={`r-${i + 1}`}>
+          <Grid2 size={{ xs: 6 }} key={`r-${i + 1}`}>
             {child}
-          </Grid>
+          </Grid2>
         ))}
-      </Grid>
+      </Grid2>
     </FieldGroup>
   );
 }

package/lib/template/Details/DynamicTabs/DynamicTabs.tsx

@@ -4,7 +4,7 @@ import { TabContext, TabPanel } from '@mui/lab';
 import makeStyles from '@mui/styles/makeStyles';
 
 import { buildView } from '@pega/react-sdk-components/lib/components/helpers/field-group-utils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 const useStyles = makeStyles(() => ({
   tab: {
@@ -26,7 +26,6 @@ function DynamicTabs(props: DynamicTabsProps) {
   // Get the inherited props from the parent to determine label settings
   const propsToUse = { label, showLabel, ...pConnect.getInheritedProps() };
   const defaultTabIndex = 0;
-  // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'.
   const { tablabel } = pConnect.getComponentConfig();
   const tablabelProp = PCore.getAnnotationUtils().getPropertyName(tablabel);
   const referenceListData: any = pConnect.getValue(`${referenceList}.pxResults`, ''); // 2nd arg empty string until typedefs properly allow optional

package/lib/template/FieldGroupTemplate/FieldGroupTemplate.tsx

@@ -1,9 +1,8 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import { useLayoutEffect, useMemo } from 'react';
 
 import { getReferenceList, buildView } from '@pega/react-sdk-components/lib/components/helpers/field-group-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 FieldGroupTemplateProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -42,7 +41,7 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
 
   useLayoutEffect(() => {
     if (!isReadonlyMode) {
-      // @ts-ignore - Expected 3 arguments, but got 1
+      // @ts-expect-error - Expected 3 arguments, but got 1
       pConn.getListActions().initDefaultPageInstructions(resolvedList);
     }
   }, [referenceList?.length]);
@@ -58,7 +57,6 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
     if (PCore.getPCoreVersion()?.includes('8.7')) {
       pConn.getListActions().insert({ classID: contextClass }, referenceList.length, pageReference);
     } else {
-      // @ts-ignore - An argument for 'pageRef' was not provided.
       pConn.getListActions().insert({}, referenceList.length);
     }
   };
@@ -71,7 +69,6 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
       if (PCore.getPCoreVersion()?.includes('8.7')) {
         pConn.getListActions().deleteEntry(index, pageReference);
       } else {
-        // @ts-ignore - An argument for 'pageRef' was not provided.
         pConn.getListActions().deleteEntry(index);
       }
     };

package/lib/template/InlineDashboard/InlineDashboard.tsx

@@ -1,7 +1,7 @@
-import { PropsWithChildren, ReactElement } from 'react';
-import { Grid, Typography } from '@mui/material';
+import type { PropsWithChildren, ReactElement } from 'react';
+import { Grid2, 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 InlineDashboardProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -50,24 +50,22 @@ export default function InlineDashboard(props: PropsWithChildren<InlineDashboard
       </Typography>
 
       {filterPosition === 'block-start' && (
-        <Grid container spacing={2} direction='column-reverse' className={classes.containerStyles}>
-          <Grid item xs={12} className={classes.colStyles}>
+        <Grid2 container spacing={2} direction='column-reverse' className={classes.containerStyles}>
+          <Grid2 size={{ xs: 12 }} className={classes.colStyles}>
             {childrenToRender[0]}
-          </Grid>
-          <Grid id='filters' item xs={12} className={classes.filterContainerStyles}>
+          </Grid2>
+          <Grid2 id='filters' size={{ xs: 12 }} className={classes.filterContainerStyles}>
             {childrenToRender[1]}
-          </Grid>
-        </Grid>
+          </Grid2>
+        </Grid2>
       )}
       {filterPosition !== 'block-start' && (
-        <Grid container spacing={2} direction={direction} className={classes.containerStyles}>
-          <Grid item xs={9}>
-            {childrenToRender[0]}
-          </Grid>
-          <Grid id='filters' item xs={3} className={classes.inlineStyles}>
+        <Grid2 container spacing={2} direction={direction} className={classes.containerStyles}>
+          <Grid2 size={{ xs: 9 }}>{childrenToRender[0]}</Grid2>
+          <Grid2 id='filters' size={{ xs: 3 }} className={classes.inlineStyles}>
             {childrenToRender[1]}
-          </Grid>
-        </Grid>
+          </Grid2>
+        </Grid2>
       )}
     </>
   );

package/lib/template/InlineDashboardPage/InlineDashboardPage.tsx

@@ -1,8 +1,8 @@
-import { useMemo, Children, useEffect, useState, PropsWithChildren } from 'react';
+import { useMemo, Children, useEffect, useState, type PropsWithChildren } from 'react';
 
 import { buildFilterComponents } from '@pega/react-sdk-components/lib/components/infra/DashboardFilter/filterUtils';
 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 InlineDashboardPageProps extends PConnProps {
   // If any, enter additional props that only exist on this component

package/lib/template/ListPage/ListPage.tsx

@@ -1,5 +1,5 @@
 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 ListPageProps extends PConnProps {
   // If any, enter additional props that only exist on this component