@pega/dx-component-builder-sdk 24.2.14 → 25.1.11

package/tests/assets/sdk-r/components/createAll/override-sdk/infra/MultiStep/MultiStep.tsx

@@ -1,7 +1,7 @@
-import React, { PropsWithChildren } from 'react';
+import React, { type PropsWithChildren } from 'react';
 
 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';
 
 import './MultiStep.css';
 
@@ -27,56 +27,27 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
     currentStep = arNavigationSteps[lastActiveStepIndex >= 0 ? lastActiveStepIndex : 0];
   }
 
-  // const svgCurrent = Utils.getImageSrc("circle-solid", Utils.getSDKStaticConentUrl());
-  // const svgNotCurrent = Utils.getImageSrc("circle-solid", Utils.getSDKStaticConentUrl());
-
-  function _getVIconClass(status): string {
-    if (status === 'current') {
-      return 'psdk-vertical-step-icon-selected';
-    }
-
-    return 'psdk-vertical-step-icon';
-  }
-
-  function _getVLabelClass(status): string {
-    if (status === 'current') {
-      return 'psdk-vertical-step-label-selected';
-    }
-
-    return 'psdk-vertical-step-label';
-  }
-
   function _getVBodyClass(index: number): string {
-    if (index < arNavigationSteps.length - 1) {
-      return 'psdk-vertical-step-body psdk-vertical-step-line';
-    }
+    const baseClass = 'psdk-vertical-step-body';
+    const isNotLastStep = index < arNavigationSteps.length - 1;
 
-    return 'psdk-vertical-step-body';
+    return isNotLastStep ? `${baseClass} psdk-vertical-step-line` : baseClass;
   }
 
