react-core-ts 3.0.0 → 4.0.0

package/src/AutoCompleteWithTabFilter.tsx

@@ -1,1499 +0,0 @@
-import React, {
-    forwardRef,
-    useCallback,
-    useEffect,
-    useImperativeHandle,
-    useRef,
-    useState,
-} from 'react';
-import ReactDOM from 'react-dom';
-
-import { AutoSuggestionInputProps, TabPops, ValueProps } from './commontypes';
-import DropdownList from './components/DropdownList';
-import { useSuggestions } from './utilities/autosuggestions';
-import { debounce } from './utilities/debounce';
-import { deepEqual } from './utilities/deepEqual';
-import { filterSuggestions } from './utilities/filterSuggestions';
-import { AllDropArrow, DropArrow, Search, Spinner, Tools } from './utilities/icons';
-import { default as Tooltip } from './utilities/NewTooltip';
-import { getKeyValue, safeToLowerString } from './utilities/getKeyValue';
-import {
-    clampDropdownToViewportPreferRightAlign,
-    MAX_DROPDOWN_WIDTH_WITH_TABS_PX,
-    MIN_DROPDOWN_WIDTH_PX,
-    measureTabListNaturalWidth,
-} from './utilities/measureTabListNaturalWidth';
-import DropdownFilterTabs from './dropdownFilterTabs';
-
-const AutoCompleteWithTabFilter = forwardRef<
-    HTMLInputElement,
-    AutoSuggestionInputProps
->(
-    (
-        {
-            label,
-            onChange,
-            getData = async () => [],
-            data = [],
-            errors,
-            required = false,
-            name,
-            fullWidth = false,
-            placeholder,
-            id,
-            type = 'custom_select',
-            selectedItems: propsSeelctedItems = [],
-            readOnly = false,
-            disabled = false,
-            value,
-            searchValue: propsSearchValue = '',
-            isMultiple = false,
-            desc = 'name',
-            descId = 'id',
-            singleSelect,
-            className,
-            async = false,
-            paginationEnabled,
-            initialLoad = false,
-            actionLabel,
-            handleAction,
-            nextBlock,
-            notDataMessage,
-            initialDataMessage,
-            onFocus,
-            onSearchValueChange,
-            expandable = false,
-            textCount = 10,
-            itemCount = 1,
-            scrollRef,
-            countOnly = true,
-            typeOnlyFetch = false,
-            tab = [],
-            clearTabSwitch = false,
-            selectedRowLimit = 2,
-            topMargin = 0,
-            currentTab = 0,
-            selectedLabel = '',
-            viewMode = false,
-            handleUpdateParent,
-            shortCode = '',
-            labelCode = '',
-            tabInlineSearch = true,
-            matchFromStart = false,
-            autoDropdown = false,
-            enableSelectAll = false,
-
-
-            tabName,
-            tabDesc = 'tabName',
-            tabDescId = 'tabId',
-            tabSelectedItems = [],
-            getTabData,
-            tabData,
-            toolTabs = [],
-            enableToolsTab = true,
-            toolTabClearSwitch = false,
-            onToolTabChange,
-            autoRefreshMainDropdown = true,
-            autoTabSelectAll = true,
-            moreOptionTab,
-            moreOptionTabLabel,
-            moreOptionTabIcon,
-            onMoreOptionChange,
-            resetAllSearch = true,
-        },
-        ref
-    ) => {
-        const dropdownRef = useRef<HTMLDivElement>(null);
-        const selItemRef = useRef<HTMLDivElement>(null);
-        const itemsRef = 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>(propsSearchValue);
-        const [searchOldValue, setSearchOldValue] = useState<string>('');
-        const [nextPage, setNextPage] = useState<number | undefined>(1);
-        const [dropOpen, setDropOpen] = useState<boolean>(false);
-        const [selectedItems, setSelectedItems] = useState<ValueProps[]>([]);
-        const [searchLoaded, setSearchLoaded] = useState<boolean>(propsSearchValue ? false : true);
-        const [showAllSelected, setShowAllSelected] = useState<boolean>(false);
-        const [selHeight, setSelHeight] = useState<number>(184);
-        const [expandArrowClick, setExpandArrowClick] = useState<
-            number | undefined
-        >(1);
-        const [visible, setVisible] = useState<boolean>(false);
-        const lastEmittedSelectedRef = useRef<ValueProps[] | null>(null);
-        const [activeTab, setActiveTab] = useState<number>(currentTab);
-        const [focusedIndex, setFocusedIndex] = useState(0);
-        const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
-        // API call for suggestions through a custom hook
-        const inputRef = useRef(null);
-        const dropRef = useRef(null);
-        const inputSearchRef = useRef(null);
-        const dropBtnRef = useRef<HTMLButtonElement>(null);
-        useImperativeHandle(ref, () => inputRef.current);
-        const [dropdownStyle, setDropdownStyle] = useState({
-            top: 0,
-            left: 0,
-            width: 200,
-            transform: '',
-        });
-
-        const [selectAll, setSelectAll] = useState(false);
-        const [refetchData, setRefetchData] = useState(false);
-        const [allDataLoaded, setAllDataLoaded] = useState(false);
-        const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);
-        const [tabsScrollable, setTabsScrollable] = useState(false);
-        const toolsBtnRef = useRef<HTMLButtonElement>(null);
-        const [showToolsTab, setShowToolsTab] = useState(false);
-        // Track previous tabSelectedItems to detect new items
-        const prevTabSelectedItemsRef = useRef<ValueProps[]>([]);
-        const [applyTabFilter, setApplyTabFilter] = useState(false);
-        const [moreOptionResetKey, setMoreOptionResetKey] = useState(0);
-
-        let originalOverflow = '';
-        let hasScrollbar = false;
-
-        const { suggestions, isLoading, handlePickSuggestions, resetSuggections } =
-            useSuggestions(
-                getData,
-                data,
-                dropOpen,
-                async,
-                paginationEnabled,
-                initialLoad,
-                inputValue,
-                isMultiple,
-                setNextPage,
-                selectedItems,
-                typeOnlyFetch
-                // nextBlock
-            );
-
-        // Handling the selection of a suggestion
-        const handleSuggestionClick = useCallback(
-            (suggestion: ValueProps, idx: number) => {
-                if (isMultiple) {
-                    setFocusedIndex(idx);
-                    setSelectedItems((prev) => {
-                        const isAdded =
-                            prev && prev.length > 0
-                                ? prev.some(
-                                    (item) =>
-                                        getKeyValue(item, descId, 'id') ===
-                                        getKeyValue(suggestion, descId, 'id')
-                                )
-                                : false;
-                        if (isAdded) {
-                            return prev.filter(
-                                (item) =>
-                                    getKeyValue(item, descId, 'id') !==
-                                    getKeyValue(suggestion, descId, 'id')
-                            );
-                        } else {
-                            return [...prev, suggestion];
-                        }
-                    });
-                } else {
-                    setFocusedIndex(idx);
-                    setInputValue(String(suggestion[desc]));
-                    setSearchValue('');
-                    onChange(suggestion);
-                    setDropOpen(false);
-                    setShowToolsTab(false);
-                    setAllDataLoaded(false);
-                }
-            },
-            [tab, activeTab, descId, desc, onChange]
-        );
-
-        // Adding debounce to avoid making API calls on every keystroke
-        const debouncedUpdate = useCallback(
-            debounce((value: string, tabVal?: number | string) => {
-                setSearchOldValue(value);
-                handlePickSuggestions(value, 1, false, tabVal);
-            }, 500),
-            []
-        );
-
-        const handleChangeWithDebounce = (value: string) => {
-            if ((type === 'auto_complete' || type === 'auto_suggestion') && async) {
-                const activeTabVal = tab.length > 0 ? tab?.[activeTab].id : undefined;
-                debouncedUpdate(value, activeTabVal);
-            }
-        };
-
-        const handleMultiSelect = useCallback((e: any, suggestion: ValueProps) => {
-            const { checked } = e.target;
-            if (isMultiple) {
-                if (checked) {
-                    setSelectedItems((prev) => [...prev, suggestion]);
-                } else {
-                    setSelectedItems((prev) => {
-                        return prev.filter(
-                            (item, i) =>
-                                getKeyValue(item, descId, 'id') !==
-                                getKeyValue(suggestion, descId, 'id')
-                        );
-                    });
-                }
-            } else {
-                if (checked) {
-                    setInputValue(String(suggestion[desc]));
-                    onChange(suggestion);
-                } else {
-                    setInputValue('');
-                }
-            }
-        }, [isMultiple, descId, desc, onChange]);
-        useEffect(() => {
-            // Avoid feedback loops: if props equal last emitted value, skip syncing to state
-            if (
-                propsSeelctedItems &&
-                lastEmittedSelectedRef.current &&
-                deepEqual(propsSeelctedItems, lastEmittedSelectedRef.current)
-            ) {
-                return;
-            }
-            // Only update if different
-            if (!deepEqual(selectedItems, propsSeelctedItems)) {
-                setSelectedItems(propsSeelctedItems);
-            }
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [propsSeelctedItems]);
-        // Effect to set the input value whenever `value` prop changes
-        useEffect(() => {
-            setInputValue(value ?? '');
-        }, [value]);
-
-        const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-            const { value } = e.target;
-            //setVisibleDrop();
-            setSearchValue(value);
-            handleChangeWithDebounce(value);
-
-            if (!tabInlineSearch) {
-                onSearchValueChange?.(value);
-            }
-
-            if (!value) {
-                if (!typeOnlyFetch) setInputValue('');
-                // onChange({ [descId]: '', [desc]: '' });
-            }
-
-            if (!tabInlineSearch) {
-                setDropOpen(true);
-                setShowToolsTab(false);
-            }
-        }, [handleChangeWithDebounce, tabInlineSearch, onSearchValueChange, typeOnlyFetch]);
-
-        const handleSuggestionChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-            const { value } = e.target;
-            //setVisibleDrop();
-            const trimStart = value.trimStart();
-            setSearchValue(trimStart);
-            handleChangeWithDebounce(trimStart);
-            setAllDataLoaded(false);
-        }, [handleChangeWithDebounce]);
-
-        const handleClearSelected = useCallback(() => {
-            setSelectedItems([]);
-            setShowAllSelected(false);
-            setShowToolsTab(false);
-            if (searchValue && type === 'auto_suggestion' && (tabInlineSearch || resetAllSearch)) {
-                setSearchValue('');
-            }
-            console.log('handleClearSelected', searchValue, type, tabInlineSearch);
-            if (isMultiple) onChange([]);
-            else onChange({ [descId]: '', [desc]: '' });
-            if (async && type === 'auto_suggestion' && (tabInlineSearch || resetAllSearch)) resetSuggections?.();
-        }, [searchValue, type, tabInlineSearch, isMultiple, onChange, descId, desc, async, resetSuggections]);
-
-        const generateClassName = useCallback(() => {
-            return `qbs-textfield-default ${className} ${errors && errors?.message ? 'textfield-error' : 'textfield'
-                } ${expandable ? 'expandable' : ''}`;
-        }, [errors, name]);
-        const handleRemoveSelectedItem = useCallback((index: number) => {
-            setSelectedItems((prev) => {
-                return prev.filter((_, i) => i !== index);
-            });
-        }, []);
-
-        const uniqueDropArrowId = `${name}-drop-arrow-selected-list-icon`;
-        const isKeyboardOpenRef = useRef(false);
-        const closeOnScrollTimeoutRef = useRef<number | null>(null);
-
-        // Keep ref in sync with state for use in event handlers
-        useEffect(() => {
-            isKeyboardOpenRef.current = isKeyboardOpen;
-        }, [isKeyboardOpen]);
-
-        useEffect(() => {
-            const handleScroll = (event: any) => {
-                // Don't close if the user is scrolling inside the dropdown itself.
-                const scrollTarget = event.target;
-                if (dropRef.current && scrollTarget instanceof Node && dropRef.current.contains(scrollTarget)) {
-                    return;
-                }
-
-                // On mobile: Don't close dropdown on scroll when keyboard is open (typing scenario)
-                // On desktop: Always allow closing on scroll
-                if (isKeyboardOpenRef.current) {
-                    // Only prevent closing if keyboard is actually open (mobile scenario)
-                    // Also check if input is focused to avoid closing while typing
-                    const activeElement = document.activeElement;
-                    if (activeElement && (
-                        activeElement === inputRef.current ||
-                        activeElement === inputSearchRef.current ||
-                        (dropRef.current && dropRef.current.contains(activeElement))
-                    )) {
-                        return;
-                    }
-                }
-
-                // Close on any outside scroll (including scrolls on nested containers).
-                if (dropOpen) {
-                    if (closeOnScrollTimeoutRef.current) {
-                        window.clearTimeout(closeOnScrollTimeoutRef.current);
-                    }
-                    closeOnScrollTimeoutRef.current = window.setTimeout(() => {
-                        setDropOpen(false);
-                        setShowToolsTab(false);
-                        setAllDataLoaded(false);
-                        if (!typeOnlyFetch) setSearchValue('');
-                    }, 200);
-                }
-            };
-
-            const handleClickOutside = (event: any) => {
-                const target = event.target as HTMLElement;
-
-                // Always check if click is inside component container first
-                const insideComponent = dropdownRef.current ? dropdownRef.current.contains(target) : false;
-
-                // If clicking inside component, don't close (let onClick handlers handle it)
-                if (insideComponent) {
-                    return;
-                }
-
-                // When keyboard is open, be more lenient - only close on clear outside clicks
-                if (isKeyboardOpenRef.current) {
-                    // Only close if it's a clear click outside, not on input/textarea elements
-                    if (
-                        dropRef.current &&
-                        target instanceof Node &&
-                        !dropRef.current.contains(target) &&
-                        target?.id !== uniqueDropArrowId &&
-                        !target?.closest('.tools-drop-btn') &&
-                        event.type === 'mousedown' &&
-                        target.closest &&
-                        !target.closest('input') &&
-                        !target.closest('textarea')
-                    ) {
-                        setTimeout(() => {
-                            setDropOpen(false);
-                            setShowToolsTab(false);
-                            setAllDataLoaded(false);
-                            if (!typeOnlyFetch) setSearchValue('');
-                        }, 200);
-                    }
-                    return;
-                }
-
-                // Normal behavior when keyboard is not open
-                const clickedToolsBtn = !!target?.closest?.('.tools-drop-btn');
-                const insideMainDropdown = dropRef.current ? dropRef.current.contains(target) : false;
-                const insideAnyDropdown = !!target?.closest?.('.qbs-autocomplete-selected-suggestions');
-
-                // Close only when click is outside both dropdowns and not on tools button
-                if (!insideMainDropdown && !insideAnyDropdown && !clickedToolsBtn) {
-                    setTimeout(() => {
-                        setDropOpen(false);
-                        setShowToolsTab(false);
-                        setAllDataLoaded(false);
-                        if (!typeOnlyFetch) setSearchValue('');
-                    }, 200);
-                }
-            };
-
-            document.addEventListener('mousedown', handleClickOutside as any);
-            window.addEventListener('scroll', handleScroll as any);
-            // Capture-phase scroll catches scrolls from any scroll container (scroll doesn't bubble).
-            document.addEventListener('scroll', handleScroll as any, true);
-
-            const scrollableDivs = document.querySelectorAll(
-                'div[style*="overflow"], .overflow-auto, .overflow-y-auto, .overflow-x-auto'
-            );
-            scrollableDivs.forEach((div) =>
-                div.addEventListener('scroll', handleScroll as any)
-            );
-            if (scrollRef && scrollRef.current && scrollRef.current !== null) {
-                scrollRef.current.addEventListener('scroll', handleScroll as any);
-            }
-            return () => {
-                document.removeEventListener('mousedown', handleClickOutside as any);
-                window.removeEventListener('scroll', handleScroll as any);
-                document.removeEventListener('scroll', handleScroll as any, true);
-                scrollableDivs.forEach((div) =>
-                    div.removeEventListener('scroll', handleScroll as any)
-                );
-                if (closeOnScrollTimeoutRef.current) {
-                    window.clearTimeout(closeOnScrollTimeoutRef.current);
-                    closeOnScrollTimeoutRef.current = null;
-                }
-                if (scrollRef && scrollRef.current && scrollRef.current !== null) {
-                    scrollRef.current.removeEventListener(
-                        'scroll',
-                        handleScroll as any
-                    );
-                }
-            };
-        }, [dropOpen, typeOnlyFetch, uniqueDropArrowId]);
-
-        // Filtering suggestions based on type and search value
-        const selected: any = isMultiple ? selectedItems : inputValue;
-        const filteredData: ValueProps[] = filterSuggestions(
-            suggestions,
-            searchValue,
-            type,
-            desc,
-            selected,
-            async,
-            false,
-            true,
-            matchFromStart
-        );
-
-        const adjustDropdownPosition = useCallback(() => {
-            if (dropdownRef.current) {
-                const inputRect = dropdownRef.current.getBoundingClientRect();
-                const dropdownPosition = {
-                    left: inputRect.left + window.scrollX,
-                    width: inputRect.width,
-                    top: 0,
-                };
-                const tabsNaturalWidth = tabRef.current
-                    ? measureTabListNaturalWidth(tabRef.current)
-                    : null;
-                const maxWidthCap = tab.length > 0
-                    ? Math.max(MAX_DROPDOWN_WIDTH_WITH_TABS_PX, dropdownPosition.width)
-                    : Number.POSITIVE_INFINITY;
-                const widthBeforeClamp = Math.min(
-                    Math.max(dropdownPosition.width, tabsNaturalWidth ?? 0, MIN_DROPDOWN_WIDTH_PX),
-                    maxWidthCap
-                );
-                const { width: desiredWidth, left: desiredLeft } = clampDropdownToViewportPreferRightAlign({
-                    desiredWidth: widthBeforeClamp,
-                    desiredLeft: dropdownPosition.left,
-                    anchorRight: inputRect.right + window.scrollX,
-                });
-                setTabsScrollable((prev) => {
-                    const next = tab.length > 0 && (tabsNaturalWidth ?? 0) > desiredWidth;
-                    return prev === next ? prev : next;
-                });
-                // Check if there's enough space below the input for the dropdown
-                const spaceBelow = window.innerHeight - inputRect.bottom;
-                const spaceAbove = inputRect.top + window.scrollY;
-
-                let dropdownHeight = viewMode ? 160 : 300; // Assume a fixed height or calculate based on content
-                const defaultHeight = 184;
-
-                if (countOnly) {
-                    if (dropdownSelectedRef?.current)
-                        dropdownHeight += dropdownSelectedRef?.current?.clientHeight;
-                }
-                if (tab.length > 0) {
-                    if (tabRef?.current) dropdownHeight += tabRef?.current?.clientHeight;
-                }
-                if (spaceBelow >= dropdownHeight) {
-                    dropLevelRef.current = 'bottom';
-                    dropdownPosition.top =
-                        inputRect.top + window.scrollY + inputRect.height;
-
-                    setSelHeight(prev => prev !== defaultHeight ? defaultHeight : prev);
-                } else if (spaceAbove >= dropdownHeight) {
-                    let sHeight = tabInlineSearch ? 73 : 113;
-                    sHeight =
-                        sHeight -
-                        (filteredData?.length > 0 && enableSelectAll && isMultiple
-                            ? 32
-                            : 0);
-                    dropLevelRef.current = 'top';
-                    dropdownPosition.top =
-                        inputRect.top +
-                        window.scrollY -
-                        dropdownHeight +
-                        sHeight +
-                        topMargin;
-
-                    setSelHeight(prev => prev !== defaultHeight ? defaultHeight : prev);
-                } else {
-                    dropLevelRef.current = 'bottom';
-                    dropdownPosition.top =
-                        inputRect.top + window.scrollY + inputRect.height;
-
-                    if (itemsRef?.current) {
-                        const totalH = showAllSelected ? 148 : defaultHeight;
-                        const selH = totalH - (dropdownHeight - spaceBelow);
-                        const newHeight = selH < 50 ? 50 : selH;
-                        setSelHeight(prev => prev !== newHeight ? newHeight : prev);
-                    }
-                }
-                // setDropdownStyle({
-                //   ...dropdownPosition,
-                // });
-                setDropdownStyle((prevStyle) => {
-                    const newStyle = {
-                        ...prevStyle,
-                        transform: `translateY(${dropdownPosition.top}px)`,
-                        left: desiredLeft,
-                        width: desiredWidth,
-                    };
-                    // Only update if the style actually changed
-                    if (prevStyle.transform !== newStyle.transform ||
-                        prevStyle.left !== newStyle.left ||
-                        prevStyle.width !== newStyle.width) {
-                        return newStyle;
-                    }
-                    return prevStyle;
-                });
-            }
-        }, [viewMode, countOnly, tab.length, tabInlineSearch, filteredData?.length, enableSelectAll, isMultiple, topMargin, showAllSelected]);
-
-        useEffect(() => {
-            window.addEventListener('resize', adjustDropdownPosition);
-            adjustDropdownPosition();
-
-            return () => {
-                window.removeEventListener('resize', adjustDropdownPosition);
-            };
-        }, [adjustDropdownPosition]);
-
-        // Detect keyboard open on mobile using Visual Viewport API
-        useEffect(() => {
-            const vv = (window as any).visualViewport;
-            if (!vv) return;
-            const onResize = () => {
-                // Heuristic: if visual viewport height shrinks a lot, keyboard is likely open
-                const open = vv.height < window.innerHeight - 100;
-                setIsKeyboardOpen(open);
-            };
-            vv.addEventListener("resize", onResize);
-            vv.addEventListener("scroll", onResize); // iOS sometimes fires scroll instead
-            onResize();
-            return () => {
-                vv.removeEventListener("resize", onResize);
-                vv.removeEventListener("scroll", onResize);
-            };
-        }, []);
-
-        useEffect(() => {
-            if (isInitialRender) {
-                setIsInitialRender(false);
-            } else {
-                onChange(selectedItems);
-                lastEmittedSelectedRef.current = selectedItems;
-            }
-            adjustDropdownPosition();
-            setTimeout(() => {
-                adjustDropdownPosition();
-            }, 200);
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [selectedItems, adjustDropdownPosition]);
-
-        useEffect(() => {
-            adjustDropdownPosition();
-            setTimeout(() => {
-                adjustDropdownPosition();
-            }, 200);
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [filteredData, adjustDropdownPosition]);
-
-        useEffect(() => {
-            // Handle keyboard navigation
-            const handleKeyDown = (e: any) => {
-                if (!dropOpen) return;
-
-                const atBottom = focusedIndex === filteredData.length - 1;
-                const atTop = focusedIndex === 0;
-                switch (e.key) {
-                    case 'ArrowDown':
-                        e.preventDefault();
-                        if (itemsRef.current) {
-                            if (!atBottom) {
-                                itemsRef.current.scrollTop +=
-                                    itemRefs.current[focusedIndex]?.offsetHeight || 50;
-                            } else {
-                                itemsRef.current.scrollTop = 0;
-                            }
-                        }
-                        setFocusedIndex((prev) => (prev + 1) % filteredData?.length);
-                        break;
-
-                    case 'ArrowUp':
-                        e.preventDefault();
-                        if (itemsRef.current) {
-                            if (!atTop) {
-                                itemsRef.current.scrollTop -=
-                                    itemRefs.current[focusedIndex]?.offsetHeight || 50;
-                            } else {
-                                itemsRef.current.scrollTop = 0;
-                            }
-                        }
-                        setFocusedIndex(
-                            (prev) => (prev - 1 + filteredData?.length) % filteredData?.length
-                        );
-                        break;
-
-                    case 'Enter':
-                        e.preventDefault();
-                        if (filteredData && filteredData.length > 0)
-                            handleSuggestionClick(filteredData[focusedIndex], focusedIndex);
-                        break;
-
-                    case 'Escape':
-                        e.preventDefault();
-                        setDropOpen(false);
-                        setAllDataLoaded(false);
-                        break;
-
-                    default:
-                        break;
-                }
-            };
-
-            window.addEventListener('keydown', handleKeyDown);
-
-            return () => {
-                window.removeEventListener('keydown', handleKeyDown);
-            };
-        }, [filteredData, dropOpen, isLoading, focusedIndex]);
-
-        const isSelected = (
-            item: ValueProps,
-            selectedItems: ValueProps[] | string
-        ): boolean => {
-            if (Array.isArray(selectedItems)) {
-                return selectedItems.some(
-                    (selectedItem) =>
-                        getKeyValue(selectedItem, desc, 'name') === getKeyValue(item, desc, 'name') ||
-                        getKeyValue(selectedItem, descId, 'id') === getKeyValue(item, descId, 'id')
-                );
-            } else {
-                return (
-                    getKeyValue(item, desc, 'name') === safeToLowerString(selectedItems) ||
-                    getKeyValue(item, descId, 'id') === safeToLowerString(selectedItems)
-                );
-            }
-        };
-
-        const handleLoadMore = () => {
-            if (paginationEnabled) {
-                handlePickSuggestions(searchValue, nextPage + 1, true);
-                setNextPage(nextPage + 1);
-            }
-        };
-
-        const handleOnClick = () => {
-            (!disabled && !readOnly && !expandable && !dropOpen) || viewMode
-                ? setVisibleDrop()
-                : '';
-        };
-        const onInputFocus = () => {
-            if (!dropOpen) {
-                if (countOnly) {
-                    setTimeout(() => {
-                        if (inputSearchRef.current) inputSearchRef.current.focus();
-                    }, 10);
-                } else {
-                    if (inputRef.current) inputRef.current.focus();
-                }
-                // handleOnClick();
-            }
-        };
-
-        const handleShowAllSelected = useCallback((enabled: boolean) => {
-            setExpandArrowClick(expandArrowClick + 1);
-            if (enabled) {
-                setShowAllSelected(true);
-            } else {
-                setShowAllSelected(false);
-            }
-        }, [expandArrowClick]);
-
-        const handleCollapseArrowClick = useCallback(() => {
-            setExpandArrowClick(expandArrowClick + 1);
-            setShowAllSelected(false);
-        }, [expandArrowClick]);
-
-        const tooltipContent =
-            selectedItems?.length > itemCount
-                ? selectedItems
-                    ?.slice(itemCount)
-                    .map((item) => item[desc])
-                    .join(', ')
-                : '';
-
-        const allSelectedTooltipContent =
-            selectedItems?.length > 0
-                ? selectedItems?.map((item) => item[desc])
-                    .join(', ')
-                : '';
-
-        const setVisibleDrop = (skipAnimation = false) => {
-            hasScrollbar = document.body.scrollHeight > window.innerHeight;
-            if (!originalOverflow && !hasScrollbar) {
-                originalOverflow = document.body.style.overflow;
-                document.body.style.overflow = 'hidden';
-            }
-
-            // If skipAnimation is true (dropdown already open but not visible), just make it visible
-            if (skipAnimation && dropOpen) {
-                setVisible(true);
-                setFocusedIndex(0);
-                return;
-            }
-
-            // Normal opening animation
-            setVisible(false);
-            if (!dropOpen) {
-                setDropOpen(true);
-                setShowToolsTab(false);
-            }
-            setFocusedIndex(0);
-
-            setTimeout(() => {
-                setVisible(true);
-
-                if (!hasScrollbar) {
-                    document.body.style.overflow = originalOverflow || '';
-                }
-                originalOverflow = '';
-            }, 100);
-        };
-
-        const handleTabClick = useCallback((index: number) => {
-            if (activeTab !== index) {
-                if (clearTabSwitch) {
-                    handleClearSelected();
-                    if (tabInlineSearch) {
-                        setSearchValue('');
-                        setInputValue('');
-                        handlePickSuggestions('', 1);
-                    } else {
-                        resetSuggections?.();
-                        const activeTabVal =
-                            tab.length > 0 ? tab?.[index].id : undefined;
-                        handlePickSuggestions(searchValue, 1, false, activeTabVal);
-                    }
-                    setAllDataLoaded(false);
-                } else if (!tabInlineSearch) {
-                    resetSuggections?.();
-                    const activeTabVal = tab.length > 0 ? tab?.[index].id : undefined;
-                    handlePickSuggestions(searchValue, 1, false, activeTabVal);
-                }
-                setActiveTab(index);
-            }
-        }, [activeTab, clearTabSwitch, handleClearSelected, tabInlineSearch, tab, searchValue, handlePickSuggestions, resetSuggections]);
-
-        const getSelectedRowLimit = useCallback(() => {
-            let maxHeight = 36;
-            if (selItemRef?.current && selItemRef?.current.clientWidth < 300) {
-                maxHeight = 24;
-            }
-
-            return selectedRowLimit * maxHeight + 5;
-        }, [selectedRowLimit]);
-
-        const getSelectedItems = useCallback((dropdown: boolean) => {
-            return (
-                <div
-                    ref={selItemRef}
-                    className="selected-items-outer-container"
-                    style={{ maxHeight: `${getSelectedRowLimit()}px` }}
-                >
-                    {selectedItems
-                        .slice(
-                            0,
-                            selectedItems?.length > itemCount
-                                ? showAllSelected
-                                    ? selectedItems?.length
-                                    : itemCount
-                                : selectedItems?.length
-                        )
-                        .map((item, index) => (
-                            <div key={index} className="selected-items-container">
-                                <Tooltip
-                                    title={String(item?.[desc])}
-                                    enabled={String(item?.[desc])?.length > textCount}
-                                >
-                                    <div key={item.id} className="selected-item">
-                                        {String(item?.[desc])?.length > textCount
-                                            ? `${String(item?.[desc]).substring(0, textCount)}...`
-                                            : String(item?.[desc])}
-                                        {!viewMode && (
-                                            <button
-                                                onClick={() => handleRemoveSelectedItem(index)}
-                                                className="remove-item-btn"
-                                                aria-label={`Remove ${String(item?.[desc])}`}
-                                            >
-                                                X
-                                            </button>
-                                        )}
-                                    </div>
-                                </Tooltip>
-                            </div>
-                        ))}
-                    {selectedItems?.length > itemCount && !showAllSelected && (
-                        <div className="selected-items-container">
-                            <Tooltip title={tooltipContent} enabled={true}>
-                                <div
-                                    className={`selected-item-more qbs-rounded-full qbs-min-h-6 qbs-min-w-6 qbs-p-1 ${dropdown ? 'qbs-cursor-pointer' : ''
-                                        }`}
-                                    onClick={() => {
-                                        handleShowAllSelected(dropdown);
-                                    }}
-                                >
-                                    +{selectedItems?.length - itemCount}{' '}
-                                    <span className="qbs-hidden">more</span>
-                                </div>
-                            </Tooltip>
-                        </div>
-                    )}
-                </div>
-            );
-        }, [selectedItems, getSelectedRowLimit, itemCount, showAllSelected, desc, textCount, viewMode, handleRemoveSelectedItem, tooltipContent, handleShowAllSelected]);
-
-        const getTabItems = useCallback(() => {
-            return (
-                <ul
-                    className={`qbs-flex qbs-flex-wrap qbs-w-full qbs-tab qbs-mb-2 -qbs-mt-2 ${tabsScrollable ? 'qbs-tab-scroll' : ''}`}
-                    ref={tabRef}
-                >
-                    {tab.map((item: TabPops, idx: number) => (
-                        <li className="qbs-flex-1 qbs-tab-items" key={`tab-${idx}`}>
-                            <span
-                                className={`qbs-inline-block qbs-tab-item qbs-text-sm qbs-cursor-pointer qbs-w-full qbs-text-center qbs-p-1 qbs-border-b-2 ${activeTab === idx ? 'qbs-tab-active-item' : ''
-                                    }`}
-                                onClick={() => {
-                                    handleTabClick(idx);
-                                }}
-                            >
-                                {item.label}
-                            </span>
-                        </li>
-                    ))}
-                </ul>
-            );
-        }, [tab, activeTab, handleTabClick, tabsScrollable]);
-
-        const handleSelectAll = useCallback(() => {
-            if (isMultiple) {
-                if (selectAll) {
-                    setSelectedItems((prev) =>
-                        prev.filter(
-                            (item) =>
-                                !filteredData.some(
-                                    (f) =>
-                                        getKeyValue(f, descId, 'id') === getKeyValue(item, descId, 'id')
-                                )
-                        )
-                    );
-                } else {
-                    // Add only items from current tab - batch all updates in single setState
-                    setSelectedItems((prev) => {
-                        const newItems: ValueProps[] = [];
-
-                        filteredData.forEach((suggestion: ValueProps) => {
-                            const isAdded = prev.some(
-                                (item) =>
-                                    getKeyValue(item, descId, 'id') ===
-                                    getKeyValue(suggestion, descId, 'id')
-                            );
-                            if (!isAdded) {
-                                newItems.push(suggestion);
-                            }
-                        });
-
-                        return [...prev, ...newItems];
-                    });
-                }
-            }
-        }, [isMultiple, selectAll, filteredData, descId]);
-
-        const handleOpenDropdown = useCallback((e: any) => {
-            if (!tabInlineSearch) {
-                // Toggle the main dropdown when not using inline search
-                if (dropOpen && visible && allDataLoaded) {
-                    // If dropdown is open and visible, close it
-                    setDropOpen(false);
-                    setVisible(false);
-                    setAllDataLoaded(false);
-                    return
-                } else if (!dropOpen) {
-                    // If dropdown is closed, open it
-                    setVisibleDrop(false);
-                } else if (dropOpen && !visible) {
-                    // If dropdown is open but not visible, make it visible
-                    setVisible(true);
-                }
-            }
-            if (!suggestions || suggestions?.length === 0 || refetchData || resetAllSearch) {
-                if (autoDropdown && (inputValue === '' || inputValue.trim() === '')) {
-                    const activeTabVal =
-                            tab.length > 0 ? tab?.[activeTab].id : undefined;
-                    if (tabInlineSearch && tab.length > 0) {
-                        handlePickSuggestions('*', 1, false, activeTabVal);
-                    } else {
-                        if(tab.length > 0) {
-                            handlePickSuggestions('*', 1, false, activeTabVal);
-                        } else {
-                            handlePickSuggestions('*', 1);
-                        }
-                    }
-                    setRefetchData(false);
-                    setAllDataLoaded(true);
-                } else if (!refetchData && inputValue !== '') {
-                    if (tabInlineSearch && tab.length > 0) {
-                        const activeTabVal =
-                            tab.length > 0 ? tab?.[activeTab].id : undefined;
-                        handlePickSuggestions(inputValue, 1, false, activeTabVal);
-                    } else {
-                        handlePickSuggestions(inputValue, 1);
-                    }
-                    setRefetchData(true);
-                    setAllDataLoaded(false);
-                }
-            }
-        }, [suggestions, refetchData, autoDropdown, inputValue, tabInlineSearch, tab, activeTab, handlePickSuggestions, dropOpen, visible]);
-
-        useEffect(() => {
-            if (applyTabFilter && !isLoading && suggestions) {
-                // Auto select all currently loaded suggestions (dedup by descId)
-                if (isMultiple && Array.isArray(suggestions) && autoTabSelectAll) {
-                    setSelectedItems((prev) => {
-                        const existingIds = new Set(
-                            (prev || []).map((item) => getKeyValue(item, descId, 'id'))
-                        );
-                        const toAdd: ValueProps[] = [];
-                        suggestions.forEach((s: ValueProps) => {
-                            const sid = getKeyValue(s, descId, 'id');
-                            if (!existingIds.has(sid)) {
-                                toAdd.push(s);
-                            }
-                        });
-                        return toAdd.length > 0 ? [...prev, ...toAdd] : prev;
-                    });
-                }
-
-                // Clear tabSelectedItems after applying filter and data is loaded
-                onToolTabChange?.([]);
-                setShowToolsTab(false);
-                // Reset moreOptionTab component
-                setMoreOptionResetKey(prev => prev + 1);
-                // Open dropdown immediately when data is ready (tools tab was open so dropdown is closed)
-                if (!dropOpen) {
-                    setVisibleDrop(false); // Full animation for closed dropdown
-                } else if (dropOpen && !visible) {
-                    // If for some reason dropdown is open but not visible, just make it visible
-                    setVisible(true);
-                }
-                setApplyTabFilter(false);
-            }
-        }, [applyTabFilter, isLoading, suggestions, onToolTabChange, isMultiple, descId, dropOpen, visible]);
-
-        const handleOpenToolsTab = useCallback((e: any) => {
-            setShowToolsTab(showToolsTab ? false : true);
-            setDropOpen(false);
-            setAllDataLoaded(false);
-        }, [showToolsTab]);
-
-        const handleApplyTabFilter = useCallback((moreOptionValues?: any) => {
-            // Set flag to trigger effect when data loads
-            setApplyTabFilter(true);
-            handlePickSuggestions(searchValue ? searchValue : '*', 1);
-            // Note: onMoreOptionChange is called when values change in the component, not here
-        }, [searchValue, handlePickSuggestions]);
-
-        useEffect(() => {
-            const allSelected =
-                filteredData?.length > 0 && selectedItems?.length > 0 &&
-                filteredData.every((item) =>
-                    selectedItems?.some(
-                        (s) =>
-                            getKeyValue(s, descId, 'id') === getKeyValue(item, descId, 'id')
-                    )
-                );
-
-            setSelectAll(allSelected);
-        }, [filteredData, selectedItems, descId]);
-
-        useEffect(() => {
-            handleUpdateParent?.(dropOpen, dropLevelRef.current);
-        }, [dropOpen]);
-
-        // Auto-focus search input when dropdown opens with tabInlineSearch
-        useEffect(() => {
-            if (dropOpen && visible && tabInlineSearch && type === 'auto_suggestion' && !expandable) {
-                // Small delay to ensure the dropdown is fully rendered
-                setTimeout(() => {
-                    if (inputSearchRef.current) {
-                        inputSearchRef.current.focus();
-                    }
-                }, 50);
-            }
-        }, [dropOpen, visible, tabInlineSearch, type, expandable]);
-
-        // Auto-refresh main dropdown data when tabSelectedItems change (add/remove)
-        useEffect(() => {
-            if (autoRefreshMainDropdown && dropOpen && async) {
-                // Check if there are changes by comparing with previous state
-                const hasChanges = tabSelectedItems.length !== prevTabSelectedItemsRef.current.length ||
-                    !deepEqual(tabSelectedItems, prevTabSelectedItemsRef.current);
-
-                // Trigger refresh if there are changes (items added, removed, or modified)
-                if (hasChanges) {
-                    if (tabInlineSearch && toolTabs.length > 0 && searchValue) {
-                        handlePickSuggestions(searchValue, 1);
-                    }
-                }
-
-                // Update the previous state
-                prevTabSelectedItemsRef.current = tabSelectedItems;
-            }
-        }, [autoRefreshMainDropdown, dropOpen, tabSelectedItems, activeTab, tab, tabInlineSearch, searchValue, async, handlePickSuggestions]);
-
-        return (
-            <div
-                id={id ? `selected-list-${id}` : `selected-list-${name}`}
-                className={fullWidth ? 'fullWidth' : 'autoWidth'}
-                ref={dropdownRef}
-            >
-                {label && (
-                    <div
-                        style={{
-                            marginBottom: 5,
-                            display: 'flex',
-                            justifyContent: 'space-between',
-                        }}
-                    >
-                        <label className={`labels label-text`}>
-                            {label}
-                            {required && <span className="text-error"> *</span>}
-                        </label>
-                        <span onClick={() => handleAction?.()} className={`action_label`}>
-                            {actionLabel}
-                        </span>
-                    </div>
-                )}
-                {/* Displaying selected items for multi-select */}
-
-                <div
-                    className={`qbs-relative  qbs-autocomplete-selected-comp ${expandable ? 'qbs-expandable-container' : 'qbs-container'
-                        }`}
-                >
-
-                    {(selectedItems?.length > 0 || !tabInlineSearch) && (
-                        <>
-                            {!countOnly ? (
-                                getSelectedItems(false)
-                            ) : !tabInlineSearch ? (
-                                <div className={`selected-items-counter-container selected-item-inline-counter qbs-text-sm qbs-gap-1 ${!tabInlineSearch && autoDropdown ? 'selected-item-tool-direct-counter' : ''}`}>
-                                    <Tooltip title={allSelectedTooltipContent} enabled={selectedItems?.length > 0 ? true : false}>
-                                        <span className="badge qbs-rounded-full qbs-text-xs qbs-inline-flex qbs-items-center qbs-justify-center qbs-px-2 qbs-py-1 qbs-leading-none qbs-min-w-6 qbs-min-h-6">
-                                            {selectedItems?.length}
-                                        </span>
-                                    </Tooltip>
-                                </div>
-                            ) : (
-                                <div
-                                    className="selected-items-container qbs-text-sm qbs-gap-1"
-                                    onClick={() => onInputFocus()}
-                                >
-                                    <span
-                                        className={`badge qbs-rounded-full qbs-text-xs qbs-inline-flex qbs-items-center qbs-justify-center qbs-px-2 qbs-py-1 qbs-leading-none qbs-min-w-6 qbs-min-h-6 ${selectedItems?.length > 99 ? 'qbs-text-hundred-plus' : ''
-                                            }`}
-                                    >
-                                        {selectedItems?.length > 99 ? '99+' : selectedItems?.length}
-                                    </span>
-                                    <span className="selected-label-text">
-                                        {selectedLabel && selectedLabel !== '' ? (
-                                            selectedLabel
-                                        ) : (
-                                            <>Item{selectedItems?.length > 1 && 's'} Selected</>
-                                        )}
-                                    </span>
-                                </div>
-                            )}
-                        </>
-                    )}
-
-                    <>
-                        {autoDropdown && !tabInlineSearch && !disabled && !readOnly && (
-                            <div className='qbs-inline-all-dropdown-btn'>
-                                <button
-                                    disabled={disabled ?? readOnly}
-                                    onClick={(e) => handleOpenDropdown(e)}
-                                    className="text-[#667085] focus-visible:outline-slate-100 absolute right-2 qbs-all-dropdown-btn"
-                                    data-testid="drop-arrow"
-                                    type="button"
-                                    id="autocomplete-drop-icon"
-                                    ref={dropBtnRef}
-                                >
-                                    <AllDropArrow
-                                        type={!allDataLoaded ? 'down' : 'up'}
-                                        uniqueId="all-dropdow-arrow-icon"
-                                        className="all-dropdow-arrow-icon"
-                                    />
-                                </button>
-                            </div>
-                        )}
-                    </>
-
-                    <div
-                        className={`qbs-textfield-expandable ${!expandable ? 'qbs-normal' : ''
-                            }`}
-                        data-value={
-                            selectedItems?.length > 0 || searchValue
-                                ? !tabInlineSearch && searchValue
-                                    ? searchValue
-                                    : placeholder ?? ''
-                                : placeholder ?? ''
-                        }
-                        onClick={() => onInputFocus()}
-                    >
-                        <input
-                            id={id}
-                            ref={inputRef}
-                            autoComplete="off"
-                            type="text"
-                            value={
-                                type === 'auto_suggestion' && !expandable && tabInlineSearch
-                                    ? inputValue
-                                    : searchValue || inputValue
-                            }
-                            onChange={handleChange}
-                            // onBlur={handleBlur}
-                            onFocus={(e) => {
-                                onFocus?.(e);
-                                if (!searchLoaded && searchValue && searchValue !== '') {
-                                    handleChangeWithDebounce(searchValue);
-                                    setSearchLoaded(true);
-                                }
-                            }}
-                            onClick={() => handleOnClick()}
-                            className={generateClassName()}
-                            placeholder={
-                                selectedItems?.length > 0
-                                    ? !tabInlineSearch && searchValue
-                                        ? searchValue
-                                        : !tabInlineSearch
-                                            ? placeholder ?? ''
-                                            : ''
-                                    : placeholder ?? ''
-                            }
-                            readOnly={
-                                readOnly ||
-                                type === 'custom_select' ||
-                                (type === 'auto_suggestion' && !expandable && tabInlineSearch)
-                            }
-                            disabled={disabled}
-                            data-testid="custom-autocomplete"
-                        />
-                    </div>
-
-                    {enableToolsTab && (
-                        <button
-                            disabled={disabled ?? readOnly}
-                            onClick={(e) => handleOpenToolsTab(e)}
-                            className={`absolute right-2 top-2 tools-drop-btn focus-visible:outline-slate-100 ${viewMode ? 'hidden' : ''} ${tabSelectedItems?.length > 0 ? 'has-selected-items' : ''} ${showToolsTab ? 'tools-drop-btn-active' : ''}`}
-                            data-testid="tools-drop-arrow"
-                            type="button"
-                            id="tools-drop-icon"
-                            ref={toolsBtnRef}
-                        >
-                            <Tools
-                                uniqueId="tools-arrow-icon"
-                                className="tools-arrow-icon"
-                            />
-
-                        </button>
-                    )}
-                    {/* Displaying Loading Spinner */}
-
-                    {/* Suggestions Dropdown */}
-
-                    {dropOpen &&
-                        ReactDOM.createPortal(
-                            <div
-                                ref={dropRef}
-                                style={{
-                                    ...dropdownStyle,
-                                    minHeight: viewMode ? 100 : 192,
-                                    visibility: visible ? 'visible' : 'hidden',
-                                    opacity: visible ? 1 : 0,
-                                    transition: 'opacity 0.2s ease-in-out',
-                                }}
-                                className={`qbs-autocomplete-suggestions qbs-autocomplete-selected-suggestions ${viewMode ? 'qbs-dropdown-selected-preview' : ''
-                                    } ${viewMode && selectedItems?.length === 0 ? 'hidden' : ''}`}
-                            >
-                                {!viewMode && (
-                                    <>
-                                        <>{tab.length > 0 && getTabItems()}</>
-                                        {type === 'auto_suggestion' &&
-                                            !expandable &&
-                                            tabInlineSearch && (
-                                                <div
-                                                    style={{ position: 'relative' }}
-                                                    className="react-core-ts-search-container qbs-autocomplete-selected-suggestions-outer"
-                                                >
-                                                    <span className="dropdown-search-icon">
-                                                        <Search />
-                                                    </span>
-                                                    <input
-                                                        className="dropdown-search-input"
-                                                        onChange={handleSuggestionChange}
-                                                        value={searchValue}
-                                                        placeholder="Type to search"
-                                                        autoComplete="off"
-                                                        ref={inputSearchRef}
-                                                    />
-
-                                                    <>
-                                                        {autoDropdown && !disabled && !readOnly && (
-                                                            <button
-                                                                disabled={disabled ?? readOnly}
-                                                                onClick={(e) => handleOpenDropdown(e)}
-                                                                className="text-[#667085] focus-visible:outline-slate-100 absolute right-2 qbs-all-dropdown-btn"
-                                                                data-testid="drop-arrow"
-                                                                type="button"
-                                                                id="autocomplete-drop-icon"
-                                                                ref={dropBtnRef}
-                                                            >
-                                                                <AllDropArrow
-                                                                    type={!allDataLoaded ? 'down' : 'up'}
-                                                                    uniqueId="all-dropdow-arrow-icon"
-                                                                    className="all-dropdow-arrow-icon"
-                                                                />
-                                                            </button>
-                                                        )}
-                                                    </>
-                                                </div>
-                                            )}
-                                    </>
-                                )}
-
-                                {filteredData?.length > 0 && enableSelectAll && isMultiple && (
-                                    <div
-                                        id="select-all"
-                                        className={`qbs-select-all-link qbs-cursor-pointer qbs-text-xs`}
-                                        onClick={handleSelectAll}
-                                    >
-                                        <div
-                                            className={`qbs-autocomplete-listitem-container qbs-autocomplete-checkbox-container`}
-                                        >
-                                            <div className="qbs-autocomplete-checkbox">
-                                                <input
-                                                    type="checkbox"
-                                                    checked={selectAll}
-                                                    onChange={handleSelectAll}
-                                                    id={`qbs-checkbox-all`}
-                                                />
-                                                <label htmlFor={`qbs-checkbox-all`}>
-                                                    <svg
-                                                        width="8"
-                                                        height="6"
-                                                        viewBox="0 0 8 6"
-                                                        fill="none"
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                        <path
-                                                            d="M0 3.21739L2.89883 6L8 1.06994L6.89494 0L2.89883 3.86768L1.09728 2.14745L0 3.21739Z"
-                                                            fill="white"
-                                                        />
-                                                    </svg>
-                                                </label>
-                                            </div>
-                                            <div className={`qbs-autocomplete-suggestions-item`}>
-                                                Select All
-                                            </div>
-                                        </div>
-                                    </div>
-                                )}
-
-                                <div
-                                    className={`qbs-autocomplete-suggestions-sub qbs-autocomplete-selected-suggestions-outer ${viewMode ? 'hidden' : ''
-                                        }`}
-                                    ref={itemsRef}
-                                    style={{
-                                        maxHeight: `${selHeight}px`,
-                                        minHeight: `${selHeight}px`,
-                                    }}
-                                >
-                                    {filteredData?.length > 0 ? (
-                                        filteredData.map((suggestion: ValueProps, idx: number) => (
-                                            <DropdownList
-                                                idx={idx}
-                                                suggestion={suggestion}
-                                                isSelected={isSelected}
-                                                handleSuggestionClick={() =>
-                                                    handleSuggestionClick(suggestion, idx)
-                                                }
-                                                handleMultiSelect={handleMultiSelect}
-                                                selected={selected}
-                                                isMultiple={isMultiple}
-                                                singleSelect={singleSelect}
-                                                desc={desc}
-                                                key={suggestion[descId]}
-                                                shortCode={shortCode}
-                                                labelCode={labelCode}
-                                                focusedIndex={focusedIndex}
-                                                setItemRef={(index, ref) => {
-                                                    itemRefs.current[index] = ref; // Store each ref properly
-                                                }}
-                                            />
-                                        ))
-                                    ) : (
-                                        <>
-                                            {isLoading ||
-                                                (searchValue !== searchOldValue &&
-                                                    searchValue !== '' &&
-                                                    async) ? (
-                                                <div className="qbs-flex qbs-align-middle qbs-justify-center qbs-min-emp-h">
-                                                    <div className="qbs-pt-16 qbs-autocomplete-loader">
-                                                        <Spinner />
-                                                    </div>
-                                                </div>
-                                            ) : (
-                                                <div className="qbs-autocomplete-notfound qbs-text-center qbs-justify-center qbs-align-middle qbs-min-emp-h">
-                                                    {searchValue !== ''
-                                                        ? notDataMessage ?? 'No Results Found'
-                                                        : initialDataMessage ?? 'Type to search'}
-                                                </div>
-                                            )}
-                                        </>
-                                    )}
-                                    {paginationEnabled &&
-                                        nextBlock !== 0 &&
-                                        nextBlock !== undefined &&
-                                        filteredData?.length > 0 && (
-                                            <div
-                                                className="loadMoreSection"
-                                                onClick={() => handleLoadMore()}
-                                            >
-                                                <p style={{ margin: 2 }}>Load More</p>
-                                            </div>
-                                        )}
-                                </div>
-                                <>
-                                    {countOnly && selectedItems?.length > 0 && (
-                                        <>
-                                            <div
-                                                className={`qbs-expandable-container qbs-dropdown-selected-container`}
-                                                ref={dropdownSelectedRef}
-                                            >
-                                                <div className={`qbs-flex qbs-w-full qbs-text-xs`}>
-                                                    <div className="qbs-selected-lbs qbs-flex-grow">
-                                                        Selected Items
-                                                    </div>
-                                                    <div
-                                                        className={`qbs-clear-link qbs-text-right qbs-cursor-pointer ${viewMode ? 'hidden' : ''
-                                                            }`}
-                                                        onClick={handleClearSelected}
-                                                    >
-                                                        Clear all
-                                                    </div>
-                                                    <div
-                                                        className={`qbs-done-link qbs-text-right qbs-cursor-pointer ${viewMode ? 'hidden' : ''
-                                                            }`}
-                                                        onClick={() => {
-                                                            setDropOpen(false);
-                                                            setAllDataLoaded(false);
-                                                        }}
-                                                    >
-                                                        Done
-                                                    </div>
-                                                </div>
-
-                                                {getSelectedItems(true)}
-
-                                                <>
-                                                    {selectedItems?.length > itemCount &&
-                                                        showAllSelected && (
-                                                            <div className="qbs-readmore-collapse">
-                                                                <div
-                                                                    className="qbs-more-collapse"
-                                                                    onClick={() => {
-                                                                        handleCollapseArrowClick();
-                                                                    }}
-                                                                >
-                                                                    <DropArrow
-                                                                        className={`icon-button-rotate`}
-                                                                        uniqueDropArrowId={uniqueDropArrowId}
-                                                                    />
-                                                                </div>
-                                                            </div>
-                                                        )}
-                                                </>
-                                            </div>
-                                        </>
-                                    )}
-                                </>
-                            </div>,
-                            document.body
-                        )}
-
-                    {enableToolsTab && (
-                        <DropdownFilterTabs
-                            label=""
-                            name={tabName ?? ''}
-                            desc={tabDesc}
-                            descId={tabDescId}
-                            type="auto_suggestion"
-                            dropdownRef={dropdownRef}
-                            async={true}
-                            isMultiple={true}
-                            typeOnlyFetch={true}
-                            itemCount={itemCount}
-                            textCount={textCount}
-                            getData={getTabData}
-                            placeholder=""
-                            selectedItems={tabSelectedItems}
-                            onChange={onToolTabChange}
-                            countOnly={true}
-                            tab={toolTabs}
-                            clearTabSwitch={toolTabClearSwitch}
-                            tabInlineSearch={true}
-                            autoDropdown={autoDropdown}
-                            open={showToolsTab}
-                            data={tabData}
-                            enableSelectAll={enableSelectAll}
-                            applyTabFilter={handleApplyTabFilter}
-                            onToolClose={() => setShowToolsTab(false)}
-                            moreOptionTab={moreOptionTab}
-                            moreOptionTabLabel={moreOptionTabLabel}
-                            moreOptionTabIcon={moreOptionTabIcon}
-                            onMoreOptionChange={onMoreOptionChange}
-                            moreOptionResetKey={moreOptionResetKey}
-                        />)
-                    }
-                </div>
-
-                {/* Displaying Validation Error */}
-                {errors && (
-                    <div
-                        className="text-error text-error-label mt-[1px]"
-                        data-testid="autocomplete-error"
-                    >
-                        {errors.message}
-                    </div>
-                )}
-            </div>
-        );
-    }
-);
-
-export default React.memo(AutoCompleteWithTabFilter);