react-core-ts 3.0.0 → 4.0.1

package/dist/AutoCompleteWithTreeStructure.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,163 +15,142 @@ 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 TreeNode_1 = __importDefault(require("./components/TreeNode"));
-var autosuggestions_1 = require("./utilities/autosuggestions");
-var convertFlatArraytoTreeStructure_1 = require("./utilities/convertFlatArraytoTreeStructure");
-var deepEqual_1 = require("./utilities/deepEqual");
-var expandableTootltip_1 = __importDefault(require("./utilities/expandableTootltip"));
-var icons_1 = require("./utilities/icons");
-var useDynamicHeight_1 = __importDefault(require("./utilities/useDynamicHeight"));
-var AutoCompleteWithTreeStructure = (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 ? true : _s, _t = _a.flatArray, flatArray = _t === void 0 ? false : _t, _u = _a.parentField, parentField = _u === void 0 ? 'parentId' : _u, errorFlag = _a.errorFlag, handleUpdateParent = _a.handleUpdateParent, _v = _a.isSeachable, isSeachable = _v === void 0 ? true : _v, _w = _a.customDropOffset, customDropOffset = _w === void 0 ? 300 : _w, showIcon = _a.showIcon, handleShowIcon = _a.handleShowIcon, hasDisableSelection = _a.hasDisableSelection, _x = _a.inputType, inputType = _x === void 0 ? 'text' : _x, onFocusTreeDropdown = _a.onFocusTreeDropdown, filterCondition = _a.filterCondition, singleSelectIcon = _a.singleSelectIcon;
-    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 TreeNode_1 = __importDefault(require("./components/TreeNode"));
+const autosuggestions_1 = require("./utilities/autosuggestions");
+const convertFlatArraytoTreeStructure_1 = require("./utilities/convertFlatArraytoTreeStructure");
+const deepEqual_1 = require("./utilities/deepEqual");
+const expandableTootltip_1 = __importDefault(require("./utilities/expandableTootltip"));
+const icons_1 = require("./utilities/icons");
+const getKeyValue_1 = require("./utilities/getKeyValue");
+const AutoCompleteWithTreeStructure = (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 = true, flatArray = false, parentField = 'parentId', errorFlag, handleUpdateParent, isSeachable = true, customDropOffset = 300, showIcon, handleShowIcon, hasDisableSelection, inputType = 'text', onFocusTreeDropdown, filterCondition, singleSelectIcon, }, ref) => {
+    const dropdownRef = (0, react_1.useRef)(null);
     // State Hooks Section
-    var _y = (0, react_1.useState)(true), isInitialRender = _y[0], setIsInitialRender = _y[1];
-    var _z = (0, react_1.useState)(value), inputValue = _z[0], setInputValue = _z[1];
-    var _0 = (0, react_1.useState)(''), searchValue = _0[0], setSearchValue = _0[1];
-    var _1 = (0, react_1.useState)(1), nextPage = _1[0], setNextPage = _1[1];
-    var _2 = (0, react_1.useState)(false), dropOpen = _2[0], setDropOpen = _2[1];
-    var _3 = (0, react_1.useState)([]), selectedItems = _3[0], setSelectedItems = _3[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)([]);
     // API call for suggestions through a custom hook
-    var _4 = (0, react_1.useState)(data), dropDownData = _4[0], setDropDownData = _4[1];
-    var inputRef = (0, react_1.useRef)(null);
-    var dropRef = (0, react_1.useRef)(null);
-    var dropLevelRef = (0, react_1.useRef)('bottom');
-    (0, react_1.useEffect)(function () {
+    const [dropDownData, setDropDownData] = (0, react_1.useState)(data);
+    const [filteredData, setFilteredData] = (0, react_1.useState)([]);
+    const inputRef = (0, react_1.useRef)(null);
+    const dropRef = (0, react_1.useRef)(null);
+    const dropLevelRef = (0, react_1.useRef)('bottom');
+    const getDropdownData = (0, react_1.useCallback)(() => {
+        return flatArray ? (0, convertFlatArraytoTreeStructure_1.buildTree)(data, descId, parentField) : data;
+    }, [data, flatArray, descId, parentField]);
+    (0, react_1.useEffect)(() => {
         if (data) {
-            if (flatArray) {
-                setDropDownData((0, convertFlatArraytoTreeStructure_1.buildTree)(data, descId, parentField));
-            }
-            else {
-                setDropDownData(data);
-            }
+            setDropDownData(getDropdownData());
+            setFilteredData([]);
         }
-    }, [data, dropOpen]);
-    (0, react_1.useImperativeHandle)(ref, function () { return inputRef.current; });
-    var _5 = (0, react_1.useState)({
+    }, [data, getDropdownData]);
+    (0, react_1.useImperativeHandle)(ref, () => inputRef.current);
+    const [dropdownStyle, setDropdownStyle] = (0, react_1.useState)({
         top: 0,
         left: 0,
         width: 200,
-    }), dropdownStyle = _5[0], setDropdownStyle = _5[1];
-    var adjustDropdownPosition = function () {
+    });
+    const [dropdownMaxHeight, setDropdownMaxHeight] = (0, react_1.useState)(275);
+    const [dropdownContentMaxHeight, setDropdownContentMaxHeight] = (0, react_1.useState)(184);
+    const adjustDropdownPosition = () => {
+        var _a, _b;
         if (dropdownRef.current) {
-            var inputRect = dropdownRef.current.getBoundingClientRect();
-            var dropdownPosition = {
+            const MIN_CONTENT_HEIGHT = 184;
+            const MIN_CONTENT_FALLBACK = 120;
+            const VIEWPORT_GAP = 8;
+            const SEARCH_BOX_HEIGHT = isSeachable ? 52 : 0;
+            const DROPDOWN_CHROME_HEIGHT = 16 + SEARCH_BOX_HEIGHT;
+            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 spaceAbove = inputRect.top + window.scrollY;
-            var dropdownHeight = 275; // Assume a fixed height or calculate based on content
-            if (spaceBelow >= dropdownHeight) {
+            const spaceBelow = window.innerHeight - inputRect.bottom - VIEWPORT_GAP;
+            const spaceAbove = inputRect.top - VIEWPORT_GAP;
+            const minimumDropdownHeight = DROPDOWN_CHROME_HEIGHT + MIN_CONTENT_HEIGHT;
+            const openBottom = spaceBelow >= minimumDropdownHeight || spaceBelow >= spaceAbove;
+            const availableSpace = Math.max(openBottom ? spaceBelow : spaceAbove, DROPDOWN_CHROME_HEIGHT + MIN_CONTENT_FALLBACK);
+            const nextContentMaxHeight = Math.max(availableSpace - DROPDOWN_CHROME_HEIGHT, MIN_CONTENT_FALLBACK);
+            const nextDropdownHeight = DROPDOWN_CHROME_HEIGHT + nextContentMaxHeight;
+            const renderedDropdownHeight = (_b = (_a = dropRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) !== null && _b !== void 0 ? _b : nextDropdownHeight;
+            const anchoredDropdownHeight = Math.min(renderedDropdownHeight, nextDropdownHeight);
+            if (openBottom) {
                 dropdownPosition.top =
                     inputRect.top + window.scrollY + inputRect.height;
                 dropLevelRef.current = 'bottom';
             }
             else {
                 dropdownPosition.top =
-                    inputRect.top + window.scrollY - dropdownHeight + 73;
+                    inputRect.top + window.scrollY - anchoredDropdownHeight;
                 dropLevelRef.current = 'top';
             }
-            setDropdownStyle(__assign({}, dropdownPosition));
+            setDropdownStyle(Object.assign({}, dropdownPosition));
+            setDropdownMaxHeight(nextDropdownHeight);
+            setDropdownContentMaxHeight(nextContentMaxHeight);
         }
     };
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         window.addEventListener('resize', adjustDropdownPosition);
         adjustDropdownPosition();
-        return function () {
+        return () => {
             window.removeEventListener('resize', adjustDropdownPosition);
         };
-    }, [dropOpen, selectedItems]);
-    var _6 = (0, autosuggestions_1.useSuggestions)(getData, data, dropOpen, async, paginationEnabled, initialLoad, inputValue, isMultiple, setNextPage, selectedItems
+    }, [
+        dropOpen,
+        selectedItems,
+        dropDownData,
+        filteredData.length,
+        searchValue,
+        isSeachable,
+    ]);
+    const { suggestions, isLoading, handlePickSuggestions } = (0, autosuggestions_1.useSuggestions)(getData, data, dropOpen, async, paginationEnabled, initialLoad, String(searchValue || inputValue || ''), isMultiple, setNextPage, selectedItems
     // nextBlock
-    ), suggestions = _6.suggestions, isLoading = _6.isLoading, handlePickSuggestions = _6.handlePickSuggestions;
-    var isSelected = function (item, selectedItems) {
+    );
+    const isSelected = (item, selectedItems) => {
         if (Array.isArray(selectedItems)) {
-            return selectedItems.some(function (selectedItem) {
-                return selectedItem[desc] === item[desc] ||
-                    selectedItem[descId] === item[descId];
-            });
-        }
-        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);
     };
-    (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);
@@ -191,41 +159,45 @@ var AutoCompleteWithTreeStructure = (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);
+        if (!value.trim()) {
+            setFilteredData([]);
+            return;
+        }
         searchPortsFlat(value);
     };
-    var handleBlur = function () {
-        setTimeout(function () {
+    const handleBlur = () => {
+        setTimeout(() => {
             setDropOpen(false);
         }, 200);
     };
-    var handleClear = function () {
-        var _a;
+    const handleClear = () => {
+        setFilteredData([]);
         if (searchValue) {
             setSearchValue('');
             setDropOpen(false);
         }
         else {
             setInputValue('');
-            onChange((_a = {}, _a[descId] = '', _a[desc] = '', _a));
+            onChange({ [descId]: '', [desc]: '' });
             setDropOpen(false);
         }
     };
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         handleUpdateParent === null || handleUpdateParent === void 0 ? void 0 : handleUpdateParent(dropOpen, dropLevelRef.current);
     }, [dropOpen, dropLevelRef.current]);
-    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' : 'tree-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' : 'tree-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);
         }
@@ -233,99 +205,95 @@ var AutoCompleteWithTreeStructure = (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-tree-list-icon') {
-                setTimeout(function () {
+                setTimeout(() => {
                     setDropOpen(false);
                     setSearchValue('');
+                    setFilteredData([]);
                 }, 200);
             }
         };
         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 handleOnClick = function () {
+    const selected = isMultiple ? selectedItems : inputValue;
+    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);
     };
-    var handleDropClose = function (e) {
+    const handleDropClose = (e) => {
         if (dropOpen)
             setDropOpen(false);
     };
-    var toggleExpand = function (id) {
-        var newTreeData = updateTreeNode(dropDownData, id, function (node) {
+    const toggleExpand = (id) => {
+        const newTreeData = updateTreeNode(dropDownData, id, (node) => {
             node.expanded = !node.expanded;
         });
         setDropDownData(newTreeData);
     };
-    var handleNodeExpandCheck = function (node) {
-        var handleCheck = function (node) {
+    const handleNodeExpandCheck = (node) => {
+        const handleCheck = (node) => {
             if (node.children && node.children.length > 0) {
-                return node.children.some(function (child) {
-                    return isSelected(child, isMultiple ? selectedItems : inputValue) ||
-                        handleCheck(child);
-                });
+                return node.children.some((child) => isSelected(child, isMultiple ? selectedItems : inputValue) ||
+                    handleCheck(child));
             }
             return false;
         };
         return handleCheck(node);
     };
-    var treeData = function () {
-        var processNode = function (node) { return (__assign(__assign({}, node), { expanded: handleNodeExpandCheck(node), children: node.children ? node.children.map(processNode) : [] })); };
-        return dropDownData.map(processNode);
-    };
-    (0, react_1.useEffect)(function () {
-        setDropDownData(treeData());
-    }, [dropOpen]);
-    var clearAllNodes = function (nodes) {
-        return nodes.map(function (node) { return (__assign(__assign({}, node), { checked: false, children: node.children ? clearAllNodes(node.children) : undefined })); });
+    (0, react_1.useEffect)(() => {
+        if (!dropOpen || searchValue.trim())
+            return;
+        setDropDownData((prev) => {
+            const processNode = (node) => (Object.assign(Object.assign({}, node), { expanded: handleNodeExpandCheck(node), children: node.children ? node.children.map(processNode) : [] }));
+            return prev.map(processNode);
+        });
+    }, [dropOpen, searchValue, selectedItems, inputValue]);
+    const clearAllNodes = (nodes) => {
+        return nodes.map((node) => (Object.assign(Object.assign({}, node), { checked: false, children: node.children ? clearAllNodes(node.children) : undefined })));
     };
     // Function to handle checkbox change (single or multi-select)
-    var updateNode = function (id, checked, dataItem) {
-        var newTreeData;
-        var checkedNodes = []; // Array to store the entire checked node objects
+    const updateNode = (id, checked, dataItem) => {
+        let newTreeData;
+        let checkedNodes = []; // Array to store the entire checked node objects
         if (isMultiple) {
-            var selectedData = __spreadArray([], selectedItems, true);
+            let selectedData = [...selectedItems];
             if (checked) {
                 selectedData.push(dataItem);
             }
             else {
-                selectedData = selectedData.filter(function (selectedItem) { return selectedItem[descId] !== dataItem[descId]; });
+                selectedData = selectedData.filter((selectedItem) => selectedItem[descId] !== dataItem[descId]);
             }
             setSelectedItems(selectedData);
             onChange(selectedData);
@@ -336,12 +304,10 @@ var AutoCompleteWithTreeStructure = (0, react_1.forwardRef)(function (_a, ref) {
                 onChange({ id: '', name: '' });
             }
             // Single-select logic: uncheck all other nodes and check only the clicked one
-            newTreeData = dropDownData.map(function (node) {
-                return updateAllNodes(node, id, checked);
-            });
+            newTreeData = dropDownData.map((node) => updateAllNodes(node, id, checked));
         }
     };
-    var handleSelect = function (selctedNode) {
+    const handleSelect = (selctedNode) => {
         setInputValue(selctedNode[desc]);
         onChange(selctedNode);
         setDropOpen(false);
@@ -354,19 +320,17 @@ var AutoCompleteWithTreeStructure = (0, react_1.forwardRef)(function (_a, ref) {
         // );
         // setDropDownData(TreeData);
     };
-    var getCheckedNodes = function (node, checkedNodes) {
+    const getCheckedNodes = (node, checkedNodes) => {
         if (node.checked) {
             checkedNodes.push(node); // Push the entire node object
         }
         if (node.children && node.children.length > 0) {
-            node.children.forEach(function (child) {
-                return getCheckedNodes(child, checkedNodes);
-            });
+            node.children.forEach((child) => getCheckedNodes(child, checkedNodes));
         }
     };
     // Recursive function to update a specific node by ID
-    var updateTreeNode = function (nodes, id, updateFn) {
-        return nodes.map(function (node) {
+    const updateTreeNode = (nodes, id, updateFn) => {
+        return nodes.map((node) => {
             if (node[descId] === id) {
                 updateFn(node);
             }
@@ -377,7 +341,7 @@ var AutoCompleteWithTreeStructure = (0, react_1.forwardRef)(function (_a, ref) {
         });
     };
     // Recursive function to uncheck all other nodes in single-select mode
-    var updateAllNodes = function (node, id, checked) {
+    const updateAllNodes = (node, id, checked) => {
         // Reset all checked states to false, except for the selected node
         node.checked = node[descId] === id ? checked : false;
         if (node.checked) {
@@ -386,52 +350,49 @@ var AutoCompleteWithTreeStructure = (0, react_1.forwardRef)(function (_a, ref) {
             setDropOpen(false);
         }
         if (node.children) {
-            node.children = node.children.map(function (child) {
-                return updateAllNodes(child, id, checked);
-            });
+            node.children = node.children.map((child) => updateAllNodes(child, id, checked));
         }
         return node;
     };
-    var renderTree = function (node, index) {
+    const renderTree = (node, index) => {
         var _a, _b;
-        return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "qbs-tree-list-container-child" }, { children: (0, jsx_runtime_1.jsx)(TreeNode_1.default, __assign({ node: node, 
+        return ((0, jsx_runtime_1.jsx)("div", { className: "qbs-tree-list-container-child", children: (0, jsx_runtime_1.jsx)(TreeNode_1.default, { node: node, 
                 // handleMultiSelect={handleMultiSelect}
-                selected: selected, isSelected: isSelected, isMultiple: isMultiple, singleSelect: singleSelect, handleSelect: handleSelect, showIcon: (_a = handleShowIcon === null || handleShowIcon === void 0 ? void 0 : handleShowIcon(node)) !== null && _a !== void 0 ? _a : showIcon, hasDisableSelection: hasDisableSelection === null || hasDisableSelection === void 0 ? void 0 : hasDisableSelection(node), idx: node[descId], updateNode: updateNode, desc: desc, descId: descId, singleSelectIcon: singleSelectIcon, toggleExpand: toggleExpand }, { children: node.expanded &&
-                    ((_b = node.children) === null || _b === void 0 ? void 0 : _b.map(function (childNode, index) {
-                        return renderTree(childNode, index);
-                    })) }), node[descId]) })));
+                selected: selected, isSelected: isSelected, isMultiple: isMultiple, singleSelect: singleSelect, handleSelect: handleSelect, showIcon: (_a = handleShowIcon === null || handleShowIcon === void 0 ? void 0 : handleShowIcon(node)) !== null && _a !== void 0 ? _a : showIcon, hasDisableSelection: hasDisableSelection === null || hasDisableSelection === void 0 ? void 0 : hasDisableSelection(node), idx: node[descId], updateNode: updateNode, desc: desc, descId: descId, singleSelectIcon: singleSelectIcon, toggleExpand: toggleExpand, children: node.expanded &&
+                    ((_b = node.children) === null || _b === void 0 ? void 0 : _b.map((childNode, index) => renderTree(childNode, index))) }, node[descId]) }));
     };
-    var _7 = (0, react_1.useState)([]), filteredData = _7[0], setFilteredData = _7[1];
-    var searchPortsFlat = function (query) {
-        var lowerQuery = query.toLowerCase();
-        var result = [];
-        var searchRecursive = function (port) {
+    const searchPortsFlat = (query) => {
+        const lowerQuery = query.toLowerCase();
+        const result = [];
+        const searchRecursive = (port) => {
             var _a, _b;
-            var _c, _d;
-            if ((_c = port[desc]) === null || _c === void 0 ? void 0 : _c.toLowerCase().includes(lowerQuery)) {
-                var filteredItem = __assign(__assign(__assign({}, port), (_a = {}, _a[descId] = port[descId], _a[desc] = port[desc], _a.parentId = port.parentId, _a)), ((filterCondition === null || filterCondition === void 0 ? void 0 : filterCondition.filterKey) && (_b = {},
-                    _b[filterCondition.filterKey] = port[filterCondition.filterKey],
-                    _b)));
+            if ((_a = port[desc]) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(lowerQuery)) {
+                const filteredItem = Object.assign(Object.assign(Object.assign({}, port), { [descId]: port[descId], [desc]: port[desc], parentId: port.parentId }), ((filterCondition === null || filterCondition === void 0 ? void 0 : filterCondition.filterKey) && {
+                    [filterCondition.filterKey]: port[filterCondition.filterKey],
+                }));
                 result.push(filteredItem);
             }
-            (_d = port.children) === null || _d === void 0 ? void 0 : _d.forEach(searchRecursive);
+            (_b = port.children) === null || _b === void 0 ? void 0 : _b.forEach(searchRecursive);
         };
         dropDownData === null || dropDownData === void 0 ? void 0 : dropDownData.forEach(searchRecursive);
         setFilteredData((filterCondition === null || filterCondition === void 0 ? void 0 : filterCondition.filterKey) && (filterCondition === null || filterCondition === void 0 ? void 0 : filterCondition.filterValue)
-            ? result.filter(function (item) {
-                return item[filterCondition.filterKey] === filterCondition.filterValue;
-            })
+            ? result.filter((item) => item[filterCondition.filterKey] === filterCondition.filterValue)
             : result);
     };
-    var handleSuggestionClick = (0, react_1.useCallback)(function (suggestion) {
+    (0, react_1.useEffect)(() => {
+        if (!searchValue.trim()) {
+            setFilteredData([]);
+        }
+    }, [searchValue]);
+    const handleSuggestionClick = (0, react_1.useCallback)((suggestion) => {
         if (isMultiple) {
-            setSelectedItems(function (prev) {
-                var isAdded = prev.some(function (item) { return item[descId] === suggestion[descId]; });
+            setSelectedItems((prev) => {
+                const isAdded = prev.some((item) => item[descId] === suggestion[descId]);
                 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];
                 }
             });
         }
@@ -442,15 +403,15 @@ var AutoCompleteWithTreeStructure = (0, react_1.forwardRef)(function (_a, ref) {
             setDropOpen(false);
         }
     }, []);
-    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]);
                 });
             }
         }
@@ -464,53 +425,52 @@ var AutoCompleteWithTreeStructure = (0, react_1.forwardRef)(function (_a, ref) {
             }
         }
     };
-    (0, useDynamicHeight_1.default)('.qbs-autocomplete-suggestions-sub', customDropOffset !== null && customDropOffset !== void 0 ? customDropOffset : 200, dropOpen);
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ id: id ? "tree-container-".concat(id) : "tree-container-".concat(name), className: fullWidth ? 'fullWidth' : 'autoWidth', ref: dropdownRef }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { id: id ? `tree-container-${id}` : `tree-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 !pt-[10px]' : '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", { className: `${expandable ? 'qbs-expandable-container !pt-[10px]' : '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
                                 .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)(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], (0, jsx_runtime_1.jsx)("button", __assign({ type: "button", 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)(expandableTootltip_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' : ''), style: { width: inputType === 'text' ? '100%' : 'auto' }, "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)(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], (0, jsx_runtime_1.jsx)("button", { type: "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)(expandableTootltip_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' : ''}`, style: { width: inputType === 'text' ? '100%' : 'auto' }, "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: inputType === 'text' ? ((0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "text", autoComplete: "off", value: type === 'auto_suggestion' && !expandable
+                            : placeholder !== null && placeholder !== void 0 ? placeholder : '', onClick: () => onInputFocus(), children: inputType === 'text' ? ((0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "text", autoComplete: "off", value: type === 'auto_suggestion' && !expandable
                                 ? inputValue
-                                : inputValue, id: id ? "input-tree-".concat(id) : "input-tree-".concat(name), onChange: handleChange, 
+                                : inputValue, id: id ? `input-tree-${id}` : `input-tree-${name}`, 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)("textarea", { id: id, ref: inputRef, value: inputValue, 
                             // onChange={handleChange}
-                            onFocus: onFocusTreeDropdown, onClick: function () { return handleOnClick(); }, className: "".concat(generateClassName(), " resize-none overflow-y-auto"), placeholder: (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0 ? '' : placeholder !== null && placeholder !== void 0 ? placeholder : '', readOnly: readOnly ||
+                            onFocus: onFocusTreeDropdown, onClick: () => handleOnClick(), className: `${generateClassName()} resize-none overflow-y-auto`, 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", rows: 4, style: {
-                                height: 'auto',
-                                minHeight: '80px',
-                                maxHeight: '160px',
-                                overflowY: 'auto',
-                                wordWrap: 'break-word',
-                                whiteSpace: 'pre-wrap',
+                                height: 'auto', // Allow it to expand
+                                minHeight: '80px', // Approx. 4 lines of text
+                                maxHeight: '160px', // Restrict max height to prevent large expansion
+                                overflowY: 'auto', // Add scrollbar when exceeding 4 lines
+                                wordWrap: 'break-word', // Ensure long words wrap correctly
+                                whiteSpace: 'pre-wrap', // Preserve line breaks & spacing
                                 paddingRight: '43px !important',
-                            } })) })), (0, jsx_runtime_1.jsx)(InputActions_1.default, { inputValue: inputValue, searchValue: searchValue, dropOpen: dropOpen, handleDropOpen: handleDropOpen, handleDropClose: handleDropClose, disabled: disabled, readOnly: readOnly, error: errorFlag, expandable: expandable, handleClear: handleClear, uniqueDropArrowId: "drop-arrow-tree-list-icon" }), 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 " }, { children: [isSeachable && ((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, autoComplete: "off", value: searchValue, placeholder: "Type to search" })] }))), (0, jsx_runtime_1.jsx)("div", __assign({ style: {
+                            } })) }), (0, jsx_runtime_1.jsx)(InputActions_1.default, { inputValue: inputValue, searchValue: searchValue, dropOpen: dropOpen, handleDropOpen: handleDropOpen, handleDropClose: handleDropClose, disabled: disabled, readOnly: readOnly, error: errorFlag, expandable: expandable, handleClear: handleClear, uniqueDropArrowId: "drop-arrow-tree-list-icon" }), dropOpen &&
+                        react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)("ul", { ref: dropRef, style: Object.assign(Object.assign({}, dropdownStyle), { maxHeight: dropdownMaxHeight }), className: `qbs-autocomplete-suggestions `, children: [isSeachable && ((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, autoComplete: "off", value: searchValue, placeholder: "Type to search" })] })), (0, jsx_runtime_1.jsx)("div", { style: {
                                         gap: isTreeDropdown ? '8px' : '0',
                                         minHeight: isTreeDropdown ? '184px' : '0',
-                                    }, className: "qbs-autocomplete-suggestions-sub padding-class " }, { children: searchValue ? (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, hideCheckbox: singleSelect }, suggestion[descId])); })) : (dropDownData === null || dropDownData === void 0 ? void 0 : dropDownData.length) > 0 ? (dropDownData.map(function (suggestion, idx) {
+                                        maxHeight: dropdownContentMaxHeight,
+                                        overflowY: 'auto',
+                                    }, className: `qbs-autocomplete-suggestions-sub padding-class `, children: searchValue ? (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, hideCheckbox: singleSelect }, suggestion[descId])))) : (dropDownData === null || dropDownData === void 0 ? void 0 : dropDownData.length) > 0 ? (dropDownData.map((suggestion, idx) => {
                                         var _a, _b;
-                                        return ((0, jsx_runtime_1.jsx)(TreeNode_1.default, __assign({ node: suggestion, isSelected: isSelected, 
+                                        return ((0, jsx_runtime_1.jsx)(TreeNode_1.default, { node: suggestion, isSelected: isSelected, 
                                             // handleMultiSelect={handleMultiSelect}
-                                            selected: selected, isMultiple: isMultiple, singleSelect: singleSelect, idx: suggestion[descId], handleSelect: handleSelect, showIcon: (_a = handleShowIcon === null || handleShowIcon === void 0 ? void 0 : handleShowIcon(suggestion)) !== null && _a !== void 0 ? _a : showIcon, hasDisableSelection: hasDisableSelection === null || hasDisableSelection === void 0 ? void 0 : hasDisableSelection(suggestion), updateNode: updateNode, desc: desc, singleSelectIcon: singleSelectIcon, descId: descId, toggleExpand: toggleExpand }, { children: suggestion.expanded &&
-                                                ((_b = suggestion.children) === null || _b === void 0 ? void 0 : _b.map(function (childNode, index) {
-                                                    return renderTree(childNode, index);
-                                                })) }), suggestion[descId]));
-                                    })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isLoading ? ((0, jsx_runtime_1.jsx)("div", __assign({ style: { display: 'flex', justifyContent: 'center' } }, { 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 : 'No Results Found' }))) })) }))] })), document.body)] }))] })));
+                                            selected: selected, isMultiple: isMultiple, singleSelect: singleSelect, idx: suggestion[descId], handleSelect: handleSelect, showIcon: (_a = handleShowIcon === null || handleShowIcon === void 0 ? void 0 : handleShowIcon(suggestion)) !== null && _a !== void 0 ? _a : showIcon, hasDisableSelection: hasDisableSelection === null || hasDisableSelection === void 0 ? void 0 : hasDisableSelection(suggestion), updateNode: updateNode, desc: desc, singleSelectIcon: singleSelectIcon, descId: descId, toggleExpand: toggleExpand, children: suggestion.expanded &&
+                                                ((_b = suggestion.children) === null || _b === void 0 ? void 0 : _b.map((childNode, index) => renderTree(childNode, index))) }, suggestion[descId]));
+                                    })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isLoading ? ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', justifyContent: 'center' }, 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 : 'No Results Found' })) })) })] }), document.body)] })] }));
 });
 exports.default = react_1.default.memo(AutoCompleteWithTreeStructure);
 //# sourceMappingURL=AutoCompleteWithTreeStructure.js.map