react-core-ts 1.3.32 → 1.3.34

package/src/AutoCompleteWithSelectedList.tsx

@@ -1,11 +1,4 @@
-import React, {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 
 import { AutoSuggestionInputProps, TabPops, ValueProps } from './commontypes';
@@ -73,9 +66,9 @@ const AutoCompleteWithSelectedList = forwardRef<
     const dropdownRef = useRef<HTMLDivElement>(null);
     const dropdownSelectedRef = useRef<HTMLDivElement>(null);
     const tabRef = useRef<HTMLUListElement>(null);
+    const dropLevelRef = useRef<string>('bottom');
     // State Hooks Section
     const [isInitialRender, setIsInitialRender] = useState(true);
-
     const [inputValue, setInputValue] = useState<string>(value);
     const [searchValue, setSearchValue] = useState<string>('');
     const [searchOldValue, setSearchOldValue] = useState<string>('');
@@ -121,9 +114,11 @@ const AutoCompleteWithSelectedList = forwardRef<
           if (tabRef?.current) dropdownHeight += tabRef?.current?.clientHeight;
         }
         if (spaceBelow >= dropdownHeight) {
+          dropLevelRef.current = 'bottom';
           dropdownPosition.top =
             inputRect.top + window.scrollY + inputRect.height;
         } else {
+          dropLevelRef.current = 'top';
           dropdownPosition.top =
             inputRect.top + window.scrollY - dropdownHeight + 73 + topMargin;
         }
