@pega/custom-dx-components 0.23.21 → 0.23.23

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyAutocomplete/{index.jsx → index.tsx}

@@ -1,8 +1,10 @@
+
 /* eslint-disable react-hooks/exhaustive-deps */
-import { useEffect, useRef, useState, memo, useMemo } from 'react';
-import { ComboBox, menuHelpers, debounce, throttle, Button, Icon } from '@pega/cosmos-react-core';
+import { useEffect, useRef, useState, memo, useMemo, MutableRefObject, SetStateAction } from 'react';
+import { ComboBox, menuHelpers, debounce, throttle, Button, Icon, MenuGroupProps, MenuItemProps } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
 import get from 'lodash.get';
+import type { PConnFieldProps } from './PConnProps';
 
 // includes in bundle
 import handleEvent from "./event-utils";
@@ -13,41 +15,83 @@ import { flattenParameters } from './picklist-utils.js';
 import { isSelfReferencedProperty, getDescriptorsFieldName } from './repeat-utils.js';
 import { getFieldNameFromEmbeddedFieldName } from './embed-utils.js';
 
-import { usePaginate, useDeepMemo, useIsMount, updatePropertiesForNewRecord } from './utils.js';
+import { usePaginate, useDeepMemo, useIsMount, updatePropertiesForNewRecord } from './utils';
 
 import StyledPegaDxilMyAutocompleteWrapper from './styles';
 
+// interface for props
+interface PegaDxilMyAutocompleteProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+  isTableFormatter?: boolean;
+  hasSuggestions?: boolean;
+  formatter: string;
+  maxResultsDisplay: string;
+  matchPosition: string;
+  listType: string;
+  parameters: any;
+  columns: Array<any>;
+  cacheLifeSpan: string;
+  createNewRecord: any;
+  onRecordChange: any;
+  datasourceMetadata: any;
+  datasource: Array<any>;
+  deferDatasource: boolean;
+  additionalProps: any;
+  referenceType: string;
+  primaryField: string;
+  selected: boolean;
+  actualValue: any;
+  descriptors: any;
+  dataRelationshipContext: any;
+  contextClass: string;
+  isSearchableOnKey: boolean;
+}
 
+interface PegaDxilMyAutocompletePropsSubSet {
+  selected: any;
+  actualValue: any;
+  isTableFormatter?: boolean;
+  formatter: string;
+}
 
