react-core-ts 3.0.0 → 4.0.0

package/dist/AutoCompleteWithSelectedList.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,113 @@ 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 InputActions_1 = __importDefault(require("./components/InputActions"));
-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 AutoCompleteWithSelectedList = (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;
-    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 InputActions_1 = __importDefault(require("./components/InputActions"));
+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 AutoCompleteWithSelectedList = (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, }, 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 _9 = (0, react_1.useState)(true), isInitialRender = _9[0], setIsInitialRender = _9[1];
-    var _10 = (0, react_1.useState)(value), inputValue = _10[0], setInputValue = _10[1];
-    var _11 = (0, react_1.useState)(propsSearchValue), searchValue = _11[0], setSearchValue = _11[1];
-    var _12 = (0, react_1.useState)(''), searchOldValue = _12[0], setSearchOldValue = _12[1];
-    var _13 = (0, react_1.useState)(1), nextPage = _13[0], setNextPage = _13[1];
-    var _14 = (0, react_1.useState)(false), dropOpen = _14[0], setDropOpen = _14[1];
-    var _15 = (0, react_1.useState)([]), selectedItems = _15[0], setSelectedItems = _15[1];
-    var _16 = (0, react_1.useState)(propsSearchValue ? false : true), searchLoaded = _16[0], setSearchLoaded = _16[1];
-    var _17 = (0, react_1.useState)(false), showAllSelected = _17[0], setShowAllSelected = _17[1];
-    var _18 = (0, react_1.useState)(184), selHeight = _18[0], setSelHeight = _18[1];
-    var _19 = (0, react_1.useState)(1), expandArrowClick = _19[0], setExpandArrowClick = _19[1];
-    var _20 = (0, react_1.useState)(false), visible = _20[0], setVisible = _20[1];
-    var _21 = (0, react_1.useState)(currentTab), activeTab = _21[0], setActiveTab = _21[1];
-    var _22 = (0, react_1.useState)(0), focusedIndex = _22[0], setFocusedIndex = _22[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 [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 _23 = (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,
-    }), dropdownStyle = _23[0], setDropdownStyle = _23[1];
-    var _24 = (0, react_1.useState)(false), selectAll = _24[0], setSelectAll = _24[1];
-    var _25 = (0, react_1.useState)(false), refetchData = _25[0], setRefetchData = _25[1];
-    var _26 = (0, react_1.useState)(false), allDataLoaded = _26[0], setAllDataLoaded = _26[1];
-    var _27 = (0, react_1.useState)(false), isKeyboardOpen = _27[0], setIsKeyboardOpen = _27[1];
-    var _28 = (0, react_1.useState)(false), tabsScrollable = _28[0], setTabsScrollable = _28[1];
-    var originalOverflow = '';
-    var hasScrollbar = false;
-    var adjustDropdownPosition = function () {
+        transform: '',
+    });
+    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 lastReportedDropStateRef = (0, react_1.useRef)(null);
+    let originalOverflow = '';
+    let hasScrollbar = false;
+    const adjustDropdownPosition = () => {
         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 = 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;
@@ -179,19 +132,19 @@ var AutoCompleteWithSelectedList = (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(defaultHeight);
             }
             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 +
@@ -201,67 +154,71 @@ var AutoCompleteWithSelectedList = (0, react_1.forwardRef)(function (_a, ref) {
             }
             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;
-                    var selH = totalH - (dropdownHeight - spaceBelow);
+                    const totalH = showAllSelected ? 148 : defaultHeight;
+                    const selH = totalH - (dropdownHeight - spaceBelow);
                     setSelHeight(selH < 50 ? 50 : selH);
                 }
             }
             // setDropdownStyle({
             //   ...dropdownPosition,
             // });
-            setDropdownStyle(function (prevStyle) { return (__assign(__assign({}, prevStyle), { transform: "translateY(".concat(dropdownPosition_1.top, "px)"), left: desiredLeft_1, width: desiredWidth_1 })); });
+            setDropdownStyle((prevStyle) => {
+                const nextTransform = `translateY(${dropdownPosition.top}px)`;
+                if (prevStyle.transform === nextTransform &&
+                    prevStyle.left === desiredLeft &&
+                    prevStyle.width === desiredWidth) {
+                    return prevStyle;
+                }
+                return Object.assign(Object.assign({}, prevStyle), { transform: nextTransform, left: desiredLeft, width: desiredWidth });
+            });
         }
     };
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         window.addEventListener('resize', adjustDropdownPosition);
         adjustDropdownPosition();
