react-core-ts 1.9.18 → 2.0.0

package/dist/AutoCompleteWithTabFilter.js

@@ -0,0 +1,743 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importStar(require("react"));
+var react_dom_1 = __importDefault(require("react-dom"));
+var DropdownList_1 = __importDefault(require("./components/DropdownList"));
+var autosuggestions_1 = require("./utilities/autosuggestions");
+var debounce_1 = require("./utilities/debounce");
+var deepEqual_1 = require("./utilities/deepEqual");
+var filterSuggestions_1 = require("./utilities/filterSuggestions");
+var icons_1 = require("./utilities/icons");
+var NewTooltip_1 = __importDefault(require("./utilities/NewTooltip"));
+var getKeyValue_1 = require("./utilities/getKeyValue");
+var dropdownFilterTabs_1 = __importDefault(require("./dropdownFilterTabs"));
+var AutoCompleteWithTabFilter = (0, react_1.forwardRef)(function (_a, ref) {
+    var label = _a.label, onChange = _a.onChange, _b = _a.getData, getData = _b === void 0 ? function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, []];
+    }); }); } : _b, _c = _a.data, data = _c === void 0 ? [] : _c, errors = _a.errors, _d = _a.required, required = _d === void 0 ? false : _d, name = _a.name, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, placeholder = _a.placeholder, id = _a.id, _f = _a.type, type = _f === void 0 ? 'custom_select' : _f, _g = _a.selectedItems, propsSeelctedItems = _g === void 0 ? [] : _g, _h = _a.readOnly, readOnly = _h === void 0 ? false : _h, _j = _a.disabled, disabled = _j === void 0 ? false : _j, value = _a.value, _k = _a.searchValue, propsSearchValue = _k === void 0 ? '' : _k, _l = _a.isMultiple, isMultiple = _l === void 0 ? false : _l, _m = _a.desc, desc = _m === void 0 ? 'name' : _m, _o = _a.descId, descId = _o === void 0 ? 'id' : _o, singleSelect = _a.singleSelect, className = _a.className, _p = _a.async, async = _p === void 0 ? false : _p, paginationEnabled = _a.paginationEnabled, _q = _a.initialLoad, initialLoad = _q === void 0 ? false : _q, actionLabel = _a.actionLabel, handleAction = _a.handleAction, nextBlock = _a.nextBlock, notDataMessage = _a.notDataMessage, initialDataMessage = _a.initialDataMessage, onFocus = _a.onFocus, onSearchValueChange = _a.onSearchValueChange, _r = _a.expandable, expandable = _r === void 0 ? false : _r, _s = _a.textCount, textCount = _s === void 0 ? 10 : _s, _t = _a.itemCount, itemCount = _t === void 0 ? 1 : _t, scrollRef = _a.scrollRef, _u = _a.countOnly, countOnly = _u === void 0 ? true : _u, _v = _a.typeOnlyFetch, typeOnlyFetch = _v === void 0 ? false : _v, _w = _a.tab, tab = _w === void 0 ? [] : _w, _x = _a.clearTabSwitch, clearTabSwitch = _x === void 0 ? false : _x, _y = _a.selectedRowLimit, selectedRowLimit = _y === void 0 ? 2 : _y, _z = _a.topMargin, topMargin = _z === void 0 ? 0 : _z, _0 = _a.currentTab, currentTab = _0 === void 0 ? 0 : _0, _1 = _a.selectedLabel, selectedLabel = _1 === void 0 ? '' : _1, _2 = _a.viewMode, viewMode = _2 === void 0 ? false : _2, handleUpdateParent = _a.handleUpdateParent, _3 = _a.shortCode, shortCode = _3 === void 0 ? '' : _3, _4 = _a.labelCode, labelCode = _4 === void 0 ? '' : _4, _5 = _a.tabInlineSearch, tabInlineSearch = _5 === void 0 ? true : _5, _6 = _a.matchFromStart, matchFromStart = _6 === void 0 ? false : _6, _7 = _a.autoDropdown, autoDropdown = _7 === void 0 ? false : _7, _8 = _a.enableSelectAll, enableSelectAll = _8 === void 0 ? false : _8, tabName = _a.tabName, _9 = _a.tabDesc, tabDesc = _9 === void 0 ? 'tabName' : _9, _10 = _a.tabDescId, tabDescId = _10 === void 0 ? 'tabId' : _10, _11 = _a.tabSelectedItems, tabSelectedItems = _11 === void 0 ? [] : _11, getTabData = _a.getTabData, tabData = _a.tabData, _12 = _a.toolTabs, toolTabs = _12 === void 0 ? [] : _12, _13 = _a.enableToolsTab, enableToolsTab = _13 === void 0 ? true : _13, _14 = _a.toolTabClearSwitch, toolTabClearSwitch = _14 === void 0 ? false : _14, onToolTabChange = _a.onToolTabChange, _15 = _a.autoRefreshMainDropdown, autoRefreshMainDropdown = _15 === void 0 ? true : _15;
+    var dropdownRef = (0, react_1.useRef)(null);
+    var selItemRef = (0, react_1.useRef)(null);
+    var itemsRef = (0, react_1.useRef)(null);
+    var dropdownSelectedRef = (0, react_1.useRef)(null);
+    var tabRef = (0, react_1.useRef)(null);
+    var dropLevelRef = (0, react_1.useRef)('bottom');
+    // State Hooks Section
+    var _16 = (0, react_1.useState)(true), isInitialRender = _16[0], setIsInitialRender = _16[1];
+    var _17 = (0, react_1.useState)(value), inputValue = _17[0], setInputValue = _17[1];
+    var _18 = (0, react_1.useState)(propsSearchValue), searchValue = _18[0], setSearchValue = _18[1];
+    var _19 = (0, react_1.useState)(''), searchOldValue = _19[0], setSearchOldValue = _19[1];
+    var _20 = (0, react_1.useState)(1), nextPage = _20[0], setNextPage = _20[1];
+    var _21 = (0, react_1.useState)(false), dropOpen = _21[0], setDropOpen = _21[1];
+    var _22 = (0, react_1.useState)([]), selectedItems = _22[0], setSelectedItems = _22[1];
+    var _23 = (0, react_1.useState)(propsSearchValue ? false : true), searchLoaded = _23[0], setSearchLoaded = _23[1];
+    var _24 = (0, react_1.useState)(false), showAllSelected = _24[0], setShowAllSelected = _24[1];
+    var _25 = (0, react_1.useState)(184), selHeight = _25[0], setSelHeight = _25[1];
+    var _26 = (0, react_1.useState)(1), expandArrowClick = _26[0], setExpandArrowClick = _26[1];
+    var _27 = (0, react_1.useState)(false), visible = _27[0], setVisible = _27[1];
+    var _28 = (0, react_1.useState)(currentTab), activeTab = _28[0], setActiveTab = _28[1];
+    var _29 = (0, react_1.useState)(0), focusedIndex = _29[0], setFocusedIndex = _29[1];
+    var itemRefs = (0, react_1.useRef)([]);
+    // API call for suggestions through a custom hook
+    var inputRef = (0, react_1.useRef)(null);
+    var dropRef = (0, react_1.useRef)(null);
+    var inputSearchRef = (0, react_1.useRef)(null);
+    var dropBtnRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, function () { return inputRef.current; });
+    var _30 = (0, react_1.useState)({
+        top: 0,
+        left: 0,
+        width: 200,
+        transform: '',
+    }), dropdownStyle = _30[0], setDropdownStyle = _30[1];
+    var _31 = (0, react_1.useState)(false), selectAll = _31[0], setSelectAll = _31[1];
+    var _32 = (0, react_1.useState)(false), refetchData = _32[0], setRefetchData = _32[1];
+    var _33 = (0, react_1.useState)(false), allDataLoaded = _33[0], setAllDataLoaded = _33[1];
+    var toolsBtnRef = (0, react_1.useRef)(null);
+    var _34 = (0, react_1.useState)(false), showToolsTab = _34[0], setShowToolsTab = _34[1];
+    // Track previous tabSelectedItems to detect new items
+    var prevTabSelectedItemsRef = (0, react_1.useRef)([]);
+    var originalOverflow = '';
+    var hasScrollbar = false;
+    var _35 = (0, autosuggestions_1.useSuggestions)(getData, data, dropOpen, async, paginationEnabled, initialLoad, inputValue, isMultiple, setNextPage, selectedItems, typeOnlyFetch
+    // nextBlock
+    ), suggestions = _35.suggestions, isLoading = _35.isLoading, handlePickSuggestions = _35.handlePickSuggestions, resetSuggections = _35.resetSuggections;
+    // Handling the selection of a suggestion
+    var handleSuggestionClick = (0, react_1.useCallback)(function (suggestion, idx) {
+        if (isMultiple) {
+            setFocusedIndex(idx);
+            setSelectedItems(function (prev) {
+                var isAdded = prev && prev.length > 0
+                    ? prev.some(function (item) {
+                        return (0, getKeyValue_1.getKeyValue)(item, descId, 'id') ===
+                            (0, getKeyValue_1.getKeyValue)(suggestion, descId, 'id');
+                    })
+                    : false;
+                if (isAdded) {
+                    return prev.filter(function (item) {
+                        return (0, getKeyValue_1.getKeyValue)(item, descId, 'id') !==
+                            (0, getKeyValue_1.getKeyValue)(suggestion, descId, 'id');
+                    });
+                }
+                else {
+                    return __spreadArray(__spreadArray([], prev, true), [suggestion], false);
+                }
+            });
+        }
+        else {
+            setFocusedIndex(idx);
+            setInputValue(String(suggestion[desc]));
+            setSearchValue('');
+            onChange(suggestion);
+            setDropOpen(false);
+            setShowToolsTab(false);
+        }
+    }, [tab, activeTab, descId, desc, onChange]);
+    // Adding debounce to avoid making API calls on every keystroke
+    var debouncedUpdate = (0, react_1.useCallback)((0, debounce_1.debounce)(function (value, tabVal) {
+        setSearchOldValue(value);
+        handlePickSuggestions(value, 1, false, tabVal);
+    }, 500), []);
+    var handleChangeWithDebounce = function (value) {
+        if ((type === 'auto_complete' || type === 'auto_suggestion') && async) {
+            var activeTabVal = tab.length > 0 ? tab === null || tab === void 0 ? void 0 : tab[activeTab].id : undefined;
+            debouncedUpdate(value, activeTabVal);
+        }
+    };
+    var handleMultiSelect = (0, react_1.useCallback)(function (e, suggestion) {
+        var checked = e.target.checked;
+        if (isMultiple) {
+            if (checked) {
+                setSelectedItems(function (prev) { return __spreadArray(__spreadArray([], prev, true), [suggestion], false); });
+            }
+            else {
+                setSelectedItems(function (prev) {
+                    return prev.filter(function (item, i) {
+                        return (0, getKeyValue_1.getKeyValue)(item, descId, 'id') !==
+                            (0, getKeyValue_1.getKeyValue)(suggestion, descId, 'id');
+                    });
+                });
+            }
+        }
+        else {
+            if (checked) {
+                setInputValue(String(suggestion[desc]));
+                onChange(suggestion);
+            }
+            else {
+                setInputValue('');
+            }
+        }
+    }, [isMultiple, descId, desc, onChange]);
+    (0, react_1.useEffect)(function () {
+        // Only update if different
+        if (!(0, deepEqual_1.deepEqual)(selectedItems, propsSeelctedItems)) {
+            setSelectedItems(propsSeelctedItems);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [propsSeelctedItems]);
+    // Effect to set the input value whenever `value` prop changes
+    (0, react_1.useEffect)(function () {
+        setInputValue(value !== null && value !== void 0 ? value : '');
+    }, [value]);
+    var handleChange = (0, react_1.useCallback)(function (e) {
+        var value = e.target.value;
+        //setVisibleDrop();
+        setSearchValue(value);
+        handleChangeWithDebounce(value);
+        if (!tabInlineSearch) {
+            onSearchValueChange === null || onSearchValueChange === void 0 ? void 0 : onSearchValueChange(value);
+        }
+        if (!value) {
+            if (!typeOnlyFetch)
+                setInputValue('');
+            // onChange({ [descId]: '', [desc]: '' });
+        }
+        if (!tabInlineSearch) {
+            setDropOpen(true);
+            setShowToolsTab(false);
+        }
+    }, [handleChangeWithDebounce, tabInlineSearch, onSearchValueChange, typeOnlyFetch]);
+    var handleSuggestionChange = (0, react_1.useCallback)(function (e) {
+        var value = e.target.value;
+        //setVisibleDrop();
+        var trimStart = value.trimStart();
+        setSearchValue(trimStart);
+        handleChangeWithDebounce(trimStart);
+        setAllDataLoaded(false);
+    }, [handleChangeWithDebounce]);
+    var handleClearSelected = (0, react_1.useCallback)(function () {
+        var _a;
+        setSelectedItems([]);
+        setShowAllSelected(false);
+        if (searchValue && type === 'auto_suggestion' && tabInlineSearch) {
+            setSearchValue('');
+        }
+        if (isMultiple)
+            onChange([]);
+        else
+            onChange((_a = {}, _a[descId] = '', _a[desc] = '', _a));
+        if (async && type === 'auto_suggestion' && tabInlineSearch)
+            resetSuggections === null || resetSuggections === void 0 ? void 0 : resetSuggections();
+    }, [searchValue, type, tabInlineSearch, isMultiple, onChange, descId, desc, async, resetSuggections]);
+    var generateClassName = (0, react_1.useCallback)(function () {
+        return "qbs-textfield-default ".concat(className, " ").concat(errors && (errors === null || errors === void 0 ? void 0 : errors.message) ? 'textfield-error' : 'textfield', " ").concat(expandable ? 'expandable' : '');
+    }, [errors, name]);
+    var handleRemoveSelectedItem = (0, react_1.useCallback)(function (index) {
+        setSelectedItems(function (prev) {
+            return prev.filter(function (_, i) { return i !== index; });
+        });
+    }, []);
+    var uniqueDropArrowId = "".concat(name, "-drop-arrow-selected-list-icon");
+    (0, react_1.useEffect)(function () {
+        var handleClickOutside = function (event) {
+            var _a, _b;
+            if (dropRef.current &&
+                event.target instanceof Node &&
+                !dropRef.current.contains(event.target) &&
+                ((_a = event.target) === null || _a === void 0 ? void 0 : _a.id) !== uniqueDropArrowId &&
+                !((_b = event.target) === null || _b === void 0 ? void 0 : _b.closest('.tools-drop-btn'))) {
+                setTimeout(function () {
+                    setDropOpen(false);
+                    setShowToolsTab(false);
+                    if (!typeOnlyFetch)
+                        setSearchValue('');
+                }, 200);
+                //setSearchValue("");
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        window.addEventListener('scroll', handleClickOutside);
+        var scrollableDivs = document.querySelectorAll('div[style*="overflow"], .overflow-auto, .overflow-y-auto, .overflow-x-auto');
+        scrollableDivs.forEach(function (div) {
+            return div.addEventListener('scroll', handleClickOutside);
+        });
+        if (scrollRef && scrollRef.current && scrollRef.current !== null) {
+            scrollRef.current.addEventListener('scroll', handleClickOutside);
+        }
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+            window.removeEventListener('scroll', handleClickOutside);
+            scrollableDivs.forEach(function (div) {
+                return div.removeEventListener('scroll', handleClickOutside);
+            });
+            if (scrollRef && scrollRef.current && scrollRef.current !== null) {
+                scrollRef.current.removeEventListener('scroll', handleClickOutside);
+            }
+        };
+    }, []);
+    // Filtering suggestions based on type and search value
+    var selected = isMultiple ? selectedItems : inputValue;
+    var filteredData = (0, filterSuggestions_1.filterSuggestions)(suggestions, searchValue, type, desc, selected, async, false, true, matchFromStart);
+    var adjustDropdownPosition = (0, react_1.useCallback)(function () {
+        var _a, _b;
+        if (dropdownRef.current) {
+            var inputRect_1 = dropdownRef.current.getBoundingClientRect();
+            var dropdownPosition_1 = {
+                left: inputRect_1.left + window.scrollX,
+                width: inputRect_1.width,
+                top: 0,
+            };
+            // Check if there's enough space below the input for the dropdown
+            var spaceBelow = window.innerHeight - inputRect_1.bottom;
+            var spaceAbove = inputRect_1.top + window.scrollY;
+            var dropdownHeight = viewMode ? 160 : 300; // Assume a fixed height or calculate based on content
+            var defaultHeight_1 = 184;
+            if (countOnly) {
+                if (dropdownSelectedRef === null || dropdownSelectedRef === void 0 ? void 0 : dropdownSelectedRef.current)
+                    dropdownHeight += (_a = dropdownSelectedRef === null || dropdownSelectedRef === void 0 ? void 0 : dropdownSelectedRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight;
+            }
+            if (tab.length > 0) {
+                if (tabRef === null || tabRef === void 0 ? void 0 : tabRef.current)
+                    dropdownHeight += (_b = tabRef === null || tabRef === void 0 ? void 0 : tabRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight;
+            }
+            if (spaceBelow >= dropdownHeight) {
+                dropLevelRef.current = 'bottom';
+                dropdownPosition_1.top =
+                    inputRect_1.top + window.scrollY + inputRect_1.height;
+                setSelHeight(function (prev) { return prev !== defaultHeight_1 ? defaultHeight_1 : prev; });
+            }
+            else if (spaceAbove >= dropdownHeight) {
+                var sHeight = tabInlineSearch ? 73 : 113;
+                sHeight =
+                    sHeight -
+                        ((filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 && enableSelectAll && isMultiple
+                            ? 32
+                            : 0);
+                dropLevelRef.current = 'top';
+                dropdownPosition_1.top =
+                    inputRect_1.top +
+                        window.scrollY -
+                        dropdownHeight +
+                        sHeight +
+                        topMargin;
+                setSelHeight(function (prev) { return prev !== defaultHeight_1 ? defaultHeight_1 : prev; });
+            }
+            else {
+                dropLevelRef.current = 'bottom';
+                dropdownPosition_1.top =
+                    inputRect_1.top + window.scrollY + inputRect_1.height;
+                if (itemsRef === null || itemsRef === void 0 ? void 0 : itemsRef.current) {
+                    var totalH = showAllSelected ? 148 : defaultHeight_1;
+                    var selH = totalH - (dropdownHeight - spaceBelow);
+                    var newHeight_1 = selH < 50 ? 50 : selH;
+                    setSelHeight(function (prev) { return prev !== newHeight_1 ? newHeight_1 : prev; });
+                }
+            }
+            // setDropdownStyle({
+            //   ...dropdownPosition,
+            // });
+            setDropdownStyle(function (prevStyle) {
+                var newStyle = __assign(__assign({}, prevStyle), { transform: "translateY(".concat(dropdownPosition_1.top, "px)"), left: inputRect_1.left + window.scrollX, width: inputRect_1.width });
+                // 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 === null || filteredData === void 0 ? void 0 : filteredData.length, enableSelectAll, isMultiple, topMargin, showAllSelected]);
+    (0, react_1.useEffect)(function () {
+        window.addEventListener('resize', adjustDropdownPosition);
+        adjustDropdownPosition();
+        return function () {
+            window.removeEventListener('resize', adjustDropdownPosition);
+        };
+    }, [adjustDropdownPosition]);
+    (0, react_1.useEffect)(function () {
+        if (isInitialRender) {
+            setIsInitialRender(false);
+        }
+        else {
+            onChange(selectedItems);
+        }
+        adjustDropdownPosition();
+        setTimeout(function () {
+            adjustDropdownPosition();
+        }, 200);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedItems, adjustDropdownPosition]);
+    (0, react_1.useEffect)(function () {
+        adjustDropdownPosition();
+        setTimeout(function () {
+            adjustDropdownPosition();
+        }, 200);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filteredData, adjustDropdownPosition]);
+    (0, react_1.useEffect)(function () {
+        // Handle keyboard navigation
+        var handleKeyDown = function (e) {
+            var _a, _b;
+            if (!dropOpen)
+                return;
+            var atBottom = focusedIndex === filteredData.length - 1;
+            var atTop = focusedIndex === 0;
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    if (itemsRef.current) {
+                        if (!atBottom) {
+                            itemsRef.current.scrollTop +=
+                                ((_a = itemRefs.current[focusedIndex]) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 50;
+                        }
+                        else {
+                            itemsRef.current.scrollTop = 0;
+                        }
+                    }
+                    setFocusedIndex(function (prev) { return (prev + 1) % (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length); });
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    if (itemsRef.current) {
+                        if (!atTop) {
+                            itemsRef.current.scrollTop -=
+                                ((_b = itemRefs.current[focusedIndex]) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 50;
+                        }
+                        else {
+                            itemsRef.current.scrollTop = 0;
+                        }
+                    }
+                    setFocusedIndex(function (prev) { return (prev - 1 + (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length)) % (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length); });
+                    break;
+                case 'Enter':
+                    e.preventDefault();
+                    if (filteredData && filteredData.length > 0)
+                        handleSuggestionClick(filteredData[focusedIndex], focusedIndex);
+                    break;
+                case 'Escape':
+                    e.preventDefault();
+                    setDropOpen(false);
+                    break;
+                default:
+                    break;
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return function () {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [filteredData, dropOpen, isLoading, focusedIndex]);
+    var isSelected = function (item, selectedItems) {
+        if (Array.isArray(selectedItems)) {
+            return selectedItems.some(function (selectedItem) {
+                return (0, getKeyValue_1.getKeyValue)(selectedItem, desc, 'name') === (0, getKeyValue_1.getKeyValue)(item, desc, 'name') ||
+                    (0, getKeyValue_1.getKeyValue)(selectedItem, descId, 'id') === (0, getKeyValue_1.getKeyValue)(item, descId, 'id');
+            });
+        }
+        else {
+            return ((0, getKeyValue_1.getKeyValue)(item, desc, 'name') === (0, getKeyValue_1.safeToLowerString)(selectedItems) ||
+                (0, getKeyValue_1.getKeyValue)(item, descId, 'id') === (0, getKeyValue_1.safeToLowerString)(selectedItems));
+        }
+    };
+    var handleLoadMore = function () {
+        if (paginationEnabled) {
+            handlePickSuggestions(searchValue, nextPage + 1, true);
+            setNextPage(nextPage + 1);
+        }
+    };
+    var handleOnClick = function () {
+        (!disabled && !readOnly && !expandable && !dropOpen) || viewMode
+            ? setVisibleDrop()
+            : '';
+    };
+    var onInputFocus = function () {
+        if (!dropOpen) {
+            if (countOnly) {
+                setTimeout(function () {
+                    if (inputSearchRef.current)
+                        inputSearchRef.current.focus();
+                }, 10);
+            }
+            else {
+                if (inputRef.current)
+                    inputRef.current.focus();
+            }
+            // handleOnClick();
+        }
+    };
+    var handleShowAllSelected = (0, react_1.useCallback)(function (enabled) {
+        setExpandArrowClick(expandArrowClick + 1);
+        if (enabled) {
+            setShowAllSelected(true);
+        }
+        else {
+            setShowAllSelected(false);
+        }
+    }, [expandArrowClick]);
+    var handleCollapseArrowClick = (0, react_1.useCallback)(function () {
+        setExpandArrowClick(expandArrowClick + 1);
+        setShowAllSelected(false);
+    }, [expandArrowClick]);
+    var tooltipContent = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > itemCount
+        ? selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.slice(itemCount).map(function (item) { return item[desc]; }).join(', ')
+        : '';
+    var allSelectedTooltipContent = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0
+        ? selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(function (item) { return item[desc]; }).join(', ')
+        : '';
+    var setVisibleDrop = function () {
+        hasScrollbar = document.body.scrollHeight > window.innerHeight;
+        if (!originalOverflow && !hasScrollbar) {
+            originalOverflow = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
+        }
+        setVisible(false);
+        if (!dropOpen) {
+            setDropOpen(true);
+            setShowToolsTab(false);
+        }
+        setFocusedIndex(0);
+        setTimeout(function () {
+            setVisible(true);
+            if (!hasScrollbar) {
+                document.body.style.overflow = originalOverflow || '';
+            }
+            originalOverflow = '';
+        }, 200);
+    };
+    var handleTabClick = (0, react_1.useCallback)(function (index) {
+        if (activeTab !== index) {
+            if (clearTabSwitch) {
+                handleClearSelected();
+                if (tabInlineSearch) {
+                    setSearchValue('');
+                    setInputValue('');
+                    handlePickSuggestions('', 1);
+                }
+                else {
+                    resetSuggections === null || resetSuggections === void 0 ? void 0 : resetSuggections();
+                    var activeTabVal = tab.length > 0 ? tab === null || tab === void 0 ? void 0 : tab[index].id : undefined;
+                    handlePickSuggestions(searchValue, 1, false, activeTabVal);
+                }
+                setAllDataLoaded(false);
+            }
+            else if (!tabInlineSearch) {
+                resetSuggections === null || resetSuggections === void 0 ? void 0 : resetSuggections();
+                var activeTabVal = tab.length > 0 ? tab === null || tab === void 0 ? void 0 : tab[index].id : undefined;
+                handlePickSuggestions(searchValue, 1, false, activeTabVal);
+            }
+            setActiveTab(index);
+        }
+    }, [activeTab, clearTabSwitch, handleClearSelected, tabInlineSearch, tab, searchValue, handlePickSuggestions, resetSuggections]);
+    var getSelectedRowLimit = (0, react_1.useCallback)(function () {
+        var maxHeight = 36;
+        if ((selItemRef === null || selItemRef === void 0 ? void 0 : selItemRef.current) && (selItemRef === null || selItemRef === void 0 ? void 0 : selItemRef.current.clientWidth) < 300) {
+            maxHeight = 24;
+        }
+        return selectedRowLimit * maxHeight + 5;
+    }, [selectedRowLimit]);
+    var getSelectedItems = (0, react_1.useCallback)(function (dropdown) {
+        return ((0, jsx_runtime_1.jsxs)("div", __assign({ ref: selItemRef, className: "selected-items-outer-container", style: { maxHeight: "".concat(getSelectedRowLimit(), "px") } }, { children: [selectedItems
+                    .slice(0, (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > itemCount
+                    ? showAllSelected
+                        ? selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length
+                        : itemCount
+                    : selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length)
+                    .map(function (item, index) {
+                    var _a, _b;
+                    return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "selected-items-container" }, { children: (0, jsx_runtime_1.jsx)(NewTooltip_1.default, __assign({ title: String(item === null || item === void 0 ? void 0 : item[desc]), enabled: ((_a = String(item === null || item === void 0 ? void 0 : item[desc])) === null || _a === void 0 ? void 0 : _a.length) > textCount }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "selected-item" }, { children: [((_b = String(item === null || item === void 0 ? void 0 : item[desc])) === null || _b === void 0 ? void 0 : _b.length) > textCount
+                                        ? "".concat(String(item === null || item === void 0 ? void 0 : item[desc]).substring(0, textCount), "...")
+                                        : String(item === null || item === void 0 ? void 0 : item[desc]), !viewMode && ((0, jsx_runtime_1.jsx)("button", __assign({ onClick: function () { return handleRemoveSelectedItem(index); }, className: "remove-item-btn", "aria-label": "Remove ".concat(String(item === null || item === void 0 ? void 0 : item[desc])) }, { children: "X" })))] }), item.id) })) }), index));
+                }), (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > itemCount && !showAllSelected && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "selected-items-container" }, { children: (0, jsx_runtime_1.jsx)(NewTooltip_1.default, __assign({ title: tooltipContent, enabled: true }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "selected-item-more qbs-rounded-full qbs-min-h-6 qbs-min-w-6 qbs-p-1 ".concat(dropdown ? 'qbs-cursor-pointer' : ''), onClick: function () {
+                                handleShowAllSelected(dropdown);
+                            } }, { children: ["+", (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) - itemCount, ' ', (0, jsx_runtime_1.jsx)("span", __assign({ className: "qbs-hidden" }, { children: "more" }))] })) })) })))] })));
+    }, [selectedItems, getSelectedRowLimit, itemCount, showAllSelected, desc, textCount, viewMode, handleRemoveSelectedItem, tooltipContent, handleShowAllSelected]);
+    var getTabItems = (0, react_1.useCallback)(function () {
+        return ((0, jsx_runtime_1.jsx)("ul", __assign({ className: "qbs-flex qbs-flex-wrap qbs-w-full qbs-tab qbs-mb-2 -qbs-mt-2", ref: tabRef }, { children: tab.map(function (item, idx) { return ((0, jsx_runtime_1.jsx)("li", __assign({ className: "qbs-flex-1 qbs-tab-items" }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ 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 ".concat(activeTab === idx ? 'qbs-tab-active-item' : ''), onClick: function () {
+                        handleTabClick(idx);
+                    } }, { children: item.label })) }), "tab-".concat(idx))); }) })));
+    }, [tab, activeTab, handleTabClick]);
+    var handleSelectAll = (0, react_1.useCallback)(function () {
+        if (isMultiple) {
+            if (selectAll) {
+                setSelectedItems(function (prev) {
+                    return prev.filter(function (item) {
+                        return !filteredData.some(function (f) {
+                            return (0, getKeyValue_1.getKeyValue)(f, descId, 'id') === (0, getKeyValue_1.getKeyValue)(item, descId, 'id');
+                        });
+                    });
+                });
+            }
+            else {
+                // Add only items from current tab - batch all updates in single setState
+                setSelectedItems(function (prev) {
+                    var newItems = [];
+                    filteredData.forEach(function (suggestion) {
+                        var isAdded = prev.some(function (item) {
+                            return (0, getKeyValue_1.getKeyValue)(item, descId, 'id') ===
+                                (0, getKeyValue_1.getKeyValue)(suggestion, descId, 'id');
+                        });
+                        if (!isAdded) {
+                            newItems.push(suggestion);
+                        }
+                    });
+                    return __spreadArray(__spreadArray([], prev, true), newItems, true);
+                });
+            }
+        }
+    }, [isMultiple, selectAll, filteredData, descId]);
+    var handleOpenDropdown = (0, react_1.useCallback)(function (e) {
+        if (!suggestions || (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) === 0 || refetchData) {
+            if (autoDropdown && (inputValue === '' || inputValue.trim() === '')) {
+                if (tabInlineSearch && tab.length > 0) {
+                    var activeTabVal = tab.length > 0 ? tab === null || tab === void 0 ? void 0 : tab[activeTab].id : undefined;
+                    handlePickSuggestions('*', 1, false, activeTabVal);
+                }
+                else {
+                    handlePickSuggestions('*', 1);
+                }
+                setRefetchData(false);
+                setAllDataLoaded(true);
+            }
+            else if (!refetchData && inputValue !== '') {
+                if (tabInlineSearch && tab.length > 0) {
+                    var activeTabVal = tab.length > 0 ? tab === null || tab === void 0 ? void 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]);
+    var handleOpenToolsTab = (0, react_1.useCallback)(function (e) {
+        setShowToolsTab(showToolsTab ? false : true);
+        setDropOpen(false);
+    }, [showToolsTab]);
+    (0, react_1.useEffect)(function () {
+        var allSelected = (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0 &&
+            filteredData.every(function (item) {
+                return selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(function (s) {
+                    return (0, getKeyValue_1.getKeyValue)(s, descId, 'id') === (0, getKeyValue_1.getKeyValue)(item, descId, 'id');
+                });
+            });
+        setSelectAll(allSelected);
+    }, [filteredData, selectedItems, descId]);
+    (0, react_1.useEffect)(function () {
+        handleUpdateParent === null || handleUpdateParent === void 0 ? void 0 : handleUpdateParent(dropOpen, dropLevelRef.current);
+    }, [dropOpen]);
+    // Auto-focus search input when dropdown opens with tabInlineSearch
+    (0, react_1.useEffect)(function () {
+        if (dropOpen && visible && tabInlineSearch && type === 'auto_suggestion' && !expandable) {
+            // Small delay to ensure the dropdown is fully rendered
+            setTimeout(function () {
+                if (inputSearchRef.current) {
+                    inputSearchRef.current.focus();
+                }
+            }, 50);
+        }
+    }, [dropOpen, visible, tabInlineSearch, type, expandable]);
+    // Auto-refresh main dropdown data when tabSelectedItems change (add/remove)
+    (0, react_1.useEffect)(function () {
+        if (autoRefreshMainDropdown && dropOpen && async) {
+            // Check if there are changes by comparing with previous state
+            var hasChanges = tabSelectedItems.length !== prevTabSelectedItemsRef.current.length ||
+                !(0, deepEqual_1.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 ((0, jsx_runtime_1.jsxs)("div", __assign({ id: id ? "selected-list-".concat(id) : "selected-list-".concat(name), className: fullWidth ? 'fullWidth' : 'autoWidth', ref: dropdownRef }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ style: {
+                    marginBottom: 5,
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                } }, { children: [(0, jsx_runtime_1.jsxs)("label", __assign({ className: "labels label-text" }, { children: [label, required && (0, jsx_runtime_1.jsx)("span", __assign({ className: "text-error" }, { children: " *" }))] })), (0, jsx_runtime_1.jsx)("span", __assign({ onClick: function () { return handleAction === null || handleAction === void 0 ? void 0 : handleAction(); }, className: "action_label" }, { children: actionLabel }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "qbs-relative  qbs-autocomplete-selected-comp ".concat(expandable ? 'qbs-expandable-container' : 'qbs-container') }, { children: [((selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0 || !tabInlineSearch) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !countOnly ? (getSelectedItems(false)) : !tabInlineSearch ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "selected-items-counter-container qbs-text-sm qbs-gap-1" }, { children: (0, jsx_runtime_1.jsx)(NewTooltip_1.default, __assign({ title: allSelectedTooltipContent, enabled: (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0 ? true : false }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ 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" }, { children: selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length })) })) }))) : ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "selected-items-container qbs-text-sm qbs-gap-1", onClick: function () { return onInputFocus(); } }, { children: [(0, jsx_runtime_1.jsx)("span", __assign({ 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 ".concat((selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 99 ? 'qbs-text-hundred-plus' : '') }, { children: (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 99 ? '99+' : selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "selected-label-text" }, { children: selectedLabel && selectedLabel !== '' ? (selectedLabel) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Item", (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 1 && 's', " Selected"] })) }))] }))) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "qbs-textfield-expandable ".concat(!expandable ? 'qbs-normal' : ''), "data-value": (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0 || searchValue
+                            ? !tabInlineSearch && searchValue
+                                ? searchValue
+                                : placeholder !== null && placeholder !== void 0 ? placeholder : ''
+                            : placeholder !== null && placeholder !== void 0 ? placeholder : '', onClick: function () { return onInputFocus(); } }, { children: (0, jsx_runtime_1.jsx)("input", { id: id, ref: inputRef, autoComplete: "off", type: "text", value: type === 'auto_suggestion' && !expandable && tabInlineSearch
+                                ? inputValue
+                                : searchValue || inputValue, onChange: handleChange, 
+                            // onBlur={handleBlur}
+                            onFocus: function (e) {
+                                onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+                                if (!searchLoaded && searchValue && searchValue !== '') {
+                                    handleChangeWithDebounce(searchValue);
+                                    setSearchLoaded(true);
+                                }
+                            }, onClick: function () { return handleOnClick(); }, className: generateClassName(), placeholder: (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0
+                                ? !tabInlineSearch && searchValue
+                                    ? searchValue
+                                    : !tabInlineSearch
+                                        ? placeholder !== null && placeholder !== void 0 ? placeholder : ''
+                                        : ''
+                                : placeholder !== null && placeholder !== void 0 ? placeholder : '', readOnly: readOnly ||
+                                type === 'custom_select' ||
+                                (type === 'auto_suggestion' && !expandable && tabInlineSearch), disabled: disabled, "data-testid": "custom-autocomplete" }) })), enableToolsTab && ((0, jsx_runtime_1.jsx)("button", __assign({ disabled: disabled !== null && disabled !== void 0 ? disabled : readOnly, onClick: function (e) { return handleOpenToolsTab(e); }, className: "absolute right-2 top-2 tools-drop-btn focus-visible:outline-slate-100 ".concat(viewMode ? 'hidden' : '', " ").concat((tabSelectedItems === null || tabSelectedItems === void 0 ? void 0 : tabSelectedItems.length) > 0 ? 'has-selected-items' : '', " ").concat(showToolsTab ? 'tools-drop-btn-active' : ''), "data-testid": "tools-drop-arrow", type: "button", id: "tools-drop-icon", ref: toolsBtnRef }, { children: (0, jsx_runtime_1.jsx)(icons_1.Tools, { uniqueId: "tools-arrow-icon", className: "tools-arrow-icon" }) }))), dropOpen &&
+                        react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)("div", __assign({ ref: dropRef, style: __assign(__assign({}, 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 ".concat(viewMode ? 'qbs-dropdown-selected-preview' : '', " ").concat(viewMode && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) === 0 ? 'hidden' : '') }, { children: [!viewMode && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: tab.length > 0 && getTabItems() }), type === 'auto_suggestion' &&
+                                            !expandable &&
+                                            tabInlineSearch && ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { position: 'relative' }, className: "react-core-ts-search-container qbs-autocomplete-selected-suggestions-outer" }, { children: [(0, jsx_runtime_1.jsx)("span", __assign({ className: "dropdown-search-icon" }, { children: (0, jsx_runtime_1.jsx)(icons_1.Search, {}) })), (0, jsx_runtime_1.jsx)("input", { className: "dropdown-search-input", onChange: handleSuggestionChange, value: searchValue, placeholder: "Type to search", autoComplete: "off", ref: inputSearchRef }), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: autoDropdown && !disabled && !readOnly && ((0, jsx_runtime_1.jsx)("button", __assign({ disabled: disabled !== null && disabled !== void 0 ? disabled : readOnly, onClick: function (e) { return 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 }, { children: (0, jsx_runtime_1.jsx)(icons_1.AllDropArrow, { type: !allDataLoaded ? 'down' : 'up', uniqueId: "all-dropdow-arrow-icon", className: "all-dropdow-arrow-icon" }) }))) })] })))] })), (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 && enableSelectAll && isMultiple && ((0, jsx_runtime_1.jsx)("div", __assign({ id: "select-all", className: "qbs-select-all-link qbs-cursor-pointer qbs-text-xs", onClick: handleSelectAll }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "qbs-autocomplete-listitem-container qbs-autocomplete-checkbox-container" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "qbs-autocomplete-checkbox" }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: selectAll, id: "qbs-checkbox-all" }), (0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: "qbs-checkbox-all" }, { children: (0, jsx_runtime_1.jsx)("svg", __assign({ width: "8", height: "6", viewBox: "0 0 8 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M0 3.21739L2.89883 6L8 1.06994L6.89494 0L2.89883 3.86768L1.09728 2.14745L0 3.21739Z", fill: "white" }) })) }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "qbs-autocomplete-suggestions-item" }, { children: "Select All" }))] })) }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "qbs-autocomplete-suggestions-sub qbs-autocomplete-selected-suggestions-outer ".concat(viewMode ? 'hidden' : ''), ref: itemsRef, style: {
+                                        maxHeight: "".concat(selHeight, "px"),
+                                        minHeight: "".concat(selHeight, "px"),
+                                    } }, { children: [(filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 ? (filteredData.map(function (suggestion, idx) { return ((0, jsx_runtime_1.jsx)(DropdownList_1.default, { idx: idx, suggestion: suggestion, isSelected: isSelected, handleSuggestionClick: function () {
+                                                return handleSuggestionClick(suggestion, idx);
+                                            }, handleMultiSelect: handleMultiSelect, selected: selected, isMultiple: isMultiple, singleSelect: singleSelect, desc: desc, shortCode: shortCode, labelCode: labelCode, focusedIndex: focusedIndex, setItemRef: function (index, ref) {
+                                                itemRefs.current[index] = ref; // Store each ref properly
+                                            } }, suggestion[descId])); })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isLoading ||
+                                                (searchValue !== searchOldValue &&
+                                                    searchValue !== '' &&
+                                                    async) ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "qbs-flex qbs-align-middle qbs-justify-center qbs-min-emp-h" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "qbs-pt-16 qbs-autocomplete-loader" }, { children: (0, jsx_runtime_1.jsx)(icons_1.Spinner, {}) })) }))) : ((0, jsx_runtime_1.jsx)("div", __assign({ className: "qbs-autocomplete-notfound qbs-text-center qbs-justify-center qbs-align-middle qbs-min-emp-h" }, { children: searchValue !== ''
+                                                    ? notDataMessage !== null && notDataMessage !== void 0 ? notDataMessage : 'No Results Found'
+                                                    : initialDataMessage !== null && initialDataMessage !== void 0 ? initialDataMessage : 'Type to search' }))) })), paginationEnabled &&
+                                            nextBlock !== 0 &&
+                                            nextBlock !== undefined &&
+                                            (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "loadMoreSection", onClick: function () { return handleLoadMore(); } }, { children: (0, jsx_runtime_1.jsx)("p", __assign({ style: { margin: 2 } }, { children: "Load More" })) })))] })), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: countOnly && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "qbs-expandable-container qbs-dropdown-selected-container", ref: dropdownSelectedRef }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "qbs-flex qbs-w-full qbs-text-xs" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "qbs-selected-lbs qbs-flex-grow" }, { children: "Selected Items" })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "qbs-clear-link qbs-text-right qbs-cursor-pointer ".concat(viewMode ? 'hidden' : ''), onClick: handleClearSelected }, { children: "Clear all" })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "qbs-done-link qbs-text-right qbs-cursor-pointer ".concat(viewMode ? 'hidden' : ''), onClick: function () {
+                                                                setDropOpen(false);
+                                                            } }, { children: "Done" }))] })), getSelectedItems(true), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > itemCount &&
+                                                        showAllSelected && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "qbs-readmore-collapse" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "qbs-more-collapse", onClick: function () {
+                                                                handleCollapseArrowClick();
+                                                            } }, { children: (0, jsx_runtime_1.jsx)(icons_1.DropArrow, { className: "icon-button-rotate", uniqueDropArrowId: uniqueDropArrowId }) })) }))) })] })) })) })] })), document.body), enableToolsTab && ((0, jsx_runtime_1.jsx)(dropdownFilterTabs_1.default, { label: "", name: tabName !== null && tabName !== void 0 ? 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 }))] })), errors && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "text-error text-error-label mt-[1px]", "data-testid": "autocomplete-error" }, { children: errors.message })))] })));
+});
+exports.default = react_1.default.memo(AutoCompleteWithTabFilter);
+//# sourceMappingURL=AutoCompleteWithTabFilter.js.map