@pega/dx-component-builder-sdk 26.1.10 → 26.1.11

package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MySearchbox/embed-utils.ts

@@ -53,7 +53,7 @@ export function getEmbeddedFieldName(propertyName, classID) {
  * @param {Array} metaFields  Fields metadata Array. Contains metadata of all the fields.
  */
 export function updateMetaEmbeddedFieldID(metaFields) {
-  return metaFields.forEach((metaField) => {
+  return metaFields.forEach(metaField => {
     if (metaField.fieldID?.startsWith(PAGE) || metaField.fieldID?.startsWith(PAGELIST)) {
       metaField.fieldID = getFieldNameFromEmbeddedFieldName(metaField.fieldID);
     }
@@ -70,7 +70,7 @@ export function updateMetaEmbeddedFieldID(metaFields) {
  */
 export function getConfigEmbeddedFieldsMeta(configFields, classID) {
   const configEmbeddedFieldsMeta = [];
-  configFields.forEach((field) => {
+  configFields.forEach(field => {
     let value = field;
     if (isEmbeddedField(value)) {
       // conversion Page.PageList[].property => Page.PageList.property
@@ -94,8 +94,8 @@ export function getConfigEmbeddedFieldsMeta(configFields, classID) {
  */
 export function mergeConfigEmbeddedFieldsMeta(configEmbeddedFieldsMeta, metaFields) {
   const mergedMetaFields = [...metaFields];
-  configEmbeddedFieldsMeta.forEach((configFieldMeta) => {
-    const fieldMeta = metaFields.find((metaField) => metaField.fieldID === configFieldMeta.fieldID);
+  configEmbeddedFieldsMeta.forEach(configFieldMeta => {
+    const fieldMeta = metaFields.find(metaField => metaField.fieldID === configFieldMeta.fieldID);
     if (!fieldMeta) mergedMetaFields.push(configFieldMeta);
   });
   return mergedMetaFields;
@@ -153,7 +153,7 @@ export function preparePropertyValue(value) {
 // FIXME #EmbeddedPropertyPatch
 // TODO: Remove this utility when we have nested response for queryable pageList and supports scalarList component
 export function updatePageListFieldsConfig(configFields) {
-  return configFields.forEach((item) => {
+  return configFields.forEach(item => {
     if (item.type === 'ScalarList') {
       if (!item.config.originalValue) {
         item.config.originalValue = item.config.value;
@@ -167,7 +167,7 @@ export function updatePageListFieldsConfig(configFields) {
  * Update the renderer type for the properties of type Page.
  */
 export function updatePageFieldsConfig(configFields, parentClassID) {
-  return configFields.forEach((item) => {
+  return configFields.forEach(item => {
     const {
       type,
       config: { value }
@@ -257,7 +257,7 @@ export function preparePropertyMaps(fields, classID, context) {
 export function getPageListFields(fields) {
   const parentPaths = new Set();
   const pageListFields = [];
-  fields.forEach((field) => {
+  fields.forEach(field => {
     const { name } = field;
     if (isPageListProperty(name)) {
       const parentPath = name.substring(0, name.lastIndexOf(':'));
@@ -285,7 +285,7 @@ export function mergePageListFieldsAggregation(fields, select, existingAggregati
   const parentPaths = new Set();
   const existingAggregationsName = Object.keys(existingAggregations).toString();
   const pageListFields = [];
-  fields.forEach((field) => {
+  fields.forEach(field => {
     const { name } = field;
     if (isPageListProperty(name)) {
       const parentPath = name.substring(0, name.lastIndexOf(':'));
@@ -307,5 +307,5 @@ export function mergePageListFieldsAggregation(fields, select, existingAggregati
  * @returns {object | undefined} value of first pageListProperty found
  */
 export function hasPageListProperty(fieldDefs) {
-  return fieldDefs?.find((field) => isPageListProperty(field.name));
+  return fieldDefs?.find(field => isPageListProperty(field.name));
 }

package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MySearchbox/index.tsx

@@ -1,11 +1,21 @@
 import { useEffect, useRef, useState, useMemo, type MutableRefObject, type SetStateAction } from 'react';
-import { ComboBox, menuHelpers, debounce, throttle, Button, Icon, withConfiguration, type MenuGroupProps, type MenuItemProps } from '@pega/cosmos-react-core';
+import {
+  ComboBox,
+  menuHelpers,
+  debounce,
+  throttle,
+  Button,
+  Icon,
+  withConfiguration,
+  type MenuGroupProps,
+  type MenuItemProps
+} from '@pega/cosmos-react-core';
 import get from 'lodash.get';
 import type { PConnFieldProps } from './PConnProps';
 import './create-nonce';
 
 // includes in bundle
-import handleEvent from "./event-utils";
+import handleEvent from './event-utils';
 import { suggestionsHandler } from './suggestions-handler';
 
 import { formatExists, textFormatter } from './textformat-utils';
@@ -58,7 +68,6 @@ interface StateProps {
   hasSuggestions: boolean;
 }
 
-
 export const preProcessColumns = (columns: Array<any>) => {
   return columns.map(col => {
     const tempColObj = { ...col };
@@ -68,20 +77,18 @@ export const preProcessColumns = (columns: Array<any>) => {
 };
 
 export const getDisplayFieldsMetaData = (columns: Array<any>) => {
-  const visibleAndSecondaryColumns = columns.filter(
-    col => col.display === 'true' || col.secondary === 'true'
-  );
+  const visibleAndSecondaryColumns = columns.filter(col => col.display === 'true' || col.secondary === 'true');
   const metaDataObj = { key: '', primary: '', secondary: [], hidden: [] };
   const keyCol = columns.filter(col => col.key === 'true');
   metaDataObj.key = keyCol.length > 0 ? keyCol[0].value : 'auto';
-  for (let index = 0; index < visibleAndSecondaryColumns.length; index += 1) {
-    if (visibleAndSecondaryColumns[index].primary === 'true') {
-      metaDataObj.primary = visibleAndSecondaryColumns[index].value;
+  for (const column of visibleAndSecondaryColumns) {
+    if (column.primary === 'true') {
+      metaDataObj.primary = column.value;
     } else {
-      if (visibleAndSecondaryColumns[index].display === 'false') {
-        metaDataObj.hidden.push(visibleAndSecondaryColumns[index].value as never);
+      if (column.display === 'false') {
+        metaDataObj.hidden.push(column.value as never);
       }
-      metaDataObj.secondary.push(visibleAndSecondaryColumns[index].value as never);
+      metaDataObj.secondary.push(column.value as never);
     }
   }
   return metaDataObj;
@@ -124,10 +131,7 @@ export const doSearch = (
     let columnsWithSetProperty: string | Array<any> = [];
     if (dataApiObj.columns) {
       columnsWithSetProperty = dataApiObj.columns
-        .filter(
-          (col: { setProperty: string }) =>
-            col.setProperty && col.setProperty !== 'Associated property'
-        )
+        .filter((col: { setProperty: string }) => col.setProperty && col.setProperty !== 'Associated property')
         .map((col: { value: any }) => {
           return col.value;
         });
@@ -138,7 +142,7 @@ export const doSearch = (
       .then((response: { data: Array<never> }) => {
         listObjData = response.data || [];
         // @ts-ignore
-        const searchedItems = listObjData.map((entry: { [x: string]: any }) => {
+        const searchedItems = listObjData.map((entry: Record<string, any>) => {
           const secondaryArr: Array<any> = [];
           const secondaryFieldValues: Array<any> = [];
           displayFieldMeta.secondary.forEach((col: string) => {
@@ -159,33 +163,20 @@ export const doSearch = (
           };
         });
         hasMoreResults.current = true;
-        const {
-          fetchDisplayValue,
-          displayItem,
-          value,
-          AC_TYPE,
-          setSelected,
-          setFilterValue,
-          paginateHelperApis
-        } = extraProps as any;
+        const { fetchDisplayValue, displayItem, value, AC_TYPE, setSelected, setFilterValue, paginateHelperApis } = extraProps as any;
         if (dataApiObj.isQueryable === false) {
-          const progressivePaginatedRecords = paginateHelperApis.getInitialPaginatedRecords(
-            searchedItems,
-            dataApiObj.matchPosition
-          );
+          const progressivePaginatedRecords = paginateHelperApis.getInitialPaginatedRecords(searchedItems, dataApiObj.matchPosition);
           const updatedItems = menuHelpers.selectItem(searchedItems, value, AC_TYPE);
           const selectedItem = menuHelpers.getSelected(updatedItems)[0];
           let listIndex = -1;
-          const findSelectedItem = progressivePaginatedRecords.find(
-            (record: { id: string }, index: number) => {
-              // @ts-ignore
-              if (record.id === selectedItem?.id) {
-                listIndex = index;
-                return true;
-              }
-              return false;
+          const findSelectedItem = progressivePaginatedRecords.find((record: { id: string }, index: number) => {
+            // @ts-ignore
+            if (record.id === selectedItem?.id) {
+              listIndex = index;
+              return true;
             }
-          );
+            return false;
+          });
           if (!findSelectedItem && selectedItem) {
             progressivePaginatedRecords.unshift(selectedItem);
           } else if (selectedItem) {
@@ -212,7 +203,7 @@ export const doSearch = (
                 dataApiObj.fetchData(value).then((displayResponse: { data: Array<never> }) => {
                   const displayResponseData = displayResponse.data || [];
 
-                  searchedItem = displayResponseData.map((entry: { [x: string]: any }) => {
+                  searchedItem = displayResponseData.map((entry: Record<string, any>) => {
                     const secondaryArr: Array<any> = [];
                     const secondaryFieldValues: Array<any> = [];
                     displayFieldMeta.secondary.forEach((col: string) => {
@@ -223,9 +214,7 @@ export const doSearch = (
                         if (dataApiObj.isQueryable) {
                           secondaryFieldValues.push(entry[col]);
                         } else {
-                          secondaryFieldValues.push(
-                            get(entry, getFieldNameFromEmbeddedFieldName(col))
-                          );
+                          secondaryFieldValues.push(get(entry, getFieldNameFromEmbeddedFieldName(col)));
                         }
                       }
                     });
@@ -236,17 +225,13 @@ export const doSearch = (
                       secondaryFieldValues
                     };
                   });
-                  setItems(
-                    menuHelpers.selectItem([...searchedItem, ...searchedItems], value, AC_TYPE)
-                  );
+                  setItems(menuHelpers.selectItem([...searchedItem, ...searchedItems], value, AC_TYPE));
                   setSelected(searchedItem[0]);
                   setFilterValue('');
                 });
               } else if (displayItem) {
                 searchedItem = [displayItem];
-                setItems(
-                  menuHelpers.selectItem([...searchedItem, ...searchedItems], value, AC_TYPE)
-                );
+                setItems(menuHelpers.selectItem([...searchedItem, ...searchedItems], value, AC_TYPE));
                 setSelected(searchedItem[0]);
                 setFilterValue('');
               }
@@ -274,13 +259,7 @@ export const doSearch = (
   }
 };
 
-export const setValuesToPropertyList = (
-  selectedItem: any,
-  assocProp: any,
-  item: any,
-  columns: Array<any>,
-  actions: any
-) => {
+export const setValuesToPropertyList = (selectedItem: any, assocProp: any, item: any, columns: Array<any>, actions: any) => {
   const setPropertyList = columns
     .filter(col => col.setProperty)
     .map(col => {
@@ -304,10 +283,7 @@ export const setValuesToPropertyList = (
       if (prop.target === 'Associated property') {
         handleEvent(actions, 'changeNblur', assocProp, valueToSet);
       } else {
-        actions.updateFieldValue(
-          `.${prop.target.startsWith('.') ? prop.target.substring(1) : prop.target}`,
-          item?.secondaryFieldValues[secIndex]
-        );
+        actions.updateFieldValue(`.${prop.target.startsWith('.') ? prop.target.substring(1) : prop.target}`, item?.secondaryFieldValues[secIndex]);
         actions.triggerFieldChange(
           `.${prop.target.startsWith('.') ? prop.target.substring(1) : prop.target}`,
           item?.secondaryFieldValues[secIndex],
@@ -349,13 +325,7 @@ export const setValueToAssocProp = (
       handleEvent(actions, 'changeNblur', assocProp, selectedItem?.id);
     }
   } else if (listType === 'datapage') {
-    retValue = setValuesToPropertyList(
-      selectedItem,
-      assocProp,
-      searchedEntry?.[0],
-      columns,
-      actions
-    );
+    retValue = setValuesToPropertyList(selectedItem, assocProp, searchedEntry?.[0], columns, actions);
   }
   return retValue;
 };
@@ -364,15 +334,11 @@ const DisplayComponent = (props: PegaDxilMySearchboxPropsSubSet) => {
   const { selected, actualValue, isTableFormatter, formatter } = props;
 
   const displayCompValue = selected ? selected.primary : actualValue;
-  const formattedValue =
-    isTableFormatter && formatExists(formatter)
-      ? textFormatter(formatter, displayCompValue)
-      : displayCompValue;
+  const formattedValue = isTableFormatter && formatExists(formatter) ? textFormatter(formatter, displayCompValue) : displayCompValue;
 
   return formattedValue || <span aria-hidden='true'>&ndash;&ndash;</span>;
 };
 
-
 // Duplicated runtime code from Constellation Design System Component
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
@@ -489,15 +455,13 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
 
   // BUG-547602: Temporary type coercion for 8.5 until DXAPIs are enhanced to pass original pxViewMetadata JSON, respecting boolean primitives
   let { readOnly = false, required = false, disabled = false } = props;
-  [readOnly, required, disabled] = [readOnly, required, disabled].map(
-    prop => prop === true || (typeof prop === 'string' && prop === 'true')
-  );
+  [readOnly, required, disabled] = [readOnly, required, disabled].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
 
   const AC_TYPE = 'single-select';
   const pConn = getPConnect();
   const contextName = getPConnect().getContextName();
   const actions = pConn.getActionsApi();
-  const [dataApiObj, setDataApiObj] = useState(() => ({} as any));
+  const [dataApiObj, setDataApiObj] = useState(() => ({}) as any);
   const [filterValue, setFilterValue] = useState('');
   const [loading, setLoading] = useState(listType !== 'associated');
   // const selected = useMemo(() => menuHelpers.getSelected(items)[0], [items]);
@@ -603,13 +567,8 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
       });
       const updatedItems = menuHelpers.selectItem(associatedItems, value?.toString(), AC_TYPE);
       const selectedItem = menuHelpers.getSelected(updatedItems)[0];
-      const initialPaginatedRecords = paginateHelperApis.getInitialPaginatedRecords(
-        associatedItems,
-        dataConfig.matchPosition
-      );
-      const findSelectedItem = initialPaginatedRecords.find(
-        (record: { id: string }) => record.id === selectedItem?.id
-      );
+      const initialPaginatedRecords = paginateHelperApis.getInitialPaginatedRecords(associatedItems, dataConfig.matchPosition);
+      const findSelectedItem = initialPaginatedRecords.find((record: { id: string }) => record.id === selectedItem?.id);
       if (!findSelectedItem && selectedItem) {
         initialPaginatedRecords.push(selectedItem);
       }
@@ -649,24 +608,16 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
           setDataApiObj(dataObj);
           // To avoid calling doSearch if someone types/pastes value before the API call is made
           if (!filterValue)
-            doSearch(
-              '',
-              getDisplayFieldsMetaData(dataConfig.columns),
-              dataObj,
-              setItems as any,
-              setLoading,
-              hasMoreResults,
-              {
-                fetchDisplayValue: false,
-                value,
-                displayItem,
-                AC_TYPE,
-                setSelected,
-                setFilterValue,
-                paginateHelperApis,
-                pConn
-              }
-            );
+            doSearch('', getDisplayFieldsMetaData(dataConfig.columns), dataObj, setItems as any, setLoading, hasMoreResults, {
+              fetchDisplayValue: false,
+              value,
+              displayItem,
+              AC_TYPE,
+              setSelected,
+              setFilterValue,
+              paginateHelperApis,
+              pConn
+            });
         });
     }
   }, [value, primaryField, newRecordCreated]);
@@ -689,42 +640,26 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
                 secondaryFieldValues: []
               };
               setSelected(displayItem as any);
-              doSearch(
-                '',
-                getDisplayFieldsMetaData(dataConfig.columns),
-                dataObj,
-                setItems as any,
-                setLoading,
-                hasMoreResults,
-                {
-                  fetchDisplayValue: false,
-                  value,
-                  displayItem,
-                  AC_TYPE,
-                  setSelected,
-                  setFilterValue,
-                  paginateHelperApis,
-                  pConn
-                }
-              );
+              doSearch('', getDisplayFieldsMetaData(dataConfig.columns), dataObj, setItems as any, setLoading, hasMoreResults, {
+                fetchDisplayValue: false,
+                value,
+                displayItem,
+                AC_TYPE,
+                setSelected,
+                setFilterValue,
+                paginateHelperApis,
+                pConn
+              });
             } else {
-              doSearch(
-                '',
-                getDisplayFieldsMetaData(dataConfig.columns),
-                dataObj,
-                setItems as any,
-                setLoading,
-                hasMoreResults,
-                {
-                  fetchDisplayValue: true,
-                  value,
-                  AC_TYPE,
-                  setSelected,
-                  setFilterValue,
-                  paginateHelperApis,
-                  pConn
-                }
-              );
+              doSearch('', getDisplayFieldsMetaData(dataConfig.columns), dataObj, setItems as any, setLoading, hasMoreResults, {
+                fetchDisplayValue: true,
+                value,
+                AC_TYPE,
+                setSelected,
+                setFilterValue,
+                paginateHelperApis,
+                pConn
+              });
             }
           }
         });
@@ -780,17 +715,14 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
               let columnsWithSetProperty: string | Array<any> = [];
               if (dataApiObj.columns) {
                 columnsWithSetProperty = dataApiObj.columns
-                  .filter(
-                    (col: { setProperty: string }) =>
-                      col.setProperty && col.setProperty !== 'Associated property'
-                  )
+                  .filter((col: { setProperty: string }) => col.setProperty && col.setProperty !== 'Associated property')
                   .map((col: { value: any }) => {
                     return col.value;
                   });
               }
               const displayResponseData = displayResponse.data || [];
 
-              const searchedItem = displayResponseData.map((entry: { [x: string]: any }) => {
+              const searchedItem = displayResponseData.map((entry: Record<string, any>) => {
                 const secondaryArr: Array<any> = [];
                 const secondaryFieldValues: Array<any> = [];
                 displayFieldMeta.current.secondary.forEach((col: string) => {
@@ -881,16 +813,9 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
           hasMoreResults
         );
       }
-    } else if (
-      listType === 'associated' ||
-      (listType === 'datapage' && dataApiObj?.isQueryable === false)
-    ) {
+    } else if (listType === 'associated' || (listType === 'datapage' && dataApiObj?.isQueryable === false)) {
       paginateHelperApis.resetIndexes();
-      const progressivePaginatedRecords = paginateHelperApis.fetchData(
-        inputValueRef.current,
-        false,
-        dataApiObj.columns
-      );
+      const progressivePaginatedRecords = paginateHelperApis.fetchData(inputValueRef.current, false, dataApiObj.columns);
       setItems(progressivePaginatedRecords);
     }
   };
@@ -900,14 +825,7 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
     if (!ev?.id || ev?.id !== selected?.id) {
       const stateProps = pConn.getStateProps() as StateProps;
       const assocProp = stateProps.value;
-      const propValue = setValueToAssocProp(
-        assocProp,
-        selected || null,
-        listType,
-        items,
-        actions,
-        dataConfig.columns
-      );
+      const propValue = setValueToAssocProp(assocProp, selected || null, listType, items, actions, dataConfig.columns);
       if (onRecordChange) {
         onRecordChange(ev, propValue);
       }
@@ -926,10 +844,7 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
           setLoading,
           hasMoreResults
         );
-      } else if (
-        listType === 'associated' ||
-        (listType === 'datapage' && dataApiObj?.isQueryable === false)
-      ) {
+      } else if (listType === 'associated' || (listType === 'datapage' && dataApiObj?.isQueryable === false)) {
         paginateHelperApis.resetIndexes();
         const progressivePaginatedRecords = paginateHelperApis.fetchData('', false);
         setItems(progressivePaginatedRecords);
@@ -951,14 +866,7 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
     setSelected(menuHelpers.getSelected(updatedItems)[0]);
     // const { id: itemId } = menuHelpers.getSelected(updatedItems)[0];
     const assocProp = pConn.getStateProps().value;
-    const propValue = setValueToAssocProp(
-      assocProp,
-      menuHelpers.getSelected(updatedItems)[0],
-      listType,
-      updatedItems,
-      actions,
-      dataConfig.columns
-    );
+    const propValue = setValueToAssocProp(assocProp, menuHelpers.getSelected(updatedItems)[0], listType, updatedItems, actions, dataConfig.columns);
     setFilterValue('');
     inputValueRef.current = '';
     if (onRecordChange) {
@@ -981,8 +889,7 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
 
   const loadMore = () => {
     if (
-      (listType === 'associated' ||
-        (listType === 'datapage' && dataApiObj?.isQueryable === false)) &&
+      (listType === 'associated' || (listType === 'datapage' && dataApiObj?.isQueryable === false)) &&
       paginateHelperApis.hasMoreResults(inputValueRef.current)
     ) {
       let progressivePaginatedRecords = paginateHelperApis.fetchData(inputValueRef.current, true);
@@ -1004,16 +911,13 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
           let columnsWithSetProperty: string | Array<any> = [];
           if (dataApiObj.columns) {
             columnsWithSetProperty = dataApiObj.columns
-              .filter(
-                (col: { setProperty: string }) =>
-                  col.setProperty && col.setProperty !== 'Associated property'
-              )
+              .filter((col: { setProperty: string }) => col.setProperty && col.setProperty !== 'Associated property')
               .map((col: { value: any }) => {
                 return col.value;
               });
           }
 
-          const searchedItems = listObjData.map((entry: { [x: string]: any }) => {
+          const searchedItems = listObjData.map((entry: Record<string, any>) => {
             const secondaryArr: Array<any> = [];
             const secondaryFieldValues: Array<any> = [];
             displayFieldMeta.current.secondary.forEach((col: string) => {
@@ -1044,9 +948,11 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
   };
 
   const displayComponent = useMemo(() => {
-    return <StyledPegaDxilMySearchboxWrapper>
-    <DisplayComponent {...{ selected, actualValue, isTableFormatter, formatter }} />
-    </StyledPegaDxilMySearchboxWrapper>;
+    return (
+      <StyledPegaDxilMySearchboxWrapper>
+        <DisplayComponent {...{ selected, actualValue, isTableFormatter, formatter }} />
+      </StyledPegaDxilMySearchboxWrapper>
+    );
   }, [selected, actualValue, isTableFormatter, formatter]);
 
   if (displayMode) {
@@ -1071,17 +977,7 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
               // @ts-ignore
               setNewRecordCreated(newCaseId);
             } else {
-              updatePropertiesForNewRecord(
-                dataConfig,
-                contextName,
-                dataApiObj,
-                setDataApiObj,
-                displayFieldMeta,
-                pConn,
-                columns,
-                actions,
-                newCaseId
-              );
+              updatePropertiesForNewRecord(dataConfig, contextName, dataApiObj, setDataApiObj, displayFieldMeta, pConn, columns, actions, newCaseId);
             }
 
             PCore.getPubSubUtils().unsubscribe(CREATE_STAGE_DONE, contextClass);
@@ -1092,59 +988,57 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
     });
   };
 
-
   return (
     <StyledPegaDxilMySearchboxWrapper>
-    <ComboBox
-      {...additionalProps}
-      testId={testId ?? label}
-      info={validatemessage || helperText}
-      status={status}
-      value={filterValue}
-      label={label}
-      labelHidden={hideLabel}
-      readOnly={readOnly}
-      required={required}
-      disabled={disabled}
-      placeholder={placeholder}
-      selected={{
-        // @ts-ignore
-        items: selected ? { text: selected.primary, id: selected.id } : undefined
-      }}
-      onChange={onChangeHandler}
-      onBlur={onBlurHandler}
-      menu={{
-        // @ts-ignore
-        items: menuHelpers.mapTree(items, (item) => ({
-          // @ts-ignore
-          ...item,
+      <ComboBox
+        {...additionalProps}
+        testId={testId ?? label}
+        info={validatemessage || helperText}
+        status={status}
+        value={filterValue}
+        label={label}
+        labelHidden={hideLabel}
+        readOnly={readOnly}
+        required={required}
+        disabled={disabled}
+        placeholder={placeholder}
+        selected={{
           // @ts-ignore
-          testId: item.id ?? undefined,
+          items: selected ? { text: selected.primary, id: selected.id } : undefined
+        }}
+        onChange={onChangeHandler}
+        onBlur={onBlurHandler}
+        menu={{
           // @ts-ignore
-          selected: item.items ? undefined : !!item.selected || item.id === selected?.id
-        })),
-        onItemClick: selectItem,
-        emptyText: pConn.getLocalizedValue('No items'),
-        loading,
-        loadMore,
-        footer: createNewRecord ? (
-          <Button
-            label={PCore.getLocaleUtils().getLocaleValue('Create new', 'ComponentFields')}
-            onClick={createNewButtonHandler}
-            variant='link'
+          items: menuHelpers.mapTree(items, item => ({
+            // @ts-ignore
+            ...item,
             // @ts-ignore
-            compact='true'
-          >
-            <Icon name='plus' /> {PCore.getLocaleUtils().getLocaleValue('Create new', 'ComponentFields')}
-          </Button>
-        ) : undefined
-      }}
-      mode={AC_TYPE}
-      onResolveSuggestion={onResolveSuggestionHandler}
-    />
+            testId: item.id ?? undefined,
+            // @ts-ignore
+            selected: item.items ? undefined : !!item.selected || item.id === selected?.id
+          })),
+          onItemClick: selectItem,
+          emptyText: pConn.getLocalizedValue('No items'),
+          loading,
+          loadMore,
+          footer: createNewRecord ? (
+            <Button
+              label={PCore.getLocaleUtils().getLocaleValue('Create new', 'ComponentFields')}
+              onClick={createNewButtonHandler}
+              variant='link'
+              // @ts-ignore
+              compact='true'
+            >
+              <Icon name='plus' /> {PCore.getLocaleUtils().getLocaleValue('Create new', 'ComponentFields')}
+            </Button>
+          ) : undefined
+        }}
+        mode={AC_TYPE}
+        onResolveSuggestion={onResolveSuggestionHandler}
+      />
     </StyledPegaDxilMySearchboxWrapper>
   );
 }
 
-
 export default withConfiguration(PegaDxilMySearchbox);