-  function _getHIconClass(step): string {
-    if (step.ID === currentStep?.ID) {
-      return 'psdk-horizontal-step-icon-selected';
-    }
+  function _getAutoFlexClass(currentStep): string {
+    const currentStepIndex = arNavigationSteps.findIndex(step => step.ID === currentStep?.ID);
+    const totalSteps = arNavigationSteps.length;
+    const lastStep = arNavigationSteps[totalSteps - 1];
 
-    return 'psdk-horizontal-step-icon';
-  }
-
-  function _getHLabelClass(step): string {
-    if (step.ID === currentStep?.ID) {
-      return 'psdk-horizontal-step-label-selected';
-    }
+    // Apply flex-auto class if current step is active OR if current step is second-to-last and the last step is active
+    const isCurrentStepActive = currentStep.visited_status === 'current';
+    const isSecondToLastWithActiveLastStep = currentStepIndex === totalSteps - 2 && lastStep?.visited_status === 'current';
 
-    return 'psdk-horizontal-step-label';
+    return isCurrentStepActive || isSecondToLastWithActiveLastStep ? 'flex-auto' : '';
   }
 
-  function _showHLine(index: number): boolean {
-    // eslint-disable-next-line sonarjs/prefer-single-boolean-return
-    if (index < arNavigationSteps.length - 1) {
-      return true;
-    }
-
-    return false;
+  function isLastStep(index: number): boolean {
+    return index === arNavigationSteps.length - 1;
   }
 
   function buttonPress(sAction: string, sButtonType: string) {
@@ -91,13 +62,13 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
             return (
               <React.Fragment key={mainStep.actionID}>
                 <div className='psdk-vertical-step'>
-                  <div className='psdk-vertical-step-header'>
-                    <div className={_getVIconClass(mainStep.visited_status)}>
+                  <div className={`psdk-vertical-step-header ${mainStep.visited_status}`}>
+                    <div className={`psdk-vertical-step-icon`}>
                       <div className='psdk-vertical-step-icon-content'>
                         <span>{index + 1}</span>
                       </div>
                     </div>
-                    <div className={_getVLabelClass(mainStep.visited_status)}>{mainStep.name}</div>
+                    <div className='psdk-vertical-step-label'>{mainStep.visited_status === 'current' && mainStep.name}</div>
                   </div>
                   <div className={_getVBodyClass(index)}>
                     {mainStep?.steps && (
@@ -127,9 +98,11 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
                       </ul>
                     )}
                     {!mainStep?.steps && mainStep.visited_status === 'current' && (
-                      <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
-                        {children}
-                      </AssignmentCard>
+                      <div style={{ paddingLeft: 20 }}>
+                        <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
+                          {children}
+                        </AssignmentCard>
+                      </div>
                     )}
                   </div>
                 </div>
@@ -143,19 +116,15 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
             {arNavigationSteps.map((mainStep, index) => {
               return (
                 <React.Fragment key={mainStep.actionID}>
-                  <div className='psdk-horizontal-step-header'>
-                    <div className={_getHIconClass(mainStep)}>
+                  <div className={`psdk-horizontal-step-header ${mainStep.visited_status}`}>
+                    <div className='psdk-horizontal-step-icon'>
                       <div className='psdk-horizontal-step-icon-content'>
                         <span>{index + 1}</span>
                       </div>
                     </div>
-                    <div className={_getHLabelClass(mainStep)}>
-                      <div className='psdk-horizontal-step-text-label' id='selected-label'>
-                        {mainStep.name}
-                      </div>
-                    </div>
+                    <div className='psdk-horizontal-step-label'>{mainStep.visited_status === 'current' && mainStep.name}</div>
                   </div>
-                  {_showHLine(index) && <div className='psdk-horizontal-step-line' />}
+                  {!isLastStep(index) && <div className={`psdk-horizontal-step-line ${_getAutoFlexClass(mainStep)}`} />}
                 </React.Fragment>
               );
             })}

package/tests/assets/sdk-r/components/createAll/override-sdk/infra/NavBar/NavBar.css

@@ -154,7 +154,7 @@
   text-align: center;
   display: inline-flex;
   background: var(--app-neutral-color);
-  color: white;
+  color: var(--app-text-color);
   font-weight: normal;
   font-size: 1rem;
 }

package/tests/assets/sdk-r/components/createAll/override-sdk/infra/NavBar/NavBar.tsx

@@ -7,9 +7,9 @@ import {
   Drawer,
   List,
   ListItem,
+  ListItemButton,
   ListItemIcon,
   ListItemText,
-  ListItemSecondaryAction,
   Collapse,
   Divider,
   IconButton,
@@ -36,13 +36,13 @@ import { logout } from '@pega/auth/lib/sdk-auth-manager';
 
 import { useNavBar } from '@pega/react-sdk-components/lib/components/helpers/reactContextHelpers';
 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';
 
 import './NavBar.css';
 
 interface NavBarProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  // eslint-disable-next-line react/no-unused-prop-types
+
   appName?: string;
   pages?: any[];
   caseTypes: any[];
@@ -93,7 +93,8 @@ const useStyles = makeStyles(theme => ({
   },
   appListLogo: {
     marginRight: theme.spacing(2),
-    width: '3.6rem'
+    width: '3.6rem',
+    filter: 'var(--svg-color)'
   },
   appListIcon: {
     color: theme.palette.getContrastText(theme.palette.primary.light)
@@ -125,7 +126,6 @@ export default function NavBar(props: NavBarProps) {
   const [bShowOperatorButtons, setBShowOperatorButtons] = useState(false);
   const [anchorEl, setAnchorEl] = useState(null);
   const localeUtils = PCore.getLocaleUtils();
-  const localeReference = pConn.getValue('.pyLocaleReference');
 
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'AppShell';
@@ -133,9 +133,19 @@ export default function NavBar(props: NavBarProps) {
   const portalLogoImage = Utils.getIconPath(Utils.getSDKStaticConentUrl()).concat('pzpega-logo-mark.svg');
   const portalOperator = PCore.getEnvironmentInfo().getOperatorName();
   const portalApp = PCore.getEnvironmentInfo().getApplicationLabel();
-
+  // @ts-ignore
+  const localeReference = PCore.getLocaleUtils().getPortalLocaleReference() || pConn.getValue('.pyLocaleReference');
   useEffect(() => {
-    setNavPages(JSON.parse(JSON.stringify(pages)));
+    const updatedPages = pages.map((page: any) => {
+      const destinationObject: any = {};
+      pConn.resolveConfigProps(
+        { defaultHeading: page.pyDefaultHeading || page.pyLabel, localeReference: page.pyLocalizationReference },
+        destinationObject
+      );
+      const name = localeUtils.getLocaleValue(destinationObject.defaultHeading, '', destinationObject.localeReference || localeReference);
+      return { ...page, name };
+    });
+    setNavPages(updatedPages);
   }, [pages]);
 
   function navPanelButtonClick(oPageData: any) {
@@ -145,7 +155,6 @@ export default function NavBar(props: NavBarProps) {
       .getActionsApi()
       .showPage(pyRuleName, pyClassName)
       .then(() => {
-        // eslint-disable-next-line no-console
         console.log(`${localizedVal('showPage completed', localeCategory)}`);
       });
   }
@@ -161,7 +170,6 @@ export default function NavBar(props: NavBarProps) {
       .getActionsApi()
       .createWork(sCaseType, actionInfo)
       .then(() => {
-        // eslint-disable-next-line no-console
         console.log(`${localizedVal('createWork completed', localeCategory)}`);
       });
   }
@@ -199,7 +207,14 @@ export default function NavBar(props: NavBarProps) {
     >
       {open ? (
         <List className={classes.appListItem}>
-          <ListItem onClick={handleDrawerOpen}>
+          <ListItem
+            onClick={handleDrawerOpen}
+            secondaryAction={
+              <IconButton edge='end' onClick={handleDrawerOpen} size='large'>
+                <ChevronLeftIcon className={classes.appListIcon} />
+              </IconButton>
+            }
+          >
             <ListItemIcon>
               <img src={portalLogoImage} className={classes.appListLogo} />
             </ListItemIcon>
@@ -210,11 +225,6 @@ export default function NavBar(props: NavBarProps) {
                 </Typography>
               }
             />
-            <ListItemSecondaryAction>
-              <IconButton edge='end' onClick={handleDrawerOpen} size='large'>
-                <ChevronLeftIcon className={classes.appListIcon} />
-              </IconButton>
-            </ListItemSecondaryAction>
           </ListItem>
         </List>
       ) : (
@@ -223,17 +233,16 @@ export default function NavBar(props: NavBarProps) {
         </div>
       )}
       <List>
-        <ListItem button onClick={handleCaseItemClick}>
+        <ListItemButton onClick={handleCaseItemClick}>
           <ListItemIcon>{bShowCaseTypes && open ? <ClearOutlinedIcon fontSize='large' /> : <AddIcon fontSize='large' />}</ListItemIcon>
           <ListItemText primary='Create' />
           {bShowCaseTypes ? <ExpandLess /> : <ExpandMore />}
-        </ListItem>
+        </ListItemButton>
       </List>
       <Collapse in={bShowCaseTypes && open} timeout='auto' unmountOnExit className='scrollable'>
         <List component='div' disablePadding>
           {caseTypes.map(caseType => (
-            <ListItem
-              button
+            <ListItemButton
               className={classes.nested}
               onClick={() => navPanelCreateCaseType(caseType.pyClassName, caseType.pyFlowType)}
               key={caseType.pyLabel}
@@ -241,34 +250,36 @@ export default function NavBar(props: NavBarProps) {
               <ListItemIcon>
                 <WorkOutlineIcon fontSize='large' />
               </ListItemIcon>
-              <ListItemText primary={localeUtils.getLocaleValue(caseType.pyLabel, '', localeReference)} />
-            </ListItem>
+              <ListItemText primary={localeUtils.getLocaleValue(caseType.pyLabel, '', localeUtils.getCaseLocaleReference(caseType.pyClassName))} />
+            </ListItemButton>
           ))}
         </List>
       </Collapse>
       <List>
         {navPages.map(page => (
-          <ListItem button onClick={() => navPanelButtonClick(page)} key={page.pyLabel}>
+          <ListItemButton onClick={() => navPanelButtonClick(page)} key={page.pyLabel}>
             <ListItemIcon>{iconMap[page.pxPageViewIcon]}</ListItemIcon>
-            <ListItemText primary={localeUtils.getLocaleValue(page.pyLabel, '', localeReference)} />
-          </ListItem>
+            <ListItemText primary={page.name} />
+          </ListItemButton>
         ))}
       </List>
       <Divider />
       <List className='marginTopAuto'>
         <>
-          <ListItem onClick={navPanelOperatorButtonClick}>
+          <ListItem
+            onClick={navPanelOperatorButtonClick}
+            secondaryAction={
+              open ? (
+                <IconButton edge='end' onClick={navPanelOperatorButtonClick} size='large'>
+                  <ChevronRightIcon />
+                </IconButton>
+              ) : null
+            }
+          >
             <ListItemIcon id='person-icon'>
               <PersonOutlineIcon fontSize='large' />
             </ListItemIcon>
             <ListItemText primary={portalOperator} />
-            {open && (
-              <ListItemSecondaryAction>
-                <IconButton edge='end' onClick={navPanelOperatorButtonClick} size='large'>
-                  <ChevronRightIcon />
-                </IconButton>
-              </ListItemSecondaryAction>
-            )}
           </ListItem>
           <Menu
             anchorEl={anchorEl}

package/tests/assets/sdk-r/components/createAll/override-sdk/infra/Reference/Reference.tsx

@@ -1,4 +1,4 @@
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface ReferenceProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -12,8 +12,7 @@ export default function Reference(props: ReferenceProps) {
   const { visibility = true, context = '', getPConnect, readOnly = false, displayMode = '' } = props;
 
   const pConnect = getPConnect();
-  // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'.
-  const referenceConfig = { ...pConnect.getComponentConfig() } || {};
+  const referenceConfig = { ...pConnect.getComponentConfig() };
 
   delete referenceConfig?.name;
   delete referenceConfig?.type;
@@ -34,7 +33,7 @@ export default function Reference(props: ReferenceProps) {
     }
   };
 
-  // @ts-ignore - Argument of type 'null' is not assignable to parameter of type 'string'.
+  // @ts-expect-error - Argument of type 'null' is not assignable to parameter of type 'string'.
   const viewComponent: any = pConnect.createComponent(viewObject, null, null, {
     pageReference: context && context.startsWith('@CLASS') ? '' : context
   });

package/tests/assets/sdk-r/components/createAll/override-sdk/infra/Region/Region.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 
 // Region does NOT have getPConnect. So, no need to extend from PConnProps
 interface RegionProps {

package/tests/assets/sdk-r/components/createAll/override-sdk/infra/RootContainer/RootContainer.tsx

@@ -1,11 +1,11 @@
-import { Children, createElement, PropsWithChildren, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Children, createElement, type PropsWithChildren, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Box, CircularProgress } from '@mui/material';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
 import { LazyMap as LazyComponentMap } from '@pega/react-sdk-components/lib/components_map';
 import { isEmptyObject } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface RootContainerProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -179,7 +179,7 @@ export default function RootContainer(props: PropsWithChildren<RootContainerProp
       }
     };
 
-    if (!PCore.isDeepEqual(currentRootConfig, prevRootConfig)) {
+    if (prevRootConfig === null || !PCore.isDeepEqual(currentRootConfig, prevRootConfig)) {
       rootView.current = createElement(createPConnectComponent(), PCore.createPConnect(currentRootConfig)) as any;
     }
 
@@ -196,7 +196,6 @@ export default function RootContainer(props: PropsWithChildren<RootContainerProp
     );
   }
   if (renderingMode === 'noPortal') {
-    // eslint-disable-next-line no-console
     console.log(`${localizedVal('RootContainer rendering in noPortal mode', localeCategory)}`);
 
     const theChildren = pConn.getChildren() as any[];

package/tests/assets/sdk-r/components/createAll/override-sdk/infra/SimpleView/helper.ts

@@ -1,7 +1,7 @@
 import { useEffect, createElement } from 'react';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
-import { isContainerInitialized } from '@pega/react-sdk-components/lib/components/helpers';
+import { isContainerInitialized } from '@pega/react-sdk-components/lib/components/infra/Containers/container-helpers';
 
 const processRootViewDetails = (rootView, containerItem, options) => {
   const {

package/tests/assets/sdk-r/components/createAll/override-sdk/infra/Stages/Stages.tsx

@@ -3,7 +3,7 @@ import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
 import DoneIcon from '@mui/icons-material/Done';
 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 StagesProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -57,14 +57,13 @@ export default function Stages(props: StagesProps) {
 
   const { getPConnect, stages } = props;
   const pConn = getPConnect();
-  const key = `${pConn.getCaseInfo().getClassName()}!CASE!${pConn.getCaseInfo().getName()}`.toUpperCase();
-
+  const localizationService = pConn.getLocalizationService();
   const filteredStages = getFilteredStages(stages);
   const currentStageID = pConn.getValue(PCore.getConstants().CASE_INFO.STAGEID, ''); // 2nd arg empty string until typedef allows optional
   const stagesObj = filteredStages.map((stage, index, arr) => {
     const theID = stage.ID || stage.id;
     return {
-      name: PCore.getLocaleUtils().getLocaleValue(stage.name, undefined, key),
+      name: localizationService.getLocalizedText(stage.name),
       id: theID,
       complete: stage.visited_status === 'completed',
       current: theID === currentStageID,

package/tests/assets/sdk-r/components/createAll/override-sdk/infra/View/View.tsx

@@ -1,8 +1,8 @@
-import { PropsWithChildren, useEffect } from 'react';
+import { type PropsWithChildren, useEffect } from 'react';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { getAllFields } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 // Need to import any templates that we might render
 
@@ -38,7 +38,8 @@ const NO_HEADER_TEMPLATES = [
   'WideNarrowDetails',
   'Confirmation',
   'DynamicTabs',
-  'DetailsSubTabs'
+  'DetailsSubTabs',
+  'ListView'
 ];
 
 export default function View(props: PropsWithChildren<ViewProps>) {

package/tests/assets/sdk-r/components/createAll/override-sdk/infra/ViewContainer/ViewContainer.tsx

@@ -1,10 +1,12 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { createElement, useContext, useEffect, useState } from 'react';
 import { Box, CircularProgress } from '@mui/material';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
 import { isEmptyObject } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { configureBrowserBookmark } from '@pega/react-sdk-components/lib/components/infra/Containers/container-helpers';
 
 interface ViewContainerProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -131,10 +133,7 @@ export default function ViewContainer(props: ViewContainerProps) {
 
     if (!displayOnlyFA) {
       // configureForBrowserBookmark not applicable in Embedded mode
-      PCore.configureForBrowserBookmark({
-        ...objectForAddContainer,
-        defaultViewLabel
-      });
+      configureBrowserBookmark(pConn);
     }
   }, []);
 

package/tests/assets/sdk-r/components/createAll/override-sdk/template/AdvancedSearch/AdvancedSearch.tsx

@@ -0,0 +1,86 @@
+import { useContext, useState } from 'react';
+
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import DataReferenceAdvancedSearchContext from '@pega/react-sdk-components/lib/components/template/DataReference/DataReferenceAdvancedSearchContext';
+import { getFirstChildConfig } from '@pega/react-sdk-components/lib/components/template/DataReference/utils';
+
+export default function AdvancedSearch(props) {
+  const { getPConnect, targetObjectClass, localeReference } = props;
+  const SearchGroups = getComponentFromMap('SearchGroups');
+  const { dataReferenceConfigToChild, isCreateNewReferenceEnabled, disableStartingFieldsForReference, pyID, searchSelectCacheKey } = useContext(
+    DataReferenceAdvancedSearchContext
+  ) as any;
+
+  const { selectionMode, value: singleSelectFieldValue, readonlyContextList: multiSelectField } = dataReferenceConfigToChild;
+
+  let isSelectionExist = false;
+  const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
+
+  if (selectionMode === MULTI) {
+    isSelectionExist = getPConnect().getValue(multiSelectField)?.length || false;
+  } else {
+    isSelectionExist = getPConnect().getValue(singleSelectFieldValue) || false;
+  }
+
+  const [showRecords, setShowRecords] = useState(isSelectionExist);
+
+  const pConn = getPConnect();
+  const rawViewMetadata = pConn.getRawMetadata();
+
+  const searchFieldsSet = new Set();
+  const searchFields: any = [];
+  rawViewMetadata.config.searchGroups.forEach(group => {
+    group.children.forEach(child => {
+      if (!searchFieldsSet.has(child.config.value) && !child.config.validator) {
+        searchFields.push(child);
+        searchFieldsSet.add(child.config.value);
+      }
+    });
+  });
+
+  const firstChildPConnect = getPConnect().getChildren()[0].getPConnect;
+  const [firstChildMeta] = rawViewMetadata.children;
+
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const cache = PCore.getNavigationUtils().getComponentCache(searchSelectCacheKey) ?? {};
+
+  const editableFieldComp = firstChildPConnect().createComponent({
+    type: firstChildMeta.type,
+    config: {
+      ...getFirstChildConfig({
+        firstChildMeta,
+        getPConnect,
+        rawViewMetadata,
+        contextClass: targetObjectClass,
+        dataReferenceConfigToChild,
+        isCreateNewReferenceEnabled,
+        disableStartingFieldsForReference,
+        pyID
+      }),
+      searchFields,
+      showRecords,
+      label: localizedVal('Search results', 'DataReference'),
+      searchSelectCacheKey,
+      cache
+    }
+  });
+
+  const { selectionList, dataRelationshipContext } = editableFieldComp.props.getPConnect().getConfigProps();
+  const editableField = selectionMode === MULTI ? selectionList.substring(1) : dataRelationshipContext;
+
+  const searchGroupsProps = {
+    getPConnect,
+    editableField,
+    localeReference,
+    setShowRecords,
+    searchSelectCacheKey,
+    cache
+  };
+
+  return (
+    <>
+      <SearchGroups {...searchGroupsProps} />
+      {editableFieldComp}
+    </>
+  );
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/template/AdvancedSearch/SearchGroup/persistUtils.ts

@@ -0,0 +1,52 @@
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+
+const SKIP_CACHE_KEY = '';
+
+const getComponentStateKey = (getPConnect, propertyName: string) => {
+  const pConnect = getPConnect();
+  const caseID = `.${Utils.getMappedKey('pyID')}`; // Enhance this later when use-case arrives for data objects using S&S.
+  const resolvedCaseID = pConnect.getValue(caseID);
+
+  if (!resolvedCaseID) {
+    return SKIP_CACHE_KEY;
+  }
+
+  return `Search-${resolvedCaseID}-${pConnect.getPageReference()}-${propertyName}-${pConnect.getCurrentView()}`;
+};
+
+const getComponentStateOptions = getPConnect => {
+  return { clearOnCancelForContext: getPConnect().getContextName() };
+};
+
+interface SearchCategory {
+  // tabId of search category selected
+  selectedCategory: string;
+}
+
+interface SearchGroup {
+  // searchFields can be any object based on what fields are authored.
+  searchFields: unknown;
+  activeGroupId: string;
+}
+
+const setComponentCache = ({
+  cacheKey,
+  state,
+  options
+}: {
+  cacheKey: string;
+  state: SearchCategory | SearchGroup;
+  options: ReturnType<typeof getComponentStateOptions>;
+}) => {
+  if (cacheKey !== SKIP_CACHE_KEY) {
+    (PCore.getNavigationUtils() as any).setComponentCache(cacheKey, state, options);
+  }
+};
+
+const componentCachePersistUtils = {
+  getComponentStateKey,
+  getComponentStateOptions,
+  setComponentCache
+};
+
+export default componentCachePersistUtils;