react-core-ts 3.0.0 → 4.0.0

package/dist/dummyAutoCompleteWithSelectedList.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,113 +15,76 @@ 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 expandableTootltip_1 = __importDefault(require("./utilities/expandableTootltip"));
-var filterSuggestions_1 = require("./utilities/filterSuggestions");
-var icons_1 = require("./utilities/icons");
-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.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, _p = _a.initialLoad, initialLoad = _p === void 0 ? false : _p, actionLabel = _a.actionLabel, handleAction = _a.handleAction, nextBlock = _a.nextBlock, notDataMessage = _a.notDataMessage, initialDataMessage = _a.initialDataMessage, onFocus = _a.onFocus, _q = _a.expandable, expandable = _q === void 0 ? false : _q, _r = _a.textCount, textCount = _r === void 0 ? 10 : _r, _s = _a.itemCount, itemCount = _s === void 0 ? 1 : _s, scrollRef = _a.scrollRef, _t = _a.countOnly, countOnly = _t === void 0 ? true : _t, _u = _a.typeOnlyFetch, typeOnlyFetch = _u === void 0 ? false : _u, _v = _a.tab, tab = _v === void 0 ? [] : _v, _w = _a.clearTabSwitch, clearTabSwitch = _w === void 0 ? false : _w, _x = _a.selectedRowLimit, selectedRowLimit = _x === void 0 ? 2 : _x, _y = _a.topMargin, topMargin = _y === void 0 ? 0 : _y, _z = _a.currentTab, currentTab = _z === void 0 ? 0 : _z, _0 = _a.selectedLabel, selectedLabel = _0 === void 0 ? '' : _0, _1 = _a.viewMode, viewMode = _1 === void 0 ? false : _1;
-    var dropdownRef = (0, react_1.useRef)(null);
-    var dropdownSelectedRef = (0, react_1.useRef)(null);
-    var tabRef = (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 expandableTootltip_1 = __importDefault(require("./utilities/expandableTootltip"));
+const filterSuggestions_1 = require("./utilities/filterSuggestions");
+const getKeyValue_1 = require("./utilities/getKeyValue");
+const icons_1 = require("./utilities/icons");
+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, isMultiple = false, desc = 'name', descId = 'id', singleSelect, className, async = false, paginationEnabled, initialLoad = false, actionLabel, handleAction, nextBlock, notDataMessage, initialDataMessage, onFocus, expandable = false, textCount = 10, itemCount = 1, scrollRef, countOnly = true, typeOnlyFetch = false, tab = [], clearTabSwitch = false, selectedRowLimit = 2, topMargin = 0, currentTab = 0, selectedLabel = '', viewMode = false, }, ref) => {
+    const dropdownRef = (0, react_1.useRef)(null);
+    const dropdownSelectedRef = (0, react_1.useRef)(null);
+    const tabRef = (0, react_1.useRef)(null);
     // State Hooks Section
-    var _2 = (0, react_1.useState)(true), isInitialRender = _2[0], setIsInitialRender = _2[1];
-    var _3 = (0, react_1.useState)(value), inputValue = _3[0], setInputValue = _3[1];
-    var _4 = (0, react_1.useState)(''), searchValue = _4[0], setSearchValue = _4[1];
-    var _5 = (0, react_1.useState)(''), searchOldValue = _5[0], setSearchOldValue = _5[1];
-    var _6 = (0, react_1.useState)(1), nextPage = _6[0], setNextPage = _6[1];
-    var _7 = (0, react_1.useState)(false), dropOpen = _7[0], setDropOpen = _7[1];
-    var _8 = (0, react_1.useState)([]), selectedItems = _8[0], setSelectedItems = _8[1];
-    var _9 = (0, react_1.useState)(false), showAllSelected = _9[0], setShowAllSelected = _9[1];
-    var _10 = (0, react_1.useState)(1), expandArrowClick = _10[0], setExpandArrowClick = _10[1];
-    var _11 = (0, react_1.useState)(currentTab), activeTab = _11[0], setActiveTab = _11[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 [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 [showAllSelected, setShowAllSelected] = (0, react_1.useState)(false);
+    const [expandArrowClick, setExpandArrowClick] = (0, react_1.useState)(1);
+    const [activeTab, setActiveTab] = (0, react_1.useState)(currentTab);
     // 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);
-    (0, react_1.useImperativeHandle)(ref, function () { return inputRef.current; });
-    var _12 = (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);
+    (0, react_1.useImperativeHandle)(ref, () => inputRef.current);
+    const [dropdownStyle, setDropdownStyle] = (0, react_1.useState)({
         top: undefined,
         left: 0,
         width: 200,
-    }), dropdownStyle = _12[0], setDropdownStyle = _12[1];
-    var adjustDropdownPosition = function () {
+    });
+    const adjustDropdownPosition = () => {
         var _a;
         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,
             };
             // Check if there's enough space below the input for the dropdown
-            var spaceBelow = window.innerHeight - inputRect.bottom;
-            var dropdownHeight = viewMode ? 160 : 380; // Assume a fixed height or calculate based on content
+            const spaceBelow = window.innerHeight - inputRect.bottom;
+            let dropdownHeight = viewMode ? 160 : 380; // Assume a fixed height or calculate based on content
             if (countOnly && !viewMode) {
                 // if (dropdownSelectedRef?.current) {
                 //   dropdownHeight += dropdownSelectedRef?.current?.clientHeight;
@@ -144,41 +96,41 @@ var AutoCompleteWithSelectedList = (0, react_1.forwardRef)(function (_a, ref) {
                     dropdownHeight += (_a = tabRef === null || tabRef === void 0 ? void 0 : tabRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight;
             }
             if (spaceBelow >= dropdownHeight) {
-                dropdownPosition_1.top =
+                dropdownPosition.top =
                     inputRect.top + window.scrollY + inputRect.height;
             }
             else {
-                dropdownPosition_1.top = viewMode
+                dropdownPosition.top = viewMode
                     ? inputRect.top + window.scrollY - dropdownHeight + 18 + topMargin
                     : inputRect.top + window.scrollY - dropdownHeight + 73 + topMargin;
             }
-            setTimeout(function () {
-                setDropdownStyle(__assign({}, dropdownPosition_1));
+            setTimeout(() => {
+                setDropdownStyle(Object.assign({}, dropdownPosition));
             }, 100);
         }
     };
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         window.addEventListener('resize', adjustDropdownPosition);
         adjustDropdownPosition();
-        return function () {
+        return () => {
             window.removeEventListener('resize', adjustDropdownPosition);
         };
     }, [selectedItems, expandArrowClick, dropOpen]);
-    var _13 = (0, autosuggestions_1.useSuggestions)(getData, data, dropOpen, async, paginationEnabled, initialLoad, inputValue, isMultiple, setNextPage, selectedItems, typeOnlyFetch
+    const { suggestions, isLoading, handlePickSuggestions } = (0, autosuggestions_1.useSuggestions)(getData, data, dropOpen, async, paginationEnabled, initialLoad, String(searchValue || inputValue || ''), isMultiple, setNextPage, selectedItems, typeOnlyFetch
     // nextBlock
-    ), suggestions = _13.suggestions, isLoading = _13.isLoading, handlePickSuggestions = _13.handlePickSuggestions;
+    );
     // Handling the selection of a suggestion
-    var handleSuggestionClick = (0, react_1.useCallback)(function (suggestion) {
+    const handleSuggestionClick = (0, react_1.useCallback)((suggestion) => {
         if (isMultiple) {
-            setSelectedItems(function (prev) {
-                var isAdded = prev && prev.length > 0
-                    ? prev.some(function (item) { return item[descId] === suggestion[descId]; })
+            setSelectedItems((prev) => {
+                const isAdded = prev && prev.length > 0
+                    ? prev.some((item) => item[descId] === suggestion[descId])
                     : false;
                 if (isAdded) {
-                    return prev.filter(function (item) { return item[descId] !== suggestion[descId]; });
+                    return prev.filter((item) => item[descId] !== suggestion[descId]);
                 }
                 else {
-                    return __spreadArray(__spreadArray([], prev, true), [suggestion], false);
+                    return [...prev, suggestion];
                 }
             });
         }
@@ -190,25 +142,25 @@ 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 item[descId] !== suggestion[descId]; });
+                setSelectedItems((prev) => {
+                    return prev.filter((item, i) => item[descId] !== suggestion[descId]);
                 });
             }
         }
@@ -222,16 +174,16 @@ var AutoCompleteWithSelectedList = (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);
         handleChangeWithDebounce(value);
@@ -240,14 +192,13 @@ var AutoCompleteWithSelectedList = (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 handleClear = function () {
-        var _a;
+    const handleClear = () => {
         if (searchValue) {
             setSearchValue('');
             setDropOpen(false);
@@ -257,27 +208,26 @@ 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 = () => {
         setSelectedItems([]);
         if (isMultiple)
             onChange([]);
         else
-            onChange((_a = {}, _a[descId] = '', _a[desc] = '', _a));
+            onChange({ [descId]: '', [desc]: '' });
     };
-    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);
         }
@@ -285,14 +235,14 @@ var AutoCompleteWithSelectedList = (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-icon') {
-                setTimeout(function () {
+                setTimeout(() => {
                     setDropOpen(false);
                 }, 200);
                 //setSearchValue("");
@@ -300,50 +250,44 @@ var AutoCompleteWithSelectedList = (0, react_1.forwardRef)(function (_a, ref) {
         };
         document.addEventListener('mousedown', handleClickOutside);
         window.addEventListener('scroll', handleClickOutside);
-        var scrollableDivs = document.querySelectorAll('div[style*="overflow"], .overflow-auto ');
-        scrollableDivs.forEach(function (div) {
-            return div.addEventListener('scroll', handleClickOutside);
-        });
+        const scrollableDivs = document.querySelectorAll('div[style*="overflow"], .overflow-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, false, true);
-    var isSelected = function (item, selectedItems) {
+    const selected = isMultiple ? selectedItems : inputValue;
+    const filteredData = (0, filterSuggestions_1.filterSuggestions)(suggestions, searchValue, type, desc, selected, async, false, true);
+    const isSelected = (item, selectedItems) => {
         if (Array.isArray(selectedItems)) {
-            return selectedItems.some(function (selectedItem) { return selectedItem[desc] === item[desc]; });
-        }
-        else {
-            return item[desc] === 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
             ? setDropOpen(true)
             : '';
     };
-    var onInputFocus = function () {
+    const onInputFocus = () => {
         if (!dropOpen) {
             if (countOnly) {
-                setTimeout(function () {
+                setTimeout(() => {
                     if (inputSearchRef.current)
                         inputSearchRef.current.focus();
                 }, 100);
@@ -355,7 +299,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);
@@ -364,27 +308,24 @@ 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 handleDropOpen = function (e) { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            e.stopPropagation();
-            if (!dropOpen)
-                setDropOpen(true);
-            return [2 /*return*/];
-        });
-    }); };
-    var handleDropClose = function (e) {
+    const handleDropOpen = async (e) => {
+        e.stopPropagation();
+        if (!dropOpen)
+            setDropOpen(true);
+    };
+    const handleDropClose = (e) => {
         e.stopPropagation();
         if (dropOpen)
             setDropOpen(false);
     };
-    var handleTabClick = function (index) {
+    const handleTabClick = (index) => {
         if (activeTab !== index) {
             if (clearTabSwitch) {
                 handleClearSelected();
@@ -395,62 +336,62 @@ var AutoCompleteWithSelectedList = (0, react_1.forwardRef)(function (_a, ref) {
             setActiveTab(index);
         }
     };
-    var getSelectedRowLimit = function () {
+    const getSelectedRowLimit = () => {
         return selectedRowLimit * 33 + 5;
     };
-    var getSelectedItems = function (dropdown) {
-        return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "selected-items-outer-container", style: { maxHeight: "".concat(getSelectedRowLimit(), "px") } }, { children: [selectedItems
+    const getSelectedItems = (dropdown) => {
+        return ((0, jsx_runtime_1.jsxs)("div", { 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)(expandableTootltip_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)(expandableTootltip_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)(expandableTootltip_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)(expandableTootltip_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", 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", 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}`))) }));
     };
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: fullWidth ? 'fullWidth' : 'autoWidth', ref: dropdownRef }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { 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 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !countOnly ? (getSelectedItems(false)) : ((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" }, { children: selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "selected-label-text" }, { children: selectedLabel && selectedLabel !== '' ? (selectedLabel) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Item", (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 1 && 's', " Selected"] })) }))] }))) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "qbs-textfield-expandable ".concat(!expandable ? 'qbs-normal' : ''), "data-value": (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0 || searchValue
+                }, 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 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !countOnly ? (getSelectedItems(false)) : ((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", children: 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)("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, autoComplete: "off", ref: inputRef, type: "text", value: type === 'auto_suggestion' && !expandable
+                            : placeholder !== null && placeholder !== void 0 ? placeholder : '', onClick: () => onInputFocus(), children: (0, jsx_runtime_1.jsx)("input", { id: id, autoComplete: "off", ref: inputRef, type: "text", 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)(InputActions_1.default, { inputValue: inputValue, searchValue: searchValue, dropOpen: dropOpen, handleDropOpen: handleDropOpen, handleDropClose: handleDropClose, disabled: disabled, readOnly: readOnly, expandable: expandable, handleClear: handleClear, countOnly: countOnly, viewMode: viewMode }), dropOpen &&
-                        react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)("div", __assign({ ref: dropRef, style: __assign(__assign({}, dropdownStyle), { minHeight: viewMode
+                                (type == 'auto_suggestion' && !expandable), 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, viewMode: viewMode }), dropOpen &&
+                        react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)("div", { ref: dropRef, style: Object.assign(Object.assign({}, dropdownStyle), { minHeight: viewMode
                                     ? 160
                                     : type === 'auto_suggestion'
                                         ? 164
-                                        : 192 }), className: "qbs-autocomplete-suggestions qbs-autocomplete-selected-suggestions ".concat(viewMode ? 'qbs-dropdown-selected-preview' : '', " ").concat(viewMode && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) === 0 ? 'hidden' : '') }, { children: [!viewMode && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: tab.length > 0 && getTabItems() }), type == 'auto_suggestion' && !expandable && ((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: "Search", autoComplete: "off", ref: inputSearchRef })] })))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "qbs-autocomplete-suggestions-sub ".concat(viewMode ? 'hidden' : '') }, { 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: handleSuggestionClick, handleMultiSelect: handleMultiSelect, selected: selected, isMultiple: isMultiple, singleSelect: singleSelect, desc: desc }, suggestion[descId])); })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isLoading ||
+                                        : 192 }), 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 && ((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: "Search", autoComplete: "off", ref: inputSearchRef })] }))] })), (0, jsx_runtime_1.jsxs)("div", { className: `qbs-autocomplete-suggestions-sub ${viewMode ? 'hidden' : ''}`, 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, handleMultiSelect: handleMultiSelect, selected: selected, isMultiple: isMultiple, singleSelect: singleSelect, desc: desc }, 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" }, { 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", 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: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ style: {
+                                            (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: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { style: {
                                                 minHeight: viewMode ? 160 : 192,
                                                 maxHeight: viewMode ? 160 : 192,
-                                            }, className: "qbs-expandable-container qbs-dropdown-selected-container", ref: dropdownSelectedRef }, { children: [(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0 ? ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "qbs-flex qbs-w-full qbs-text-xs items-center" }, { 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.jsxs)("div", __assign({ className: "w-full flex items-center justify-center" }, { children: [' ', "No Items Selected"] }))), 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 () {
+                                            }, className: `qbs-expandable-container qbs-dropdown-selected-container`, ref: dropdownSelectedRef, children: [(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: `qbs-flex qbs-w-full qbs-text-xs items-center`, 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.jsxs)("div", { className: "w-full flex items-center justify-center", children: [' ', "No Items Selected"] })), 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" }) })) }))) })] })) }) })] })), 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` }) }) })) })] }) }) })] }), 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=dummyAutoCompleteWithSelectedList.js.map