react-core-ts 3.0.0 → 4.0.1

package/dist/AutoCompleteWithTabFilter.js

@@ -1,15 +1,4 @@
 "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);
@@ -26,149 +15,107 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 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 measureTabListNaturalWidth_1 = require("./utilities/measureTabListNaturalWidth");
-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, _16 = _a.autoTabSelectAll, autoTabSelectAll = _16 === void 0 ? true : _16, moreOptionTab = _a.moreOptionTab, moreOptionTabLabel = _a.moreOptionTabLabel, moreOptionTabIcon = _a.moreOptionTabIcon, onMoreOptionChange = _a.onMoreOptionChange, _17 = _a.resetAllSearch, resetAllSearch = _17 === void 0 ? true : _17;
-    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');
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const DropdownList_1 = __importDefault(require("./components/DropdownList"));
+const autosuggestions_1 = require("./utilities/autosuggestions");
+const debounce_1 = require("./utilities/debounce");
+const deepEqual_1 = require("./utilities/deepEqual");
+const filterSuggestions_1 = require("./utilities/filterSuggestions");
+const icons_1 = require("./utilities/icons");
+const NewTooltip_1 = __importDefault(require("./utilities/NewTooltip"));
+const getKeyValue_1 = require("./utilities/getKeyValue");
+const measureTabListNaturalWidth_1 = require("./utilities/measureTabListNaturalWidth");
+const dropdownFilterTabs_1 = __importDefault(require("./dropdownFilterTabs"));
+const AutoCompleteWithTabFilter = (0, react_1.forwardRef)(({ 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 = (0, react_1.useRef)(null);
+    const selItemRef = (0, react_1.useRef)(null);
+    const itemsRef = (0, react_1.useRef)(null);
+    const dropdownSelectedRef = (0, react_1.useRef)(null);
+    const tabRef = (0, react_1.useRef)(null);
+    const dropLevelRef = (0, react_1.useRef)('bottom');
     // State Hooks Section
-    var _18 = (0, react_1.useState)(true), isInitialRender = _18[0], setIsInitialRender = _18[1];
-    var _19 = (0, react_1.useState)(value), inputValue = _19[0], setInputValue = _19[1];
-    var _20 = (0, react_1.useState)(propsSearchValue), searchValue = _20[0], setSearchValue = _20[1];
-    var _21 = (0, react_1.useState)(''), searchOldValue = _21[0], setSearchOldValue = _21[1];
-    var _22 = (0, react_1.useState)(1), nextPage = _22[0], setNextPage = _22[1];
-    var _23 = (0, react_1.useState)(false), dropOpen = _23[0], setDropOpen = _23[1];
-    var _24 = (0, react_1.useState)([]), selectedItems = _24[0], setSelectedItems = _24[1];
-    var _25 = (0, react_1.useState)(propsSearchValue ? false : true), searchLoaded = _25[0], setSearchLoaded = _25[1];
-    var _26 = (0, react_1.useState)(false), showAllSelected = _26[0], setShowAllSelected = _26[1];
-    var _27 = (0, react_1.useState)(184), selHeight = _27[0], setSelHeight = _27[1];
-    var _28 = (0, react_1.useState)(1), expandArrowClick = _28[0], setExpandArrowClick = _28[1];
-    var _29 = (0, react_1.useState)(false), visible = _29[0], setVisible = _29[1];
-    var lastEmittedSelectedRef = (0, react_1.useRef)(null);
-    var _30 = (0, react_1.useState)(currentTab), activeTab = _30[0], setActiveTab = _30[1];
-    var _31 = (0, react_1.useState)(0), focusedIndex = _31[0], setFocusedIndex = _31[1];
-    var itemRefs = (0, react_1.useRef)([]);
+    const [isInitialRender, setIsInitialRender] = (0, react_1.useState)(true);
+    const [inputValue, setInputValue] = (0, react_1.useState)(value);
+    const [searchValue, setSearchValue] = (0, react_1.useState)(propsSearchValue);
+    const [searchOldValue, setSearchOldValue] = (0, react_1.useState)('');
+    const [nextPage, setNextPage] = (0, react_1.useState)(1);
+    const [dropOpen, setDropOpen] = (0, react_1.useState)(false);
+    const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
+    const [searchLoaded, setSearchLoaded] = (0, react_1.useState)(propsSearchValue ? false : true);
+    const [showAllSelected, setShowAllSelected] = (0, react_1.useState)(false);
+    const [selHeight, setSelHeight] = (0, react_1.useState)(184);
+    const [expandArrowClick, setExpandArrowClick] = (0, react_1.useState)(1);
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const lastEmittedSelectedRef = (0, react_1.useRef)(null);
+    const [activeTab, setActiveTab] = (0, react_1.useState)(currentTab);
+    const [focusedIndex, setFocusedIndex] = (0, react_1.useState)(0);
+    const 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 _32 = (0, react_1.useState)({
+    const inputRef = (0, react_1.useRef)(null);
+    const dropRef = (0, react_1.useRef)(null);
+    const inputSearchRef = (0, react_1.useRef)(null);
+    const dropBtnRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, () => inputRef.current);
+    const [dropdownStyle, setDropdownStyle] = (0, react_1.useState)({
         top: 0,
         left: 0,
         width: 200,
         transform: '',
-    }), dropdownStyle = _32[0], setDropdownStyle = _32[1];
-    var _33 = (0, react_1.useState)(false), selectAll = _33[0], setSelectAll = _33[1];
-    var _34 = (0, react_1.useState)(false), refetchData = _34[0], setRefetchData = _34[1];
-    var _35 = (0, react_1.useState)(false), allDataLoaded = _35[0], setAllDataLoaded = _35[1];
-    var _36 = (0, react_1.useState)(false), isKeyboardOpen = _36[0], setIsKeyboardOpen = _36[1];
-    var _37 = (0, react_1.useState)(false), tabsScrollable = _37[0], setTabsScrollable = _37[1];
-    var toolsBtnRef = (0, react_1.useRef)(null);
-    var _38 = (0, react_1.useState)(false), showToolsTab = _38[0], setShowToolsTab = _38[1];
+    });
+    const [selectAll, setSelectAll] = (0, react_1.useState)(false);
+    const [refetchData, setRefetchData] = (0, react_1.useState)(false);
+    const [allDataLoaded, setAllDataLoaded] = (0, react_1.useState)(false);
+    const [isKeyboardOpen, setIsKeyboardOpen] = (0, react_1.useState)(false);
+    const [tabsScrollable, setTabsScrollable] = (0, react_1.useState)(false);
+    const toolsBtnRef = (0, react_1.useRef)(null);
+    const [showToolsTab, setShowToolsTab] = (0, react_1.useState)(false);
     // Track previous tabSelectedItems to detect new items
-    var prevTabSelectedItemsRef = (0, react_1.useRef)([]);
-    var _39 = (0, react_1.useState)(false), applyTabFilter = _39[0], setApplyTabFilter = _39[1];
-    var _40 = (0, react_1.useState)(0), moreOptionResetKey = _40[0], setMoreOptionResetKey = _40[1];
-    var originalOverflow = '';
-    var hasScrollbar = false;
-    var _41 = (0, autosuggestions_1.useSuggestions)(getData, data, dropOpen, async, paginationEnabled, initialLoad, inputValue, isMultiple, setNextPage, selectedItems, typeOnlyFetch
+    const prevTabSelectedItemsRef = (0, react_1.useRef)([]);
+    const [applyTabFilter, setApplyTabFilter] = (0, react_1.useState)(false);
+    const [moreOptionResetKey, setMoreOptionResetKey] = (0, react_1.useState)(0);
+    let originalOverflow = '';
+    let hasScrollbar = false;
+    const { suggestions, isLoading, handlePickSuggestions, resetSuggections } = (0, autosuggestions_1.useSuggestions)(getData, data, dropOpen, async, paginationEnabled, initialLoad, String(searchValue || inputValue || ''), isMultiple, setNextPage, selectedItems, typeOnlyFetch
     // nextBlock
-    ), suggestions = _41.suggestions, isLoading = _41.isLoading, handlePickSuggestions = _41.handlePickSuggestions, resetSuggections = _41.resetSuggections;
+    );
     // Handling the selection of a suggestion
-    var handleSuggestionClick = (0, react_1.useCallback)(function (suggestion, idx) {
+    const handleSuggestionClick = (0, react_1.useCallback)((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');
-                    })
+            setSelectedItems((prev) => {
+                const isAdded = prev && prev.length > 0
+                    ? prev.some((item) => (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');
-                    });
+                    return prev.filter((item) => (0, getKeyValue_1.getKeyValue)(item, descId, 'id') !==
+                        (0, getKeyValue_1.getKeyValue)(suggestion, descId, 'id'));
                 }
                 else {
-                    return __spreadArray(__spreadArray([], prev, true), [suggestion], false);
+                    return [...prev, suggestion];
                 }
             });
         }
@@ -183,28 +130,26 @@ var AutoCompleteWithTabFilter = (0, react_1.forwardRef)(function (_a, ref) {
         }
     }, [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) {
+    const debouncedUpdate = (0, react_1.useCallback)((0, debounce_1.debounce)((value, tabVal) => {
         setSearchOldValue(value);
         handlePickSuggestions(value, 1, false, tabVal);
     }, 500), []);
-    var handleChangeWithDebounce = function (value) {
+    const handleChangeWithDebounce = (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;
+            const 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;
+    const handleMultiSelect = (0, react_1.useCallback)((e, suggestion) => {
+        const { checked } = e.target;
         if (isMultiple) {
             if (checked) {
-                setSelectedItems(function (prev) { return __spreadArray(__spreadArray([], prev, true), [suggestion], false); });
+                setSelectedItems((prev) => [...prev, suggestion]);
             }
             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');
-                    });
+                setSelectedItems((prev) => {
+                    return prev.filter((item, i) => (0, getKeyValue_1.getKeyValue)(item, descId, 'id') !==
+                        (0, getKeyValue_1.getKeyValue)(suggestion, descId, 'id'));
                 });
             }
         }
@@ -218,7 +163,7 @@ var AutoCompleteWithTabFilter = (0, react_1.forwardRef)(function (_a, ref) {
             }
         }
     }, [isMultiple, descId, desc, onChange]);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         // Avoid feedback loops: if props equal last emitted value, skip syncing to state
         if (propsSeelctedItems &&
             lastEmittedSelectedRef.current &&
@@ -232,11 +177,11 @@ var AutoCompleteWithTabFilter = (0, react_1.forwardRef)(function (_a, ref) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [propsSeelctedItems]);
     // Effect to set the input value whenever `value` prop changes
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         setInputValue(value !== null && value !== void 0 ? value : '');
     }, [value]);
-    var handleChange = (0, react_1.useCallback)(function (e) {
-        var value = e.target.value;
+    const handleChange = (0, react_1.useCallback)((e) => {
+        const { value } = e.target;
         //setVisibleDrop();
         setSearchValue(value);
         handleChangeWithDebounce(value);
@@ -253,49 +198,48 @@ var AutoCompleteWithTabFilter = (0, react_1.forwardRef)(function (_a, ref) {
             setShowToolsTab(false);
         }
     }, [handleChangeWithDebounce, tabInlineSearch, onSearchValueChange, typeOnlyFetch]);
-    var handleSuggestionChange = (0, react_1.useCallback)(function (e) {
-        var value = e.target.value;
+    const handleSuggestionChange = (0, react_1.useCallback)((e) => {
+        const { value } = e.target;
         //setVisibleDrop();
-        var trimStart = value.trimStart();
+        const trimStart = value.trimStart();
         setSearchValue(trimStart);
         handleChangeWithDebounce(trimStart);
         setAllDataLoaded(false);
     }, [handleChangeWithDebounce]);
-    var handleClearSelected = (0, react_1.useCallback)(function () {
-        var _a;
+    const handleClearSelected = (0, react_1.useCallback)((preserveSearchOrEvent) => {
+        const preserveSearch = typeof preserveSearchOrEvent === 'boolean' ? preserveSearchOrEvent : false;
         setSelectedItems([]);
         setShowAllSelected(false);
         setShowToolsTab(false);
-        if (searchValue && type === 'auto_suggestion' && (tabInlineSearch || resetAllSearch)) {
+        if (!preserveSearch && searchValue && type === 'auto_suggestion' && (tabInlineSearch || resetAllSearch)) {
             setSearchValue('');
         }
-        console.log('handleClearSelected', searchValue, type, tabInlineSearch);
         if (isMultiple)
             onChange([]);
         else
-            onChange((_a = {}, _a[descId] = '', _a[desc] = '', _a));
+            onChange({ [descId]: '', [desc]: '' });
         if (async && type === 'auto_suggestion' && (tabInlineSearch || resetAllSearch))
             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' : '');
+    }, [searchValue, type, tabInlineSearch, isMultiple, onChange, descId, desc, async, resetSuggections, resetAllSearch]);
+    const generateClassName = (0, react_1.useCallback)(() => {
+        return `qbs-textfield-default ${className} ${errors && (errors === null || errors === void 0 ? void 0 : errors.message) ? 'textfield-error' : 'textfield'} ${expandable ? 'expandable' : ''}`;
     }, [errors, name]);
-    var handleRemoveSelectedItem = (0, react_1.useCallback)(function (index) {
-        setSelectedItems(function (prev) {
-            return prev.filter(function (_, i) { return i !== index; });
+    const handleRemoveSelectedItem = (0, react_1.useCallback)((index) => {
+        setSelectedItems((prev) => {
+            return prev.filter((_, i) => i !== index);
         });
     }, []);
-    var uniqueDropArrowId = "".concat(name, "-drop-arrow-selected-list-icon");
-    var isKeyboardOpenRef = (0, react_1.useRef)(false);
-    var closeOnScrollTimeoutRef = (0, react_1.useRef)(null);
+    const uniqueDropArrowId = `${name}-drop-arrow-selected-list-icon`;
+    const isKeyboardOpenRef = (0, react_1.useRef)(false);
+    const closeOnScrollTimeoutRef = (0, react_1.useRef)(null);
     // Keep ref in sync with state for use in event handlers
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         isKeyboardOpenRef.current = isKeyboardOpen;
     }, [isKeyboardOpen]);
-    (0, react_1.useEffect)(function () {
-        var handleScroll = function (event) {
+    (0, react_1.useEffect)(() => {
+        const handleScroll = (event) => {
             // Don't close if the user is scrolling inside the dropdown itself.
-            var scrollTarget = event.target;
+            const scrollTarget = event.target;
             if (dropRef.current && scrollTarget instanceof Node && dropRef.current.contains(scrollTarget)) {
                 return;
             }
@@ -304,7 +248,7 @@ var AutoCompleteWithTabFilter = (0, react_1.forwardRef)(function (_a, ref) {
             if (isKeyboardOpenRef.current) {
                 // Only prevent closing if keyboard is actually open (mobile scenario)
                 // Also check if input is focused to avoid closing while typing
-                var activeElement = document.activeElement;
+                const activeElement = document.activeElement;
                 if (activeElement && (activeElement === inputRef.current ||
                     activeElement === inputSearchRef.current ||
                     (dropRef.current && dropRef.current.contains(activeElement)))) {
@@ -316,20 +260,20 @@ var AutoCompleteWithTabFilter = (0, react_1.forwardRef)(function (_a, ref) {
                 if (closeOnScrollTimeoutRef.current) {
                     window.clearTimeout(closeOnScrollTimeoutRef.current);
                 }
-                closeOnScrollTimeoutRef.current = window.setTimeout(function () {
+                closeOnScrollTimeoutRef.current = window.setTimeout(() => {
                     setDropOpen(false);
                     setShowToolsTab(false);
                     setAllDataLoaded(false);
                     if (!typeOnlyFetch)
                         setSearchValue('');
-                }, 200);
+                }, 0);
             }
         };
-        var handleClickOutside = function (event) {
+        const handleClickOutside = (event) => {
             var _a, _b;
-            var target = event.target;
+            const target = event.target;
             // Always check if click is inside component container first
-            var insideComponent = dropdownRef.current ? dropdownRef.current.contains(target) : false;
+            const insideComponent = dropdownRef.current ? dropdownRef.current.contains(target) : false;
             // If clicking inside component, don't close (let onClick handlers handle it)
             if (insideComponent) {
                 return;
@@ -346,49 +290,45 @@ var AutoCompleteWithTabFilter = (0, react_1.forwardRef)(function (_a, ref) {
                     target.closest &&
                     !target.closest('input') &&
                     !target.closest('textarea')) {
-                    setTimeout(function () {
+                    setTimeout(() => {
                         setDropOpen(false);
                         setShowToolsTab(false);
                         setAllDataLoaded(false);
                         if (!typeOnlyFetch)
                             setSearchValue('');
-                    }, 200);
+                    }, 0);
                 }
                 return;
             }
             // Normal behavior when keyboard is not open
-            var clickedToolsBtn = !!((_a = target === null || target === void 0 ? void 0 : target.closest) === null || _a === void 0 ? void 0 : _a.call(target, '.tools-drop-btn'));
-            var insideMainDropdown = dropRef.current ? dropRef.current.contains(target) : false;
-            var insideAnyDropdown = !!((_b = target === null || target === void 0 ? void 0 : target.closest) === null || _b === void 0 ? void 0 : _b.call(target, '.qbs-autocomplete-selected-suggestions'));
+            const clickedToolsBtn = !!((_a = target === null || target === void 0 ? void 0 : target.closest) === null || _a === void 0 ? void 0 : _a.call(target, '.tools-drop-btn'));
+            const insideMainDropdown = dropRef.current ? dropRef.current.contains(target) : false;
+            const insideAnyDropdown = !!((_b = target === null || target === void 0 ? void 0 : target.closest) === null || _b === void 0 ? void 0 : _b.call(target, '.qbs-autocomplete-selected-suggestions'));
             // Close only when click is outside both dropdowns and not on tools button
             if (!insideMainDropdown && !insideAnyDropdown && !clickedToolsBtn) {
-                setTimeout(function () {
+                setTimeout(() => {
                     setDropOpen(false);
                     setShowToolsTab(false);
                     setAllDataLoaded(false);
                     if (!typeOnlyFetch)
                         setSearchValue('');
-                }, 200);
+                }, 0);
             }
         };
         document.addEventListener('mousedown', handleClickOutside);
         window.addEventListener('scroll', handleScroll);
         // Capture-phase scroll catches scrolls from any scroll container (scroll doesn't bubble).
         document.addEventListener('scroll', handleScroll, true);
-        var scrollableDivs = document.querySelectorAll('div[style*="overflow"], .overflow-auto, .overflow-y-auto, .overflow-x-auto');
-        scrollableDivs.forEach(function (div) {
-            return div.addEventListener('scroll', handleScroll);
-        });
+        const scrollableDivs = document.querySelectorAll('div[style*="overflow"], .overflow-auto, .overflow-y-auto, .overflow-x-auto');
+        scrollableDivs.forEach((div) => div.addEventListener('scroll', handleScroll));
         if (scrollRef && scrollRef.current && scrollRef.current !== null) {
             scrollRef.current.addEventListener('scroll', handleScroll);
         }
-        return function () {
+        return () => {
             document.removeEventListener('mousedown', handleClickOutside);
             window.removeEventListener('scroll', handleScroll);
             document.removeEventListener('scroll', handleScroll, true);
-            scrollableDivs.forEach(function (div) {
-                return div.removeEventListener('scroll', handleScroll);
-            });
+            scrollableDivs.forEach((div) => div.removeEventListener('scroll', handleScroll));
             if (closeOnScrollTimeoutRef.current) {
                 window.clearTimeout(closeOnScrollTimeoutRef.current);
                 closeOnScrollTimeoutRef.current = null;
@@ -399,38 +339,38 @@ var AutoCompleteWithTabFilter = (0, react_1.forwardRef)(function (_a, ref) {
         };
     }, [dropOpen, typeOnlyFetch, uniqueDropArrowId]);
     // 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 () {
+    const selected = isMultiple ? selectedItems : inputValue;
+    const filteredData = (0, filterSuggestions_1.filterSuggestions)(suggestions, searchValue, type, desc, selected, async, false, true, matchFromStart);
+    const adjustDropdownPosition = (0, react_1.useCallback)(() => {
         var _a, _b;
         if (dropdownRef.current) {
-            var inputRect = dropdownRef.current.getBoundingClientRect();
-            var dropdownPosition_1 = {
+            const inputRect = dropdownRef.current.getBoundingClientRect();
+            const dropdownPosition = {
                 left: inputRect.left + window.scrollX,
                 width: inputRect.width,
                 top: 0,
             };
-            var tabsNaturalWidth_1 = tabRef.current
+            const tabsNaturalWidth = tabRef.current
                 ? (0, measureTabListNaturalWidth_1.measureTabListNaturalWidth)(tabRef.current)
                 : null;
-            var maxWidthCap = tab.length > 0
-                ? Math.max(measureTabListNaturalWidth_1.MAX_DROPDOWN_WIDTH_WITH_TABS_PX, dropdownPosition_1.width)
+            const maxWidthCap = tab.length > 0
+                ? Math.max(measureTabListNaturalWidth_1.MAX_DROPDOWN_WIDTH_WITH_TABS_PX, dropdownPosition.width)
                 : Number.POSITIVE_INFINITY;
-            var widthBeforeClamp = Math.min(Math.max(dropdownPosition_1.width, tabsNaturalWidth_1 !== null && tabsNaturalWidth_1 !== void 0 ? tabsNaturalWidth_1 : 0, measureTabListNaturalWidth_1.MIN_DROPDOWN_WIDTH_PX), maxWidthCap);
-            var _c = (0, measureTabListNaturalWidth_1.clampDropdownToViewportPreferRightAlign)({
+            const widthBeforeClamp = Math.min(Math.max(dropdownPosition.width, tabsNaturalWidth !== null && tabsNaturalWidth !== void 0 ? tabsNaturalWidth : 0, measureTabListNaturalWidth_1.MIN_DROPDOWN_WIDTH_PX), maxWidthCap);
+            const { width: desiredWidth, left: desiredLeft } = (0, measureTabListNaturalWidth_1.clampDropdownToViewportPreferRightAlign)({
                 desiredWidth: widthBeforeClamp,
-                desiredLeft: dropdownPosition_1.left,
+                desiredLeft: dropdownPosition.left,
                 anchorRight: inputRect.right + window.scrollX,
-            }), desiredWidth_1 = _c.width, desiredLeft_1 = _c.left;
-            setTabsScrollable(function (prev) {
-                var next = tab.length > 0 && (tabsNaturalWidth_1 !== null && tabsNaturalWidth_1 !== void 0 ? tabsNaturalWidth_1 : 0) > desiredWidth_1;
+            });
+            setTabsScrollable((prev) => {
+                const next = tab.length > 0 && (tabsNaturalWidth !== null && tabsNaturalWidth !== void 0 ? tabsNaturalWidth : 0) > desiredWidth;
                 return prev === next ? prev : next;
             });
             // Check if there's enough space below the input for the dropdown
-            var spaceBelow = window.innerHeight - inputRect.bottom;
-            var spaceAbove = inputRect.top + window.scrollY;
-            var dropdownHeight = viewMode ? 160 : 300; // Assume a fixed height or calculate based on content
-            var defaultHeight_1 = 184;
+            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 === 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;
@@ -441,42 +381,42 @@ var AutoCompleteWithTabFilter = (0, react_1.forwardRef)(function (_a, ref) {
             }
             if (spaceBelow >= dropdownHeight) {
                 dropLevelRef.current = 'bottom';
-                dropdownPosition_1.top =
+                dropdownPosition.top =
                     inputRect.top + window.scrollY + inputRect.height;
-                setSelHeight(function (prev) { return prev !== defaultHeight_1 ? defaultHeight_1 : prev; });
+                setSelHeight(prev => prev !== defaultHeight ? defaultHeight : prev);
             }
             else if (spaceAbove >= dropdownHeight) {
-                var sHeight = tabInlineSearch ? 73 : 113;
+                let 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 =
+                dropdownPosition.top =
                     inputRect.top +
                         window.scrollY -
                         dropdownHeight +
                         sHeight +
                         topMargin;
-                setSelHeight(function (prev) { return prev !== defaultHeight_1 ? defaultHeight_1 : prev; });
+                setSelHeight(prev => prev !== defaultHeight ? defaultHeight : prev);
             }
             else {
                 dropLevelRef.current = 'bottom';
-                dropdownPosition_1.top =
+                dropdownPosition.top =
                     inputRect.top + window.scrollY + inputRect.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; });
+                    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(function (prevStyle) {
-                var newStyle = __assign(__assign({}, prevStyle), { transform: "translateY(".concat(dropdownPosition_1.top, "px)"), left: desiredLeft_1, width: desiredWidth_1 });
+            setDropdownStyle((prevStyle) => {
+                const newStyle = Object.assign(Object.assign({}, 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 ||
@@ -487,32 +427,32 @@ var AutoCompleteWithTabFilter = (0, react_1.forwardRef)(function (_a, ref) {
             });
         }
     }, [viewMode, countOnly, tab.length, tabInlineSearch, filteredData === null || filteredData === void 0 ? void 0 : filteredData.length, enableSelectAll, isMultiple, topMargin, showAllSelected]);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         window.addEventListener('resize', adjustDropdownPosition);
         adjustDropdownPosition();
-        return function () {
+        return () => {
             window.removeEventListener('resize', adjustDropdownPosition);
         };
     }, [adjustDropdownPosition]);
     // Detect keyboard open on mobile using Visual Viewport API
-    (0, react_1.useEffect)(function () {
-        var vv = window.visualViewport;
+    (0, react_1.useEffect)(() => {
+        const vv = window.visualViewport;
         if (!vv)
             return;
-        var onResize = function () {
+        const onResize = () => {
             // Heuristic: if visual viewport height shrinks a lot, keyboard is likely open
-            var open = vv.height < window.innerHeight - 100;
+            const open = vv.height < window.innerHeight - 100;
             setIsKeyboardOpen(open);
         };
         vv.addEventListener("resize", onResize);
         vv.addEventListener("scroll", onResize); // iOS sometimes fires scroll instead
         onResize();
-        return function () {
+        return () => {
             vv.removeEventListener("resize", onResize);
             vv.removeEventListener("scroll", onResize);
         };
     }, []);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (isInitialRender) {
             setIsInitialRender(false);
         }
@@ -521,26 +461,55 @@ var AutoCompleteWithTabFilter = (0, react_1.forwardRef)(function (_a, ref) {
             lastEmittedSelectedRef.current = selectedItems;
         }
         adjustDropdownPosition();
-        setTimeout(function () {
+        setTimeout(() => {
             adjustDropdownPosition();
         }, 200);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selectedItems, adjustDropdownPosition]);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         adjustDropdownPosition();
-        setTimeout(function () {
+        setTimeout(() => {
             adjustDropdownPosition();
         }, 200);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [filteredData, adjustDropdownPosition]);
-    (0, react_1.useEffect)(function () {
+    // Recalculate dropdown position when dropdown opens or becomes visible
+    (0, react_1.useEffect)(() => {
+        if (dropOpen) {
+            // Use requestAnimationFrame to ensure DOM is updated before calculating position
+            requestAnimationFrame(() => {
+                adjustDropdownPosition();
+                // Also recalculate after a small delay to account for any animations/transitions
+                setTimeout(() => {
+                    adjustDropdownPosition();
+                }, 150);
+            });
+        }
+    }, [dropOpen, visible, adjustDropdownPosition]);
+    // Recalculate position on scroll when dropdown is open
+    (0, react_1.useEffect)(() => {
+        if (!dropOpen)
+            return;
+        const handleScrollRecalculate = () => {
+            requestAnimationFrame(() => {
+                adjustDropdownPosition();
+            });
+        };
+        window.addEventListener('scroll', handleScrollRecalculate, true);
+        document.addEventListener('scroll', handleScrollRecalculate, true);
+        return () => {
+            window.removeEventListener('scroll', handleScrollRecalculate, true);
+            document.removeEventListener('scroll', handleScrollRecalculate, true);
+        };
+    }, [dropOpen, adjustDropdownPosition]);
+    (0, react_1.useEffect)(() => {
         // Handle keyboard navigation
-        var handleKeyDown = function (e) {
+        const handleKeyDown = (e) => {
             var _a, _b;
             if (!dropOpen)
                 return;
-            var atBottom = focusedIndex === filteredData.length - 1;
-            var atTop = focusedIndex === 0;
+            const atBottom = focusedIndex === filteredData.length - 1;
+            const atTop = focusedIndex === 0;
             switch (e.key) {
                 case 'ArrowDown':
                     e.preventDefault();
@@ -553,7 +522,7 @@ var AutoCompleteWithTabFilter = (0, react_1.forwardRef)(function (_a, ref) {
                             itemsRef.current.scrollTop = 0;
                         }
                     }
-                    setFocusedIndex(function (prev) { return (prev + 1) % (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length); });
+                    setFocusedIndex((prev) => (prev + 1) % (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length));
                     break;
                 case 'ArrowUp':
                     e.preventDefault();
@@ -566,7 +535,7 @@ var AutoCompleteWithTabFilter = (0, react_1.forwardRef)(function (_a, ref) {
                             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); });
+                    setFocusedIndex((prev) => (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();
@@ -583,37 +552,31 @@ var AutoCompleteWithTabFilter = (0, react_1.forwardRef)(function (_a, ref) {
             }
         };
         window.addEventListener('keydown', handleKeyDown);
-        return function () {
+        return () => {
             window.removeEventListener('keydown', handleKeyDown);
         };
     }, [filteredData, dropOpen, isLoading, focusedIndex]);
-    var isSelected = function (item, selectedItems) {
+    const isSelected = (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));
+            return selectedItems.some((selectedItem) => (0, getKeyValue_1.isSelectionMatch)(selectedItem, item, desc, descId));
         }
+        return (0, getKeyValue_1.isSelectionMatchValue)(item, selectedItems, desc, descId);
     };
-    var handleLoadMore = function () {
+    const handleLoadMore = () => {
         if (paginationEnabled) {
             handlePickSuggestions(searchValue, nextPage + 1, true);
             setNextPage(nextPage + 1);
         }
     };
-    var handleOnClick = function () {
+    const handleOnClick = () => {
         (!disabled && !readOnly && !expandable && !dropOpen) || viewMode
             ? setVisibleDrop()
             : '';
     };
-    var onInputFocus = function () {
+    const onInputFocus = () => {
         if (!dropOpen) {
             if (countOnly) {
-                setTimeout(function () {
+                setTimeout(() => {
                     if (inputSearchRef.current)
                         inputSearchRef.current.focus();
                 }, 10);
@@ -625,7 +588,7 @@ var AutoCompleteWithTabFilter = (0, react_1.forwardRef)(function (_a, ref) {
             // handleOnClick();
         }
     };
-    var handleShowAllSelected = (0, react_1.useCallback)(function (enabled) {
+    const handleShowAllSelected = (0, react_1.useCallback)((enabled) => {
         setExpandArrowClick(expandArrowClick + 1);
         if (enabled) {
             setShowAllSelected(true);
@@ -634,18 +597,17 @@ var AutoCompleteWithTabFilter = (0, react_1.forwardRef)(function (_a, ref) {
             setShowAllSelected(false);
         }
     }, [expandArrowClick]);
-    var handleCollapseArrowClick = (0, react_1.useCallback)(function () {
+    const handleCollapseArrowClick = (0, react_1.useCallback)(() => {
         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(', ')
+    const tooltipContent = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > itemCount
+        ? selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.slice(itemCount).map((item) => 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(', ')
+    const allSelectedTooltipContent = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0
+        ? selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map((item) => item[desc]).join(', ')
         : '';
-    var setVisibleDrop = function (skipAnimation) {
-        if (skipAnimation === void 0) { skipAnimation = false; }
+    const setVisibleDrop = (skipAnimation = false) => {
         hasScrollbar = document.body.scrollHeight > window.innerHeight;
         if (!originalOverflow && !hasScrollbar) {
             originalOverflow = document.body.style.overflow;
@@ -655,6 +617,10 @@ var AutoCompleteWithTabFilter = (0, react_1.forwardRef)(function (_a, ref) {
         if (skipAnimation && dropOpen) {
             setVisible(true);
             setFocusedIndex(0);
+            // Recalculate position when making visible again
+            requestAnimationFrame(() => {
+                adjustDropdownPosition();
+            });
             return;
         }
         // Normal opening animation
@@ -664,96 +630,104 @@ var AutoCompleteWithTabFilter = (0, react_1.forwardRef)(function (_a, ref) {
             setShowToolsTab(false);
         }
         setFocusedIndex(0);
-        setTimeout(function () {
+        setTimeout(() => {
             setVisible(true);
+            // Recalculate position after dropdown becomes visible
+            requestAnimationFrame(() => {
+                adjustDropdownPosition();
+                // Double-check position after a short delay to account for any layout shifts
+                setTimeout(() => {
+                    adjustDropdownPosition();
+                }, 50);
+            });
             if (!hasScrollbar) {
                 document.body.style.overflow = originalOverflow || '';
             }
             originalOverflow = '';
         }, 100);
     };
-    var handleTabClick = (0, react_1.useCallback)(function (index) {
+    const handleTabClick = (0, react_1.useCallback)((index) => {
         if (activeTab !== index) {
             if (clearTabSwitch) {
-                handleClearSelected();
+                handleClearSelected(!tabInlineSearch);
                 if (tabInlineSearch) {
                     setSearchValue('');
                     setInputValue('');
                     handlePickSuggestions('', 1);
+                    setAllDataLoaded(false);
                 }
                 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);
+                    const activeTabVal = tab.length > 0 ? tab === null || tab === void 0 ? void 0 : tab[index].id : undefined;
+                    const normalizedSearchValue = searchValue === null || searchValue === void 0 ? void 0 : searchValue.trim();
+                    const tabSearchValue = !tabInlineSearch && allDataLoaded && !normalizedSearchValue
+                        ? '*'
+                        : searchValue;
+                    handlePickSuggestions(tabSearchValue, 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);
+                const activeTabVal = tab.length > 0 ? tab === null || tab === void 0 ? void 0 : tab[index].id : undefined;
+                const normalizedSearchValue = searchValue === null || searchValue === void 0 ? void 0 : searchValue.trim();
+                const tabSearchValue = !tabInlineSearch && allDataLoaded && !normalizedSearchValue
+                    ? '*'
+                    : searchValue;
+                handlePickSuggestions(tabSearchValue, 1, false, activeTabVal);
             }
             setActiveTab(index);
         }
-    }, [activeTab, clearTabSwitch, handleClearSelected, tabInlineSearch, tab, searchValue, handlePickSuggestions, resetSuggections]);
-    var getSelectedRowLimit = (0, react_1.useCallback)(function () {
-        var maxHeight = 36;
+    }, [activeTab, clearTabSwitch, handleClearSelected, tabInlineSearch, tab, searchValue, handlePickSuggestions, resetSuggections, allDataLoaded]);
+    const getSelectedRowLimit = (0, react_1.useCallback)(() => {
+        let 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
+    const getSelectedItems = (0, react_1.useCallback)((dropdown) => {
+        return ((0, jsx_runtime_1.jsxs)("div", { ref: selItemRef, className: "selected-items-outer-container", style: { maxHeight: `${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) {
+                    .map((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 () {
+                    return ((0, jsx_runtime_1.jsx)("div", { className: "selected-items-container", children: (0, jsx_runtime_1.jsx)(NewTooltip_1.default, { 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", { className: "selected-item", children: [((_b = String(item === null || item === void 0 ? void 0 : item[desc])) === null || _b === void 0 ? void 0 : _b.length) > textCount
+                                        ? `${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", { onClick: () => handleRemoveSelectedItem(index), className: "remove-item-btn", "aria-label": `Remove ${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", { className: "selected-items-container", children: (0, jsx_runtime_1.jsx)(NewTooltip_1.default, { title: tooltipContent, enabled: true, children: (0, jsx_runtime_1.jsxs)("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);
-                            } }, { children: ["+", (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) - itemCount, ' ', (0, jsx_runtime_1.jsx)("span", __assign({ className: "qbs-hidden" }, { children: "more" }))] })) })) })))] })));
+                            }, children: ["+", (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) - itemCount, ' ', (0, jsx_runtime_1.jsx)("span", { 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 ".concat(tabsScrollable ? 'qbs-tab-scroll' : ''), 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 () {
+    const getTabItems = (0, react_1.useCallback)(() => {
+        return ((0, jsx_runtime_1.jsx)("ul", { className: `qbs-flex qbs-flex-wrap qbs-w-full qbs-tab qbs-mb-2 -qbs-mt-2 ${tabsScrollable ? 'qbs-tab-scroll' : ''}`, ref: tabRef, children: tab.map((item, idx) => ((0, jsx_runtime_1.jsx)("li", { className: "qbs-flex-1 qbs-tab-items", children: (0, jsx_runtime_1.jsx)("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);
-                    } }, { children: item.label })) }), "tab-".concat(idx))); }) })));
+                    }, children: item.label }) }, `tab-${idx}`))) }));
     }, [tab, activeTab, handleTabClick, tabsScrollable]);
-    var handleSelectAll = (0, react_1.useCallback)(function () {
+    const handleSelectAll = (0, react_1.useCallback)(() => {
         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');
-                        });
-                    });
-                });
+                setSelectedItems((prev) => prev.filter((item) => !filteredData.some((f) => (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');
-                        });
+                setSelectedItems((prev) => {
+                    const newItems = [];
+                    filteredData.forEach((suggestion) => {
+                        const isAdded = prev.some((item) => (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);
+                    return [...prev, ...newItems];
                 });
             }
         }
     }, [isMultiple, selectAll, filteredData, descId]);
-    var handleOpenDropdown = (0, react_1.useCallback)(function (e) {
+    const handleOpenDropdown = (0, react_1.useCallback)((e) => {
         if (!tabInlineSearch) {
             // Toggle the main dropdown when not using inline search
             if (dropOpen && visible && allDataLoaded) {
@@ -774,7 +748,7 @@ var AutoCompleteWithTabFilter = (0, react_1.forwardRef)(function (_a, ref) {
         }
         if (!suggestions || (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) === 0 || refetchData || resetAllSearch) {
             if (autoDropdown && (inputValue === '' || inputValue.trim() === '')) {
-                var activeTabVal = tab.length > 0 ? tab === null || tab === void 0 ? void 0 : tab[activeTab].id : undefined;
+                const activeTabVal = tab.length > 0 ? tab === null || tab === void 0 ? void 0 : tab[activeTab].id : undefined;
                 if (tabInlineSearch && tab.length > 0) {
                     handlePickSuggestions('*', 1, false, activeTabVal);
                 }
@@ -791,7 +765,7 @@ var AutoCompleteWithTabFilter = (0, react_1.forwardRef)(function (_a, ref) {
             }
             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;
+                    const activeTabVal = tab.length > 0 ? tab === null || tab === void 0 ? void 0 : tab[activeTab].id : undefined;
                     handlePickSuggestions(inputValue, 1, false, activeTabVal);
                 }
                 else {
@@ -802,27 +776,27 @@ var AutoCompleteWithTabFilter = (0, react_1.forwardRef)(function (_a, ref) {
             }
         }
     }, [suggestions, refetchData, autoDropdown, inputValue, tabInlineSearch, tab, activeTab, handlePickSuggestions, dropOpen, visible]);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (applyTabFilter && !isLoading && suggestions) {
             // Auto select all currently loaded suggestions (dedup by descId)
             if (isMultiple && Array.isArray(suggestions) && autoTabSelectAll) {
-                setSelectedItems(function (prev) {
-                    var existingIds = new Set((prev || []).map(function (item) { return (0, getKeyValue_1.getKeyValue)(item, descId, 'id'); }));
-                    var toAdd = [];
-                    suggestions.forEach(function (s) {
-                        var sid = (0, getKeyValue_1.getKeyValue)(s, descId, 'id');
+                setSelectedItems((prev) => {
+                    const existingIds = new Set((prev || []).map((item) => (0, getKeyValue_1.getKeyValue)(item, descId, 'id')));
+                    const toAdd = [];
+                    suggestions.forEach((s) => {
+                        const sid = (0, getKeyValue_1.getKeyValue)(s, descId, 'id');
                         if (!existingIds.has(sid)) {
                             toAdd.push(s);
                         }
                     });
-                    return toAdd.length > 0 ? __spreadArray(__spreadArray([], prev, true), toAdd, true) : prev;
+                    return toAdd.length > 0 ? [...prev, ...toAdd] : prev;
                 });
             }
             // Clear tabSelectedItems after applying filter and data is loaded
             onToolTabChange === null || onToolTabChange === void 0 ? void 0 : onToolTabChange([]);
             setShowToolsTab(false);
             // Reset moreOptionTab component
-            setMoreOptionResetKey(function (prev) { return prev + 1; });
+            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
@@ -834,34 +808,30 @@ var AutoCompleteWithTabFilter = (0, react_1.forwardRef)(function (_a, ref) {
             setApplyTabFilter(false);
         }
     }, [applyTabFilter, isLoading, suggestions, onToolTabChange, isMultiple, descId, dropOpen, visible]);
-    var handleOpenToolsTab = (0, react_1.useCallback)(function (e) {
+    const handleOpenToolsTab = (0, react_1.useCallback)((e) => {
         setShowToolsTab(showToolsTab ? false : true);
         setDropOpen(false);
         setAllDataLoaded(false);
     }, [showToolsTab]);
-    var handleApplyTabFilter = (0, react_1.useCallback)(function (moreOptionValues) {
+    const handleApplyTabFilter = (0, react_1.useCallback)((moreOptionValues) => {
         // Set flag to trigger effect when data loads
         setApplyTabFilter(true);
-        handlePickSuggestions(searchValue ? searchValue : '*', 1);
+        handlePickSuggestions(searchValue ? searchValue : '*', 1, false, undefined, true);
         // Note: onMoreOptionChange is called when values change in the component, not here
     }, [searchValue, handlePickSuggestions]);
-    (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');
-                });
-            });
+    (0, react_1.useEffect)(() => {
+        const allSelected = (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0 &&
+            filteredData.every((item) => selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some((s) => (0, getKeyValue_1.getKeyValue)(s, descId, 'id') === (0, getKeyValue_1.getKeyValue)(item, descId, 'id')));
         setSelectAll(allSelected);
     }, [filteredData, selectedItems, descId]);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         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 () {
+    (0, react_1.useEffect)(() => {
         if (dropOpen && visible && tabInlineSearch && type === 'auto_suggestion' && !expandable) {
             // Small delay to ensure the dropdown is fully rendered
-            setTimeout(function () {
+            setTimeout(() => {
                 if (inputSearchRef.current) {
                     inputSearchRef.current.focus();
                 }
@@ -869,10 +839,10 @@ var AutoCompleteWithTabFilter = (0, react_1.forwardRef)(function (_a, ref) {
         }
     }, [dropOpen, visible, tabInlineSearch, type, expandable]);
     // Auto-refresh main dropdown data when tabSelectedItems change (add/remove)
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (autoRefreshMainDropdown && dropOpen && async) {
             // Check if there are changes by comparing with previous state
-            var hasChanges = tabSelectedItems.length !== prevTabSelectedItemsRef.current.length ||
+            const 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) {
@@ -884,25 +854,25 @@ var AutoCompleteWithTabFilter = (0, react_1.forwardRef)(function (_a, ref) {
             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: {
+    return ((0, jsx_runtime_1.jsxs)("div", { id: id ? `selected-list-${id}` : `selected-list-${name}`, className: fullWidth ? 'fullWidth' : 'autoWidth', ref: dropdownRef, children: [label && ((0, jsx_runtime_1.jsxs)("div", { 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 selected-item-inline-counter qbs-text-sm qbs-gap-1 ".concat(!tabInlineSearch && autoDropdown ? 'selected-item-tool-direct-counter' : '') }, { 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)(jsx_runtime_1.Fragment, { children: autoDropdown && !tabInlineSearch && !disabled && !readOnly && ((0, jsx_runtime_1.jsx)("div", __assign({ className: 'qbs-inline-all-dropdown-btn' }, { children: (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" }) })) }))) }), (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
+                }, children: [(0, jsx_runtime_1.jsxs)("label", { className: `labels label-text`, children: [label, required && (0, jsx_runtime_1.jsx)("span", { className: "text-error", children: " *" })] }), (0, jsx_runtime_1.jsx)("span", { onClick: () => handleAction === null || handleAction === void 0 ? void 0 : handleAction(), className: `action_label`, children: actionLabel })] })), (0, jsx_runtime_1.jsxs)("div", { className: `qbs-relative  qbs-autocomplete-selected-comp ${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", { className: `selected-items-counter-container selected-item-inline-counter ${disabled ? 'selected-item-inline-counter-disabled' : ''} qbs-text-sm qbs-gap-1 ${!tabInlineSearch && autoDropdown && !disabled ? 'selected-item-tool-direct-counter' : ''}`, children: (0, jsx_runtime_1.jsx)(NewTooltip_1.default, { title: allSelectedTooltipContent, enabled: (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0 ? true : false, children: (0, jsx_runtime_1.jsx)("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", children: selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length }) }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "selected-items-container qbs-text-sm qbs-gap-1", onClick: () => onInputFocus(), children: [(0, jsx_runtime_1.jsx)("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 === 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", { 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)(jsx_runtime_1.Fragment, { children: autoDropdown && !tabInlineSearch && !disabled && !readOnly && ((0, jsx_runtime_1.jsx)("div", { className: 'qbs-inline-all-dropdown-btn', children: (0, jsx_runtime_1.jsx)("button", { disabled: disabled !== null && disabled !== void 0 ? 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, children: (0, jsx_runtime_1.jsx)(icons_1.AllDropArrow, { type: !allDataLoaded ? 'down' : 'up', uniqueId: "all-dropdow-arrow-icon", className: "all-dropdow-arrow-icon" }) }) })) }), (0, jsx_runtime_1.jsx)("div", { className: `qbs-textfield-expandable ${!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
+                            : placeholder !== null && placeholder !== void 0 ? placeholder : '', onClick: () => 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: (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
+                            }, onClick: () => handleOnClick(), className: generateClassName(), placeholder: (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0
                                 ? !tabInlineSearch && searchValue
                                     ? searchValue
                                     : !tabInlineSearch
@@ -910,31 +880,29 @@ var AutoCompleteWithTabFilter = (0, react_1.forwardRef)(function (_a, ref) {
                                         : ''
                                 : 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' &&
+                                (type === 'auto_suggestion' && !expandable && tabInlineSearch), disabled: disabled, "data-testid": "custom-autocomplete" }) }), enableToolsTab && !disabled && ((0, jsx_runtime_1.jsx)("button", { disabled: disabled !== null && disabled !== void 0 ? disabled : readOnly, onClick: (e) => handleOpenToolsTab(e), className: `absolute right-2 top-2 tools-drop-btn focus-visible:outline-slate-100 ${viewMode ? 'hidden' : ''} ${(tabSelectedItems === null || tabSelectedItems === void 0 ? void 0 : tabSelectedItems.length) > 0 ? 'has-selected-items' : ''} ${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", { ref: dropRef, style: Object.assign(Object.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 ${viewMode ? 'qbs-dropdown-selected-preview' : ''} ${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, onChange: handleSelectAll, 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) {
+                                            tabInlineSearch && ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative' }, className: "react-core-ts-search-container qbs-autocomplete-selected-suggestions-outer", children: [(0, jsx_runtime_1.jsx)("span", { 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", { disabled: disabled !== null && disabled !== void 0 ? 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, 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", { id: "select-all", className: `qbs-select-all-link qbs-cursor-pointer qbs-text-xs`, onClick: handleSelectAll, children: (0, jsx_runtime_1.jsxs)("div", { className: `qbs-autocomplete-listitem-container qbs-autocomplete-checkbox-container`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "qbs-autocomplete-checkbox", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: selectAll, onChange: handleSelectAll, id: `qbs-checkbox-all` }), (0, jsx_runtime_1.jsx)("label", { htmlFor: `qbs-checkbox-all`, children: (0, jsx_runtime_1.jsx)("svg", { 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", { className: `qbs-autocomplete-suggestions-item`, children: "Select All" })] }) })), (0, jsx_runtime_1.jsxs)("div", { className: `qbs-autocomplete-suggestions-sub qbs-autocomplete-selected-suggestions-outer ${viewMode ? 'hidden' : ''}`, ref: itemsRef, style: {
+                                        maxHeight: `${selHeight}px`,
+                                        minHeight: `${selHeight}px`,
+                                    }, children: [(filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 ? (filteredData.map((suggestion, idx) => ((0, jsx_runtime_1.jsx)(DropdownList_1.default, { idx: idx, suggestion: suggestion, isSelected: isSelected, handleSuggestionClick: () => handleSuggestionClick(suggestion, idx), handleMultiSelect: handleMultiSelect, selected: selected, isMultiple: isMultiple, singleSelect: singleSelect, desc: desc, shortCode: shortCode, labelCode: labelCode, focusedIndex: focusedIndex, setItemRef: (index, ref) => {
                                                 itemRefs.current[index] = ref; // Store each ref properly
-                                            } }, suggestion[descId])); })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isLoading ||
+                                            } }, 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 !== ''
+                                                    async) ? ((0, jsx_runtime_1.jsx)("div", { className: "qbs-flex qbs-align-middle qbs-justify-center qbs-min-emp-h", children: (0, jsx_runtime_1.jsx)("div", { className: "qbs-pt-16 qbs-autocomplete-loader", children: (0, jsx_runtime_1.jsx)(icons_1.Spinner, {}) }) })) : ((0, jsx_runtime_1.jsx)("div", { 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 &&
+                                                    : 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 () {
+                                            (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "loadMoreSection", onClick: () => handleLoadMore(), children: (0, jsx_runtime_1.jsx)("p", { 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", { className: `qbs-expandable-container qbs-dropdown-selected-container`, ref: dropdownSelectedRef, children: [(0, jsx_runtime_1.jsxs)("div", { className: `qbs-flex qbs-w-full qbs-text-xs`, children: [(0, jsx_runtime_1.jsx)("div", { className: "qbs-selected-lbs qbs-flex-grow", children: "Selected Items" }), (0, jsx_runtime_1.jsx)("div", { className: `qbs-clear-link qbs-text-right qbs-cursor-pointer ${viewMode ? 'hidden' : ''}`, onClick: handleClearSelected, children: "Clear all" }), (0, jsx_runtime_1.jsx)("div", { className: `qbs-done-link qbs-text-right qbs-cursor-pointer ${viewMode ? 'hidden' : ''}`, onClick: () => {
                                                                 setDropOpen(false);
                                                                 setAllDataLoaded(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 () {
+                                                            }, 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", { className: "qbs-readmore-collapse", children: (0, jsx_runtime_1.jsx)("div", { className: "qbs-more-collapse", onClick: () => {
                                                                 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, applyTabFilter: handleApplyTabFilter, onToolClose: function () { return setShowToolsTab(false); }, moreOptionTab: moreOptionTab, moreOptionTabLabel: moreOptionTabLabel, moreOptionTabIcon: moreOptionTabIcon, onMoreOptionChange: onMoreOptionChange, moreOptionResetKey: moreOptionResetKey }))] })), errors && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "text-error text-error-label mt-[1px]", "data-testid": "autocomplete-error" }, { children: errors.message })))] })));
+                                                            }, 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, applyTabFilter: handleApplyTabFilter, onToolClose: () => setShowToolsTab(false), moreOptionTab: moreOptionTab, moreOptionTabLabel: moreOptionTabLabel, moreOptionTabIcon: moreOptionTabIcon, onMoreOptionChange: onMoreOptionChange, moreOptionResetKey: moreOptionResetKey }))] }), errors && ((0, jsx_runtime_1.jsx)("div", { 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