-        return function () {
+        return () => {
             window.removeEventListener('resize', adjustDropdownPosition);
         };
     }, [dropOpen, expandArrowClick]);
     // 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);
         };
     }, []);
-    var _29 = (0, autosuggestions_1.useSuggestions)(getData, data, dropOpen, async, paginationEnabled, initialLoad, inputValue, isMultiple, setNextPage, selectedItems, typeOnlyFetch
+    const { suggestions, isLoading, handlePickSuggestions, resetSuggections } = (0, autosuggestions_1.useSuggestions)(getData, data, dropOpen, async, paginationEnabled, initialLoad, String(searchValue || inputValue || ''), isMultiple, setNextPage, selectedItems, typeOnlyFetch
     // nextBlock
-    ), suggestions = _29.suggestions, isLoading = _29.isLoading, handlePickSuggestions = _29.handlePickSuggestions, resetSuggections = _29.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];
                 }
             });
         }
@@ -274,28 +231,26 @@ var AutoCompleteWithSelectedList = (0, react_1.forwardRef)(function (_a, ref) {
         }
     }, []);
     // 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 = function (e, suggestion) {
-        var checked = e.target.checked;
+    const handleMultiSelect = (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'));
                 });
             }
         }
@@ -309,7 +264,7 @@ var AutoCompleteWithSelectedList = (0, react_1.forwardRef)(function (_a, ref) {
             }
         }
     };
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         // Only update if different
         if (!(0, deepEqual_1.deepEqual)(selectedItems, propsSeelctedItems)) {
             setSelectedItems(propsSeelctedItems);
@@ -317,11 +272,11 @@ var AutoCompleteWithSelectedList = (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 = function (e) {
-        var value = e.target.value;
+    const handleChange = (e) => {
+        const { value } = e.target;
         //setVisibleDrop();
         setSearchValue(value);
         handleChangeWithDebounce(value);
@@ -337,16 +292,17 @@ var AutoCompleteWithSelectedList = (0, react_1.forwardRef)(function (_a, ref) {
             setDropOpen(true);
         }
     };
-    var handleSuggestionChange = function (e) {
-        var value = e.target.value;
+    const handleSuggestionChange = (e) => {
+        const { value } = e.target;
         //setVisibleDrop();
-        var trimStart = value.trimStart();
-        setSearchValue(trimStart);
-        handleChangeWithDebounce(trimStart);
+        const trimStart = value.trimStart();
+        if (trimStart !== searchValue) {
+            setSearchValue(trimStart);
+            handleChangeWithDebounce(trimStart);
+        }
         setAllDataLoaded(false);
     };
-    var handleClear = function () {
-        var _a;
+    const handleClear = () => {
         if (searchValue) {
             setSearchValue('');
             setDropOpen(false);
@@ -356,43 +312,46 @@ var AutoCompleteWithSelectedList = (0, react_1.forwardRef)(function (_a, ref) {
             if (isMultiple)
                 onChange([]);
             else
-                onChange((_a = {}, _a[descId] = '', _a[desc] = '', _a));
+                onChange({ [descId]: '', [desc]: '' });
             setDropOpen(false);
         }
     };
-    var handleClearSelected = function () {
-        var _a;
+    const handleClearSelected = (preserveSearchOrEvent) => {
+        const preserveSearch = typeof preserveSearchOrEvent === 'boolean' ? preserveSearchOrEvent : false;
         setSelectedItems([]);
         setShowAllSelected(false);
-        if (searchValue && type === 'auto_suggestion' && tabInlineSearch) {
+        if (!preserveSearch && searchValue && type === 'auto_suggestion') {
             setSearchValue('');
+            if (!tabInlineSearch) {
+                onSearchValueChange === null || onSearchValueChange === void 0 ? void 0 : onSearchValueChange('');
+            }
         }
         if (isMultiple)
             onChange([]);
         else
-            onChange((_a = {}, _a[descId] = '', _a[desc] = '', _a));
-        if (async && type === 'auto_suggestion' && tabInlineSearch)
+            onChange({ [descId]: '', [desc]: '' });
+        if (async && type === 'auto_suggestion')
             resetSuggections === null || resetSuggections === void 0 ? void 0 : 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' : '');
+    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 = function (index) {
-        setSelectedItems(function (prev) {
-            return prev.filter(function (_, i) { return i !== index; });
+    const handleRemoveSelectedItem = (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;
             }
@@ -401,7 +360,7 @@ var AutoCompleteWithSelectedList = (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)))) {
@@ -413,18 +372,17 @@ var AutoCompleteWithSelectedList = (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);
-                    if (!typeOnlyFetch)
-                        setSearchValue('');
-                }, 200);
+                    //if (!typeOnlyFetch) setSearchValue('');
+                }, 0);
             }
         };
-        var handleClickOutside = function (event) {
+        const handleClickOutside = (event) => {
             var _a;
             // When keyboard is open, be more lenient - only close on clear outside clicks
             if (isKeyboardOpenRef.current) {
-                var target = event.target;
+                const target = event.target;
                 // Only close if it's a clear click outside, not on input/textarea elements
                 if (dropRef.current &&
                     target instanceof Node &&
@@ -434,11 +392,10 @@ var AutoCompleteWithSelectedList = (0, react_1.forwardRef)(function (_a, ref) {
                     target.closest &&
                     !target.closest('input') &&
                     !target.closest('textarea')) {
-                    setTimeout(function () {
+                    setTimeout(() => {
                         setDropOpen(false);
-                        if (!typeOnlyFetch)
-                            setSearchValue('');
-                    }, 200);
+                        // if (!typeOnlyFetch) setSearchValue('');
+                    }, 0);
                 }
                 return;
             }
@@ -447,31 +404,26 @@ var AutoCompleteWithSelectedList = (0, react_1.forwardRef)(function (_a, ref) {
                 event.target instanceof Node &&
                 !dropRef.current.contains(event.target) &&
                 ((_a = event.target) === null || _a === void 0 ? void 0 : _a.id) !== uniqueDropArrowId) {
-                setTimeout(function () {
+                setTimeout(() => {
                     setDropOpen(false);
-                    if (!typeOnlyFetch)
-                        setSearchValue('');
-                }, 200);
+                    //if (!typeOnlyFetch) setSearchValue('');
+                }, 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;
@@ -482,9 +434,9 @@ var AutoCompleteWithSelectedList = (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);
-    (0, react_1.useEffect)(function () {
+    const selected = isMultiple ? selectedItems : inputValue;
+    const filteredData = (0, react_1.useMemo)(() => (0, filterSuggestions_1.filterSuggestions)(suggestions, searchValue, type, desc, selected, async, false, true, matchFromStart), [suggestions, searchValue, type, desc, selected, async, matchFromStart]);
+    (0, react_1.useEffect)(() => {
         if (isInitialRender) {
             setIsInitialRender(false);
         }
@@ -492,26 +444,26 @@ var AutoCompleteWithSelectedList = (0, react_1.forwardRef)(function (_a, ref) {
             onChange(selectedItems);
         }
         adjustDropdownPosition();
-        setTimeout(function () {
+        setTimeout(() => {
             adjustDropdownPosition();
         }, 200);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selectedItems]);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         adjustDropdownPosition();
-        setTimeout(function () {
+        setTimeout(() => {
             adjustDropdownPosition();
         }, 200);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [filteredData]);
-    (0, react_1.useEffect)(function () {
+    (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();
@@ -524,7 +476,7 @@ var AutoCompleteWithSelectedList = (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();
@@ -537,7 +489,7 @@ var AutoCompleteWithSelectedList = (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();
@@ -553,37 +505,31 @@ var AutoCompleteWithSelectedList = (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);
@@ -595,7 +541,7 @@ var AutoCompleteWithSelectedList = (0, react_1.forwardRef)(function (_a, ref) {
             // handleOnClick();
         }
     };
-    var handleShowAllSelected = function (enabled) {
+    const handleShowAllSelected = (enabled) => {
         setExpandArrowClick(expandArrowClick + 1);
         if (enabled) {
             setShowAllSelected(true);
@@ -604,20 +550,20 @@ var AutoCompleteWithSelectedList = (0, react_1.forwardRef)(function (_a, ref) {
             setShowAllSelected(false);
         }
     };
-    var handleCollapseArrowClick = function () {
+    const handleCollapseArrowClick = () => {
         setExpandArrowClick(expandArrowClick + 1);
         setShowAllSelected(false);
     };
-    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 handleDropOpen = function (e) {
+    const handleDropOpen = (e) => {
         setVisibleDrop();
     };
-    var setVisibleDrop = function () {
+    const setVisibleDrop = () => {
         hasScrollbar = document.body.scrollHeight > window.innerHeight;
         if (!originalOverflow && !hasScrollbar) {
             originalOverflow = document.body.style.overflow;
@@ -627,7 +573,7 @@ var AutoCompleteWithSelectedList = (0, react_1.forwardRef)(function (_a, ref) {
         if (!dropOpen)
             setDropOpen(true);
         setFocusedIndex(0);
-        setTimeout(function () {
+        setTimeout(() => {
             setVisible(true);
             if (!hasScrollbar) {
                 document.body.style.overflow = originalOverflow || '';
@@ -635,92 +581,95 @@ var AutoCompleteWithSelectedList = (0, react_1.forwardRef)(function (_a, ref) {
             originalOverflow = '';
         }, 200);
     };
-    var handleDropClose = function (e) {
+    const handleDropClose = (e) => {
         if (dropOpen)
             setDropOpen(false);
     };
-    var handleTabClick = function (index) {
+    const handleTabClick = (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);
         }
     };
-    var getSelectedRowLimit = function () {
-        var maxHeight = 36;
+    const getSelectedRowLimit = () => {
+        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;
     };
-    var getSelectedItems = 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 = (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: item === null || item === void 0 ? void 0 : item[desc], enabled: ((_a = 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 = item === null || item === void 0 ? void 0 : item[desc]) === null || _b === void 0 ? void 0 : _b.length) > textCount
-                                        ? "".concat(item === null || item === void 0 ? void 0 : item[desc].substring(0, textCount), "...")
-                                        : 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(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: item === null || item === void 0 ? void 0 : item[desc], enabled: ((_a = 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 = item === null || item === void 0 ? void 0 : item[desc]) === null || _b === void 0 ? void 0 : _b.length) > textCount
+                                        ? `${item === null || item === void 0 ? void 0 : item[desc].substring(0, textCount)}...`
+                                        : 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 ${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" })] }) }) }))] }));
     };
-    var getTabItems = 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 = () => {
+        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}`))) }));
     };
-    var handleSelectAll = function () {
+    const handleSelectAll = () => {
         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 {
-                filteredData.map(function (suggestion) {
-                    return setSelectedItems(function (prev) {
-                        var isAdded = prev.some(function (item) {
-                            return (0, getKeyValue_1.getKeyValue)(item, descId, 'id') ===
-                                (0, getKeyValue_1.getKeyValue)(suggestion, descId, 'id');
-                        });
-                        if (isAdded) {
-                            return prev;
-                        }
-                        else {
-                            return __spreadArray(__spreadArray([], prev, true), [suggestion], false);
-                        }
-                    });
-                });
+                filteredData.map((suggestion) => setSelectedItems((prev) => {
+                    const isAdded = prev.some((item) => (0, getKeyValue_1.getKeyValue)(item, descId, 'id') ===
+                        (0, getKeyValue_1.getKeyValue)(suggestion, descId, 'id'));
+                    if (isAdded) {
+                        return prev;
+                    }
+                    else {
+                        return [...prev, suggestion];
+                    }
+                }));
             }
         }
     };
-    var handleOpenDropdown = function (e) {
+    const handleOpenDropdown = (e) => {
+        const normalizedSearchValue = searchValue === null || searchValue === void 0 ? void 0 : searchValue.trim();
+        const effectiveSearchValue = tabInlineSearch
+            ? normalizedSearchValue
+            : inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim();
+        const shouldRefetchForInlineSearch = tabInlineSearch && Boolean(normalizedSearchValue);
         if (!tabInlineSearch) {
             // Toggle the main dropdown when not using inline search
             if (dropOpen && visible && allDataLoaded) {
@@ -739,9 +688,12 @@ var AutoCompleteWithSelectedList = (0, react_1.forwardRef)(function (_a, ref) {
                 setVisible(true);
             }
         }
-        if (!suggestions || (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) === 0 || refetchData) {
-            if (autoDropdown && (inputValue === '' || inputValue.trim() === '')) {
-                var activeTabVal = tab.length > 0 ? tab === null || tab === void 0 ? void 0 : tab[activeTab].id : undefined;
+        if (!suggestions ||
+            (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) === 0 ||
+            refetchData ||
+            shouldRefetchForInlineSearch) {
+            if (autoDropdown && !effectiveSearchValue) {
+                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);
                 }
@@ -756,50 +708,56 @@ var AutoCompleteWithSelectedList = (0, react_1.forwardRef)(function (_a, ref) {
                 setRefetchData(false);
                 setAllDataLoaded(true);
             }
-            else if (!refetchData && inputValue !== '') {
+            else if (effectiveSearchValue) {
                 if (tabInlineSearch && tab.length > 0) {
-                    var activeTabVal = tab.length > 0 ? tab === null || tab === void 0 ? void 0 : tab[activeTab].id : undefined;
-                    handlePickSuggestions(inputValue, 1, false, activeTabVal);
+                    const activeTabVal = tab.length > 0 ? tab === null || tab === void 0 ? void 0 : tab[activeTab].id : undefined;
+                    handlePickSuggestions(effectiveSearchValue, 1, false, activeTabVal);
                 }
                 else {
-                    handlePickSuggestions(inputValue, 1);
+                    handlePickSuggestions(effectiveSearchValue, 1);
                 }
                 setRefetchData(true);
                 setAllDataLoaded(false);
             }
         }
     };
-    (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 () {
-        handleUpdateParent === null || handleUpdateParent === void 0 ? void 0 : handleUpdateParent(dropOpen, dropLevelRef.current);
-    }, [dropOpen, dropLevelRef.current]);
-    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: {
+    (0, react_1.useEffect)(() => {
+        if (!handleUpdateParent)
+            return;
+        const current = {
+            open: dropOpen,
+            level: dropLevelRef.current,
+        };
+        const last = lastReportedDropStateRef.current;
+        if (!last || last.open !== current.open || last.level !== current.level) {
+            handleUpdateParent(current.open, current.level);
+            lastReportedDropStateRef.current = current;
+        }
+    }, [dropOpen, handleUpdateParent]);
+    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 qbs-text-sm qbs-gap-1 ".concat(!tabInlineSearch && autoDropdown ? 'selected-item-nontool-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 ".concat(!tabInlineSearch && autoDropdown ? 'qbs-inline-all-direct-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 ${disabled ? 'selected-item-inline-counter-disabled' : ''} qbs-text-sm qbs-gap-1 ${!tabInlineSearch && autoDropdown && !disabled ? 'selected-item-nontool-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 ${!tabInlineSearch && autoDropdown ? 'qbs-inline-all-direct-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 || searchValue
+                            }, onClick: () => handleOnClick(), className: generateClassName(), placeholder: (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0 || searchValue
                                 ? !tabInlineSearch && searchValue
                                     ? searchValue
                                     : !tabInlineSearch
@@ -807,30 +765,28 @@ var AutoCompleteWithSelectedList = (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" }) })), (0, jsx_runtime_1.jsx)(InputActions_1.default, { inputValue: inputValue, searchValue: searchValue, dropOpen: dropOpen, handleDropOpen: handleDropOpen, handleDropClose: handleDropClose, disabled: disabled, readOnly: readOnly, expandable: expandable, handleClear: handleClear, countOnly: countOnly, uniqueDropArrowId: uniqueDropArrowId, viewMode: viewMode, autoDropdown: autoDropdown && !tabInlineSearch ? true : false }), 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" }) }), (0, jsx_runtime_1.jsx)(InputActions_1.default, { inputValue: inputValue, searchValue: searchValue, dropOpen: dropOpen, handleDropOpen: handleDropOpen, handleDropClose: handleDropClose, disabled: disabled, readOnly: readOnly, expandable: expandable, handleClear: handleClear, countOnly: countOnly, uniqueDropArrowId: uniqueDropArrowId, viewMode: viewMode, autoDropdown: autoDropdown && !tabInlineSearch ? true : false }), 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);
-                                                            } }, { 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)] })), 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)] }), 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(AutoCompleteWithSelectedList);
 //# sourceMappingURL=AutoCompleteWithSelectedList.js.map