-export const preProcessColumns = (columns) => {
-  return columns.map((col) => {
+// interface for StateProps object
+interface StateProps {
+  value: string;
+  hasSuggestions: boolean;
+}
+
+
+export const preProcessColumns = (columns: Array<any>) => {
+  return columns.map(col => {
     const tempColObj = { ...col };
     tempColObj.value = col.value && col.value.startsWith('.') ? col.value.substring(1) : col.value;
     return tempColObj;
   });
 };
 
-export const getDisplayFieldsMetaData = (columns) => {
-  const visibleAndSecondaryColumns = columns.filter((col) => col.display === 'true' || col.secondary === 'true');
+export const getDisplayFieldsMetaData = (columns: Array<any>) => {
+  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');
+  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;
     } else {
       if (visibleAndSecondaryColumns[index].display === 'false') {
-        metaDataObj.hidden.push(visibleAndSecondaryColumns[index].value);
+        metaDataObj.hidden.push(visibleAndSecondaryColumns[index].value as never);
       }
-      metaDataObj.secondary.push(visibleAndSecondaryColumns[index].value);
+      metaDataObj.secondary.push(visibleAndSecondaryColumns[index].value as never);
     }
   }
   return metaDataObj;
 };
 
-export const buildColumnForDisplayValue = (dataObj) => {
+export const buildColumnForDisplayValue = (dataObj: any) => {
   if (dataObj.columns) {
-    dataObj.columns = dataObj.columns.map((column) => {
+    dataObj.columns = dataObj.columns.map((column: any) => {
       const tempColObj = { ...column };
       if (tempColObj.key === 'true') {
         tempColObj.useForSearch = true;
@@ -60,32 +104,46 @@ export const buildColumnForDisplayValue = (dataObj) => {
 };
 
 export const doSearch = (
-  searchText,
-  displayFieldMeta,
-  dataApiObj,
-  setItems,
-  setLoading,
-  hasMoreResults,
+  searchText: string,
+  displayFieldMeta: { key: any; primary: any; secondary: any; hidden: any },
+  dataApiObj: { fetchData?: any; columns?: any; isQueryable?: any; matchPosition?: any },
+  setItems: {
+    (value: SetStateAction<Array<never>>): void;
+    (value: SetStateAction<Array<never>>): void;
+    (value: SetStateAction<Array<never>>): void;
+    (arg0: Array<MenuItemProps | MenuGroupProps>): void;
+  },
+  setLoading: {
+    (value: SetStateAction<boolean>): void;
+    (value: SetStateAction<boolean>): void;
+    (value: SetStateAction<boolean>): void;
+    (arg0: boolean): void;
+  },
+  hasMoreResults: MutableRefObject<boolean>,
   extraProps = {}
 ) => {
   if (dataApiObj && Object.keys(dataApiObj).length > 0 && dataApiObj.fetchData) {
-    let columnsWithSetProperty = [];
+    let columnsWithSetProperty: string | Array<any> = [];
     if (dataApiObj.columns) {
       columnsWithSetProperty = dataApiObj.columns
-        .filter((col) => col.setProperty && col.setProperty !== 'Associated property')
-        .map((col) => {
+        .filter(
+          (col: { setProperty: string }) =>
+            col.setProperty && col.setProperty !== 'Associated property'
+        )
+        .map((col: { value: any }) => {
           return col.value;
         });
     }
     let listObjData = {};
     dataApiObj
       .fetchData(searchText)
-      .then((response) => {
+      .then((response: { data: Array<never> }) => {
         listObjData = response.data || [];
-        const searchedItems = listObjData.map((entry) => {
-          const secondaryArr = [];
-          const secondaryFieldValues = [];
-          displayFieldMeta.secondary.forEach((col) => {
+        // @ts-ignore
+        const searchedItems = listObjData.map((entry: { [x: string]: any }) => {
+          const secondaryArr: Array<any> = [];
+          const secondaryFieldValues: Array<any> = [];
+          displayFieldMeta.secondary.forEach((col: string) => {
             if (!displayFieldMeta.hidden.includes(col)) secondaryArr.push(entry[col]);
             if (columnsWithSetProperty.includes(col)) {
               if (dataApiObj.isQueryable) {
@@ -111,7 +169,7 @@ export const doSearch = (
           setSelected,
           setFilterValue,
           paginateHelperApis
-        } = extraProps;
+        } = extraProps as any;
         if (dataApiObj.isQueryable === false) {
           const progressivePaginatedRecords = paginateHelperApis.getInitialPaginatedRecords(
             searchedItems,
@@ -120,13 +178,15 @@ export const doSearch = (
           const updatedItems = menuHelpers.selectItem(searchedItems, value, AC_TYPE);
           const selectedItem = menuHelpers.getSelected(updatedItems)[0];
           let listIndex = -1;
-          const findSelectedItem = progressivePaginatedRecords.find((record, index) => {
-            if (record.id === selectedItem?.id) {
-              listIndex = index;
-              return true;
+          const findSelectedItem = progressivePaginatedRecords.find(
+            (record: { id: string }, index: number) => {
+              if (record.id === selectedItem?.id) {
+                listIndex = index;
+                return true;
+              }
+              return false;
             }
-            return false;
-          });
+          );
           if (!findSelectedItem && selectedItem) {
             progressivePaginatedRecords.unshift(selectedItem);
           } else if (selectedItem) {
@@ -150,13 +210,13 @@ export const doSearch = (
               if (fetchDisplayValue) {
                 dataApiObj.matchPosition = 'equals';
                 buildColumnForDisplayValue(dataApiObj);
-                dataApiObj.fetchData(value).then((displayResponse) => {
+                dataApiObj.fetchData(value).then((displayResponse: { data: Array<never> }) => {
                   const displayResponseData = displayResponse.data || [];
 
-                  searchedItem = displayResponseData.map((entry) => {
-                    const secondaryArr = [];
-                    const secondaryFieldValues = [];
-                    displayFieldMeta.secondary.forEach((col) => {
+                  searchedItem = displayResponseData.map((entry: { [x: string]: any }) => {
+                    const secondaryArr: Array<any> = [];
+                    const secondaryFieldValues: Array<any> = [];
+                    displayFieldMeta.secondary.forEach((col: string) => {
                       if (!displayFieldMeta.hidden.includes(col)) {
                         secondaryArr.push(entry[col]);
                       }
@@ -164,7 +224,9 @@ export const doSearch = (
                         if (dataApiObj.isQueryable) {
                           secondaryFieldValues.push(entry[col]);
                         } else {
-                          secondaryFieldValues.push(get(entry, getFieldNameFromEmbeddedFieldName(col)));
+                          secondaryFieldValues.push(
+                            get(entry, getFieldNameFromEmbeddedFieldName(col))
+                          );
                         }
                       }
                     });
@@ -175,13 +237,17 @@ 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('');
               }
@@ -209,10 +275,16 @@ export const doSearch = (
   }
 };
 
-export const setValuesToPropertyList = (selectedItem, assocProp, item, columns, actions) => {
+export const setValuesToPropertyList = (
+  selectedItem: any,
+  assocProp: any,
+  item: any,
+  columns: Array<any>,
+  actions: any
+) => {
   const setPropertyList = columns
-    .filter((col) => col.setProperty)
-    .map((col) => {
+    .filter(col => col.setProperty)
+    .map(col => {
       return {
         source: col.value,
         target: col.setProperty,
@@ -221,10 +293,10 @@ export const setValuesToPropertyList = (selectedItem, assocProp, item, columns,
         secondary: col.secondary
       };
     });
-  let valueToSet = null;
+  let valueToSet: any = null;
   if (setPropertyList.length > 0) {
     let secIndex = 0;
-    setPropertyList.forEach((prop) => {
+    setPropertyList.forEach(prop => {
       if (prop.key === 'true' && item) {
         valueToSet = item?.id ?? '';
       } else if (prop.primary === 'true' || !item) {
@@ -250,12 +322,19 @@ export const setValuesToPropertyList = (selectedItem, assocProp, item, columns,
   return valueToSet;
 };
 
-export const setValueToAssocProp = (assocProp, selectedItem, listType, listSource, actions, columns) => {
+export const setValueToAssocProp = (
+  assocProp: any,
+  selectedItem: any,
+  listType: string,
+  listSource: Array<any>,
+  actions: any,
+  columns: Array<any>
+) => {
   let searchedEntry = null;
   let retValue;
   if (listSource && listSource.length > 0 && listSource[0]) {
     searchedEntry = listSource.filter(
-      (item) =>
+      item =>
         item.id &&
         selectedItem?.id &&
         item.id.length === selectedItem?.id.length &&
@@ -271,17 +350,25 @@ export const setValueToAssocProp = (assocProp, selectedItem, listType, listSourc
       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;
 };
 
-const DisplayComponent = (props) => {
+const DisplayComponent = (props: PegaDxilMyAutocompletePropsSubSet) => {
   const { selected, actualValue, isTableFormatter, formatter } = props;
 
   const displayCompValue = selected ? selected.primary : actualValue;
   const formattedValue =
-    isTableFormatter && formatExists(formatter) ? textFormatter(formatter, displayCompValue) : displayCompValue;
+    isTableFormatter && formatExists(formatter)
+      ? textFormatter(formatter, displayCompValue)
+      : displayCompValue;
 
   return formattedValue || <span aria-hidden='true'>&ndash;&ndash;</span>;
 };
@@ -291,7 +378,7 @@ const DisplayComponent = (props) => {
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 // any default values in config.pros should be set in defaultProps at bottom of this file
-const PegaDxilMyAutocomplete = props => {
+export function PegaDxilMyAutocomplete(props: PegaDxilMyAutocompleteProps) {
   const {
     getPConnect,
     value,
@@ -325,7 +412,7 @@ const PegaDxilMyAutocomplete = props => {
   const { isSearchableOnKey } = props;
 
   const [items, setItems] = useState(() => []);
-  let selectItem;
+  let selectItem: ((id: string, ev?: any) => void) | ((arg0: never) => void);
 
   // convert associated to datapage listtype and transform props
   // Process deferDatasource when datapage name is present. WHhen tableType is promptList / localList
@@ -345,7 +432,7 @@ const PegaDxilMyAutocomplete = props => {
     }
     let hasKey = false;
     let hasAPrimaryColumn = false;
-    columns?.forEach((column) => {
+    columns?.forEach(column => {
       if (!hasKey && column.key === 'true') {
         hasKey = true;
       }
@@ -377,9 +464,9 @@ const PegaDxilMyAutocomplete = props => {
 
     // to make the Autosearch Searchable on the key value
     if (isSearchableOnKey) {
-      const existingColObj = columns.filter((col) => col.value === valueProp);
+      const existingColObj = columns.filter(col => col.value === valueProp);
       if (existingColObj) {
-        columns.forEach((col) => {
+        columns.forEach(col => {
           if (col.value === valueProp) {
             col.useForSearch = true;
             col.display = 'true';
@@ -403,7 +490,7 @@ const PegaDxilMyAutocomplete = props => {
   // BUG-547602: Temporary type coercion for 8.5 until DXAPIs are enhanced to pass original pxViewMetadata JSON, respecting boolean primitives
   let { readOnly, required, disabled } = props;
   [readOnly, required, disabled] = [readOnly, required, disabled].map(
-    (prop) => prop === true || (typeof prop === 'string' && prop === 'true')
+    prop => prop === true || (typeof prop === 'string' && prop === 'true')
   );
 
   const AC_TYPE = 'single-select';
@@ -431,12 +518,12 @@ const PegaDxilMyAutocomplete = props => {
   }, [parameters]);
 
   const updatedColumns = useMemo(() => {
-    const isSecondaryColumnAvailable = columns.some((col) => col.secondary === 'true');
+    const isSecondaryColumnAvailable = columns.some(col => col.secondary === 'true');
     if (referenceType === 'Case' && !isSecondaryColumnAvailable) {
-      const valueProp = columns.filter((col) => col.key === 'true')[0].value;
-      const existingColObj = columns.filter((col) => col.value === valueProp);
+      const valueProp = columns.filter(col => col.key === 'true')[0].value;
+      const existingColObj = columns.filter(col => col.value === valueProp);
       if (existingColObj) {
-        columns.forEach((col) => {
+        columns.forEach(col => {
           if (col.value === valueProp) {
             col.display = 'true';
             col.secondary = 'true';
@@ -457,7 +544,7 @@ const PegaDxilMyAutocomplete = props => {
     }
 
     if (descriptors && (referenceType === 'Case' || referenceType === 'Data')) {
-      const descriptorColumns = descriptors.map((item) => {
+      const descriptorColumns = descriptors.map((item: string) => {
         if (isSelfReferencedProperty(item, dataRelationshipContext) && !item.includes('(')) {
           const name = getDescriptorsFieldName(item, contextClass);
           return {
@@ -502,13 +589,16 @@ const PegaDxilMyAutocomplete = props => {
 
   // Rearranging the columns to default columns defined as key to be used as secondary columns for Case references
   useEffect(() => {
-    displayFieldMeta.current = listType !== 'associated' ? getDisplayFieldsMetaData(dataConfig.columns) : null;
+    displayFieldMeta.current =
+      listType !== 'associated'
+        ? getDisplayFieldsMetaData(dataConfig.columns as Array<any>)
+        : ({ key: '', primary: '', secondary: [], hidden: [] } as any);
   }, []);
 
   // Handling setting the combobox list for listType associated use case
   useEffect(() => {
     if (listType === 'associated') {
-      const associatedItems = datasource.map((entry) => {
+      const associatedItems = datasource.map((entry: { key: any; value: any }) => {
         return { id: entry.key, primary: entry.value };
       });
       const updatedItems = menuHelpers.selectItem(associatedItems, value?.toString(), AC_TYPE);
@@ -517,12 +607,14 @@ const PegaDxilMyAutocomplete = props => {
         associatedItems,
         dataConfig.matchPosition
       );
-      const findSelectedItem = initialPaginatedRecords.find((record) => record.id === selectedItem?.id);
+      const findSelectedItem = initialPaginatedRecords.find(
+        (record: { id: string }) => record.id === selectedItem?.id
+      );
       if (!findSelectedItem && selectedItem) {
         initialPaginatedRecords.push(selectedItem);
       }
       setItems(initialPaginatedRecords);
-      setSelected(selectedItem);
+      setSelected(selectedItem as SetStateAction<any>);
       setActualValue(value);
       setFilterValue('');
       inputValueRef.current = '';
@@ -531,7 +623,12 @@ const PegaDxilMyAutocomplete = props => {
 
   useEffect(() => {
     if (!displayMode && listType === 'datapage') {
-      let displayItem = null;
+      let displayItem:
+        | ((prevState: undefined) => undefined)
+        | { id: any; primary: string; secondary: Array<any> }
+        | { id: any; primary: string; secondary?: undefined }
+        | null
+        | undefined = null;
       if (referenceType === 'Case' || referenceType === 'Data') {
         displayItem =
           referenceType === 'Case'
@@ -544,24 +641,32 @@ const PegaDxilMyAutocomplete = props => {
                 id: value,
                 primary: primaryField
               };
-        setSelected(displayItem);
+        setSelected(displayItem as any);
       }
       PCore.getDataApi()
         .init(dataConfig, contextName)
-        .then((dataObj) => {
+        .then(dataObj => {
           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, 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]);
@@ -572,10 +677,11 @@ const PegaDxilMyAutocomplete = props => {
     if (!dataRefMount && !displayMode && listType === 'datapage') {
       PCore.getDataApi()
         .init(dataConfig, contextName)
-        .then((dataObj) => {
+        .then(dataObj => {
           setDataApiObj(dataObj);
           // To avoid calling doSearch if someone types/pastes value before the API call is made
           if (!filterValue) {
+            // @ts-ignore
             if (displayFieldMeta?.current?.key === displayFieldMeta?.current?.primary) {
               const displayItem = {
                 id: value,
@@ -583,12 +689,12 @@ const PegaDxilMyAutocomplete = props => {
                 secondary: [],
                 secondaryFieldValues: []
               };
-              setSelected(displayItem);
+              setSelected(displayItem as any);
               doSearch(
                 '',
                 getDisplayFieldsMetaData(dataConfig.columns),
                 dataObj,
-                setItems,
+                setItems as any,
                 setLoading,
                 hasMoreResults,
                 {
@@ -607,7 +713,7 @@ const PegaDxilMyAutocomplete = props => {
                 '',
                 getDisplayFieldsMetaData(dataConfig.columns),
                 dataObj,
-                setItems,
+                setItems as any,
                 setLoading,
                 hasMoreResults,
                 {
@@ -627,7 +733,7 @@ const PegaDxilMyAutocomplete = props => {
   }, [listType, dataConfig, contextName, value, memoizedParameters]);
 
   useEffect(() => {
-    if (listType === 'datapage' && displayMode?.length > 0 && value !== '') {
+    if (listType === 'datapage' && displayMode && displayMode?.length > 0 && value !== '') {
       let displayItem = null;
       if (referenceType === 'Case' || referenceType === 'Data') {
         displayItem =
@@ -642,7 +748,7 @@ const PegaDxilMyAutocomplete = props => {
                 primary: primaryField
               };
       }
-      setSelected(displayItem);
+      setSelected(displayItem as any);
       setActualValue(value);
     }
   }, [value, primaryField]);
@@ -650,43 +756,52 @@ const PegaDxilMyAutocomplete = props => {
   useEffect(() => {
     if (newRecordCreated) {
       selectItem(newRecordCreated);
-      setNewRecordCreated();
+      setNewRecordCreated(undefined);
     }
   }, [items.length]);
 
   useEffect(() => {
     if (
       listType === 'datapage' &&
+      displayMode &&
       displayMode?.length > 0 &&
       value !== '' &&
       !(referenceType === 'Case' || referenceType === 'Data')
     ) {
       PCore.getDataApi()
         .init(dataConfig, contextName)
-        .then((dataObj) => {
+        .then(dataObj => {
           setDataApiObj(dataObj);
           buildColumnForDisplayValue(dataObj);
           // SET matchPosition to EQUALS to return exact matching record
           dataObj.matchPosition = 'equals';
           dataObj
             .fetchData(value)
-            .then((displayResponse) => {
-              let columnsWithSetProperty = [];
+            .then((displayResponse: { data: Array<never> }) => {
+              let columnsWithSetProperty: string | Array<any> = [];
+              // @ts-ignore
               if (dataApiObj.columns) {
+                // @ts-ignore
                 columnsWithSetProperty = dataApiObj.columns
-                  .filter((col) => col.setProperty && col.setProperty !== 'Associated property')
-                  .map((col) => {
+                  .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) => {
-                const secondaryArr = [];
-                const secondaryFieldValues = [];
-                displayFieldMeta.current.secondary.forEach((col) => {
+              const searchedItem = displayResponseData.map((entry: { [x: string]: any }) => {
+                const secondaryArr: Array<any> = [];
+                const secondaryFieldValues: Array<any> = [];
+                // @ts-ignore
+                displayFieldMeta.current.secondary.forEach((col: string) => {
+                  // @ts-ignore
                   if (!displayFieldMeta.hidden.includes(col)) secondaryArr.push(entry[col]);
                   if (columnsWithSetProperty.includes(col)) {
+                    // @ts-ignore
                     if (dataApiObj.isQueryable) {
                       secondaryFieldValues.push(entry[col]);
                     } else {
@@ -695,13 +810,16 @@ const PegaDxilMyAutocomplete = props => {
                   }
                 });
                 return {
+                  // @ts-ignore
                   id: entry[displayFieldMeta.current.key],
+                  // @ts-ignore
                   primary: entry[displayFieldMeta.current.primary],
                   secondary: secondaryArr,
                   secondaryFieldValues
                 };
               });
 
+              // @ts-ignore
               setSelected(searchedItem[0]);
               setActualValue(value);
               // RESET matchPosition
@@ -716,25 +834,32 @@ const PegaDxilMyAutocomplete = props => {
     }
   }, [listType, dataConfig, contextName, value, memoizedParameters]);
 
+  /* @ts-ignore */
   const clearSelections = () => {
-    setItems((cur) =>
-      menuHelpers.mapTree(cur, (item) => {
+    // @ts-ignore
+    setItems(cur =>
+      menuHelpers.mapTree(cur, item => {
         return {
           ...item,
           selected: false
         };
       })
     );
+    // @ts-ignore
     setSelected(null);
     inputValueRef.current = '';
   };
 
-  const onChangeHandler = (ev) => {
+  const onChangeHandler = (ev: { target: { value: any } }) => {
     if (hasSuggestions) {
+      // @ts-ignore
       pConn.ignoreSuggestion();
       setStatus(undefined);
     }
+
+    // @ts-ignore
     dataApiObj.columns = dataConfig.columns;
+    // @ts-ignore
     dataApiObj.matchPosition = dataConfig.matchPosition;
     const searchText = ev.target.value;
     inputValueRef.current = searchText;
@@ -743,28 +868,59 @@ const PegaDxilMyAutocomplete = props => {
       clearSelections();
     }
     setFilterValue(searchText);
+    // @ts-ignore
     if (listType === 'datapage' && dataApiObj.isQueryable) {
       hasMoreResults.current = true;
       if (searchText.length < 5) {
-        searchHandlerThrottled(searchText, displayFieldMeta.current, dataApiObj, setItems, setLoading, hasMoreResults);
+        searchHandlerThrottled(
+          searchText,
+          // @ts-ignore
+          displayFieldMeta.current,
+          dataApiObj,
+          setItems,
+          setLoading,
+          hasMoreResults
+        );
       } else {
-        searchHandlerDebounced(searchText, displayFieldMeta.current, dataApiObj, setItems, setLoading, hasMoreResults);
+        searchHandlerDebounced(
+          searchText,
+          // @ts-ignore
+          displayFieldMeta.current,
+          dataApiObj,
+          setItems,
+          setLoading,
+          hasMoreResults
+        );
       }
-    } else if (listType === 'associated' || (listType === 'datapage' && dataApiObj?.isQueryable === false)) {
+    } else if (
+      listType === 'associated' ||
+      // @ts-ignore
+      (listType === 'datapage' && dataApiObj?.isQueryable === false)
+    ) {
       paginateHelperApis.resetIndexes();
       const progressivePaginatedRecords = paginateHelperApis.fetchData(
         inputValueRef.current,
         false,
+        // @ts-ignore
         dataApiObj.columns
       );
       setItems(progressivePaginatedRecords);
     }
   };
 
-  const onBlurHandler = (ev) => {
+  const onBlurHandler = (ev: any) => {
+    // @ts-ignore
     if (!ev?.id || ev?.id !== selected?.id) {
-      const assocProp = pConn.getStateProps().value;
-      const propValue = setValueToAssocProp(assocProp, selected || null, listType, items, actions, dataConfig.columns);
+      const stateProps = pConn.getStateProps() as StateProps;
+      const assocProp = stateProps.value;
+      const propValue = setValueToAssocProp(
+        assocProp,
+        selected || null,
+        listType,
+        items,
+        actions,
+        dataConfig.columns
+      );
       if (onRecordChange) {
         onRecordChange(ev, propValue);
       }
@@ -772,10 +928,23 @@ const PegaDxilMyAutocomplete = props => {
 
     setFilterValue('');
     if (!selected && inputValueRef.current !== '') {
+      // @ts-ignore
       if (listType === 'datapage' && dataApiObj.isQueryable) {
         hasMoreResults.current = true;
-        searchHandlerThrottled('', displayFieldMeta.current, dataApiObj, setItems, setLoading, hasMoreResults);
-      } else if (listType === 'associated' || (listType === 'datapage' && dataApiObj?.isQueryable === false)) {
+        searchHandlerThrottled(
+          '',
+          // @ts-ignore
+          displayFieldMeta.current,
+          dataApiObj,
+          setItems,
+          setLoading,
+          hasMoreResults
+        );
+      } else if (
+        listType === 'associated' ||
+        // @ts-ignore
+        (listType === 'datapage' && dataApiObj?.isQueryable === false)
+      ) {
         paginateHelperApis.resetIndexes();
         const progressivePaginatedRecords = paginateHelperApis.fetchData('', false);
         setItems(progressivePaginatedRecords);
@@ -789,11 +958,14 @@ const PegaDxilMyAutocomplete = props => {
   //     : items;
   // }, [filterValue, items, listType]);
 
-  selectItem = (id, ev = {}) => {
+  selectItem = (id: string, ev: any = {}) => {
     const updatedItems = menuHelpers.selectItem(items, id, AC_TYPE);
-    setItems((cur) => menuHelpers.selectItem(cur, id, AC_TYPE));
+    // @ts-ignore
+    setItems(cur => menuHelpers.selectItem(cur, id, AC_TYPE));
+    // @ts-ignore
     setSelected(menuHelpers.getSelected(updatedItems)[0]);
     // const { id: itemId } = menuHelpers.getSelected(updatedItems)[0];
+    // @ts-ignore
     const assocProp = pConn.getStateProps().value;
     const propValue = setValueToAssocProp(
       assocProp,
@@ -811,8 +983,8 @@ const PegaDxilMyAutocomplete = props => {
     }
   };
 
-  const removeDuplicates = (arrayOne, arrayTwo) => {
-    arrayTwo = arrayTwo.filter((item) => {
+  const removeDuplicates = (arrayOne: string | Array<any>, arrayTwo: Array<any>) => {
+    arrayTwo = arrayTwo.filter((item: { id: any }) => {
       for (let i = 0, len = arrayOne.length; i < len; i += 1) {
         if (arrayOne[i].id === item.id) {
           return false;
@@ -825,39 +997,53 @@ const PegaDxilMyAutocomplete = props => {
 
   const loadMore = () => {
     if (
-      (listType === 'associated' || (listType === 'datapage' && dataApiObj?.isQueryable === false)) &&
+      (listType === 'associated' ||
+        // @ts-ignore
+        (listType === 'datapage' && dataApiObj?.isQueryable === false)) &&
       paginateHelperApis.hasMoreResults(inputValueRef.current)
     ) {
       let progressivePaginatedRecords = paginateHelperApis.fetchData(inputValueRef.current, true);
-      setItems((previousItems) => {
+      // @ts-ignore
+      setItems(previousItems => {
         progressivePaginatedRecords = removeDuplicates(previousItems, progressivePaginatedRecords);
         return [...previousItems, ...progressivePaginatedRecords];
       });
+      // @ts-ignore
     } else if (listType === 'datapage' && dataApiObj.isQueryable && hasMoreResults.current) {
       setLoading(true);
       dataApiObj
+        // @ts-ignore
         .fetchPaginatedData(inputValueRef.current)
-        .then((response) => {
+        .then((response: { pageSize: number; data: Array<never> }) => {
           setLoading(false);
+          // @ts-ignore
           if (response.pageSize === 0 || response.pageSize < dataApiObj.pageSize) {
             hasMoreResults.current = false;
           }
           const listObjData = response.data || [];
-          let columnsWithSetProperty = [];
+          let columnsWithSetProperty: string | Array<any> = [];
+          // @ts-ignore
           if (dataApiObj.columns) {
+            // @ts-ignore
             columnsWithSetProperty = dataApiObj.columns
-              .filter((col) => col.setProperty && col.setProperty !== 'Associated property')
-              .map((col) => {
+              .filter(
+                (col: { setProperty: string }) =>
+                  col.setProperty && col.setProperty !== 'Associated property'
+              )
+              .map((col: { value: any }) => {
                 return col.value;
               });
           }
 
-          const searchedItems = listObjData.map((entry) => {
-            const secondaryArr = [];
-            const secondaryFieldValues = [];
-            displayFieldMeta.current.secondary.forEach((col) => {
+          const searchedItems = listObjData.map((entry: { [x: string]: any }) => {
+            const secondaryArr: Array<any> = [];
+            const secondaryFieldValues: Array<any> = [];
+            // @ts-ignore
+            displayFieldMeta.current.secondary.forEach((col: string) => {
+              // @ts-ignore
               if (!displayFieldMeta.current.hidden.includes(col)) secondaryArr.push(entry[col]);
               if (columnsWithSetProperty.includes(col)) {
+                // @ts-ignore
                 if (dataApiObj.isQueryable) {
                   secondaryFieldValues.push(entry[col]);
                 } else {
@@ -866,16 +1052,20 @@ const PegaDxilMyAutocomplete = props => {
               }
             });
             return {
+              // @ts-ignore
               id: entry[displayFieldMeta.current.key],
+              // @ts-ignore
               primary: entry[displayFieldMeta.current.primary],
               secondary: secondaryArr,
               secondaryFieldValues
             };
           });
-          setItems((previousItems) => [...previousItems, ...searchedItems]);
+          // @ts-ignore
+          setItems(previousItems => [...previousItems, ...searchedItems]);
         })
         .catch(() => {
           setLoading(false);
+          // @ts-ignore
           dataApiObj.pageSize -= 1;
         });
     }
@@ -891,7 +1081,7 @@ const PegaDxilMyAutocomplete = props => {
     return displayComponent;
   }
 
-  const onResolveSuggestionHandler = (accepted) => {
+  const onResolveSuggestionHandler = (accepted: boolean) => {
     suggestionsHandler(accepted, pConn, setStatus);
   };
 
@@ -900,11 +1090,13 @@ const PegaDxilMyAutocomplete = props => {
     createNewRecord().then(() => {
       PCore.getPubSubUtils().subscribe(
         CREATE_STAGE_DONE,
-        (data) => {
+        (data: { caseId: string; caseType: string }) => {
           PCore.getDataApi().clearContextedCache(contextName);
           const newCaseId = data.caseId.split(' ').pop();
           if (data.caseType === contextClass && newRecordCreated !== newCaseId) {
+            // @ts-ignore
             if (pConn.isMounted && dataConfig.pageSize > items.length) {
+              // @ts-ignore
               setNewRecordCreated(newCaseId);
             } else {
               updatePropertiesForNewRecord(
@@ -944,6 +1136,7 @@ const PegaDxilMyAutocomplete = props => {
       disabled={disabled}
       placeholder={placeholder}
       selected={{
+        // @ts-ignore
         items: selected ? { text: selected.primary, id: selected.id } : undefined
       }}
       onChange={onChangeHandler}
@@ -952,9 +1145,11 @@ const PegaDxilMyAutocomplete = props => {
         items: menuHelpers.mapTree(items, (item) => ({
           ...item,
           testId: item.id ?? undefined,
+          // @ts-ignore
           selected: item.items ? undefined : !!item.selected || item.id === selected?.id
         })),
         onItemClick: selectItem,
+        // @ts-ignore
         emptyText: pConn.getLocalizedValue('No items'),
         loading,
         loadMore,
@@ -963,6 +1158,7 @@ const PegaDxilMyAutocomplete = props => {
             label={PCore.getLocaleUtils().getLocaleValue('Create new', 'ComponentFields')}
             onClick={createNewButtonHandler}
             variant='link'
+            // @ts-ignore
             compact='true'
           >
             <Icon name='plus' /> {PCore.getLocaleUtils().getLocaleValue('Create new', 'ComponentFields')}
@@ -1038,5 +1234,3 @@ PegaDxilMyAutocomplete.propTypes = {
   isTableFormatter: PropTypes.bool,
   hasSuggestions: PropTypes.bool
 };
-
-// export default PegaDxilMyAutocomplete;