react-core-ts 3.0.0 → 4.0.0

package/dist/ExpandableAutoComplete.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,150 +15,81 @@ 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 NewTooltip_1 = __importDefault(require("./utilities/NewTooltip"));
-var filterSuggestions_1 = require("./utilities/filterSuggestions");
-var icons_1 = require("./utilities/icons");
-var getKeyValue_1 = require("./utilities/getKeyValue");
-var ExpandableAutoComplete = (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.isMultiple, isMultiple = _k === void 0 ? false : _k, _l = _a.desc, desc = _l === void 0 ? 'name' : _l, _m = _a.descId, descId = _m === void 0 ? 'id' : _m, singleSelect = _a.singleSelect, className = _a.className, _o = _a.async, async = _o === void 0 ? false : _o, paginationEnabled = _a.paginationEnabled, initialLoad = _a.initialLoad, actionLabel = _a.actionLabel, handleAction = _a.handleAction, nextBlock = _a.nextBlock, notDataMessage = _a.notDataMessage, onFocus = _a.onFocus, _p = _a.expandable, expandable = _p === void 0 ? false : _p, _q = _a.textCount, textCount = _q === void 0 ? 10 : _q, _r = _a.itemCount, itemCount = _r === void 0 ? 1 : _r, scrollRef = _a.scrollRef, _s = _a.isTreeDropdown, isTreeDropdown = _s === void 0 ? false : _s, _t = _a.shortCode, shortCode = _t === void 0 ? '' : _t, _u = _a.labelCode, labelCode = _u === void 0 ? '' : _u, _v = _a.typeOnlyFetch, typeOnlyFetch = _v === void 0 ? false : _v, _w = _a.autoDropdown, autoDropdown = _w === void 0 ? false : _w, _x = _a.enableSelectAll, enableSelectAll = _x === void 0 ? false : _x, _y = _a.matchFromStart, matchFromStart = _y === void 0 ? false : _y;
-    var dropdownRef = (0, react_1.useRef)(null);
+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 NewTooltip_1 = __importDefault(require("./utilities/NewTooltip"));
+const filterSuggestions_1 = require("./utilities/filterSuggestions");
+const icons_1 = require("./utilities/icons");
+const getKeyValue_1 = require("./utilities/getKeyValue");
+const ExpandableAutoComplete = (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, isMultiple = false, desc = 'name', descId = 'id', singleSelect, className, async = false, paginationEnabled, initialLoad, actionLabel, handleAction, nextBlock, notDataMessage, onFocus, expandable = false, textCount = 10, itemCount = 1, scrollRef, isTreeDropdown = false, shortCode = '', labelCode = '', typeOnlyFetch = false, autoDropdown = false, enableSelectAll = false, matchFromStart = false, }, ref) => {
+    var _a;
+    const dropdownRef = (0, react_1.useRef)(null);
+    const expandableContainerRef = (0, react_1.useRef)(null);
+    const isExpandableSingleLineRef = (0, react_1.useRef)(true);
+    const [isExpandableSingleLine, setIsExpandableSingleLine] = (0, react_1.useState)(true);
     // State Hooks Section
-    var _z = (0, react_1.useState)(true), isInitialRender = _z[0], setIsInitialRender = _z[1];
-    var _0 = (0, react_1.useState)(value), inputValue = _0[0], setInputValue = _0[1];
-    var _1 = (0, react_1.useState)(''), searchValue = _1[0], setSearchValue = _1[1];
-    var _2 = (0, react_1.useState)(1), nextPage = _2[0], setNextPage = _2[1];
-    var _3 = (0, react_1.useState)(false), dropOpen = _3[0], setDropOpen = _3[1];
-    var _4 = (0, react_1.useState)([]), selectedItems = _4[0], setSelectedItems = _4[1];
-    var _5 = (0, react_1.useState)(0), focusedIndex = _5[0], setFocusedIndex = _5[1];
-    var itemRefs = (0, react_1.useRef)([]);
-    var itemsRef = (0, react_1.useRef)(null);
-    var dropBtnRef = (0, react_1.useRef)(null);
-    var _6 = (0, react_1.useState)(false), refetchData = _6[0], setRefetchData = _6[1];
-    var _7 = (0, react_1.useState)(false), selectAll = _7[0], setSelectAll = _7[1];
+    const [isInitialRender, setIsInitialRender] = (0, react_1.useState)(true);
+    const [inputValue, setInputValue] = (0, react_1.useState)(value);
+    const [searchValue, setSearchValue] = (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 [focusedIndex, setFocusedIndex] = (0, react_1.useState)(0);
+    const itemRefs = (0, react_1.useRef)([]);
+    const itemsRef = (0, react_1.useRef)(null);
+    const dropBtnRef = (0, react_1.useRef)(null);
+    const [refetchData, setRefetchData] = (0, react_1.useState)(false);
+    const [selectAll, setSelectAll] = (0, react_1.useState)(false);
     // API call for suggestions through a custom hook
-    var inputRef = (0, react_1.useRef)(null);
-    var dropRef = (0, react_1.useRef)(null);
-    var typeRef = (0, react_1.useRef)(0);
-    (0, react_1.useImperativeHandle)(ref, function () { return inputRef.current; });
-    var _8 = (0, react_1.useState)({
-        top: 0,
-        left: 0,
-        width: 200,
-    }), dropdownStyle = _8[0], setDropdownStyle = _8[1];
-    var adjustDropdownPosition = function () {
-        if (dropdownRef.current) {
-            var inputRect = dropdownRef.current.getBoundingClientRect();
-            var dropdownPosition = {
-                left: inputRect.left + window.scrollX,
-                width: inputRect.width,
-                top: 0,
-            };
-            // 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 = 275; // Assume a fixed height or calculate based on content
-            if (spaceBelow >= dropdownHeight) {
-                dropdownPosition.top =
-                    inputRect.top + window.scrollY + inputRect.height;
-            }
-            else {
-                dropdownHeight =
-                    dropdownHeight +
-                        ((filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 && enableSelectAll && isMultiple
-                            ? 32
-                            : 0);
-                dropdownPosition.top =
-                    inputRect.top + window.scrollY - dropdownHeight + 73;
-            }
-            setDropdownStyle(__assign({}, dropdownPosition));
-        }
-    };
-    var _9 = (0, autosuggestions_1.useSuggestions)(getData, data, dropOpen, async, paginationEnabled, initialLoad, inputValue, isMultiple, setNextPage, selectedItems, typeOnlyFetch
+    const inputRef = (0, react_1.useRef)(null);
+    const dropRef = (0, react_1.useRef)(null);
+    const typeRef = (0, react_1.useRef)(0);
+    (0, react_1.useImperativeHandle)(ref, () => inputRef.current);
+    const [dropdownStyle, setDropdownStyle] = (0, react_1.useState)(null);
+    const isPositionCalculatedRef = (0, react_1.useRef)(false);
+    const { suggestions, isLoading, handlePickSuggestions } = (0, autosuggestions_1.useSuggestions)(getData, data, dropOpen, async, paginationEnabled, initialLoad, String(searchValue || inputValue || ''), isMultiple, setNextPage, selectedItems, typeOnlyFetch
     // nextBlock
-    ), suggestions = _9.suggestions, isLoading = _9.isLoading, handlePickSuggestions = _9.handlePickSuggestions;
+    );
     // 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.some(function (item) {
-                    return (0, getKeyValue_1.getKeyValue)(item, descId, 'id') ===
-                        (0, getKeyValue_1.getKeyValue)(suggestion, descId, 'id');
-                });
+            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.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];
                 }
             });
         }
