@pega/dx-component-builder-sdk 0.24.7 → 0.25.6

package/tests/assets/sdk-r/components/create/override-sdk/template/ListView/hooks.ts

@@ -14,7 +14,6 @@ export default function useInit(props) {
     ref,
     showDynamicFields,
     isDataObject,
-    xRayUid,
     cosmosTableRef
   } = props;
   let { editing, selectionMode } = props;
@@ -27,7 +26,6 @@ export default function useInit(props) {
 
     (async function init() {
       // promise to fetch metadata
-      // @ts-ignore - 3rd parameter "associationFilter" should be optional for getDataViewMetadata method
       const metaDataPromise: Promise<any> = PCore.getAnalyticsUtils().getDataViewMetadata(referenceList, showDynamicFields);
 
       const promisesArray = [metaDataPromise];
@@ -73,8 +71,7 @@ export default function useInit(props) {
         getPConnect,
         compositeKeys,
         isSearchable,
-        isCacheable: true,
-        xRayUid
+        isCacheable: true
       }).then(async context => {
         if (isCompStillMounted) {
           return readContextResponse(context, {
@@ -83,7 +80,6 @@ export default function useInit(props) {
             selectionCountThreshold,
             ref,
             selectionMode,
-            xRayUid,
             cosmosTableRef
           });
         }

package/tests/assets/sdk-r/components/create/override-sdk/template/ListView/utils.ts

@@ -13,14 +13,21 @@ export const formatConstants = {
 class DataApi {
   mappedPropertyToOriginalProperty: any;
   originalPropertyToMappedProperty: any;
-  constructor() {
+  showRecords: any;
+  constructor(showRecords = true) {
+    this.showRecords = showRecords;
     this.originalPropertyToMappedProperty = {};
     this.mappedPropertyToOriginalProperty = {};
+    this.setShowRecords = this.setShowRecords.bind(this);
     this.setPropertyMaps = this.setPropertyMaps.bind(this);
     this.getMappedProperty = this.getMappedProperty.bind(this);
     this.getOriginalProperty = this.getOriginalProperty.bind(this);
   }
 
+  setShowRecords(showRecords) {
+    this.showRecords = showRecords;
+  }
+
   setPropertyMaps(originalToMappedPropertyObj = {}, mappedToOriginalPropertyObj = {}) {
     this.originalPropertyToMappedProperty = {
       ...this.originalPropertyToMappedProperty,
@@ -202,7 +209,6 @@ export function getConfigEmbeddedFieldsMeta(configFields, classID) {
       if (value.includes('[')) {
         value = value.substring(0, value.indexOf('[')) + value.substring(value.indexOf(']') + 1);
       }
-      // @ts-ignore - Expected 3 arguments, but got 2.
       const meta: any = PCore.getMetadataUtils().getEmbeddedPropertyMetadata(value, classID);
       meta.fieldID = field;
       configEmbeddedFieldsMeta.push(meta);
@@ -537,6 +543,28 @@ function prepareExtraFields(metaFields, configFields, configFieldSet, reportColu
 
 const AssignDashObjects = ['Assign-Worklist', 'Assign-WorkBasket'];
 
+function isFLProperty(label) {
+  return label?.startsWith('@FL');
+}
+
+function getFieldLabel(fieldConfig) {
+  const { label, classID, caption } = fieldConfig;
+  let fieldLabel = (label ?? caption)?.substring(4);
+  const labelSplit = fieldLabel?.split('.');
+  const propertyName = labelSplit?.pop();
+  const fieldMetaData: any = PCore.getMetadataUtils().getPropertyMetadata(propertyName, classID) ?? {};
+  fieldLabel = fieldMetaData.label ?? fieldMetaData.caption ?? propertyName;
+
+  const definedOnClassID = fieldMetaData.definedOnClassID;
+  const localeValue = PCore.getLocaleUtils().getLocaleValue(
+    fieldLabel,
+    `${definedOnClassID ?? fieldMetaData.classID ?? classID}.${propertyName}`,
+    PCore.getLocaleUtils().FIELD_LABELS_BUNDLE_KEY,
+    null
+  );
+  return localeValue || fieldLabel;
+}
+
 function populateRenderingOptions(name, config, field) {
   const shouldDisplayAsSemanticLink = 'displayAsLink' in field.config && field.config.displayAsLink;
   if (shouldDisplayAsSemanticLink) {
@@ -551,6 +579,7 @@ function populateRenderingOptions(name, config, field) {
     config.cellRenderer = formatConstants.Integer;
   }
 }
+
 export function initializeColumns(fields: any[] = [], getMappedProperty: any = null) {
   return fields.map((field, originalColIndex) => {
     let name = field.config.value;
@@ -563,7 +592,9 @@ export function initializeColumns(fields: any[] = [], getMappedProperty: any = n
 
     let label = field.config.label || field.config.caption;
     const { show = true, displayAs } = field.config;
-    if (label.startsWith('@')) {
+    if (isFLProperty(label)) {
+      label = getFieldLabel(field.config);
+    } else if (label.startsWith('@')) {
       label = label.substring(3);
     }
 
@@ -651,10 +682,11 @@ export function updatePageFieldsConfig(configFields, parentClassID) {
 }
 
 export const readContextResponse = async (context, params) => {
-  const { getPConnect, apiContext, setListContext, children, showDynamicFields, referenceList, isDataObject } = params;
-  const { promisesResponseArray, apiContext: otherContext } = context;
-  // eslint-disable-next-line sonarjs/no-unused-collection
+  const { getPConnect, apiContext, setListContext, children, showDynamicFields, referenceList, isDataObject, ref } = params;
+  const { promisesResponseArray, setShowRecords, apiContext: otherContext } = context;
+
   const listOfComponents: any[] = [];
+  ref.setShowRecords = setShowRecords;
   const {
     data: { fields: metaFields, classID, isQueryable }
   } = promisesResponseArray[0];
@@ -678,7 +710,7 @@ export const readContextResponse = async (context, params) => {
     const dataPageKeys = PCore.getDataTypeUtils().getDataPageKeys(dataViewName);
     dataPageKeys?.forEach(item => (item.isAlternateKeyStorage ? compositeKeys.push(item.linkedField) : compositeKeys.push(item.keyName)));
     if (compositeKeys.length) {
-      otherContext.setCompositeKeys(compositeKeys);
+      otherContext?.setCompositeKeys(compositeKeys);
     }
     if (otherContext) {
       otherContext.fetchRowActionDetails = null;

package/tests/assets/sdk-r/components/create/override-sdk/template/MultiReferenceReadOnly/MultiReferenceReadOnly.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 MultiReferenceReadOnlyProps extends PConnProps {
   config: { referenceList: any; readonlyContextList: any };

package/tests/assets/sdk-r/components/create/override-sdk/template/NarrowWide/NarrowWide.tsx

@@ -1,16 +1,16 @@
-import { PropsWithChildren, ReactElement } from 'react';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PropsWithChildren, ReactElement } from 'react';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './NarrowWide.css';
 
 interface NarrowWideProps extends PConnProps {
   // If any, enter additional props that only exist on this component
   a: any;
   b: any;
-  // eslint-disable-next-line react/no-unused-prop-types
+
   title?: string;
-  // eslint-disable-next-line react/no-unused-prop-types
+
   cols?: string;
-  // eslint-disable-next-line react/no-unused-prop-types
+
   icon?: string;
 }
 

package/tests/assets/sdk-r/components/create/override-sdk/template/NarrowWideDetails/NarrowWideDetails.tsx

@@ -1,10 +1,10 @@
 import { createElement } from 'react';
-import Grid, { GridSize } from '@material-ui/core/Grid';
+import Grid2, { type GridSize } 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 NarrowWideDetailsProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -26,12 +26,12 @@ export default function NarrowWideDetails(props: NarrowWideDetailsProps) {
 
   // Set display mode prop and re-create the children so this part of the dom tree renders
   // in a readonly (display) mode instead of a editable
-  getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+  getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
   getPConnect().setInheritedProp('readOnly', true);
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {
       ...configObject,
-      // eslint-disable-next-line react/no-array-index-key
+
       key: index.toString()
     })
   );
@@ -56,21 +56,21 @@ export default function NarrowWideDetails(props: NarrowWideDetailsProps) {
   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={COLUMN_WIDTHS[i] as GridSize} key={`hf-${i + 1}`}>
+            <Grid2 size={{ xs: COLUMN_WIDTHS[i] as GridSize }} key={`hf-${i + 1}`}>
               {child}
-            </Grid>
+            </Grid2>
           ))}
-        </Grid>
+        </Grid2>
       )}
-      <Grid container spacing={1}>
+      <Grid2 container spacing={1}>
         {children.map((child, i) => (
-          <Grid item xs={COLUMN_WIDTHS[i] as GridSize} key={`r-${i + 1}`}>
+          <Grid2 size={{ xs: COLUMN_WIDTHS[i] as GridSize }} key={`r-${i + 1}`}>
             {child}
-          </Grid>
+          </Grid2>
         ))}
-      </Grid>
+      </Grid2>
     </FieldGroup>
   );
 }

package/tests/assets/sdk-r/components/create/override-sdk/template/NarrowWideForm/NarrowWideForm.tsx

@@ -1,5 +1,5 @@
-import { PropsWithChildren, ReactElement } from 'react';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PropsWithChildren, ReactElement } from 'react';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './NarrowWideForm.css';
 
 interface NarrowWideFormProps extends PConnProps {

package/tests/assets/sdk-r/components/create/override-sdk/template/NarrowWidePage/NarrowWidePage.tsx

@@ -1,6 +1,6 @@
-import { PropsWithChildren, ReactElement } from 'react';
+import type { PropsWithChildren, ReactElement } 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';
 
 interface NarrowWidePageProps extends PConnProps {
   // If any, enter additional props that only exist on this component

package/tests/assets/sdk-r/components/create/override-sdk/template/OneColumn/OneColumn.tsx

@@ -1,7 +1,7 @@
-import { PropsWithChildren, ReactElement } from 'react';
-import { Grid } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PropsWithChildren, ReactElement } from 'react';
+import Grid2 from '@mui/material/Grid2';
+import makeStyles from '@mui/styles/makeStyles';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface OneColumnProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -21,12 +21,12 @@ export default function OneColumn(props: PropsWithChildren<OneColumnProps>) {
   const { children } = props;
 
   return (
-    <Grid container spacing={2}>
-      <Grid item xs={12} className={classes.colStyles}>
+    <Grid2 container spacing={2}>
+      <Grid2 size={{ xs: 12 }} className={classes.colStyles}>
         {(children as ReactElement[]).map(child => {
           return child;
         })}
-      </Grid>
-    </Grid>
+      </Grid2>
+    </Grid2>
   );
 }

package/tests/assets/sdk-r/components/create/override-sdk/template/OneColumnPage/OneColumnPage.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 OneColumnPageProps extends PConnProps {
   // If any, enter additional props that only exist on this component

package/tests/assets/sdk-r/components/create/override-sdk/template/OneColumnTab/OneColumnTab.tsx

@@ -1,5 +1,5 @@
-import { PropsWithChildren } from 'react';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PropsWithChildren } from 'react';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface OneColumnTabProps extends PConnProps {
   // If any, enter additional props that only exist on this component

package/tests/assets/sdk-r/components/create/override-sdk/template/PromotedFilters/PromotedFilters.tsx

@@ -1,12 +1,12 @@
 import React, { useCallback, useMemo, useState, createElement } from 'react';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { isEmptyObject } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import './PromotedFilters.css';
 
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 // Can't use PromotedFilterProps until getContainerManager() knows about addTransientItem
 //  Currently just expects "object"
@@ -57,7 +57,6 @@ function Filters({ filters, transientItemID, localeReference }) {
       }
     });
 
-    // eslint-disable-next-line react/no-array-index-key
     return <React.Fragment key={index}>{createElement(createPConnectComponent(), c11nEnv)}</React.Fragment>;
   });
 }
@@ -87,7 +86,6 @@ export default function PromotedFilters(props: PromotedFilterProps) {
     };
     return getPConnect().getContainerManager().addTransientItem({
       id: viewName,
-      // @ts-ignore - Property 'coreHeaders' is missing in type '{ classID: string; }' but required in type '{ coreHeaders: any; }'.
       data: filtersWithClassID
     });
   }, []);

package/tests/assets/sdk-r/components/create/override-sdk/template/SearchGroups/SearchGroups.tsx

@@ -0,0 +1,244 @@
+import React, { createElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Button, Grid2, Select, MenuItem, Box } from '@mui/material';
+
+import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+import TemplateContext from '@pega/react-sdk-components/lib/components/template/AdvancedSearch/TemplateContext';
+import componentCachePersistUtils from '@pega/react-sdk-components/lib/components/template/AdvancedSearch/SearchGroup/persistUtils';
+
+import { getCacheInfo, isValidInput } from './utils';
+import { useCacheWhenListViewReady } from './hooks';
+
+export const initializeSearchFields = (searchFields, getPConnect, referenceListClassID, searchFieldRestoreValues = {}) => {
+  const filtersProperties = {};
+  searchFields.forEach(field => {
+    let val = '';
+    const { value, defaultValue = '' } = field.config;
+    const propPath = PCore.getAnnotationUtils().getPropertyName(value);
+
+    if (searchFieldRestoreValues[propPath]) {
+      val = searchFieldRestoreValues[propPath];
+    } else if (PCore.getAnnotationUtils().isProperty(defaultValue)) {
+      val = getPConnect().getValue(defaultValue.split(' ')[1]);
+    } else if (defaultValue.startsWith('@L')) {
+      val = defaultValue.split(' ')[1];
+    } else {
+      val = defaultValue;
+    }
+
+    filtersProperties[propPath] = val;
+
+    const valueSplit = value.split('@P ')[1]?.split('.').filter(Boolean) ?? [];
+    valueSplit.pop();
+
+    if (valueSplit.length) {
+      let path = '';
+      let currentClassID = referenceListClassID;
+      valueSplit.forEach(item => {
+        path = path.length ? `${path}.${item}` : item;
+        currentClassID = (PCore.getMetadataUtils().getPropertyMetadata(item, currentClassID) as any).pageClass;
+        if (currentClassID) {
+          filtersProperties[`${path}.classID`] = currentClassID;
+        }
+      });
+    }
+  });
+  return filtersProperties;
+};
+
+const flattenObj = obj => {
+  const result = {};
+  Object.keys(obj).forEach(key => {
+    if (!['context_data', 'pageInstructions'].includes(key)) {
+      if (typeof obj[key] === 'object' && !Array.isArray(obj[key])) {
+        const temp = flattenObj(obj[key]);
+        Object.keys(temp).forEach(nestedKey => {
+          result[`${key}.${nestedKey}`] = temp[nestedKey];
+        });
+      } else {
+        result[key] = obj[key];
+      }
+    }
+  });
+  return result;
+};
+
+export default function SearchGroups(props) {
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const { getPConnect, editableField, localeReference, setShowRecords, searchSelectCacheKey, cache } = props;
+  const referenceFieldName = editableField.replaceAll('.', '_');
+
+  const state: any = useRef({ searchFields: {}, activeGroupId: '' }).current;
+  const options = componentCachePersistUtils.getComponentStateOptions(getPConnect);
+
+  const { searchGroups: groups, referenceList } = getPConnect().getConfigProps();
+  const { useCache, initialActiveGroupId } = getCacheInfo(cache, groups);
+  const [activeGroupId, setActiveGroupId] = useState(initialActiveGroupId);
+  const [transientItemID, setTransientItemID] = useState<any>(null);
+  const [previousFormValues, setPreviousFormValues] = useState<any>(null);
+  const viewName = getPConnect().getCurrentView();
+
+  const rawGroupsConfig = getPConnect().getRawConfigProps().searchGroups;
+  const activeGroupIndex = groups.findIndex(group => group.config.id === activeGroupId);
+  const { children: searchFieldsChildren = [] } = activeGroupIndex !== -1 ? rawGroupsConfig[activeGroupIndex] : {};
+  const searchFields = searchFieldsChildren.map(field => ({
+    ...field,
+    config: { ...field.config, isSearchField: true }
+  }));
+
+  const searchByRef = useRef(null);
+  const searchFieldsRef = useRef(null);
+  const isValidatorField = searchFields.some(field => field.config.validator);
+  const { classID: referenceListClassID } = PCore.getMetadataUtils().getDataPageMetadata(referenceList) as any;
+
+  const initialSearchFields = useMemo(
+    () =>
+      initializeSearchFields(
+        searchFields,
+        getPConnect,
+        referenceListClassID,
+        useCache && cache.activeGroupId === activeGroupId ? cache.searchFields : {}
+      ),
+    [activeGroupId, getPConnect, cache.searchFields]
+  );
+
+  useEffect(() => {
+    if (transientItemID) {
+      const filtersWithClassID = {
+        ...initialSearchFields,
+        classID: referenceListClassID
+      };
+      // @ts-ignore
+      PCore.getContainerUtils().replaceTransientData({ transientItemID, data: filtersWithClassID });
+    }
+  }, [activeGroupId]);
+
+  useEffect(() => {
+    const filtersWithClassID = {
+      ...initialSearchFields,
+      classID: referenceListClassID
+    };
+
+    const transientId = getPConnect()
+      .getContainerManager()
+      .addTransientItem({ id: `${referenceFieldName}-${viewName}`, data: filtersWithClassID });
+    setTransientItemID(transientId);
+  }, []);
+
+  const getFilterData = useCallback(() => {
+    // @ts-ignore
+    let changes = PCore.getFormUtils().getSubmitData(transientItemID, {
+      isTransientContext: true,
+      includeDisabledFields: true
+    });
+
+    if (Object.keys(cache.searchFields ?? {}).length > 0 && Object.keys(changes).length === 1) {
+      changes = cache.searchFields;
+    }
+
+    const formValues = flattenObj(changes);
+
+    if (!PCore.isDeepEqual(previousFormValues, formValues) && PCore.getFormUtils().isFormValid(transientItemID) && isValidInput(formValues)) {
+      if (isValidatorField) {
+        // @ts-ignore
+        PCore.getMessageManager().clearContextMessages({ context: transientItemID });
+      }
+      setPreviousFormValues(formValues);
+      setShowRecords(true);
+      PCore.getPubSubUtils().publish(PCore.getEvents().getTransientEvent().UPDATE_PROMOTED_FILTERS, {
+        payload: formValues,
+        showRecords: true,
+        viewName
+      });
+    }
+
+    state.activeGroupId = activeGroupId;
+    state.searchFields = changes;
+    state.selectedCategory = viewName;
+
+    componentCachePersistUtils.setComponentCache({ cacheKey: searchSelectCacheKey, state, options });
+  }, [transientItemID, setShowRecords, viewName, activeGroupId, previousFormValues]);
+
+  const resetFilterData = useCallback(() => {
+    // @ts-ignore
+    PCore.getNavigationUtils().resetComponentCache(searchSelectCacheKey);
+    const resetPayload = {
+      transientItemID,
+      data: initializeSearchFields(searchFields, getPConnect, referenceListClassID),
+      options: { reset: true }
+    };
+    // @ts-ignore
+    PCore.getContainerUtils().updateTransientData(resetPayload);
+  }, [transientItemID, initialSearchFields]);
+
+  useCacheWhenListViewReady(cache, viewName, useCache, getFilterData, searchSelectCacheKey);
+
+  const searchDropdown = groups.length > 1 && (
+    <Grid2 container spacing={2}>
+      <Select value={activeGroupId} onChange={e => setActiveGroupId(e.target.value)} ref={searchByRef} fullWidth>
+        {groups.map(group => (
+          <MenuItem key={group.config.id} value={group.config.id}>
+            {group.config.label}
+          </MenuItem>
+        ))}
+      </Select>
+    </Grid2>
+  );
+
+  const actionButtons = (
+    <Box display='flex' gap={2}>
+      <Button variant='outlined' onClick={resetFilterData}>
+        {localizedVal('Reset', 'SimpleTable')}
+      </Button>
+      <Button variant='contained' onClick={getFilterData}>
+        {localizedVal('Search', 'SimpleTable')}
+      </Button>
+    </Box>
+  );
+
+  const searchFieldsViewConfig = {
+    name: 'SearchFields',
+    type: 'View',
+    config: {
+      template: 'DefaultForm',
+      NumCols: '3',
+      contextName: transientItemID,
+      readOnly: false,
+      context: transientItemID,
+      localeReference
+    },
+    children: [
+      {
+        name: 'Fields',
+        type: 'Region',
+        children: searchFields
+      }
+    ]
+  };
+
+  const searchFieldsC11nEnv = PCore.createPConnect({
+    meta: searchFieldsViewConfig,
+    options: {
+      hasForm: true,
+      contextName: transientItemID
+    }
+  });
+
+  const templateContext = useContext(TemplateContext);
+  const templateContextValue = useMemo(() => ({ ...templateContext, outerColumnCount: undefined }), []);
+
+  const searchFieldsViewComp = transientItemID ? (
+    <TemplateContext.Provider value={templateContextValue}>
+      <div ref={searchFieldsRef}>{createElement(createPConnectComponent(), { ...searchFieldsC11nEnv })}</div>
+    </TemplateContext.Provider>
+  ) : null;
+
+  const childrenToRender = [searchDropdown, searchFieldsViewComp, actionButtons];
+
+  return (
+    <Box display='flex' flexDirection='column' gap={2}>
+      {childrenToRender.map((child, index) => (
+        <React.Fragment key={index}>{child}</React.Fragment>
+      ))}
+    </Box>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/SearchGroups/hooks.ts

@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+
+const listViewConstants = {
+  EVENTS: {
+    LIST_VIEW_READY: 'LIST_VIEW_READY'
+  }
+};
+/**
+ * This hook registers a callback for the whenever list view component is ready
+ * then makes a call to get the data using the search fields pre-filled with cache data.
+ */
+
+export function useCacheWhenListViewReady(
+  cache: { searchFields: unknown },
+  viewName: string,
+  useCache: boolean,
+  getFilterData: (params: { isCalledFromCache: boolean }) => void,
+  searchSelectCacheKey: string
+) {
+  useEffect(() => {
+    if (Object.keys(cache.searchFields ?? {}).length > 0) {
+      PCore.getPubSubUtils().subscribe(
+        listViewConstants.EVENTS.LIST_VIEW_READY,
+        ({ viewName: viewNameFromListView }: { viewName: string }) => {
+          if (viewNameFromListView === viewName && useCache) {
+            getFilterData({ isCalledFromCache: true });
+          }
+        },
+        `${searchSelectCacheKey}-listview-ready`
+      );
+    }
+
+    return () => {
+      PCore.getPubSubUtils().unsubscribe(listViewConstants.EVENTS.LIST_VIEW_READY, `${searchSelectCacheKey}-listview-ready`);
+    };
+  }, []);
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/SearchGroups/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/template/SearchGroups/utils.ts

@@ -0,0 +1,29 @@
+function isEmpty(value: any): boolean {
+  return (
+    // null or undefined
+    value === null ||
+    value === undefined ||
+    ((Array.isArray(value) || typeof value === 'string') && value.length === 0) ||
+    // is an Object and has no keys
+    (value.constructor === Object && Object.keys(value).length === 0)
+  );
+}
+
+export function getCacheInfo(
+  cache: { selectedCategory: string; activeGroupId: string; searchFields: unknown },
+  groups: { config: { id: string } }[]
+) {
+  let initialActiveGroupId = groups.length ? groups[0].config.id : '';
+
+  let useCache = false;
+  if (cache.activeGroupId && groups?.find(group => group.config.id === cache.activeGroupId)) {
+    initialActiveGroupId = cache.activeGroupId;
+    useCache = true;
+  }
+
+  return { useCache, initialActiveGroupId };
+}
+
+export function isValidInput(input: { [s: string]: unknown }) {
+  return Object.values(input).some(value => !isEmpty(value));
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/SimpleTable/SimpleTable.tsx

@@ -1,10 +1,9 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import { useRef } from 'react';
 
 import { buildMetaForListView, getContext } from '@pega/react-sdk-components/lib/components/helpers/simpleTableHelpers';
 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';
 
 // Can't use SimpleTableProps until getComponentConfig() and getFieldMetadata() are NOT private
 interface SimpleTableProps extends PConnProps {
@@ -50,11 +49,9 @@ export default function SimpleTable(props: SimpleTableProps) {
 
   let { contextClass } = props;
   if (!contextClass) {
-    // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'.
     let listName = getPConnect().getComponentConfig().referenceList;
     listName = PCore.getAnnotationUtils().getPropertyName(listName);
     // was... contextClass = getPConnect().getFieldMetadata(listName)?.pageClass;
-    // @ts-ignore - Property 'getFieldMetadata' is private and only accessible within class 'C11nEnv'.
     const theFieldMetadata = getPConnect().getFieldMetadata(listName);
     if (theFieldMetadata) {
       contextClass = theFieldMetadata.pageClass;
@@ -92,7 +89,7 @@ export default function SimpleTable(props: SimpleTableProps) {
     );
 
     const metaForPConnect = JSON.parse(JSON.stringify(metaForListView));
-    // @ts-ignore - PCore.getMetadataUtils().getPropertyMetadata - An argument for 'currentClassID' was not provided.
+    // @ts-expect-error - PCore.getMetadataUtils().getPropertyMetadata - An argument for 'currentClassID' was not provided.
     metaForPConnect.config.parameters = rawParams ?? PCore.getMetadataUtils().getPropertyMetadata(name)?.datasource?.parameters;
 
     const { referenceListStr: referenceList } = getContext(getPConnect());