@@ -514,8 +509,8 @@ const AutoCompleteWithSelectedList = forwardRef<
       );
     };
     useEffect(() => {
-      handleUpdateParent?.(dropOpen);
-    }, [dropOpen]);
+      handleUpdateParent?.(dropOpen, dropLevelRef.current)
+    }, [dropOpen, dropLevelRef.current]);
     return (
       <div className={fullWidth ? 'fullWidth' : 'autoWidth'} ref={dropdownRef}>
         {label && (

package/src/AutoCompleteWithTreeStructure.tsx

@@ -1,11 +1,4 @@
-import React, {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 
 import { AutoSuggestionInputProps } from './commontypes';
@@ -80,7 +73,7 @@ const AutoCompleteWithTreeStructure = forwardRef<
     const [dropDownData, setDropDownData] = useState<ValueProps[]>(data);
     const inputRef = useRef(null);
     const dropRef = useRef(null);
-
+    const dropLevelRef = useRef<string>('bottom');
     useEffect(() => {
       if (data) {
         if (flatArray) {
@@ -91,6 +84,7 @@ const AutoCompleteWithTreeStructure = forwardRef<
       }
     }, [data, dropOpen]);
     useImperativeHandle(ref, () => inputRef.current);
+
     const [dropdownStyle, setDropdownStyle] = useState({
       top: 0,
       left: 0,
@@ -113,9 +107,11 @@ const AutoCompleteWithTreeStructure = forwardRef<
         if (spaceBelow >= dropdownHeight) {
           dropdownPosition.top =
             inputRect.top + window.scrollY + inputRect.height;
+          dropLevelRef.current = 'bottom';
         } else {
           dropdownPosition.top =
             inputRect.top + window.scrollY - dropdownHeight + 73;
+          dropLevelRef.current = 'top';
         }
 
         setDropdownStyle({
@@ -210,8 +206,8 @@ const AutoCompleteWithTreeStructure = forwardRef<
       }
     };
     useEffect(() => {
-      handleUpdateParent?.(dropOpen);
-    }, [dropOpen]);
+      handleUpdateParent?.(dropOpen, dropLevelRef.current)
+    }, [dropOpen, dropLevelRef.current]);
     const generateClassName = useCallback(() => {
       return `qbs-textfield-default ${className} ${
         errors && errors?.message ? 'textfield-error' : 'tree-textfield'

package/src/ReactAutoComplete.tsx

@@ -1,12 +1,12 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { FieldErrors } from 'react-hook-form';
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { FieldErrors } from "react-hook-form";
 
-import CustomIcons from './components/customIcons';
-import Spinner from './components/loader/Spinner';
-import Portal from './components/portal';
-import { debounce } from './utilities/debounce';
-import { applyPositionClass } from './utilities/getPosition';
-import { DropArrow } from './utilities/icons';
+import CustomIcons from "./components/customIcons";
+import Spinner from "./components/loader/Spinner";
+import Portal from "./components/portal";
+import { debounce } from "./utilities/debounce";
+import { applyPositionClass } from "./utilities/getPosition";
+import { DropArrow } from "./utilities/icons";
 
 type valueProps = {
   id?: string | number;
@@ -30,7 +30,7 @@ interface AutoSuggestionInputProps {
   value?: valueProps;
   onChange: (value?: valueProps) => void;
   data?: any[];
-  type?: 'custom_select' | 'auto_complete' | 'custom_search_select';
+  type?: "custom_select" | "auto_complete" | "custom_search_select";
   placeholder?: string;
   getData?: ((key?: string) => Promise<any>) | ((key?: string) => any);
   errors?: FieldErrors;
@@ -66,7 +66,7 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
   placeholder,
   id,
   className: propsClassName,
-  type = 'custom_select',
+  type = "custom_select",
   readOnly,
   disabled = false,
   value,
@@ -83,7 +83,7 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
   labelTitle,
   isModern = true,
 }) => {
-  const [inputValue, setInputValue] = useState<any>(value?.name ?? '');
+  const [inputValue, setInputValue] = useState<any>(value?.name ?? "");
   const [isHovered, setIsHovered] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [dropOpen, setDropOpen] = useState<boolean>(false);
@@ -96,6 +96,7 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
   const adorementRef = useRef<HTMLDivElement>(null);
   const dropdownref = useRef<HTMLDivElement>(null);
   const dropBtnRef = useRef<HTMLButtonElement>(null);
+  const timerRef = useRef<number>(0); // To fix the no results found issue on second type
   const [dropPosition, setDropPosition] = useState<any>({
     top: 0,
     left: 0,
@@ -116,8 +117,8 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
     ) => {
       return substring &&
         mainString &&
-        typeof mainString === 'string' &&
-        typeof subString === 'string'
+        typeof mainString === "string" &&
+        typeof subString === "string"
         ? mainString
             .toString()
             .toLowerCase()
@@ -132,25 +133,26 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
     return (
       checkIncludesIfExists(mainString, subString) ||
       (!!checkParams &&
-        ((checkArrayContains(checkParams, 'param1') &&
+        ((checkArrayContains(checkParams, "param1") &&
           checkIncludesIfExists(param1, subString)) ||
-          (checkArrayContains(checkParams, 'param2') &&
+          (checkArrayContains(checkParams, "param2") &&
             checkIncludesIfExists(param2, subString)) ||
-          (checkArrayContains(checkParams, 'param3') &&
+          (checkArrayContains(checkParams, "param3") &&
             checkIncludesIfExists(param3, subString)) ||
-          (checkArrayContains(checkParams, 'param4') &&
+          (checkArrayContains(checkParams, "param4") &&
             checkIncludesIfExists(param4, subString))))
     );
   };
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = event.target;
+    timerRef.current = 0;
 
     setInputValue(value);
     handleValChange(value);
     if (!value) {
-      setInputValue('');
-      onChange({ id: undefined, name: '', from: 2 });
+      setInputValue("");
+      onChange({ id: undefined, name: "", from: 2 });
     }
   };
 
@@ -158,28 +160,31 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
     debounce(
       (value: string) => {
         setDropOpen(true);
-        onChange({ id: undefined, name: '', from: 1 });
-        if (value.trim() === '' && type === 'auto_complete') {
+        onChange({ id: undefined, name: "", from: 1 });
+        if (value.trim() === "" && type === "auto_complete") {
           setSuggestions([]);
           if (autoFilter) {
-            handleDropData('*');
+            handleDropData("*");
           } else {
             setDropOpen(false);
           }
         } else {
           handleDropData(value);
         }
+        setTimeout(() => {
+          timerRef.current = 1;
+        }, 200);
       },
       isStaticList ? 0 : 1000
     ),
     []
   );
   const handleDropData = (value?: string) => {
-    if (type === 'auto_complete') {
+    if (type === "auto_complete") {
       if (isStaticList) {
         loadStaticData();
         const filteredData =
-          value && value !== '*'
+          value && value !== "*"
             ? data?.filter((item) =>
                 checkIncludes(
                   item.name,
@@ -193,13 +198,13 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
         setSuggestions(filteredData);
       } else handlePickSuggestions(value);
     } else if (
-      (type === 'custom_select' || type === 'custom_search_select') &&
+      (type === "custom_select" || type === "custom_search_select") &&
       (!data || data?.length === 0)
     ) {
       handlePickSuggestions();
-    } else if (type === 'custom_search_select' && data && data?.length > 0) {
+    } else if (type === "custom_search_select" && data && data?.length > 0) {
       const filteredData =
-        value && value !== '*'
+        value && value !== "*"
           ? data.filter((item) =>
               checkIncludes(
                 item.name,
@@ -229,10 +234,10 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
   const onLabelClick = () => {
     if (!isDisabled) {
       inputRef?.current?.focus();
-      if (autoFilter && inputValue === '') {
-        handleValChange('*');
+      if (autoFilter && inputValue === "") {
+        handleValChange("*");
       } else if (
-        (type === 'custom_select' || type === 'custom_search_select') &&
+        (type === "custom_select" || type === "custom_search_select") &&
         data &&
         data?.length > 0
       ) {
@@ -259,8 +264,8 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
       if (getData) {
         try {
           setIsLoading(true);
-          handlePickSuggestions('*');
-          const fetchedSuggestions = await getData?.('*');
+          handlePickSuggestions("*");
+          const fetchedSuggestions = await getData?.("*");
           fetchedSuggestions?.forEach((element: any) => {
             data?.push(element);
           });
@@ -272,9 +277,9 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
     }
   };
   useEffect(() => {
-    document.addEventListener('click', handleClickOutside);
+    document.addEventListener("click", handleClickOutside);
     return () => {
-      document.removeEventListener('click', handleClickOutside);
+      document.removeEventListener("click", handleClickOutside);
     };
   }, []);
 
@@ -285,10 +290,10 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
   }, [autoFocus]);
   const onInputFocus = () => {
     if (!isDisabled) {
-      if (autoFilter && inputValue === '') {
-        handleValChange('*');
+      if (autoFilter && inputValue === "") {
+        handleValChange("*");
       } else if (
-        (type === 'custom_select' || type === 'custom_search_select') &&
+        (type === "custom_select" || type === "custom_search_select") &&
         data &&
         data?.length > 0
       ) {
@@ -307,14 +312,14 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
       name: suggestion.name,
       ...(suggestion?.label ? { label: suggestion?.label } : {}),
     });
-    if (type !== 'custom_select') setInputValue(suggestion.name);
+    if (type !== "custom_select") setInputValue(suggestion.name);
     setDropOpen(false);
   };
   const handleOpen = (e: any) => {
     if (!suggestions || suggestions?.length === 0) handleDropData();
     if (!isLoading) {
       setDropOpen(!dropOpen);
-      if (type !== 'custom_select') setInputValue('');
+      if (type !== "custom_select") setInputValue("");
     }
   };
 
@@ -324,27 +329,27 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
 
   useEffect(() => {
     if (!insideOpen) {
-      window.addEventListener('scroll', handleScroll);
+      window.addEventListener("scroll", handleScroll);
 
-      const mainElement = document.querySelector('main');
-      mainElement?.addEventListener('scroll', handleScroll);
+      const mainElement = document.querySelector("main");
+      mainElement?.addEventListener("scroll", handleScroll);
 
       const gridElements = document.querySelectorAll(
-        '.k-grid-content, .overflow-auto, .overflow-y-auto, .overflow-x-auto'
+        ".k-grid-content, .overflow-auto, .overflow-y-auto, .overflow-x-auto"
       );
       gridElements.forEach((gridElement: any) => {
-        gridElement.addEventListener('scroll', handleScroll);
+        gridElement.addEventListener("scroll", handleScroll);
       });
-      window.addEventListener('resize', getDropPosition);
+      window.addEventListener("resize", getDropPosition);
       getDropPosition();
       return () => {
-        window.removeEventListener('scroll', handleScroll);
-        const mainElement = document.querySelector('main');
-        mainElement?.removeEventListener('scroll', handleScroll);
-        window.addEventListener('resize', getDropPosition);
-        const gridElements = document.querySelectorAll('.k-grid-content');
+        window.removeEventListener("scroll", handleScroll);
+        const mainElement = document.querySelector("main");
+        mainElement?.removeEventListener("scroll", handleScroll);
+        window.addEventListener("resize", getDropPosition);
+        const gridElements = document.querySelectorAll(".k-grid-content");
         gridElements.forEach((gridElement: any) => {
-          gridElement.removeEventListener('scroll', handleScroll);
+          gridElement.removeEventListener("scroll", handleScroll);
         });
       };
     }
@@ -352,13 +357,13 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
 
   const handleClear = () => {
     setDropOpen(false);
-    setInputValue('');
-    onChange({ id: undefined, name: '', from: 3 });
+    setInputValue("");
+    onChange({ id: undefined, name: "", from: 3 });
     onLabelClick();
   };
 
   useEffect(() => {
-    setInputValue(value?.name ?? '');
+    setInputValue(value?.name ?? "");
   }, [value?.name]);
 
   useEffect(() => {
@@ -366,7 +371,7 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
   }, [data]);
 
   const getErrors = (err: any) => {
-    let errMsg = '';
+    let errMsg = "";
     if (err.message) {
       errMsg = err?.message;
     } else if (err?.id?.message) {
@@ -377,59 +382,59 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
     return errMsg;
   };
   const generateClassName = (
-    type: 'input' | 'label' | 'message' | 'adorement'
+    type: "input" | "label" | "message" | "adorement"
   ): string => {
     let className = propsClassName;
     switch (type) {
-      case 'input':
+      case "input":
         className += `block text-common text-input-text font-normal px-3.5 w-full text-sm text-gray-900 bg-transparent  border  appearance-none    peer h-10 rounded-[4px] disabled:text-input-disabled bg-white disabled:bg-disabled ${
           label && isModern
-            ? 'placeholder-transparent'
-            : 'focus:placeholder-grey-secondary placeholder-input-label'
+            ? "placeholder-transparent"
+            : "focus:placeholder-grey-secondary placeholder-input-label"
         } focus:placeholder-grey-secondary`;
 
         if (errors && errors[name]) {
           className +=
-            ' border-[#FDA29B] focus:border-error-[#FDA29B] focus:ring-[#FDA29B] focus:ring-3 focus:outline-[#FDA29B] input-outline';
+            " border-[#FDA29B] focus:border-error-[#FDA29B] focus:ring-[#FDA29B] focus:ring-3 focus:outline-[#FDA29B] input-outline";
         } else {
           className +=
-            ' text-grey-dark border-input-light focus:border-blue-navy  focus:outline-none  focus:ring-0';
+            " text-grey-dark border-input-light focus:border-blue-navy  focus:outline-none  focus:ring-0";
         }
 
         break;
-      case 'label':
+      case "label":
         className += ` modern-input-label  peer-focus:modern-input-peer-focus-label-size 
           ${
             isDisabled
-              ? 'cursor-pointer'
-              : 'cursor-text peer-focus:cursor-pointer'
+              ? "cursor-pointer"
+              : "cursor-text peer-focus:cursor-pointer"
           } ${
           !isDisabled || !checkIsEmptyField()
-            ? 'active-input-label-bg'
+            ? "active-input-label-bg"
             : isDisabled && !checkIsEmptyField()
-            ? 'disabled-input-label-bg'
-            : ''
+            ? "disabled-input-label-bg"
+            : ""
         } absolute   duration-300 transform -translate-y-4  top-2 z-1 origin-[0]  px-0 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2  peer-focus:-translate-y-4 start-[14px] rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto ${
           isDisabled
-            ? 'cursor-pointer'
-            : 'cursor-text peer-focus:cursor-pointer'
+            ? "cursor-pointer"
+            : "cursor-text peer-focus:cursor-pointer"
         }
            ${
              checkIsEmptyField()
-               ? 'modern-input-label-size'
-               : 'modern-input-peer-focus-label-size'
+               ? "modern-input-label-size"
+               : "modern-input-peer-focus-label-size"
            }`;
         if (errors && errors[name]) {
-          className += ' text-error-light ';
+          className += " text-error-light ";
         } else {
-          className += ' text-grey-dark peer-focus:text-blue-navy';
+          className += " text-grey-dark peer-focus:text-blue-navy";
         }
         break;
-      case 'message':
-        className = ' text-error-icon ';
+      case "message":
+        className = " text-error-icon ";
         break;
-      case 'adorement':
-        className += '  absolute right-0 adorement gap-1 flex items-center ';
+      case "adorement":
+        className += "  absolute right-0 adorement gap-1 flex items-center ";
         break;
       default:
         break;
@@ -454,27 +459,27 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
   //   return 'bottom'
   // }
   const filteredData =
-    inputValue !== '*' && type !== 'custom_select' && !noLocalFilter
+    inputValue !== "*" && type !== "custom_select" && !noLocalFilter
       ? suggestions?.filter((item: valueProps) =>
           checkIncludes(
             item.name,
             inputValue,
-            item.param1 ?? '',
-            item.param2 ?? '',
-            item.param3 ?? '',
-            item.param4 ?? ''
+            item.param1 ?? "",
+            item.param2 ?? "",
+            item.param3 ?? "",
+            item.param4 ?? ""
           )
         )
       : suggestions;
 
   const handleError = (data: any) => {
     if (
-      getErrors(data[name]) === 'required' ||
-      getErrors(data[name]) === 'Required'
+      getErrors(data[name]) === "required" ||
+      getErrors(data[name]) === "Required"
     ) {
       return `${label ?? labelTitle} is ${getErrors(data[name])}`;
     } else {
-      return getErrors(data[name]) ?? '';
+      return getErrors(data[name]) ?? "";
     }
   };
 
@@ -508,7 +513,12 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
   const [showNoResults, setShowNoResults] = useState(false);
 
   useEffect(() => {
-    if (inputValue && filteredData?.length === 0 && !isLoading) {
+    if (
+      inputValue &&
+      filteredData?.length === 0 &&
+      !isLoading &&
+      showNoResults
+    ) {
       const timer = setTimeout(() => {
         setShowNoResults(true);
       }, 500); // Delay in milliseconds
@@ -530,8 +540,8 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
                 <li
                   className={`${
                     value?.id === suggestion?.id
-                      ? 'bg-blue-navy text-white'
-                      : 'hover:bg-table-hover'
+                      ? "bg-blue-navy text-white"
+                      : "hover:bg-table-hover"
                   } cursor-pointer p-1  text-xxs ps-3.5 pl-[10px]`}
                   key={suggestion?.id}
                   data-testid={suggestion.name}
@@ -543,7 +553,8 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
             </>
           ) : (
             showNoResults &&
-            !isLoading && (
+            !isLoading &&
+            timerRef.current === 1 && (
               <li
                 className={`$ cursor-pointer p-1 rounded-sm text-xxs`}
                 onClick={handleClose}
@@ -578,7 +589,7 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
   useEffect(() => {
     const shouldShowClose =
       value?.name &&
-      (value?.id || String(value?.id) === '0') &&
+      (value?.id || String(value?.id) === "0") &&
       !disabled &&
       !readOnly &&
       isClose;
@@ -589,7 +600,7 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
 
   return (
     <div
-      className={` flex-grow  ${fullWidth ? 'w-full' : 'w-auto'}`}
+      className={` flex-grow  ${fullWidth ? "w-full" : "w-auto"}`}
       ref={dropdownref}
     >
       {label && !isModern && (
@@ -606,15 +617,15 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
         )}
 
         <div
-          className={`flex relative ${fullWidth ? 'w-full' : 'w-auto'}`}
+          className={`flex relative ${fullWidth ? "w-full" : "w-auto"}`}
           style={{ width: width }}
         >
           <div className="relative w-full">
             <input
               id={id}
               type="text"
-              readOnly={readOnly ?? type === 'custom_select'}
-              value={inputValue ? inputValue : ''}
+              readOnly={readOnly ?? type === "custom_select"}
+              value={inputValue ? inputValue : ""}
               onBlur={handleClearInputValue}
               disabled={disabled}
               ref={inputRef}
@@ -633,18 +644,18 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
                     }
                   : {}),
               }}
-              className={` ${generateClassName('input')}`}
+              className={` ${generateClassName("input")}`}
               onChange={handleChange}
               placeholder={
-                type === 'auto_complete'
+                type === "auto_complete"
                   ? placeholder && isCustomPlaceholder
                     ? placeholder
-                    : 'Type to search'
-                  : placeholder ?? '--Select--'
+                    : "Type to search"
+                  : placeholder ?? "--Select--"
               }
               onFocus={onInputFocus}
               onClick={(e) => {
-                if (type === 'custom_select') {
+                if (type === "custom_select") {
                   setDropOpen(!dropOpen);
                   handleOpen(e);
                 } else {
@@ -656,9 +667,9 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
               <label
                 htmlFor={id}
                 onClick={() => onLabelClick()}
-                className={generateClassName('label')}
+                className={generateClassName("label")}
               >
-                {label ? label : ''}
+                {label ? label : ""}
                 {required ? <span className="text-error"> *</span> : <></>}
               </label>
             )}
@@ -667,9 +678,9 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
             <div
               ref={adorementRef}
               className={`${generateClassName(
-                'adorement'
+                "adorement"
               )} qbs-autocomplete-adorement mr-[1px] ${
-                isLoading ? 'bg-white' : ''
+                isLoading ? "bg-white" : ""
               }`}
             >
               {showClose && (
@@ -683,7 +694,7 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
                 </button>
               )}
               {isLoading && <Spinner />}
-              {type !== 'auto_complete' && !disabled && !readOnly && (
+              {type !== "auto_complete" && !disabled && !readOnly && (
                 <button
                   disabled={disabled ?? readOnly}
                   onClick={(e) => handleOpen(e)}
@@ -703,7 +714,7 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
               {errors && errors[name] && (
                 <div
                   className={` text-error-label relative cursor-pointer ${generateClassName(
-                    'message'
+                    "message"
                   )}`}
                   onMouseEnter={() => setIsHovered(true)}
                   onMouseLeave={() => setIsHovered(false)}

package/src/commontypes.ts

@@ -63,7 +63,7 @@ export interface AutoSuggestionInputProps {
   currentTab?: number; // current active tab
   selectedLabel?: string; // Able to change the "Item selected" label
   viewMode?: boolean; // show only selected items
-  handleUpdateParent?: (val:boolean) => void;
+  handleUpdateParent?: (val: boolean, level?: string) => void;
 }
 export interface IconsProps {
   name: any;