@@ -182,29 +102,27 @@ var ExpandableAutoComplete = (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) {
+    const debouncedUpdate = (0, react_1.useCallback)((0, debounce_1.debounce)((value) => {
         handlePickSuggestions(value, 1, false);
         typeRef.current = 0;
     }, 500), []);
-    var handleChangeWithDebounce = function (value) {
+    const handleChangeWithDebounce = (value) => {
         if ((type === 'auto_complete' || type === 'auto_suggestion') && async) {
             debouncedUpdate(value);
         }
         else
             typeRef.current = 0;
     };
-    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'));
                 });
             }
         }
@@ -218,16 +136,16 @@ var ExpandableAutoComplete = (0, react_1.forwardRef)(function (_a, ref) {
             }
         }
     };
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (!(0, deepEqual_1.deepEqual)(selectedItems, propsSeelctedItems))
             setSelectedItems(propsSeelctedItems);
     }, [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;
         setDropOpen(true);
         setSearchValue(value);
         typeRef.current = 1;
@@ -238,38 +156,37 @@ var ExpandableAutoComplete = (0, react_1.forwardRef)(function (_a, ref) {
             // onChange({ [descId]: '', [desc]: '' });
         }
     };
-    var handleSuggestionChange = function (e) {
-        var value = e.target.value;
+    const handleSuggestionChange = (e) => {
+        const { value } = e.target;
         setDropOpen(true);
         setSearchValue(value);
         handleChangeWithDebounce(value);
     };
-    var handleBlur = function () {
-        setTimeout(function () {
+    const handleBlur = () => {
+        setTimeout(() => {
             setDropOpen(false);
         }, 200);
     };
-    var handleClear = function () {
-        var _a;
+    const handleClear = () => {
         if (searchValue) {
             setSearchValue('');
             setDropOpen(false);
         }
         else {
             setInputValue('');
-            onChange((_a = {}, _a[descId] = '', _a[desc] = '', _a));
+            onChange({ [descId]: '', [desc]: '' });
             setDropOpen(false);
         }
     };
-    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);
         });
     };
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (isInitialRender) {
             setIsInitialRender(false);
         }
@@ -277,14 +194,14 @@ var ExpandableAutoComplete = (0, react_1.forwardRef)(function (_a, ref) {
             onChange(selectedItems);
         }
     }, [selectedItems]);
-    (0, react_1.useEffect)(function () {
-        var handleClickOutside = function (event) {
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (event) => {
             var _a;
             if (dropRef.current &&
                 event.target instanceof Node &&
                 !dropRef.current.contains(event.target) &&
                 ((_a = event.target) === null || _a === void 0 ? void 0 : _a.id) !== 'drop-arrow-expanded-list-icon') {
-                setTimeout(function () {
+                setTimeout(() => {
                     setDropOpen(false);
                     if (!typeOnlyFetch)
                         setSearchValue('');
@@ -293,42 +210,107 @@ var ExpandableAutoComplete = (0, react_1.forwardRef)(function (_a, ref) {
         };
         document.addEventListener('mousedown', handleClickOutside);
         window.addEventListener('scroll', handleClickOutside);
-        var scrollableDivs = document.querySelectorAll('div[style*="overflow"], .overflow-auto, .overflow-y-auto, .overflow-x-auto');
-        scrollableDivs.forEach(function (div) {
-            return div.addEventListener('scroll', handleClickOutside);
-        });
+        const scrollableDivs = document.querySelectorAll('div[style*="overflow"], .overflow-auto, .overflow-y-auto, .overflow-x-auto');
+        scrollableDivs.forEach((div) => div.addEventListener('scroll', handleClickOutside));
         if (scrollRef && scrollRef.current && scrollRef.current !== null) {
             scrollRef.current.addEventListener('scroll', handleClickOutside);
         }
-        return function () {
+        return () => {
             document.removeEventListener('mousedown', handleClickOutside);
             window.removeEventListener('scroll', handleClickOutside);
-            scrollableDivs.forEach(function (div) {
-                return div.removeEventListener('scroll', handleClickOutside);
-            });
+            scrollableDivs.forEach((div) => div.removeEventListener('scroll', handleClickOutside));
             if (scrollRef && scrollRef.current && scrollRef.current !== null) {
                 scrollRef.current.removeEventListener('scroll', handleClickOutside);
             }
         };
     }, []);
     // Filtering suggestions based on type and search value
-    var selected = isMultiple ? selectedItems : inputValue;
-    var filteredData = (0, filterSuggestions_1.filterSuggestions)(suggestions, searchValue, type, desc, selected, async, isTreeDropdown, true, matchFromStart);
-    (0, react_1.useEffect)(function () {
-        window.addEventListener('resize', adjustDropdownPosition);
+    const selected = (0, react_1.useMemo)(() => (isMultiple ? selectedItems : inputValue), [isMultiple, selectedItems, inputValue]);
+    const filteredData = (0, react_1.useMemo)(() => {
+        return (0, filterSuggestions_1.filterSuggestions)(suggestions, searchValue, type, desc, selected, async, isTreeDropdown, true, matchFromStart);
+    }, [
+        suggestions,
+        searchValue,
+        type,
+        desc,
+        selected,
+        async,
+        isTreeDropdown,
+        matchFromStart,
+    ]);
+    const adjustDropdownPosition = (0, react_1.useCallback)(() => {
+        if (dropdownRef.current) {
+            const inputRect = dropdownRef.current.getBoundingClientRect();
+            const dropdownPosition = {
+                left: inputRect.left + window.scrollX,
+                width: inputRect.width,
+                top: 0,
+            };
+            // Check if there's enough space below the input for the dropdown
+            const spaceBelow = window.innerHeight - inputRect.bottom;
+            const spaceAbove = inputRect.top + window.scrollY;
+            let dropdownHeight = 275; // Assume a fixed height or calculate based on content
+            if (spaceBelow >= dropdownHeight) {
+                dropdownPosition.top =
+                    inputRect.top + window.scrollY + inputRect.height;
+            }
+            else {
+                dropdownHeight =
+                    dropdownHeight +
+                        ((filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 && enableSelectAll && isMultiple
+                            ? 32
+                            : 0);
+                dropdownPosition.top =
+                    inputRect.top + window.scrollY - dropdownHeight + 73;
+            }
+            setDropdownStyle((prev) => {
+                if (prev &&
+                    prev.top === dropdownPosition.top &&
+                    prev.left === dropdownPosition.left &&
+                    prev.width === dropdownPosition.width) {
+                    return prev;
+                }
+                isPositionCalculatedRef.current = true;
+                return dropdownPosition;
+            });
+        }
+    }, [filteredData === null || filteredData === void 0 ? void 0 : filteredData.length, enableSelectAll, isMultiple]);
+    // Use useLayoutEffect to calculate position synchronously before paint to prevent flicker
+    (0, react_1.useLayoutEffect)(() => {
+        if (!dropOpen) {
+            isPositionCalculatedRef.current = false;
+            setDropdownStyle(null);
+            return;
+        }
+        // Calculate position immediately when dropdown opens
+        isPositionCalculatedRef.current = false;
         adjustDropdownPosition();
-        return function () {
+    }, [
+        dropOpen,
+        selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length,
+        filteredData === null || filteredData === void 0 ? void 0 : filteredData.length,
+        enableSelectAll,
+        isMultiple,
+        adjustDropdownPosition,
+    ]);
+    // Separate effect for resize listener (only when dropdown is open)
+    (0, react_1.useEffect)(() => {
+        if (!dropOpen) {
+            return;
+        }
+        window.addEventListener('resize', adjustDropdownPosition);
+        return () => {
             window.removeEventListener('resize', adjustDropdownPosition);
         };
-    }, [dropOpen, selectedItems, filteredData]);
-    (0, react_1.useEffect)(function () {
+    }, [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();
@@ -341,7 +323,7 @@ var ExpandableAutoComplete = (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();
@@ -354,7 +336,7 @@ var ExpandableAutoComplete = (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();
@@ -369,86 +351,69 @@ var ExpandableAutoComplete = (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 ? setDropOpen(true) : '';
     };
-    var onInputFocus = function () {
+    const onInputFocus = () => {
         if (inputRef.current)
             inputRef.current.focus();
         handleOnClick();
     };
-    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 handleDropOpen = function (e) {
+    const handleDropOpen = (e) => {
         if (!dropOpen)
             setDropOpen(true);
         setFocusedIndex(0);
     };
-    var handleDropClose = function (e) {
+    const handleDropClose = (e) => {
         if (dropOpen)
             setDropOpen(false);
     };
-    var handleClearSelected = function () {
-        var _a;
+    const handleClearSelected = () => {
         setSelectedItems([]);
         if (isMultiple)
             onChange([]);
         else
-            onChange((_a = {}, _a[descId] = '', _a[desc] = '', _a));
+            onChange({ [descId]: '', [desc]: '' });
     };
-    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) => {
         if (!suggestions || (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) === 0 || refetchData) {
             if (autoDropdown && (inputValue === '' || inputValue.trim() === '')) {
                 handlePickSuggestions('*', 1);
@@ -463,52 +428,92 @@ var ExpandableAutoComplete = (0, react_1.forwardRef)(function (_a, ref) {
             setDropOpen(!dropOpen);
         }
     };
-    (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]);
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ id: id ? "expandable-container-".concat(id) : "expandable-container-".concat(name), className: fullWidth ? 'fullWidth' : 'autoWidth', ref: dropdownRef }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ style: {
+    // Track previous values to prevent unnecessary checks
+    const prevSelectedItemsLengthRef = (0, react_1.useRef)((_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) !== null && _a !== void 0 ? _a : 0);
+    const prevSearchValueRef = (0, react_1.useRef)(searchValue);
+    const prevExpandableRef = (0, react_1.useRef)(expandable);
+    // Check single line status only when content actually changes
+    (0, react_1.useLayoutEffect)(() => {
+        var _a;
+        const el = expandableContainerRef.current;
+        const currentLength = (_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) !== null && _a !== void 0 ? _a : 0;
+        // Only check if dependencies actually changed
+        const lengthChanged = prevSelectedItemsLengthRef.current !== currentLength;
+        const searchChanged = prevSearchValueRef.current !== searchValue;
+        const expandableChanged = prevExpandableRef.current !== expandable;
+        if (!lengthChanged && !searchChanged && !expandableChanged) {
+            return; // Skip if nothing changed
+        }
+        // Update refs
+        prevSelectedItemsLengthRef.current = currentLength;
+        prevSearchValueRef.current = searchValue;
+        prevExpandableRef.current = expandable;
+        if (!el || !expandable) {
+            if (isExpandableSingleLineRef.current !== true) {
+                isExpandableSingleLineRef.current = true;
+                setIsExpandableSingleLine(true);
+            }
+            return;
+        }
+        // Use requestAnimationFrame to check after DOM updates
+        requestAnimationFrame(() => {
+            if (!el)
+                return;
+            const computedStyle = getComputedStyle(el);
+            const paddingTop = parseFloat(computedStyle.paddingTop) || 5;
+            const paddingBottom = parseFloat(computedStyle.paddingBottom) || 5;
+            const borderTop = parseFloat(computedStyle.borderTopWidth) || 0;
+            const borderBottom = parseFloat(computedStyle.borderBottomWidth) || 0;
+            const lineHeight = parseFloat(computedStyle.lineHeight) || 20;
+            const singleLineThreshold = paddingTop + paddingBottom + borderTop + borderBottom + lineHeight + 20;
+            const isSingle = el.scrollHeight <= singleLineThreshold;
+            // Only update if value changed
+            if (isExpandableSingleLineRef.current !== isSingle) {
+                isExpandableSingleLineRef.current = isSingle;
+                setIsExpandableSingleLine(isSingle);
+            }
+        });
+    }, [expandable, selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length, searchValue]);
+    return ((0, jsx_runtime_1.jsxs)("div", { id: id ? `expandable-container-${id}` : `expandable-container-${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: "".concat(expandable ? 'qbs-expandable-container' : 'qbs-container'), style: { position: 'relative' } }, { children: [(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectedItems
+                }, 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", { ref: expandableContainerRef, className: `${expandable ? 'qbs-expandable-container' : 'qbs-container'} ${autoDropdown ? 'pr-8' : ''}`, style: { position: 'relative' }, children: [(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectedItems
                                 .slice(0, (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > itemCount
                                 ? 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], (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 && ((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" }, { children: ["+", (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) - itemCount, " more"] })) })) })))] })), (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
+                                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], (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 && ((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", children: ["+", (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) - itemCount, " more"] }) }) }))] })), (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
                             ? searchValue
-                            : placeholder !== null && placeholder !== void 0 ? placeholder : '', onClick: function () { return onInputFocus(); } }, { children: (0, jsx_runtime_1.jsx)("input", { id: id ? "input-expandable-".concat(id) : "input-expandable-".concat(name), ref: inputRef, type: "text", autoComplete: "off", value: type === 'auto_suggestion' && !expandable
+                            : placeholder !== null && placeholder !== void 0 ? placeholder : '', onClick: () => onInputFocus(), children: (0, jsx_runtime_1.jsx)("input", { id: id ? `input-expandable-${id}` : `input-expandable-${name}`, ref: inputRef, type: "text", autoComplete: "off", value: type === 'auto_suggestion' && !expandable
                                 ? inputValue
                                 : searchValue || inputValue, onChange: handleChange, 
                             // onBlur={handleBlur}
-                            onFocus: onFocus, onClick: function () { return handleOnClick(); }, className: generateClassName(), placeholder: (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0 ? '' : placeholder !== null && placeholder !== void 0 ? placeholder : '', readOnly: readOnly ||
+                            onFocus: onFocus, onClick: () => handleOnClick(), className: generateClassName(), placeholder: (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0 ? '' : placeholder !== null && placeholder !== void 0 ? placeholder : '', readOnly: readOnly ||
                                 type === 'custom_select' ||
-                                (type === 'auto_suggestion' && !expandable), disabled: disabled, "data-testid": "custom-autocomplete" }) })), (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: !dropOpen ? 'down' : 'up', uniqueId: "all-dropdow-arrow-icon", className: "all-dropdow-arrow-icon" }) }))) }), (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 1 && ((0, jsx_runtime_1.jsx)("div", __assign({ id: "expandable-clear-all", className: "qbs-clear-link qbs-text-right qbs-cursor-pointer qbs-text-xs absolute right-2 qbs-bottom-0", onClick: handleClearSelected }, { children: "Clear all" }))), (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, uniqueDropArrowId: "drop-arrow-expanded-list-icon", autoDropdown: autoDropdown }), dropOpen &&
-                        react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)("ul", __assign({ ref: dropRef, style: __assign(__assign({}, dropdownStyle), { minHeight: 192 }), className: "qbs-autocomplete-suggestions qbs-autocomplete-suggestions-expandable", id: id
-                                ? "autocomplete-dropdown-".concat(id)
-                                : "autocomplete-dropdown-".concat(name) }, { children: [type === 'auto_suggestion' && !expandable && ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { position: 'relative' }, className: "react-core-ts-search-container" }, { 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" })] }))), (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.jsx)("div", __assign({ className: "qbs-autocomplete-suggestions-expandable-container" }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "qbs-autocomplete-suggestions-sub qbs-autocomplete-suggestions-outer", ref: itemsRef }, { 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) {
+                                (type === 'auto_suggestion' && !expandable), disabled: disabled, "data-testid": "custom-autocomplete" }) }), (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: !dropOpen ? 'down' : 'up', uniqueId: "all-dropdow-arrow-icon", className: "all-dropdow-arrow-icon" }) })) }), (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 1 && ((0, jsx_runtime_1.jsx)("div", { id: "expandable-clear-all", className: `qbs-clear-link qbs-text-right qbs-cursor-pointer qbs-text-xs absolute right-2 qbs-bottom-0 ${autoDropdown && isExpandableSingleLine ? 'qbs-clear-with-auto-dropdown' : ''}`, onClick: handleClearSelected, children: "Clear all" })), (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, uniqueDropArrowId: "drop-arrow-expanded-list-icon", autoDropdown: autoDropdown }), dropOpen && dropdownStyle &&
+                        react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)("ul", { ref: dropRef, style: Object.assign(Object.assign({}, dropdownStyle), { minHeight: 192 }), className: `qbs-autocomplete-suggestions qbs-autocomplete-suggestions-expandable`, id: id
+                                ? `autocomplete-dropdown-${id}`
+                                : `autocomplete-dropdown-${name}`, children: [type === 'auto_suggestion' && !expandable && ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative' }, className: "react-core-ts-search-container", 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" })] })), (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.jsx)("div", { className: "qbs-autocomplete-suggestions-expandable-container", children: (0, jsx_runtime_1.jsxs)("div", { className: `qbs-autocomplete-suggestions-sub qbs-autocomplete-suggestions-outer`, ref: itemsRef, 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
-                                                } })); })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isLoading ? ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
+                                                } })))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isLoading ? ((0, jsx_runtime_1.jsx)("div", { style: {
                                                         display: 'flex',
                                                         justifyContent: 'center',
-                                                    }, className: "qbs-autocomplete-loader" }, { children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(icons_1.Spinner, {}) }) }))) : ((0, jsx_runtime_1.jsx)("li", __assign({ className: "qbs-autocomplete-notfound", onClick: handleBlur }, { children: (notDataMessage !== null && notDataMessage !== void 0 ? notDataMessage : (searchValue === '' || typeRef.current === 1))
+                                                    }, className: "qbs-autocomplete-loader", children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(icons_1.Spinner, {}) }) })) : ((0, jsx_runtime_1.jsx)("li", { className: "qbs-autocomplete-notfound", onClick: handleBlur, children: (notDataMessage !== null && notDataMessage !== void 0 ? notDataMessage : (searchValue === '' || typeRef.current === 1))
                                                         ? 'Start typing to see suggestions'
-                                                        : 'No Results Found' }))) })), paginationEnabled &&
+                                                        : 'No Results Found' })) })), 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" })) })))] })) }))] })), 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 })))] })));
+                                                (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" }) }))] }) })] }), 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(ExpandableAutoComplete);
 //# sourceMappingURL=ExpandableAutoComplete.js.map