@pega/dx-component-builder-sdk 24.2.13 → 25.1.10

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

@@ -1,7 +1,12 @@
-import { PropsWithChildren, ReactElement, useEffect, useMemo, useState } from 'react';
+import React, { type PropsWithChildren, type ReactElement, useEffect, useMemo, useState } 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 useIsMount from '@pega/react-sdk-components/lib/hooks/useIsMount';
+import componentCachePersistUtils from '@pega/react-sdk-components/lib/components/template/AdvancedSearch/SearchGroup/persistUtils';
+import DataReferenceAdvancedSearchContext from './DataReferenceAdvancedSearchContext';
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { getFirstChildConfig } from './utils';
 
 // ReferenceProps can't be used until getComponentConfig() is NOT private
 interface DataReferenceProps extends PConnProps {
@@ -16,6 +21,13 @@ interface DataReferenceProps extends PConnProps {
   ruleClass: string;
   parameters: string[]; // need to fix
   hideLabel: boolean;
+  imagePosition: string;
+  showImageDescription: string;
+  showPromotedFilters: boolean;
+  isCreationOfNewRecordAllowedForReference: boolean;
+  contextClass: string;
+  inline: any;
+  selectionList: any;
 }
 
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
@@ -24,7 +36,7 @@ export default function DataReference(props: PropsWithChildren<DataReferenceProp
   // Get emitted components from map (so we can get any override that may exist)
   const SingleReferenceReadonly = getComponentFromMap('SingleReferenceReadOnly');
   const MultiReferenceReadonly = getComponentFromMap('MultiReferenceReadOnly');
-
+  const SearchForm = getComponentFromMap('SearchForm');
   const {
     children,
     getPConnect,
@@ -37,8 +49,17 @@ export default function DataReference(props: PropsWithChildren<DataReferenceProp
     displayAs,
     ruleClass,
     parameters,
-    hideLabel
+    hideLabel,
+    imagePosition,
+    showImageDescription,
+    showPromotedFilters,
+    isCreationOfNewRecordAllowedForReference,
+    contextClass,
+    inline,
+    selectionList
   } = props;
+
+  const isMounted = useIsMount();
   let childrenToRender = children as ReactElement[];
   const pConn = getPConnect();
   const [dropDownDataSource, setDropDownDataSource] = useState(null);
@@ -47,50 +68,82 @@ export default function DataReference(props: PropsWithChildren<DataReferenceProp
     propsToUse.label = '';
   }
   const rawViewMetadata: any = pConn.getRawMetadata();
-  const viewName = rawViewMetadata.name;
+  const refFieldMetadata = pConn.getFieldMetadata(rawViewMetadata.config?.authorContext);
+
   const [firstChildMeta] = rawViewMetadata.children;
   const refList = rawViewMetadata.config.referenceList;
   const canBeChangedInReviewMode = allowAndPersistChangesInReviewMode && (displayAs === 'autocomplete' || displayAs === 'dropdown');
-  let propName;
   const isDisplayModeEnabled = ['STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode);
+  const isDDSourceDeferred =
+    (firstChildMeta?.type === 'Dropdown' && selectionMode === SELECTION_MODE.SINGLE && refFieldMetadata?.descriptors) ||
+    firstChildMeta.config.deferDatasource;
+  const pyID = Utils.getMappedKey('pyID');
+  const isInfinity = pyID === 'pyID';
+  const { allowImplicitRefresh } = isInfinity
+    ? PCore.getFieldDefaultUtils().fieldDefaults.DataReference || {}
+    : {
+        allowImplicitRefresh: true
+      };
+
   let firstChildPConnect;
 
+  const localizedPlaceholderOption = placeholder => {
+    const localizedDefaultPlaceholder = pConn.getLocalizedValue('select_placeholder_default', '', 'CosmosFields');
+    // If we have a placeholder, push that option in the list of items
+    if (placeholder === 'Select...' && localizedDefaultPlaceholder !== 'select_placeholder_default') {
+      return localizedDefaultPlaceholder;
+    }
+    return pConn.getLocalizedValue(placeholder);
+  };
+
+  if (['Dropdown', 'AutoComplete'].includes(firstChildMeta?.type)) {
+    firstChildMeta.config.placeholder = localizedPlaceholderOption(firstChildMeta.config.placeholder);
+  }
+
+  if (['Checkbox', 'RadioButtons'].includes(firstChildMeta?.type) && firstChildMeta.config.variant === 'card') {
+    firstChildMeta.config.imagePosition = imagePosition;
+    firstChildMeta.config.showImageDescription = showImageDescription;
+  }
+
   /* Only for dropdown when it has param use data api to get the data back and add it to datasource */
   useEffect(() => {
-    if (firstChildMeta?.type === 'Dropdown' && rawViewMetadata.config?.parameters) {
+    if (rawViewMetadata.config?.parameters && !isDDSourceDeferred && ['Checkbox', 'Dropdown', 'RadioButtons'].includes(firstChildMeta?.type)) {
       const { value, key, text } = firstChildMeta.config.datasource.fields;
-      (
-        PCore.getDataApiUtils().getData(
-          refList,
-          {
-            dataViewParameters: parameters
-          } as any,
-          ''
-        ) as Promise<any>
-      )
-        .then(res => {
-          if (res.data.data !== null) {
-            const ddDataSource = res.data.data
-              .map(listItem => ({
-                key: listItem[key.split(' .', 2)[1]],
-                text: listItem[text.split(' .', 2)[1]],
-                value: listItem[value.split(' .', 2)[1]]
-              }))
-              .filter(item => item.key);
-            // Filtering out undefined entries that will break preview
-            setDropDownDataSource(ddDataSource);
-          } else {
-            const ddDataSource: any = [];
-            setDropDownDataSource(ddDataSource);
-          }
-        })
-        .catch(err => {
-          // eslint-disable-next-line no-console
-          console.error(err?.stack);
-          return Promise.resolve({
-            data: { data: [] }
+      if (firstChildMeta.config.variant !== 'card' || (firstChildMeta.config.variant === 'card' && !isMounted)) {
+        (
+          PCore.getDataApiUtils().getData(
+            refList,
+            {
+              dataViewParameters: parameters
+            } as any,
+            ''
+          ) as Promise<any>
+        )
+          .then(res => {
+            if (res.data.data !== null) {
+              const ddDataSource = firstChildMeta.config.datasource.filterDownloadedFields
+                ? res.data.data
+                : res.data.data
+                    .map(listItem => ({
+                      key: listItem[key.split(' .', 2)[1]],
+                      text: listItem[text.split(' .', 2)[1]],
+                      value: listItem[value.split(' .', 2)[1]]
+                    }))
+                    .filter(item => item.key);
+              // Filtering out undefined entries that will break preview
+              setDropDownDataSource(ddDataSource);
+            } else {
+              const ddDataSource: any = [];
+              setDropDownDataSource(ddDataSource);
+            }
+          })
+          .catch(err => {
+            console.error(err?.stack);
+            return Promise.resolve({
+              data: { data: [] }
+            });
           });
-        });
+      }
     }
   }, [firstChildMeta, rawViewMetadata, parameters]);
 
@@ -116,28 +169,44 @@ export default function DataReference(props: PropsWithChildren<DataReferenceProp
     if (!canBeChangedInReviewMode) {
       firstChildMeta.config.displayMode = displayMode;
     }
-    if (firstChildMeta.type === 'SimpleTableSelect' && selectionMode === SELECTION_MODE.MULTI) {
-      propName = PCore.getAnnotationUtils().getPropertyName(firstChildMeta.config.selectionList);
-    } else {
-      propName = PCore.getAnnotationUtils().getPropertyName(firstChildMeta.config.value);
-    }
   }
 
   const handleSelection = event => {
     const caseKey = pConn.getCaseInfo().getKey();
-    const refreshOptions = { autoDetectRefresh: true };
-    if (canBeChangedInReviewMode && pConn.getValue('__currentPageTabViewName', '')) {
-      // 2nd arg empty string until typedef marked correctly
-      getPConnect().getActionsApi().refreshCaseView(caseKey, pConn.getValue('__currentPageTabViewName', ''), '', refreshOptions); // 2nd arg empty string until typedef marked correctly
-      PCore.getDeferLoadManager().refreshActiveComponents(pConn.getContextName());
-    } else {
-      const pgRef = pConn.getPageReference().replace('caseInfo.content', '');
-      getPConnect().getActionsApi().refreshCaseView(caseKey, viewName, pgRef, refreshOptions);
+    const refreshOptions: any = { autoDetectRefresh: true };
+
+    const children: any = pConn.getRawMetadata()?.children;
+    if (children?.length > 0 && children[0].config?.value) {
+      refreshOptions.propertyName = children[0].config.value;
+      refreshOptions.classID = (pConn.getRawMetadata() as any).classID;
     }
 
-    // AutoComplete sets value on event.id whereas Dropdown sets it on event.target.value
-    const propValue = event?.id || event?.target.value;
-    if (propValue && canBeChangedInReviewMode && isDisplayModeEnabled) {
+    // AutoComplete sets value on event.id whereas Dropdown sets it on event.target.value if event.id is unset
+    // When value is empty propValue will be undefined here and no value will be set for the reference
+    const propValue = event?.id || event?.target?.value;
+    const propName =
+      firstChildMeta.type === 'SimpleTableSelect' && selectionMode === SELECTION_MODE.MULTI
+        ? PCore.getAnnotationUtils().getPropertyName(firstChildMeta.config.selectionList)
+        : PCore.getAnnotationUtils().getPropertyName(firstChildMeta.config.value);
+
+    const hasAssociatedViewConfigured = rawViewMetadata.children[1].children?.length;
+
+    if (pConn.getContextName().includes('modal') || pConn.getContextName().includes('workarea')) {
+      if (hasAssociatedViewConfigured || allowImplicitRefresh) {
+        const pageReference = pConn.getPageReference();
+        let pgRef: any = null;
+        if (pageReference.startsWith('objectInfo')) {
+          pgRef = pageReference.replace('objectInfo.content', '');
+        } else {
+          pgRef = pageReference.replace('caseInfo.content', '');
+        }
+        const viewName = rawViewMetadata.name;
+        getPConnect()
+          .getActionsApi()
+          .refreshCaseView(caseKey, viewName, pgRef, refreshOptions)
+          .catch(() => {});
+      }
+    } else if (propValue && canBeChangedInReviewMode && isDisplayModeEnabled) {
       (PCore.getDataApiUtils().getCaseEditLock(caseKey, '') as Promise<any>).then(caseResponse => {
         const pageTokens = pConn.getPageReference().replace('caseInfo.content', '').split('.');
         let curr = {};
@@ -181,81 +250,218 @@ export default function DataReference(props: PropsWithChildren<DataReferenceProp
   // rerenders without any actual change
   const recreatedFirstChild = useMemo(() => {
     const { type, config } = firstChildMeta;
-    if (firstChildMeta?.type !== 'Region') {
-      pConn.clearErrorMessages({
-        // Need to add empty string for category and context to match typdef
-        property: propName,
-        category: '',
-        context: ''
-      });
-      if (!canBeChangedInReviewMode && isDisplayModeEnabled && selectionMode === SELECTION_MODE.SINGLE) {
-        return (
-          <SingleReferenceReadonly
-            config={config}
-            getPConnect={firstChildPConnect}
-            label={propsToUse.label}
-            type={type}
-            displayAs={displayAs}
-            displayMode={displayMode}
-            ruleClass={ruleClass}
-            referenceType={referenceType}
-            hideLabel={hideLabel}
-            dataRelationshipContext={rawViewMetadata.config.contextClass && rawViewMetadata.config.name ? rawViewMetadata.config.name : null}
-          />
-        );
+    if (firstChildMeta?.type === 'Region' && displayAs !== 'advancedSearch') {
+      return;
+    }
+
+    if ((displayAs === 'readonly' || isDisplayModeEnabled) && !canBeChangedInReviewMode && selectionMode === SELECTION_MODE.SINGLE) {
+      return (
+        <SingleReferenceReadonly
+          config={config}
+          getPConnect={firstChildPConnect}
+          label={propsToUse.label}
+          type={type}
+          displayAs={displayAs}
+          displayMode={displayMode}
+          ruleClass={ruleClass}
+          referenceType={referenceType}
+          hideLabel={hideLabel}
+          dataRelationshipContext={rawViewMetadata.config.contextClass && rawViewMetadata.config.name ? rawViewMetadata.config.name : null}
+        />
+      );
+    }
+
+    if ((['readonly', 'readonlyMulti', 'map'].includes(displayAs) || isDisplayModeEnabled) && selectionMode === SELECTION_MODE.MULTI) {
+      return (
+        <MultiReferenceReadonly
+          config={{
+            ...firstChildMeta.config,
+            localeReference: rawViewMetadata.config.localeReference
+          }}
+          getPConnect={firstChildPConnect}
+          displayAs={displayAs}
+          label={propsToUse.label}
+          hideLabel={hideLabel}
+          displayMode={displayMode}
+        />
+      );
+    }
+
+    /* Editable variants */
+    // Datasource w/ parameters cannot load the dropdown before the parameters
+    if (type === 'Dropdown' && dropDownDataSource === null && !isDDSourceDeferred && rawViewMetadata.config?.parameters) {
+      return null;
+    }
+
+    if (firstChildMeta.config?.readOnly) {
+      delete firstChildMeta.config.readOnly;
+    }
+
+    // 2) Set datasource
+    if (
+      ['Dropdown', 'Checkbox', 'RadioButtons'].includes(firstChildMeta?.type) &&
+      !firstChildMeta.config.deferDatasource &&
+      firstChildMeta.config.datasource
+    ) {
+      firstChildMeta.config.datasource.source =
+        (firstChildMeta.config.variant === 'card' && dropDownDataSource) ||
+        (firstChildMeta.config.variant !== 'card' && rawViewMetadata.config?.parameters)
+          ? dropDownDataSource
+          : '@DATASOURCE '.concat(refList).concat('.pxResults');
+    } else if (firstChildMeta?.type === 'AutoComplete') {
+      firstChildMeta.config.datasource = refList;
+
+      if (rawViewMetadata.config?.parameters) {
+        firstChildMeta.config.parameters = parameters;
       }
+    }
 
-      if (isDisplayModeEnabled && selectionMode === SELECTION_MODE.MULTI) {
-        return <MultiReferenceReadonly config={config} getPConnect={firstChildPConnect} label={propsToUse.label} hideLabel={hideLabel} />;
+    // 3) Pass through configs
+    if (firstChildMeta.config) {
+      firstChildMeta.config.showPromotedFilters = showPromotedFilters;
+      if (!canBeChangedInReviewMode) {
+        firstChildMeta.config.displayMode = displayMode;
       }
+    }
 
-      // In the case of a datasource with parameters you cannot load the dropdown before the parameters
-      if (type === 'Dropdown' && rawViewMetadata.config?.parameters && dropDownDataSource === null) {
-        return null;
+    // 4) Define field meta
+    let fieldMetaData: any = null;
+    if (isDDSourceDeferred && !firstChildMeta.config.deferDatasource) {
+      fieldMetaData = {
+        datasourceMetadata: refFieldMetadata
+      };
+      if (rawViewMetadata.config?.parameters) {
+        fieldMetaData.datasourceMetadata.datasource.parameters = parameters;
       }
+      fieldMetaData.datasourceMetadata.datasource.propertyForDisplayText = firstChildMeta?.config?.datasource?.fields?.text.startsWith('@P')
+        ? firstChildMeta?.config?.datasource?.fields?.text?.substring(3)
+        : firstChildMeta?.config?.datasource?.fields?.text;
+      fieldMetaData.datasourceMetadata.datasource.propertyForValue = firstChildMeta?.config?.datasource?.fields?.value.startsWith('@P')
+        ? firstChildMeta?.config?.datasource?.fields?.value?.substring(3)
+        : firstChildMeta?.config?.datasource?.fields?.value;
+      fieldMetaData.datasourceMetadata.datasource.name = rawViewMetadata.config?.referenceList;
+    }
+    // @ts-expect-error
+    const { disableStartingFieldsForReference = false } = PCore.getEnvironmentInfo().environmentInfoObject?.features?.form || {};
+    // @ts-expect-error
+    let { isCreateNewReferenceEnabled = false } = PCore.getEnvironmentInfo().environmentInfoObject?.features?.form || {};
 
-      return firstChildPConnect().createComponent(
-        {
-          type,
-          config: {
-            ...config,
-            required: propsToUse.required,
-            visibility: propsToUse.visibility,
-            disabled: propsToUse.disabled,
-            label: propsToUse.label,
-            viewName: getPConnect().getCurrentView(),
-            parameters: rawViewMetadata.config.parameters,
-            readOnly: false,
-            localeReference: rawViewMetadata.config.localeReference,
-            ...(selectionMode === SELECTION_MODE.SINGLE ? { referenceType } : ''),
-            dataRelationshipContext: rawViewMetadata.config.contextClass && rawViewMetadata.config.name ? rawViewMetadata.config.name : null,
-            hideLabel,
-            onRecordChange: handleSelection
-          }
-        },
-        '',
-        '',
-        {}
-      ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional);
+    if (isCreateNewReferenceEnabled) {
+      isCreateNewReferenceEnabled = isCreationOfNewRecordAllowedForReference && PCore.getAccessPrivilege().hasCreateAccess(contextClass);
     }
+
+    const startingFields: any = {};
+    const createNewRecord = () => {
+      if (referenceType === 'Case' || firstChildMeta?.config?.referenceType === 'Case') {
+        if (!disableStartingFieldsForReference) {
+          startingFields.pyAddCaseContextPage = { pyID: pConn.getCaseInfo().getKey()?.split(' ')?.pop() };
+        }
+        return pConn.getActionsApi().createWork(contextClass, {
+          openCaseViewAfterCreate: false,
+          startingFields
+        });
+      }
+      if (referenceType === 'Data' || firstChildMeta?.config?.referenceType === 'Data') {
+        return getPConnect().getActionsApi().showDataObjectCreateView(contextClass);
+      }
+    };
+
+    const additionalInfo = refFieldMetadata?.additionalInformation
+      ? {
+          content: refFieldMetadata.additionalInformation
+        }
+      : undefined;
+
+    const dataReferenceConfigToChild = {
+      selectionMode,
+      additionalInfo,
+      descriptors: selectionMode === SELECTION_MODE.SINGLE ? refFieldMetadata?.descriptors : null,
+      datasourceMetadata: fieldMetaData?.datasourceMetadata,
+      required: propsToUse.required,
+      visibility: propsToUse.visibility,
+      disabled: propsToUse.disabled,
+      label: propsToUse.label,
+      displayAs,
+      readOnly: false,
+      ...(selectionMode === SELECTION_MODE.SINGLE && {
+        referenceType
+      }),
+      ...(selectionMode === SELECTION_MODE.SINGLE &&
+        displayAs === 'advancedSearch' && {
+          value: rawViewMetadata.config.value,
+          contextPage: rawViewMetadata.config.contextPage
+        }),
+      ...(selectionMode === SELECTION_MODE.MULTI &&
+        displayAs === 'advancedSearch' && {
+          selectionList,
+          readonlyContextList: rawViewMetadata.config.readonlyContextList
+        }),
+      dataRelationshipContext: rawViewMetadata.config.contextClass && rawViewMetadata.config.name ? rawViewMetadata.config.name : null,
+      hideLabel,
+      onRecordChange: handleSelection,
+      createNewRecord: isCreateNewReferenceEnabled ? createNewRecord : undefined,
+      inline
+    };
+
+    const searchSelectCacheKey = componentCachePersistUtils.getComponentStateKey(getPConnect, rawViewMetadata.config.name);
+
+    const dataReferenceAdvancedSearchContext = {
+      dataReferenceConfigToChild,
+      isCreateNewReferenceEnabled,
+      disableStartingFieldsForReference,
+      pyID,
+      searchSelectCacheKey
+    };
+
+    if (displayAs === 'advancedSearch') {
+      return (
+        <DataReferenceAdvancedSearchContext.Provider value={dataReferenceAdvancedSearchContext}>
+          <SearchForm getPConnect={getPConnect} searchSelectCacheKey={searchSelectCacheKey}>
+            {children}
+          </SearchForm>
+        </DataReferenceAdvancedSearchContext.Provider>
+      );
+    }
+
+    return firstChildPConnect().createComponent({
+      type,
+      config: {
+        ...getFirstChildConfig({
+          firstChildMeta,
+          getPConnect,
+          rawViewMetadata,
+          contextClass,
+          dataReferenceConfigToChild,
+          isCreateNewReferenceEnabled,
+          disableStartingFieldsForReference,
+          pyID
+        })
+      }
+    });
   }, [firstChildMeta.config?.datasource?.source, parameters, dropDownDataSource, propsToUse.required, propsToUse.disabled]);
 
   // Only include the views region for rendering when it has content
   if (firstChildMeta?.type !== 'Region') {
     const viewsRegion = rawViewMetadata.children[1];
     if (viewsRegion?.name === 'Views' && viewsRegion.children.length) {
+      viewsRegion.children.map(child => {
+        child.config.isEmbeddedInDataReference = true;
+        return child;
+      });
       childrenToRender = [recreatedFirstChild, ...(children as ReactElement[]).slice(1)];
     } else {
       childrenToRender = [recreatedFirstChild];
     }
+  } else if (displayAs === 'advancedSearch') {
+    childrenToRender = [recreatedFirstChild];
   }
 
   return childrenToRender.length === 1 ? (
     (childrenToRender[0] ?? null)
   ) : (
     <div>
-      {childrenToRender.map(child => (
-        <>{child}</>
+      {childrenToRender.map((child, index) => (
+        <React.Fragment key={index}>{child}</React.Fragment>
       ))}
     </div>
   );

package/tests/assets/sdk-r/components/createAll/override-sdk/template/DataReference/DataReferenceAdvancedSearchContext.ts

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+
+const DataReferenceAdvancedSearchContext = createContext({
+  disableStartingFieldsForReference: true,
+  dataReferenceConfigToChild: {
+    selectionMode: 'single'
+  }
+});
+
+export default DataReferenceAdvancedSearchContext;

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

@@ -0,0 +1,149 @@
+import { useState } from 'react';
+import { Tab, Tabs, Typography, RadioGroup, FormControlLabel, Radio, MenuItem, Box, TextField } from '@mui/material';
+import Grid2 from '@mui/material/Grid2';
+import { TabContext, TabPanel } from '@mui/lab';
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
+
+import useGetTabsCount from '@pega/react-sdk-components/lib/hooks/useGetTabsCount';
+import { searchtabsClick, getActiveTabId, getFirstVisibleTabId } from '@pega/react-sdk-components/lib/components/template/SubTabs/tabUtils';
+import { getFieldMeta } from './utils';
+
+const publishEvent = ({ clearSelections, viewName }) => {
+  const payload: any = {};
+
+  if (clearSelections) {
+    payload.clearSelections = clearSelections;
+  }
+
+  if (viewName) {
+    payload.viewName = viewName;
+  }
+
+  PCore.getPubSubUtils().publish('update-advanced-search-selections', payload);
+};
+
+const checkIfSelectionsExist = getPConnect => {
+  const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
+  const { selectionMode, readonlyContextList, contextPage, contextClass, name } = getPConnect().getConfigProps();
+  const isMultiSelectMode = selectionMode === MULTI;
+
+  const dataRelationshipContext = contextClass && name ? name : null;
+
+  const { compositeKeys } = getFieldMeta(getPConnect, dataRelationshipContext);
+
+  let selectionsExist = false;
+  if (isMultiSelectMode) {
+    selectionsExist = readonlyContextList?.length > 0;
+  } else if (contextPage) {
+    selectionsExist = compositeKeys?.filter(key => !['', null, undefined].includes(contextPage[key]))?.length > 0;
+  }
+  return selectionsExist;
+};
+
+const SearchForm = props => {
+  const { children, getPConnect, searchSelectCacheKey } = props;
+
+  const deferLoadedTabs = children[2];
+  const cache: any = PCore.getNavigationUtils().getComponentCache(searchSelectCacheKey) ?? {};
+  const { selectedCategory } = cache;
+  const firstTabId = getFirstVisibleTabId(deferLoadedTabs, selectedCategory);
+  const [open, setOpen] = useState(false);
+  const [currentTabId, setCurrentTabId] = useState(getActiveTabId(deferLoadedTabs.props.getPConnect().getChildren(), firstTabId));
+  const [nextTabId, setNextTabId] = useState(null); // State to store the next tab ID
+  const { getLocaleValue } = PCore.getLocaleUtils();
+
+  // @ts-ignore
+  const { data: tabData } = useGetTabsCount(deferLoadedTabs, 'searchForm', currentTabId);
+
+  const handleTabClick = event => {
+    const tabId: any = event.target.value;
+    const viewName = tabData
+      .find(tab => tab.id === currentTabId)
+      .getPConnect()
+      .getConfigProps().name;
+
+    if (checkIfSelectionsExist(getPConnect)) {
+      setNextTabId(tabId); // Store the next tab ID
+      setOpen(true); // Open the dialog
+    } else {
+      // @ts-ignore
+      publishEvent({ viewName, tabId });
+      searchtabsClick(tabId, tabData, currentTabId, setCurrentTabId);
+    }
+  };
+
+  const clearSelectionAndSwitchTab = () => {
+    const viewName = tabData
+      .find(tab => tab.id === currentTabId)
+      .getPConnect()
+      .getConfigProps().name;
+    publishEvent({ clearSelections: true, viewName });
+    searchtabsClick(nextTabId, tabData, currentTabId, setCurrentTabId);
+    setOpen(false);
+  };
+
+  const onDialogClose = () => {
+    setOpen(false); // Close the dialog
+  };
+
+  const tabItems = tabData?.filter(tab => tab.visibility()) || [];
+  const propsToUse = { ...getPConnect().getInheritedProps() };
+
+  let searchCategoriesComp;
+  if (tabItems.length > 3) {
+    searchCategoriesComp = (
+      <Grid2 container spacing={2}>
+        <TextField value={currentTabId} select onChange={handleTabClick} fullWidth>
+          {tabItems.map(tab => (
+            <MenuItem key={tab.id} value={tab.id}>
+              {tab.name}
+            </MenuItem>
+          ))}
+        </TextField>
+      </Grid2>
+    );
+  } else if (tabItems.length > 1) {
+    searchCategoriesComp = (
+      <RadioGroup row value={currentTabId} onChange={handleTabClick}>
+        {tabItems.map(tab => (
+          <FormControlLabel key={tab.id} value={tab.id} control={<Radio />} label={tab.name} />
+        ))}
+      </RadioGroup>
+    );
+  }
+
+  return (
+    <Box display='flex' flexDirection='column' gap={2}>
+      <Typography variant='h5'>{propsToUse.label}</Typography>
+      {searchCategoriesComp}
+      <TabContext value={currentTabId}>
+        <Tabs style={{ display: 'none' }} value={currentTabId} onChange={(e, newValue) => setCurrentTabId(newValue)}>
+          {tabItems.map(tab => (
+            <Tab key={tab.id} label={tab.name} value={tab.id} />
+          ))}
+        </Tabs>
+        {tabItems.map(tab => (
+          <TabPanel style={{ padding: '0px' }} key={tab.id} value={tab.id}>
+            <div className='search-form'>{tab.content}</div>
+          </TabPanel>
+        ))}
+      </TabContext>
+      <Dialog open={open} onClose={onDialogClose}>
+        <DialogTitle>{getLocaleValue('Discard selections?', 'DataReference')}</DialogTitle>
+        <DialogContent>
+          <div>{getLocaleValue('When changing search categories, any previous selections will be lost.', 'DataReference')}</div>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={onDialogClose} variant='outlined' color='primary'>
+            {getLocaleValue('Go back', 'ModalContainer')}
+          </Button>
+          <Button onClick={clearSelectionAndSwitchTab} variant='contained' color='primary'>
+            {getLocaleValue('Discard', 'ModalContainer')}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  );
+};
+
+export default SearchForm;