react-core-ts 3.0.0 → 4.0.0

package/dist/ReactAutoCompleteTableView.js

@@ -1,101 +1,54 @@
 "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 __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 __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 = require("react");
-var customIcons_1 = __importDefault(require("./components/customIcons"));
-var Spinner_1 = __importDefault(require("./components/loader/Spinner"));
-var portal_1 = __importDefault(require("./components/portal"));
-var debounce_1 = require("./utilities/debounce");
-var getPosition_1 = require("./utilities/getPosition");
-var icons_1 = require("./utilities/icons");
-var ReactAutoCompleteTableView = function (_a) {
-    var _b;
-    var label = _a.label, onChange = _a.onChange, getData = _a.getData, data = _a.data, errors = _a.errors, _c = _a.required, required = _c === void 0 ? false : _c, autoFocus = _a.autoFocus, name = _a.name, fullWidth = _a.fullWidth, placeholder = _a.placeholder, id = _a.id, propsClassName = _a.className, _d = _a.type, type = _d === void 0 ? 'custom_select' : _d, readOnly = _a.readOnly, _e = _a.disabled, disabled = _e === void 0 ? false : _e, value = _a.value, _f = _a.autoFilter, autoFilter = _f === void 0 ? false : _f, _g = _a.autoDropdown, autoDropdown = _g === void 0 ? true : _g, _h = _a.insideOpen, insideOpen = _h === void 0 ? false : _h, _j = _a.isClose, isClose = _j === void 0 ? true : _j, _k = _a.noLocalFilter, noLocalFilter = _k === void 0 ? false : _k, _l = _a.isStaticList, isStaticList = _l === void 0 ? false : _l, _m = _a.isCustomPlaceholder, isCustomPlaceholder = _m === void 0 ? false : _m, checkParams = _a.checkParams, width = _a.width, hasParentError = _a.hasParentError, fromPrefix = _a.fromPrefix, labelTitle = _a.labelTitle, _o = _a.isModern, isModern = _o === void 0 ? true : _o, _p = _a.size, size = _p === void 0 ? "md" : _p, _q = _a.dropdownMinWidth, dropdownMinWidth = _q === void 0 ? 200 : _q, _r = _a.tableView, tableView = _r === void 0 ? false : _r, _s = _a.additionalColumns, additionalColumns = _s === void 0 ? [] : _s, _t = _a.columnHeader, columnHeader = _t === void 0 ? [] : _t;
-    var _u = (0, react_1.useState)((_b = value === null || value === void 0 ? void 0 : value.name) !== null && _b !== void 0 ? _b : ""), inputValue = _u[0], setInputValue = _u[1];
-    var _v = (0, react_1.useState)(false), isHovered = _v[0], setIsHovered = _v[1];
-    var _w = (0, react_1.useState)(false), isLoading = _w[0], setIsLoading = _w[1];
-    var _x = (0, react_1.useState)(false), dropOpen = _x[0], setDropOpen = _x[1];
-    var _y = (0, react_1.useState)(disabled), isDisabled = _y[0], setIsDisabled = _y[1];
-    var _z = (0, react_1.useState)(false), showClose = _z[0], setShowClose = _z[1];
-    var _0 = (0, react_1.useState)(false), showToolTip = _0[0], setShowTooltip = _0[1];
-    var _1 = (0, react_1.useState)(false), tooltipIsHovered = _1[0], setTooltipIsHovered = _1[1];
-    var _2 = (0, react_1.useState)([]), suggestions = _2[0], setSuggestions = _2[1];
-    var inputRef = (0, react_1.useRef)(null);
-    var adorementRef = (0, react_1.useRef)(null);
-    var dropdownref = (0, react_1.useRef)(null);
-    var dropBtnRef = (0, react_1.useRef)(null);
-    var timerRef = (0, react_1.useRef)(0); // To fix the no results found issue on second type
-    var _3 = (0, react_1.useState)(0), selectedIndex = _3[0], setSelectedIndex = _3[1];
-    var itemRefs = (0, react_1.useRef)([]);
-    var scrollContainerRef = (0, react_1.useRef)(null);
-    var _4 = (0, react_1.useState)(false), refetchData = _4[0], setRefetchData = _4[1];
-    var _5 = (0, react_1.useState)({
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const customIcons_1 = __importDefault(require("./components/customIcons"));
+const Spinner_1 = __importDefault(require("./components/loader/Spinner"));
+const portal_1 = __importDefault(require("./components/portal"));
+const debounce_1 = require("./utilities/debounce");
+const getPosition_1 = require("./utilities/getPosition");
+const icons_1 = require("./utilities/icons");
+const ReactAutoCompleteTableView = ({ label, onChange, getData, data, errors, required = false, autoFocus, name, fullWidth, placeholder, id, className: propsClassName, type = 'custom_select', readOnly, disabled = false, value, autoFilter = false, autoDropdown = true, insideOpen = false, isClose = true, noLocalFilter = false, isStaticList = false, isCustomPlaceholder = false, checkParams, width, hasParentError, fromPrefix, labelTitle, isModern = true, size = "md", dropdownMinWidth = 200, tableView = false, additionalColumns = [], columnHeader = [], dropdownTheme = 'default', dropdownThemeConfig, searchOnButtonOnly = false, }) => {
+    var _a;
+    const splitDetailOptions = dropdownThemeConfig === null || dropdownThemeConfig === void 0 ? void 0 : dropdownThemeConfig.splitDetail;
+    const showSearchOnButtonChrome = searchOnButtonOnly &&
+        (type === 'auto_complete' || type === 'custom_search_select') &&
+        !disabled &&
+        !readOnly;
+    const [inputValue, setInputValue] = (0, react_1.useState)((_a = value === null || value === void 0 ? void 0 : value.name) !== null && _a !== void 0 ? _a : "");
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [dropOpen, setDropOpen] = (0, react_1.useState)(false);
+    const [isDisabled, setIsDisabled] = (0, react_1.useState)(disabled);
+    const [showClose, setShowClose] = (0, react_1.useState)(false);
+    const [showToolTip, setShowTooltip] = (0, react_1.useState)(false);
+    const [tooltipIsHovered, setTooltipIsHovered] = (0, react_1.useState)(false);
+    const [tooltipPosition, setTooltipPosition] = (0, react_1.useState)(null);
+    const [errorTooltipPosition, setErrorTooltipPosition] = (0, react_1.useState)(null);
+    const [suggestions, setSuggestions] = (0, react_1.useState)([]);
+    const inputRef = (0, react_1.useRef)(null);
+    const adorementRef = (0, react_1.useRef)(null);
+    const dropdownref = (0, react_1.useRef)(null);
+    const dropdownContentRef = (0, react_1.useRef)(null);
+    const dropBtnRef = (0, react_1.useRef)(null);
+    const errorIconRef = (0, react_1.useRef)(null);
+    const timerRef = (0, react_1.useRef)(0); // To fix the no results found issue on second type
+    const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(0);
+    const itemRefs = (0, react_1.useRef)([]);
+    const scrollContainerRef = (0, react_1.useRef)(null);
+    const [refetchData, setRefetchData] = (0, react_1.useState)(false);
+    const [dropPosition, setDropPosition] = (0, react_1.useState)({
         top: 0,
         left: 0,
         bottom: 0,
         right: 0,
-    }), dropPosition = _5[0], setDropPosition = _5[1];
-    var checkIncludes = function (mainString, subString, param1, param2, param3, param4) {
-        var checkIncludesIfExists = function (mainString, substring) {
+        maxHeight: '60vh',
+    });
+    const checkIncludes = (mainString, subString, param1, param2, param3, param4) => {
+        const checkIncludesIfExists = (mainString, substring) => {
             return substring &&
                 mainString &&
                 typeof mainString === 'string' &&
@@ -106,7 +59,7 @@ var ReactAutoCompleteTableView = function (_a) {
                     .startsWith(substring.toString().toLowerCase())
                 : false;
         };
-        var checkArrayContains = function (strArray, param) { var _a; return (_a = strArray === null || strArray === void 0 ? void 0 : strArray.includes(param)) !== null && _a !== void 0 ? _a : false; };
+        const checkArrayContains = (strArray, param) => { var _a; return (_a = strArray === null || strArray === void 0 ? void 0 : strArray.includes(param)) !== null && _a !== void 0 ? _a : false; };
         return (checkIncludesIfExists(mainString, subString) ||
             (!!checkParams &&
                 ((checkArrayContains(checkParams, 'param1') &&
@@ -118,7 +71,7 @@ var ReactAutoCompleteTableView = function (_a) {
                     (checkArrayContains(checkParams, 'param4') &&
                         checkIncludesIfExists(param4, subString)))));
     };
-    var getHeight = function () {
+    const getHeight = () => {
         switch (size) {
             case 'sm':
                 return ' h-[34px] ';
@@ -126,17 +79,19 @@ var ReactAutoCompleteTableView = function (_a) {
                 return ' ';
         }
     };
-    var handleChange = function (event) {
-        var value = event.target.value;
+    const handleChange = (event) => {
+        const { value } = event.target;
         timerRef.current = 0;
         setInputValue(value);
-        handleValChange(value);
+        if (!searchOnButtonOnly) {
+            handleValChange(value);
+        }
         if (!value) {
             setInputValue('');
             onChange({ id: undefined, name: '', from: 2 });
         }
     };
-    var handleValChange = (0, react_1.useCallback)((0, debounce_1.debounce)(function (value) {
+    const runSearchFromInput = (value) => {
         setDropOpen(true);
         onChange({ id: undefined, name: '', from: 1 });
         if (value.trim() === '' && type === 'auto_complete') {
@@ -151,20 +106,58 @@ var ReactAutoCompleteTableView = function (_a) {
         else {
             handleDropData(value);
         }
-        setTimeout(function () {
+        setTimeout(() => {
+            timerRef.current = 1;
+        }, 200);
+    };
+    const handleSearchButtonClick = (e) => {
+        var _a, _b, _c;
+        e.preventDefault();
+        e.stopPropagation();
+        if (disabled || readOnly)
+            return;
+        timerRef.current = 0;
+        const q = (_c = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : inputValue) !== null && _c !== void 0 ? _c : '';
+        runSearchFromInput(q);
+    };
+    const handleSearchInputKeyDown = (e) => {
+        var _a, _b, _c;
+        if (!searchOnButtonOnly || disabled || readOnly)
+            return;
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            timerRef.current = 0;
+            const q = (_c = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : inputValue) !== null && _c !== void 0 ? _c : '';
+            runSearchFromInput(q);
+        }
+    };
+    const handleValChange = (0, react_1.useCallback)((0, debounce_1.debounce)((value) => {
+        setDropOpen(true);
+        onChange({ id: undefined, name: '', from: 1 });
+        if (value.trim() === '' && type === 'auto_complete') {
+            setSuggestions([]);
+            if (autoFilter) {
+                handleDropData('*');
+            }
+            else {
+                setDropOpen(false);
+            }
+        }
+        else {
+            handleDropData(value);
+        }
+        setTimeout(() => {
             timerRef.current = 1;
         }, 200);
     }, isStaticList ? 0 : 1000), []);
-    var handleDropData = function (value) {
+    const handleDropData = (value) => {
         if (type === 'auto_complete') {
             if (isStaticList) {
                 loadStaticData();
-                var filteredData_1 = value && value !== '*'
-                    ? data === null || data === void 0 ? void 0 : data.filter(function (item) {
-                        return checkIncludes(item.name, value, item.param1, item.param2, item.param3);
-                    })
+                const filteredData = value && value !== '*'
+                    ? data === null || data === void 0 ? void 0 : data.filter((item) => checkIncludes(item.name, value, item.param1, item.param2, item.param3))
                     : data;
-                setSuggestions(filteredData_1);
+                setSuggestions(filteredData);
             }
             else {
                 handlePickSuggestions(value);
@@ -175,45 +168,35 @@ var ReactAutoCompleteTableView = function (_a) {
             handlePickSuggestions();
         }
         else if (type === 'custom_search_select' && data && (data === null || data === void 0 ? void 0 : data.length) > 0) {
-            var filteredData_2 = value && value !== '*'
-                ? data.filter(function (item) {
-                    return checkIncludes(item.name, value, item.param1, item.param2, item.param3);
-                })
+            const filteredData = value && value !== '*'
+                ? data.filter((item) => checkIncludes(item.name, value, item.param1, item.param2, item.param3))
                 : data;
-            setSuggestions(filteredData_2);
+            setSuggestions(filteredData);
         }
     };
-    var handlePickSuggestions = function (value) { return __awaiter(void 0, void 0, void 0, function () {
-        var fetchedSuggestions, error_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!getData) return [3 /*break*/, 4];
-                    setIsLoading(true);
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, (getData === null || getData === void 0 ? void 0 : getData(value))];
-                case 2:
-                    fetchedSuggestions = _a.sent();
-                    setSuggestions(fetchedSuggestions);
-                    setIsLoading(false);
-                    if (autoDropdown) {
-                        setRefetchData(true);
-                    }
-                    return [3 /*break*/, 4];
-                case 3:
-                    error_1 = _a.sent();
-                    setIsLoading(false);
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
+    const handlePickSuggestions = async (value) => {
+        if (getData) {
+            setIsLoading(true);
+            try {
+                const fetchedSuggestions = await (getData === null || getData === void 0 ? void 0 : getData(value));
+                setSuggestions(fetchedSuggestions);
+                setIsLoading(false);
+                if (autoDropdown) {
+                    setRefetchData(true);
+                }
             }
-        });
-    }); };
-    var onLabelClick = function () {
+            catch (error) {
+                setIsLoading(false);
+            }
+        }
+    };
+    const onLabelClick = () => {
         var _a;
         if (!isDisabled) {
             (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            if (searchOnButtonOnly) {
+                return;
+            }
             if (autoFilter && inputValue === '') {
                 handleValChange('*');
             }
@@ -225,35 +208,28 @@ var ReactAutoCompleteTableView = function (_a) {
             }
         }
     };
-    var handleClickOutside = function (event) {
+    const handleClickOutside = (event) => {
         if (dropdownref.current &&
             !dropdownref.current.contains(event.target)) {
             setDropOpen(false);
         }
     };
-    var checkIsEmptyField = function () {
+    const checkIsEmptyField = () => {
         var _a;
         if (inputValue === undefined)
             return true;
         else
             return ((_a = inputValue === null || inputValue === void 0 ? void 0 : inputValue.toString().length) !== null && _a !== void 0 ? _a : 0) <= 0 ? true : false;
     };
-    var loadStaticData = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var fetchedSuggestions, error_2;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!(!data || (refetchData && autoDropdown && !isStaticList))) return [3 /*break*/, 4];
-                    data = [];
-                    if (!getData) return [3 /*break*/, 4];
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
+    const loadStaticData = async () => {
+        if (!data || (refetchData && autoDropdown && !isStaticList)) {
+            data = [];
+            if (getData) {
+                try {
                     setIsLoading(true);
-                    return [4 /*yield*/, (getData === null || getData === void 0 ? void 0 : getData('*'))];
-                case 2:
-                    fetchedSuggestions = _a.sent();
-                    fetchedSuggestions === null || fetchedSuggestions === void 0 ? void 0 : fetchedSuggestions.forEach(function (element) {
+                    //handlePickSuggestions('*');
+                    const fetchedSuggestions = await (getData === null || getData === void 0 ? void 0 : getData('*'));
+                    fetchedSuggestions === null || fetchedSuggestions === void 0 ? void 0 : fetchedSuggestions.forEach((element) => {
                         data === null || data === void 0 ? void 0 : data.push(element);
                     });
                     setSuggestions(fetchedSuggestions);
@@ -262,28 +238,29 @@ var ReactAutoCompleteTableView = function (_a) {
                         setRefetchData(false);
                         timerRef.current = 1;
                     }
-                    return [3 /*break*/, 4];
-                case 3:
-                    error_2 = _a.sent();
+                }
+                catch (error) {
                     setIsLoading(false);
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
+                }
             }
-        });
-    }); };
-    (0, react_1.useEffect)(function () {
+        }
+    };
+    (0, react_1.useEffect)(() => {
         document.addEventListener('click', handleClickOutside);
-        return function () {
+        return () => {
             document.removeEventListener('click', handleClickOutside);
         };
     }, []);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (autoFocus) {
             onLabelClick();
         }
     }, [autoFocus]);
-    var onInputFocus = function () {
+    const onInputFocus = () => {
         if (!isDisabled) {
+            if (searchOnButtonOnly) {
+                return;
+            }
             if (autoFilter && inputValue === '') {
                 handleValChange('*');
             }
@@ -295,17 +272,17 @@ var ReactAutoCompleteTableView = function (_a) {
             }
         }
     };
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         setIsDisabled(disabled);
     }, [disabled]);
-    var handleSuggestionClick = function (suggestion, index) {
-        onChange(__assign(__assign(__assign({}, suggestion), { id: suggestion === null || suggestion === void 0 ? void 0 : suggestion.id, name: suggestion.name }), ((suggestion === null || suggestion === void 0 ? void 0 : suggestion.label) ? { label: suggestion === null || suggestion === void 0 ? void 0 : suggestion.label } : {})));
+    const handleSuggestionClick = (suggestion, index) => {
+        onChange(Object.assign(Object.assign(Object.assign({}, suggestion), { id: suggestion === null || suggestion === void 0 ? void 0 : suggestion.id, name: suggestion.name }), ((suggestion === null || suggestion === void 0 ? void 0 : suggestion.label) ? { label: suggestion === null || suggestion === void 0 ? void 0 : suggestion.label } : {})));
         if (type !== 'custom_select')
             setInputValue(suggestion.name);
         setDropOpen(false);
         setSelectedIndex(index);
     };
-    var handleOpen = function (e) {
+    const handleOpen = (e) => {
         if (!suggestions || (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) === 0)
             handleDropData();
         if (!isLoading) {
@@ -314,7 +291,13 @@ var ReactAutoCompleteTableView = function (_a) {
                 setInputValue('');
         }
     };
-    var handleOpenDropdown = function (e) {
+    const handleOpenDropdown = (e) => {
+        if (searchOnButtonOnly) {
+            if (suggestions && suggestions.length > 0 && !isLoading) {
+                setDropOpen((open) => !open);
+            }
+            return;
+        }
         if (!suggestions || (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) === 0 || refetchData) {
             if (autoDropdown && (inputValue === '' || inputValue.trim() === '')) {
                 setSuggestions([]);
@@ -328,34 +311,45 @@ var ReactAutoCompleteTableView = function (_a) {
             setDropOpen(!dropOpen);
         }
     };
-    var handleScroll = function () {
-        setDropOpen(false);
+    const handleScroll = (event) => {
+        const scrollTarget = event.target;
+        // Ignore scrolls that originate from inside the autocomplete container
+        // or inside the dropdown content itself.
+        if (scrollTarget &&
+            ((dropdownref.current && dropdownref.current.contains(scrollTarget)) ||
+                (dropdownContentRef.current &&
+                    dropdownContentRef.current.contains(scrollTarget)))) {
+            return;
+        }
+        if (dropOpen) {
+            setDropOpen(false);
+        }
     };
-    (0, react_1.useEffect)(function () {
-        if (!insideOpen) {
-            setSelectedIndex(0);
-            window.addEventListener('scroll', handleScroll);
-            var mainElement = document.querySelector('main');
-            mainElement === null || mainElement === void 0 ? void 0 : mainElement.addEventListener('scroll', handleScroll);
-            var gridElements = document.querySelectorAll('.k-grid-content, .overflow-auto, .overflow-y-auto, .overflow-x-auto');
-            gridElements.forEach(function (gridElement) {
-                gridElement.addEventListener('scroll', handleScroll);
-            });
-            window.addEventListener('resize', getDropPosition);
-            getDropPosition();
-            return function () {
-                window.removeEventListener('scroll', handleScroll);
-                var mainElement = document.querySelector('main');
-                mainElement === null || mainElement === void 0 ? void 0 : mainElement.removeEventListener('scroll', handleScroll);
-                window.addEventListener('resize', getDropPosition);
-                var gridElements = document.querySelectorAll('.k-grid-content');
-                gridElements.forEach(function (gridElement) {
-                    gridElement.removeEventListener('scroll', handleScroll);
-                });
-            };
+    (0, react_1.useEffect)(() => {
+        // Only attach scroll listeners when dropdown is open and rendered in portal
+        if (insideOpen || !dropOpen) {
+            return;
         }
-    }, [dropOpen]);
-    var handleClear = function () {
+        setSelectedIndex(0);
+        const scrollableDivs = document.querySelectorAll('div[style*="overflow"], .overflow-auto, .overflow-y-auto, .overflow-x-auto');
+        // Listen to window/document scrolls, plus any scrollable divs
+        window.addEventListener('scroll', handleScroll);
+        document.addEventListener('scroll', handleScroll, true);
+        scrollableDivs.forEach((div) => {
+            div.addEventListener('scroll', handleScroll);
+        });
+        window.addEventListener('resize', getDropPosition);
+        getDropPosition();
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+            document.removeEventListener('scroll', handleScroll, true);
+            scrollableDivs.forEach((div) => {
+                div.removeEventListener('scroll', handleScroll);
+            });
+            window.removeEventListener('resize', getDropPosition);
+        };
+    }, [dropOpen, insideOpen]);
+    const handleClear = () => {
         setDropOpen(false);
         setInputValue('');
         onChange({ id: undefined, name: '', from: 3 });
@@ -364,16 +358,16 @@ var ReactAutoCompleteTableView = function (_a) {
             setRefetchData(true);
         }
     };
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         var _a;
         setInputValue((_a = value === null || value === void 0 ? void 0 : value.name) !== null && _a !== void 0 ? _a : '');
     }, [value === null || value === void 0 ? void 0 : value.name]);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         setSuggestions(data);
     }, [data]);
-    var getErrors = function (err) {
+    const getErrors = (err) => {
         var _a, _b, _c, _d;
-        var errMsg = '';
+        let errMsg = '';
         if (err.message) {
             errMsg = err === null || err === void 0 ? void 0 : err.message;
         }
@@ -385,13 +379,13 @@ var ReactAutoCompleteTableView = function (_a) {
         }
         return errMsg;
     };
-    var generateClassName = function (type) {
-        var className = propsClassName;
+    const generateClassName = (type) => {
+        let className = propsClassName;
         switch (type) {
             case 'input':
-                className += " block text-common text-input-text font-normal px-3.5 w-full text-sm text-gray-900 bg-transparent  border  appearance-none    peer h-10 rounded-[4px] disabled:text-input-disabled bg-white disabled:bg-disabled ".concat(label && isModern
+                className += ` block text-common text-input-text font-normal px-3.5 w-full text-sm text-gray-900 bg-transparent  border  appearance-none    peer h-10 rounded-[4px] disabled:text-input-disabled bg-white disabled:bg-disabled ${label && isModern
                     ? 'placeholder-transparent'
-                    : 'focus:placeholder-grey-secondary placeholder-input-label', " focus:placeholder-grey-secondary");
+                    : 'focus:placeholder-grey-secondary placeholder-input-label'} focus:placeholder-grey-secondary`;
                 if (errors && errors[name]) {
                     className +=
                         ' border-[#FDA29B] focus:border-error-[#FDA29B] focus:ring-[#FDA29B] focus:ring-3 focus:outline-[#FDA29B] input-outline';
@@ -403,17 +397,19 @@ var ReactAutoCompleteTableView = function (_a) {
                 className += getHeight();
                 break;
             case 'label':
-                className += " flex modern-input-label-truncate  peer-focus:modern-input-peer-focus-label-size \n          ".concat(isDisabled
+                className += ` flex modern-input-label-truncate  peer-focus:modern-input-peer-focus-label-size 
+          ${isDisabled
                     ? 'cursor-pointer'
-                    : 'cursor-text peer-focus:cursor-pointer', " ").concat(isDisabled && !checkIsEmptyField()
+                    : 'cursor-text peer-focus:cursor-pointer'} ${isDisabled && !checkIsEmptyField()
                     ? 'disabled-input-label-bg'
                     : !isDisabled || !checkIsEmptyField()
                         ? 'active-input-label-bg'
-                        : '', " absolute   duration-300 transform -translate-y-4  top-2 z-1 origin-[0]  px-0 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2  peer-focus:-translate-y-4 start-[14px] rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto ").concat(isDisabled
+                        : ''} absolute   duration-300 transform -translate-y-4  top-2 z-1 origin-[0]  px-0 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2  peer-focus:-translate-y-4 start-[14px] rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto ${isDisabled
                     ? 'cursor-pointer'
-                    : 'cursor-text peer-focus:cursor-pointer', "\n           ").concat(checkIsEmptyField()
+                    : 'cursor-text peer-focus:cursor-pointer'}
+           ${checkIsEmptyField()
                     ? 'modern-input-label-size'
-                    : 'modern-input-peer-focus-label-size');
+                    : 'modern-input-peer-focus-label-size'}`;
                 if (errors && errors[name]) {
                     className += ' text-error-light ';
                 }
@@ -432,16 +428,16 @@ var ReactAutoCompleteTableView = function (_a) {
         }
         return className;
     };
-    var handleClose = function () {
-        setTimeout(function () {
+    const handleClose = () => {
+        setTimeout(() => {
             setDropOpen(false);
         }, 500);
     };
-    var handleClearInputValue = function () {
+    const handleClearInputValue = () => {
         // setInputValue(value?.name ?? '')
     };
-    var getInnerWidth = function () {
-        var innerwidth = adorementRef.current
+    const getInnerWidth = () => {
+        const innerwidth = adorementRef.current
             ? adorementRef.current.offsetWidth
             : 0;
         return innerwidth;
@@ -449,112 +445,141 @@ var ReactAutoCompleteTableView = function (_a) {
     // const getPosition = () => {
     //   return 'bottom'
     // }
-    var filteredData = inputValue !== '*' &&
+    const itemMatchesLocalFilter = (item) => {
+        var _a, _b, _c, _d;
+        const baseMatch = checkIncludes(item.name, inputValue, (_a = item.param1) !== null && _a !== void 0 ? _a : '', (_b = item.param2) !== null && _b !== void 0 ? _b : '', (_c = item.param3) !== null && _c !== void 0 ? _c : '', (_d = item.param4) !== null && _d !== void 0 ? _d : '');
+        if (dropdownTheme !== 'splitDetail' ||
+            !splitDetailOptions ||
+            !inputValue) {
+            return baseMatch;
+        }
+        const q = inputValue.trim().toLowerCase();
+        if (!q)
+            return baseMatch;
+        const hay = (v) => v != null && String(v).toLowerCase().includes(q);
+        if (item.label != null && hay(item.label))
+            return true;
+        if (splitDetailOptions.subtitleKey &&
+            hay(item[splitDetailOptions.subtitleKey])) {
+            return true;
+        }
+        if (splitDetailOptions.badgeKey &&
+            hay(item[splitDetailOptions.badgeKey])) {
+            return true;
+        }
+        return baseMatch;
+    };
+    const filteredData = inputValue !== '*' &&
         inputValue !== '' &&
         type !== 'custom_select' &&
         !noLocalFilter
-        ? suggestions === null || suggestions === void 0 ? void 0 : suggestions.filter(function (item) {
-            var _a, _b, _c, _d;
-            return checkIncludes(item.name, inputValue, (_a = item.param1) !== null && _a !== void 0 ? _a : '', (_b = item.param2) !== null && _b !== void 0 ? _b : '', (_c = item.param3) !== null && _c !== void 0 ? _c : '', (_d = item.param4) !== null && _d !== void 0 ? _d : '');
-        })
+        ? suggestions === null || suggestions === void 0 ? void 0 : suggestions.filter((item) => itemMatchesLocalFilter(item))
         : suggestions;
-    var handleError = function (data) {
+    const handleError = (data) => {
         var _a;
         if (getErrors(data[name]) === 'required' ||
             getErrors(data[name]) === 'Required') {
-            return "".concat(label !== null && label !== void 0 ? label : labelTitle, " is ").concat(getErrors(data[name]));
+            return `${label !== null && label !== void 0 ? label : labelTitle} is ${getErrors(data[name])}`;
         }
         else {
             return (_a = getErrors(data[name])) !== null && _a !== void 0 ? _a : '';
         }
     };
-    var getDropPosition = function () {
+    const getDropPosition = () => {
         if (!insideOpen && (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current)) {
-            var dropdownHeight = 200; // Assume the height of the dropdown is 200px, adjust as needed
-            var isMobile = window.innerWidth < 768; // Mobile breakpoint
-            var inputRect = inputRef.current.getBoundingClientRect();
-            var spaceBelow = window.innerHeight - (inputRect.bottom + window.scrollY);
-            var spaceAbove = inputRect.top + window.scrollY;
-            var top_1;
-            var bottom = void 0;
-            if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
-                bottom = spaceBelow + 43;
+            const minDropdownHeight = 200;
+            const padding = 24; // gap + margin so dropdown doesn't touch viewport edge
+            const isMobile = window.innerWidth < 768; // Mobile breakpoint
+            const inputRect = inputRef.current.getBoundingClientRect();
+            const maxHeightLimit = window.innerHeight * 0.6;
+            const spaceBelow = Math.max(0, window.innerHeight - inputRect.bottom - padding);
+            const spaceAbove = Math.max(0, inputRect.top - padding);
+            const availableSpace = Math.max(spaceAbove, spaceBelow);
+            const maxHeightPx = Math.min(Math.max(minDropdownHeight, availableSpace), maxHeightLimit);
+            let top;
+            let bottom;
+            // Open above if there's more space above, or if there's not enough space below
+            if (spaceAbove > spaceBelow || (spaceBelow < minDropdownHeight && spaceAbove >= minDropdownHeight)) {
+                // Open above: position above input
+                bottom = window.innerHeight - inputRect.top + window.scrollY + 2;
             }
             else {
-                top_1 = inputRect.top + window.scrollY + inputRect.height + 2;
+                // Open below: position below input
+                top = inputRect.top + window.scrollY + inputRect.height + 2;
             }
-            var left = inputRect.left + window.scrollX;
-            var width_1 = inputRect.width + dropdownMinWidth;
-            var viewportWidth = window.innerWidth;
-            var viewportRight = window.scrollX + viewportWidth;
-            var inputRight = inputRect.right + window.scrollX;
+            let left = inputRect.left + window.scrollX;
+            let width = inputRect.width + dropdownMinWidth;
+            const viewportWidth = window.innerWidth;
+            const viewportRight = window.scrollX + viewportWidth;
+            const inputRight = inputRect.right + window.scrollX;
             // Check if dropdown would overflow on the right side
-            var dropdownRight = left + width_1;
-            var wouldOverflowRight = dropdownRight > viewportRight;
+            const dropdownRight = left + width;
+            const wouldOverflowRight = dropdownRight > viewportRight;
             // If dropdown would overflow on the right (last column scenario), align from right to left
             if (wouldOverflowRight) {
                 // Align right edge of dropdown with right edge of input
                 // Dropdown extends to the left from the input's right edge
-                var padding = isMobile ? 8 : 0;
-                left = inputRight - width_1;
+                const padding = isMobile ? 8 : 0;
+                left = inputRight - width;
                 // Ensure dropdown doesn't go off the left edge
-                var viewportLeft = window.scrollX + (isMobile ? 8 : 0);
+                const viewportLeft = window.scrollX + (isMobile ? 8 : 0);
                 if (left < viewportLeft) {
                     left = viewportLeft;
                     // Adjust width to fit within viewport
-                    width_1 = Math.min(width_1, inputRight - left - padding);
+                    width = Math.min(width, inputRight - left - padding);
                 }
             }
             // Handle mobile view - additional constraints
             if (isMobile) {
                 // On mobile, constrain width to viewport with some padding
-                var mobilePadding = 16; // 8px padding on each side
-                var maxWidth = viewportWidth - mobilePadding;
+                const mobilePadding = 16; // 8px padding on each side
+                const maxWidth = viewportWidth - mobilePadding;
                 // Use the smaller of: calculated width or max mobile width
-                width_1 = Math.min(width_1, maxWidth);
+                width = Math.min(width, maxWidth);
                 // Adjust left position to prevent overflow
-                var rightEdge = left + width_1;
-                var mobileViewportRight = window.scrollX + viewportWidth - mobilePadding / 2;
+                const rightEdge = left + width;
+                const mobileViewportRight = window.scrollX + viewportWidth - mobilePadding / 2;
                 if (rightEdge > mobileViewportRight) {
                     // Align to right edge with padding
-                    left = mobileViewportRight - width_1;
+                    left = mobileViewportRight - width;
                 }
                 // Ensure dropdown doesn't go off the left edge
-                var viewportLeft = window.scrollX + mobilePadding / 2;
+                const viewportLeft = window.scrollX + mobilePadding / 2;
                 if (left < viewportLeft) {
                     left = viewportLeft;
                     // Adjust width if needed to fit
-                    width_1 = Math.min(width_1, mobileViewportRight - left);
+                    width = Math.min(width, mobileViewportRight - left);
                 }
             }
             setDropPosition({
-                left: left,
-                top: top_1,
-                bottom: bottom,
-                width: width_1,
+                left,
+                top,
+                bottom,
+                width,
+                maxHeight: `${maxHeightPx}px`,
             });
         }
         return undefined;
     };
-    var _6 = (0, react_1.useState)(false), showNoResults = _6[0], setShowNoResults = _6[1];
-    (0, react_1.useEffect)(function () {
+    const [showNoResults, setShowNoResults] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
         if ((inputValue || autoDropdown) &&
             (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) === 0 &&
             !isLoading &&
             timerRef.current === 1) {
-            var timer_1 = setTimeout(function () {
+            const timer = setTimeout(() => {
                 setShowNoResults(true);
             }, 500); // Delay in milliseconds
-            return function () { return clearTimeout(timer_1); };
+            return () => clearTimeout(timer);
         }
         else {
             setShowNoResults(false);
         }
         // Handle keyboard navigation
-        var handleKeyDown = function (e) {
+        const handleKeyDown = (e) => {
             if (!dropOpen)
                 return;
-            var nextIndex = e.key === 'ArrowDown'
+            const nextIndex = e.key === 'ArrowDown'
                 ? (selectedIndex + 1) % filteredData.length
                 : e.key === 'ArrowUp'
                     ? (selectedIndex - 1 + filteredData.length) % filteredData.length
@@ -566,14 +591,14 @@ var ReactAutoCompleteTableView = function (_a) {
                     // Update index first
                     setSelectedIndex(nextIndex);
                     // Wait for DOM update before scrolling
-                    requestAnimationFrame(function () {
-                        var el = itemRefs.current[nextIndex];
-                        var container = scrollContainerRef.current;
+                    requestAnimationFrame(() => {
+                        const el = itemRefs.current[nextIndex];
+                        const container = scrollContainerRef.current;
                         if (el && container) {
-                            var elTop = el.offsetTop;
-                            var elBottom = elTop + el.offsetHeight;
-                            var containerTop = container.scrollTop;
-                            var containerBottom = containerTop + container.clientHeight;
+                            const elTop = el.offsetTop;
+                            const elBottom = elTop + el.offsetHeight;
+                            const containerTop = container.scrollTop;
+                            const containerBottom = containerTop + container.clientHeight;
                             if (elBottom > containerBottom) {
                                 container.scrollTop = elBottom - container.clientHeight;
                             }
@@ -597,7 +622,7 @@ var ReactAutoCompleteTableView = function (_a) {
         };
         if ((filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 && !isLoading) {
             window.addEventListener('keydown', handleKeyDown);
-            return function () {
+            return () => {
                 window.removeEventListener('keydown', handleKeyDown);
             };
         }
@@ -609,64 +634,90 @@ var ReactAutoCompleteTableView = function (_a) {
         selectedIndex,
         dropOpen,
     ]);
-    var setDropDown = function () {
-        return (((filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 || showNoResults) && ((0, jsx_runtime_1.jsx)("div", __assign({ style: dropPosition, className: "autocomplete-suggections autocomplete-suggections-tableview absolute bg-white shadow-gray-300 shadow-md border border-grey-light z-50 mt-9" }, { children: (0, jsx_runtime_1.jsx)("ul", __assign({ className: "h-auto max-h-40 overflow-auto w-full ".concat(tableView ? '' : 'py-1.5'), ref: scrollContainerRef }, { children: (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [columnHeader && columnHeader.length > 0 && ((0, jsx_runtime_1.jsx)("li", __assign({ className: "sticky top-0 auto-suggections-tableview-header z-10 bg-gray-100 border-b border-grey-light" }, { children: (0, jsx_runtime_1.jsx)("ul", __assign({ className: "flex items-stretch w-full list-none p-0 m-0" }, { children: (function () {
+    const setDropDown = () => {
+        return (((filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 || showNoResults) && ((0, jsx_runtime_1.jsx)("div", { ref: dropdownContentRef, style: Object.assign(Object.assign({}, dropPosition), { overflow: 'hidden' }), className: `autocomplete-suggections autocomplete-suggections-tableview absolute bg-white shadow-gray-300 shadow-md border border-grey-light z-50 mt-9${dropdownTheme === 'splitDetail'
+                ? ' autocomplete-suggections--split-detail'
+                : ''}`, children: (0, jsx_runtime_1.jsx)("ul", { className: `h-auto overflow-auto w-full ${tableView ? '' : 'py-1.5'}`, ref: scrollContainerRef, style: { maxHeight: dropPosition.maxHeight ? `calc(${dropPosition.maxHeight} - 2rem)` : undefined }, children: (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [dropdownTheme === 'default' &&
+                            columnHeader &&
+                            columnHeader.length > 0 && ((0, jsx_runtime_1.jsx)("li", { className: "sticky top-0 auto-suggections-tableview-header z-10 bg-gray-100 border-b border-grey-light", children: (0, jsx_runtime_1.jsx)("ul", { className: "flex items-stretch w-full list-none p-0 m-0", children: (() => {
                                     // Sort columns by order if specified, otherwise maintain array order
-                                    var sortedColumns = additionalColumns
-                                        ? __spreadArray([], additionalColumns, true).sort(function (a, b) {
-                                            var orderA = a.order !== undefined ? a.order : Infinity;
-                                            var orderB = b.order !== undefined ? b.order : Infinity;
+                                    const sortedColumns = additionalColumns
+                                        ? [...additionalColumns].sort((a, b) => {
+                                            const orderA = a.order !== undefined ? a.order : Infinity;
+                                            const orderB = b.order !== undefined ? b.order : Infinity;
                                             return orderA - orderB;
                                         })
                                         : [];
                                     // Separate columns before first column (order < 0) and after (order >= 0 or undefined)
-                                    var columnsBefore = sortedColumns.filter(function (col) { return col.order !== undefined && col.order < 0; });
-                                    var columnsAfter = sortedColumns.filter(function (col) { return col.order === undefined || col.order >= 0; });
+                                    const columnsBefore = sortedColumns.filter(col => col.order !== undefined && col.order < 0);
+                                    const columnsAfter = sortedColumns.filter(col => col.order === undefined || col.order >= 0);
                                     // Determine if first column needs a separator
-                                    var hasColumnsAfter = columnsAfter.length > 0;
+                                    const hasColumnsAfter = columnsAfter.length > 0;
                                     // Find header for first column (name/label)
-                                    var nameHeader = columnHeader.find(function (h) { return h.key === 'name' || h.key === 'label'; });
-                                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [columnsBefore.map(function (column, colIndex) {
-                                                var header = columnHeader.find(function (h) { return h.key === column.key; });
-                                                var isLastBefore = false;
-                                                return header ? ((0, jsx_runtime_1.jsx)("li", __assign({ className: "".concat(column.width ? 'flex-shrink-0' : 'flex-1', " min-w-0 px-3 py-2 ").concat(!isLastBefore ? 'border-r border-grey-light' : '', " break-words flex flex-col"), style: column.width ? { width: "".concat(column.width, "px") } : undefined }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: "block whitespace-normal text-xs font-semibold text-gray-700" }, { children: header.label })) }), column.key)) : null;
-                                            }), nameHeader && ((0, jsx_runtime_1.jsx)("li", __assign({ className: "flex-1 min-w-0 px-3 py-2 ".concat(hasColumnsAfter ? 'border-r border-grey-light' : '', " break-words flex flex-col") }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: "block whitespace-normal text-xs font-semibold text-gray-700" }, { children: nameHeader.label })) }))), columnsAfter.map(function (column, colIndex) {
-                                                var header = columnHeader.find(function (h) { return h.key === column.key; });
-                                                var isLastColumn = colIndex === columnsAfter.length - 1;
-                                                return header ? ((0, jsx_runtime_1.jsx)("li", __assign({ className: "".concat(column.width ? 'flex-shrink-0' : 'flex-1', " min-w-0 px-3 py-2 ").concat(!isLastColumn ? 'border-r border-grey-light' : '', " break-words flex flex-col"), style: column.width ? { width: "".concat(column.width, "px") } : undefined }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: "block whitespace-normal text-xs font-semibold text-gray-700" }, { children: header.label })) }), column.key)) : null;
+                                    const nameHeader = columnHeader.find(h => h.key === 'name' || h.key === 'label');
+                                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [columnsBefore.map((column, colIndex) => {
+                                                const header = columnHeader.find(h => h.key === column.key);
+                                                const isLastBefore = false;
+                                                return header ? ((0, jsx_runtime_1.jsx)("li", { className: `${column.width ? 'flex-shrink-0' : 'flex-1'} min-w-0 px-3 py-2 ${!isLastBefore ? 'border-r border-grey-light' : ''} break-words flex flex-col`, style: column.width ? { width: `${column.width}px` } : undefined, children: (0, jsx_runtime_1.jsx)("span", { className: "block whitespace-normal text-xs font-semibold text-gray-700", children: header.label }) }, column.key)) : null;
+                                            }), nameHeader && ((0, jsx_runtime_1.jsx)("li", { className: `flex-1 min-w-0 px-3 py-2 ${hasColumnsAfter ? 'border-r border-grey-light' : ''} break-words flex flex-col`, children: (0, jsx_runtime_1.jsx)("span", { className: "block whitespace-normal text-xs font-semibold text-gray-700", children: nameHeader.label }) })), columnsAfter.map((column, colIndex) => {
+                                                const header = columnHeader.find(h => h.key === column.key);
+                                                const isLastColumn = colIndex === columnsAfter.length - 1;
+                                                return header ? ((0, jsx_runtime_1.jsx)("li", { className: `${column.width ? 'flex-shrink-0' : 'flex-1'} min-w-0 px-3 py-2 ${!isLastColumn ? 'border-r border-grey-light' : ''} break-words flex flex-col`, style: column.width ? { width: `${column.width}px` } : undefined, children: (0, jsx_runtime_1.jsx)("span", { className: "block whitespace-normal text-xs font-semibold text-gray-700", children: header.label }) }, column.key)) : null;
                                             })] }));
-                                })() })) }))), filteredData.map(function (suggestion, index) { return ((0, jsx_runtime_1.jsx)("li", __assign({ className: "".concat((value === null || value === void 0 ? void 0 : value.id) === (suggestion === null || suggestion === void 0 ? void 0 : suggestion.id)
-                                ? 'bg-blue-navy text-white'
-                                : "".concat(index === selectedIndex ? 'is-selected' : '', " hover:bg-table-hover"), " cursor-pointer text-xxs qbs-autocomplete-suggections-items ").concat(tableView
-                                ? "border-b border-grey-light last:border-b-0"
-                                : "p-1 ps-3.5 pl-[10px]"), "data-testid": suggestion.name, onClick: function () { return handleSuggestionClick(suggestion, index); }, tabIndex: index, ref: function (el) { return (itemRefs.current[index] = el); } }, { children: (0, jsx_runtime_1.jsx)("ul", __assign({ className: "flex items-stretch w-full list-none p-0 m-0" }, { children: (function () {
-                                    // Sort columns by order if specified, otherwise maintain array order
-                                    var sortedColumns = additionalColumns
-                                        ? __spreadArray([], additionalColumns, true).sort(function (a, b) {
-                                            var orderA = a.order !== undefined ? a.order : Infinity;
-                                            var orderB = b.order !== undefined ? b.order : Infinity;
-                                            return orderA - orderB;
-                                        })
-                                        : [];
-                                    // Separate columns before first column (order < 0) and after (order >= 0 or undefined)
-                                    var columnsBefore = sortedColumns.filter(function (col) { return col.order !== undefined && col.order < 0; });
-                                    var columnsAfter = sortedColumns.filter(function (col) { return col.order === undefined || col.order >= 0; });
-                                    // Determine if first column needs a separator
-                                    var hasColumnsAfter = columnsAfter.length > 0;
-                                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [columnsBefore.map(function (column, colIndex) {
-                                                var hasValue = suggestion === null || suggestion === void 0 ? void 0 : suggestion[column.key];
-                                                var isLastBefore = false;
-                                                return hasValue ? ((0, jsx_runtime_1.jsx)("li", __assign({ className: "".concat(column.width ? 'flex-shrink-0' : 'flex-1', " min-w-0 px-3 ").concat(tableView ? 'py-2' : '', " ").concat(!isLastBefore ? 'border-r border-grey-light' : '', " break-words flex flex-col"), style: column.width ? { width: "".concat(column.width, "px") } : undefined }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: "block whitespace-normal" }, { children: suggestion === null || suggestion === void 0 ? void 0 : suggestion[column.key] })) }), column.key)) : null;
-                                            }), (0, jsx_runtime_1.jsx)("li", __assign({ className: "flex-1 min-w-0 px-3 ".concat(tableView ? 'py-2' : '', " ").concat(hasColumnsAfter ? 'border-r border-grey-light' : '', " break-words flex flex-col") }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: "block whitespace-normal" }, { children: (suggestion === null || suggestion === void 0 ? void 0 : suggestion.label) ? suggestion === null || suggestion === void 0 ? void 0 : suggestion.label : suggestion.name })) })), columnsAfter.map(function (column, colIndex) {
-                                                var hasValue = suggestion === null || suggestion === void 0 ? void 0 : suggestion[column.key];
-                                                var isLastColumn = colIndex === columnsAfter.length - 1;
-                                                return hasValue ? ((0, jsx_runtime_1.jsx)("li", __assign({ className: "".concat(column.width ? 'flex-shrink-0' : 'flex-1', " min-w-0 px-3 ").concat(tableView ? 'py-2' : '', " ").concat(!isLastColumn ? 'border-r border-grey-light' : '', " break-words flex flex-col"), style: column.width ? { width: "".concat(column.width, "px") } : undefined }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: "block whitespace-normal" }, { children: suggestion === null || suggestion === void 0 ? void 0 : suggestion[column.key] })) }), column.key)) : null;
-                                            })] }));
-                                })() })) }), suggestion === null || suggestion === void 0 ? void 0 : suggestion.id)); })] })) : (showNoResults &&
+                                })() }) })), filteredData.map((suggestion, index) => {
+                            var _a;
+                            return ((0, jsx_runtime_1.jsx)("li", { className: `${(value === null || value === void 0 ? void 0 : value.id) === (suggestion === null || suggestion === void 0 ? void 0 : suggestion.id)
+                                    ? 'bg-blue-navy text-white'
+                                    : `${index === selectedIndex ? 'is-selected' : ''} hover:bg-table-hover`} cursor-pointer text-xxs qbs-autocomplete-suggections-items ${dropdownTheme === 'splitDetail' || tableView
+                                    ? 'border-b border-grey-light last:border-b-0'
+                                    : 'p-1 ps-3.5 pl-[10px]'}`, "data-testid": suggestion.name, onClick: () => handleSuggestionClick(suggestion, index), tabIndex: index, ref: (el) => {
+                                    itemRefs.current[index] = el;
+                                }, children: dropdownTheme === 'splitDetail' ? ((0, jsx_runtime_1.jsxs)("div", { className: "qbs-split-detail-row", children: [(0, jsx_runtime_1.jsxs)("div", { className: "qbs-split-detail-main", children: [(0, jsx_runtime_1.jsx)("div", { className: "qbs-split-detail-title", children: (suggestion === null || suggestion === void 0 ? void 0 : suggestion.label) ? suggestion === null || suggestion === void 0 ? void 0 : suggestion.label : suggestion.name }), (splitDetailOptions === null || splitDetailOptions === void 0 ? void 0 : splitDetailOptions.subtitleKey) &&
+                                                    (suggestion === null || suggestion === void 0 ? void 0 : suggestion[splitDetailOptions.subtitleKey]) != null &&
+                                                    String(suggestion[splitDetailOptions.subtitleKey]).trim() !== '' && ((0, jsx_runtime_1.jsx)("div", { className: "qbs-split-detail-subtitle", children: String(suggestion[splitDetailOptions.subtitleKey]) }))] }), (splitDetailOptions === null || splitDetailOptions === void 0 ? void 0 : splitDetailOptions.badgeKey) &&
+                                            (suggestion === null || suggestion === void 0 ? void 0 : suggestion[splitDetailOptions.badgeKey]) != null &&
+                                            String(suggestion[splitDetailOptions.badgeKey]).trim() !==
+                                                '' && ((0, jsx_runtime_1.jsx)("div", { className: "qbs-split-detail-badge-wrap", children: (0, jsx_runtime_1.jsxs)("span", { className: "qbs-split-detail-badge", children: [(_a = splitDetailOptions.badgePrefix) !== null && _a !== void 0 ? _a : '', String(suggestion[splitDetailOptions.badgeKey])] }) }))] })) : ((0, jsx_runtime_1.jsx)("ul", { className: "flex items-stretch w-full list-none p-0 m-0", children: (() => {
+                                        // Sort columns by order if specified, otherwise maintain array order
+                                        const sortedColumns = additionalColumns
+                                            ? [...additionalColumns].sort((a, b) => {
+                                                const orderA = a.order !== undefined ? a.order : Infinity;
+                                                const orderB = b.order !== undefined ? b.order : Infinity;
+                                                return orderA - orderB;
+                                            })
+                                            : [];
+                                        // Separate columns before first column (order < 0) and after (order >= 0 or undefined)
+                                        const columnsBefore = sortedColumns.filter((col) => col.order !== undefined && col.order < 0);
+                                        const columnsAfter = sortedColumns.filter((col) => col.order === undefined || col.order >= 0);
+                                        // Determine if first column needs a separator
+                                        const hasColumnsAfter = columnsAfter.length > 0;
+                                        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [columnsBefore.map((column, colIndex) => {
+                                                    const hasValue = suggestion === null || suggestion === void 0 ? void 0 : suggestion[column.key];
+                                                    const isLastBefore = false;
+                                                    return hasValue ? ((0, jsx_runtime_1.jsx)("li", { className: `${column.width ? 'flex-shrink-0' : 'flex-1'} min-w-0 px-3 ${tableView ? 'py-2' : ''} ${!isLastBefore
+                                                            ? 'border-r border-grey-light'
+                                                            : ''} break-words flex flex-col`, style: column.width
+                                                            ? { width: `${column.width}px` }
+                                                            : undefined, children: (0, jsx_runtime_1.jsx)("span", { className: "block whitespace-normal", children: suggestion === null || suggestion === void 0 ? void 0 : suggestion[column.key] }) }, column.key)) : null;
+                                                }), (0, jsx_runtime_1.jsx)("li", { className: `flex-1 min-w-0 px-3 ${tableView ? 'py-2' : ''} ${hasColumnsAfter
+                                                        ? 'border-r border-grey-light'
+                                                        : ''} break-words flex flex-col`, children: (0, jsx_runtime_1.jsx)("span", { className: "block whitespace-normal", children: (suggestion === null || suggestion === void 0 ? void 0 : suggestion.label)
+                                                            ? suggestion === null || suggestion === void 0 ? void 0 : suggestion.label
+                                                            : suggestion.name }) }), columnsAfter.map((column, colIndex) => {
+                                                    const hasValue = suggestion === null || suggestion === void 0 ? void 0 : suggestion[column.key];
+                                                    const isLastColumn = colIndex === columnsAfter.length - 1;
+                                                    return hasValue ? ((0, jsx_runtime_1.jsx)("li", { className: `${column.width ? 'flex-shrink-0' : 'flex-1'} min-w-0 px-3 ${tableView ? 'py-2' : ''} ${!isLastColumn
+                                                            ? 'border-r border-grey-light'
+                                                            : ''} break-words flex flex-col`, style: column.width
+                                                            ? { width: `${column.width}px` }
+                                                            : undefined, children: (0, jsx_runtime_1.jsx)("span", { className: "block whitespace-normal", children: suggestion === null || suggestion === void 0 ? void 0 : suggestion[column.key] }) }, column.key)) : null;
+                                                })] }));
+                                    })() })) }, suggestion === null || suggestion === void 0 ? void 0 : suggestion.id));
+                        })] })) : (showNoResults &&
                     !isLoading &&
-                    timerRef.current === 1 && ((0, jsx_runtime_1.jsx)("li", __assign({ className: "$ cursor-pointer p-1 rounded-sm text-xxs", onClick: handleClose }, { children: "No Results Found" })))) })) }))));
+                    timerRef.current === 1 && ((0, jsx_runtime_1.jsx)("li", { className: `$ cursor-pointer p-1 rounded-sm text-xxs`, onClick: handleClose, children: "No Results Found" }))) }) })));
     };
-    var getBorderRight = function () {
+    const getBorderRight = () => {
         if (fromPrefix) {
             if ((hasParentError && Boolean(errors && errors[name])) ||
                 hasParentError) {
@@ -678,12 +729,12 @@ var ReactAutoCompleteTableView = function (_a) {
         }
         return 0;
     };
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         (0, getPosition_1.applyPositionClass)(dropdownref, isHovered);
         setDropOpen(false);
     }, [isHovered]);
-    (0, react_1.useEffect)(function () {
-        var shouldShowClose = (value === null || value === void 0 ? void 0 : value.name) &&
+    (0, react_1.useEffect)(() => {
+        const shouldShowClose = (value === null || value === void 0 ? void 0 : value.name) &&
             ((value === null || value === void 0 ? void 0 : value.id) || String(value === null || value === void 0 ? void 0 : value.id) === '0') &&
             !disabled &&
             !readOnly &&
@@ -692,13 +743,13 @@ var ReactAutoCompleteTableView = function (_a) {
             setShowClose(shouldShowClose);
         }
     }, [value, disabled, readOnly]);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         // Check if input content overflows
-        var checkOverflow = function () {
+        const checkOverflow = () => {
             if (inputRef.current) {
-                var _a = inputRef.current, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth, value_1 = _a.value;
+                const { scrollWidth, clientWidth, value } = inputRef.current;
                 // Check for overflow only when there's content
-                if (value_1.trim() !== '') {
+                if (value.trim() !== '') {
                     setShowTooltip(scrollWidth > clientWidth + 2);
                 }
                 else {
@@ -710,40 +761,120 @@ var ReactAutoCompleteTableView = function (_a) {
             inputRef.current.addEventListener('input', checkOverflow);
             checkOverflow(); // Initial check
         }
-        return function () {
+        return () => {
             if (inputRef.current) {
                 inputRef.current.removeEventListener('input', checkOverflow);
             }
         };
     }, [inputValue]);
-    var handleMouseEnter = function () {
+    const handleMouseEnter = () => {
         setTooltipIsHovered(true);
     };
-    var handleMouseLeave = function () {
+    const handleMouseLeave = () => {
         setTooltipIsHovered(false);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ id: id ? "autocomplete-container-".concat(id) : "autocomplete-container-".concat(name), className: " flex-grow  ".concat(fullWidth ? 'w-full' : 'w-auto'), ref: dropdownref }, { children: [label && !isModern && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "mb-3" }, { children: (0, jsx_runtime_1.jsxs)("label", __assign({ className: "text-xs font-medium" }, { children: [label, required ? (0, jsx_runtime_1.jsx)("span", __assign({ className: "text-error" }, { children: " *" })) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] })) }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "tooltip-container" }, { children: [isHovered && errors && errors[name] && ((0, jsx_runtime_1.jsxs)("span", __assign({ className: "tooltip" }, { children: [handleError(errors), " "] }))), tooltipIsHovered && showToolTip && !dropOpen && inputValue && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "tooltip-info" }, { children: inputValue }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "flex relative ".concat(fullWidth ? 'w-full' : 'w-auto'), style: { width: width } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "relative w-full", onMouseEnter: function () { return handleMouseEnter(); }, onMouseLeave: function () { return handleMouseLeave(); } }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "text", readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : type === 'custom_select', value: inputValue ? inputValue : '', onBlur: handleClearInputValue, autoComplete: "off", disabled: disabled, ref: inputRef, id: id ? "custom-autocomplete-".concat(id) : "custom-autocomplete-".concat(name), "data-testid": "custom-autocomplete", "aria-describedby": id, style: __assign({ paddingRight: getInnerWidth() }, (fromPrefix
+    const updateTooltipPosition = (0, react_1.useCallback)(() => {
+        if (!inputRef.current)
+            return;
+        const rect = inputRef.current.getBoundingClientRect();
+        setTooltipPosition((prev) => {
+            const next = {
+                top: rect.bottom + 6,
+                left: rect.right,
+                width: rect.width,
+            };
+            if (prev &&
+                prev.top === next.top &&
+                prev.left === next.left &&
+                prev.width === next.width) {
+                return prev;
+            }
+            return next;
+        });
+    }, []);
+    (0, react_1.useLayoutEffect)(() => {
+        if (!(tooltipIsHovered && showToolTip && !dropOpen && inputValue)) {
+            setTooltipPosition(null);
+            return;
+        }
+        updateTooltipPosition();
+        window.addEventListener('scroll', updateTooltipPosition, true);
+        window.addEventListener('resize', updateTooltipPosition);
+        return () => {
+            window.removeEventListener('scroll', updateTooltipPosition, true);
+            window.removeEventListener('resize', updateTooltipPosition);
+        };
+    }, [tooltipIsHovered, showToolTip, dropOpen, inputValue, updateTooltipPosition]);
+    const updateErrorTooltipPosition = (0, react_1.useCallback)(() => {
+        if (!errorIconRef.current)
+            return;
+        const rect = errorIconRef.current.getBoundingClientRect();
+        setErrorTooltipPosition((prev) => {
+            const next = {
+                top: rect.bottom + 6,
+                left: rect.right,
+            };
+            if (prev && prev.top === next.top && prev.left === next.left) {
+                return prev;
+            }
+            return next;
+        });
+    }, []);
+    (0, react_1.useLayoutEffect)(() => {
+        if (!(isHovered && errors && errors[name])) {
+            setErrorTooltipPosition(null);
+            return;
+        }
+        updateErrorTooltipPosition();
+        window.addEventListener('scroll', updateErrorTooltipPosition, true);
+        window.addEventListener('resize', updateErrorTooltipPosition);
+        return () => {
+            window.removeEventListener('scroll', updateErrorTooltipPosition, true);
+            window.removeEventListener('resize', updateErrorTooltipPosition);
+        };
+    }, [isHovered, errors, name, updateErrorTooltipPosition]);
+    return ((0, jsx_runtime_1.jsxs)("div", { id: id ? `autocomplete-container-${id}` : `autocomplete-container-${name}`, className: `autocomplete-container-table-view flex-grow  ${fullWidth ? 'w-full' : 'w-auto'}`, ref: dropdownref, children: [label && !isModern && ((0, jsx_runtime_1.jsx)("div", { className: "mb-3", children: (0, jsx_runtime_1.jsxs)("label", { className: `text-xs font-medium`, children: [label, required ? (0, jsx_runtime_1.jsx)("span", { className: "text-error", children: " *" }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] }) })), (0, jsx_runtime_1.jsxs)("div", { className: "tooltip-container", children: [isHovered && errors && errors[name] && errorTooltipPosition && ((0, jsx_runtime_1.jsx)(portal_1.default, { children: (0, jsx_runtime_1.jsx)("span", { className: "tooltip tooltip-portal-error", style: {
+                                position: 'fixed',
+                                top: errorTooltipPosition.top,
+                                left: errorTooltipPosition.left,
+                                transform: 'translateX(-100%)',
+                                zIndex: 9999,
+                            }, children: handleError(errors) }) })), tooltipIsHovered &&
+                        showToolTip &&
+                        !dropOpen &&
+                        inputValue &&
+                        tooltipPosition && ((0, jsx_runtime_1.jsx)(portal_1.default, { children: (0, jsx_runtime_1.jsx)("div", { className: "tooltip-info tooltip-info-portal", style: {
+                                position: 'fixed',
+                                top: tooltipPosition.top,
+                                left: tooltipPosition.left,
+                                maxWidth: tooltipPosition.width,
+                                transform: 'translateX(-100%)',
+                                zIndex: 9999,
+                            }, children: inputValue }) })), (0, jsx_runtime_1.jsxs)("div", { className: `flex relative ${fullWidth ? 'w-full' : 'w-auto'}`, style: { width: width }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative w-full", onMouseEnter: () => handleMouseEnter(), onMouseLeave: () => handleMouseLeave(), children: [(0, jsx_runtime_1.jsx)("input", { type: "text", readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : type === 'custom_select', value: inputValue ? inputValue : '', onBlur: handleClearInputValue, autoComplete: "off", disabled: disabled, ref: inputRef, id: id ? `custom-autocomplete-${id}` : `custom-autocomplete-${name}`, "data-testid": "custom-autocomplete", "aria-describedby": id, style: Object.assign({ paddingRight: getInnerWidth() }, (fromPrefix
                                             ? {
                                                 borderRight: getBorderRight(),
                                                 borderTopRightRadius: 0,
                                                 borderBottomRightRadius: 0,
                                             }
-                                            : {})), className: " ".concat(generateClassName('input')), onChange: handleChange, placeholder: type === 'auto_complete'
+                                            : {})), className: ` ${generateClassName('input')}`, onChange: handleChange, placeholder: type === 'auto_complete'
                                             ? placeholder && isCustomPlaceholder
                                                 ? placeholder
                                                 : 'Type to search'
-                                            : placeholder !== null && placeholder !== void 0 ? placeholder : '--Select--', onFocus: onInputFocus, onClick: function (e) {
+                                            : placeholder !== null && placeholder !== void 0 ? placeholder : '--Select--', onFocus: onInputFocus, onKeyDown: handleSearchInputKeyDown, onClick: (e) => {
                                             if (type === 'custom_select') {
                                                 setDropOpen(!dropOpen);
                                                 handleOpen(e);
                                             }
+                                            else if (searchOnButtonOnly) {
+                                                return;
+                                            }
                                             else {
                                                 if (dropOpen || (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0)
                                                     setDropOpen(!dropOpen);
                                             }
-                                        } }), isModern && ((0, jsx_runtime_1.jsxs)("label", __assign({ htmlFor: id, onClick: function () { return onLabelClick(); }, className: generateClassName('label') }, { children: [label ? (0, jsx_runtime_1.jsx)("span", __assign({ className: "truncate" }, { children: label })) : '', required ? (0, jsx_runtime_1.jsx)("span", __assign({ className: "text-error" }, { children: " *" })) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] })))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "flex items-center justify-center autocomplete-adorement-wrapper" }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ ref: adorementRef, className: "".concat(generateClassName('adorement'), " qbs-autocomplete-adorement auto-dorpdown-adorement mr-[1px] ").concat(isLoading ? 'bg-white' : '') }, { children: [showClose && ((0, jsx_runtime_1.jsx)("button", __assign({ onClick: function () { return handleClear(); }, className: " text-table-bodyColor text-[#667085]", "aria-label": "close", type: "button", id: "autocomplete-close-icon" }, { children: (0, jsx_runtime_1.jsx)(customIcons_1.default, { name: "close", type: "large-m" }) }))), isLoading && (0, jsx_runtime_1.jsx)(Spinner_1.default, {}), (type !== 'auto_complete' || autoDropdown) &&
+                                        } }), isModern && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: id, onClick: () => onLabelClick(), className: generateClassName('label'), children: [label ? (0, jsx_runtime_1.jsx)("span", { className: "truncate", children: label }) : '', required ? (0, jsx_runtime_1.jsx)("span", { className: "text-error", children: " *" }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center autocomplete-adorement-wrapper", children: (0, jsx_runtime_1.jsxs)("div", { ref: adorementRef, className: `${generateClassName('adorement')} qbs-autocomplete-adorement auto-dorpdown-adorement mr-[1px] ${isLoading ? 'bg-white' : ''}`, children: [showClose && ((0, jsx_runtime_1.jsx)("button", { onClick: () => handleClear(), className: " text-table-bodyColor text-[#667085]", "aria-label": "close", type: "button", id: "autocomplete-close-icon", children: (0, jsx_runtime_1.jsx)(customIcons_1.default, { name: "close", type: "large-m" }) })), showSearchOnButtonChrome && ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": isLoading ? 'Loading' : 'Search', "aria-busy": isLoading, "data-testid": "autocomplete-search-button", onClick: handleSearchButtonClick, disabled: isLoading, className: "btn-search-on text-table-bodyColor text-[#667085] focus-visible:outline-slate-100 p-0.5 inline-flex items-center justify-center min-w-[28px] min-h-[28px] disabled:opacity-70", children: isLoading ? ((0, jsx_runtime_1.jsx)("span", { className: "inline-flex items-center justify-center [&_svg]:mr-0 [&_svg]:h-5 [&_svg]:w-5", children: (0, jsx_runtime_1.jsx)(Spinner_1.default, {}) })) : ((0, jsx_runtime_1.jsx)(customIcons_1.default, { name: "search", type: "medium" })) })), isLoading && !showSearchOnButtonChrome && (0, jsx_runtime_1.jsx)(Spinner_1.default, {}), (type !== 'auto_complete' || autoDropdown) &&
                                             !disabled &&
-                                            !readOnly && ((0, jsx_runtime_1.jsx)("button", __assign({ disabled: disabled !== null && disabled !== void 0 ? disabled : readOnly, onClick: function (e) { return handleOpenDropdown(e); }, onBlur: handleClose, className: " text-[#667085] focus-visible:outline-slate-100", "data-testid": "drop-arrow", type: "button", id: "autocomplete-drop-icon", ref: dropBtnRef }, { children: !dropOpen ? (autoDropdown ? ((0, jsx_runtime_1.jsx)(icons_1.AllDropArrow, { type: "down", uniqueId: "all-dropdow-arrow-icon", className: "all-dropdow-arrow-icon" })) : ((0, jsx_runtime_1.jsx)(icons_1.DropArrow, { uniqueDropArrowId: "drop-arrow-icon" }))) : autoDropdown ? ((0, jsx_runtime_1.jsx)(icons_1.AllDropArrow, { type: "up", uniqueId: "all-dropdow-arrow-icon", className: "all-dropdow-arrow-icon" })) : ((0, jsx_runtime_1.jsx)(icons_1.DropArrow, { className: "rotate-180", uniqueDropArrowId: "drop-arrow-icon" })) }))), errors && errors[name] && ((0, jsx_runtime_1.jsx)("div", __assign({ className: " text-error-label  relative cursor-pointer ".concat(generateClassName('message')), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: (0, jsx_runtime_1.jsx)(customIcons_1.default, { name: "alert", type: "medium" }) })))] })) })), dropOpen && (!isLoading || (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: insideOpen ? setDropDown() : (0, jsx_runtime_1.jsx)(portal_1.default, { children: setDropDown() }) }))] }))] }))] })));
+                                            !readOnly && ((0, jsx_runtime_1.jsx)("button", { disabled: disabled !== null && disabled !== void 0 ? disabled : readOnly, onClick: (e) => handleOpenDropdown(e), onBlur: handleClose, className: " text-[#667085] focus-visible:outline-slate-100", "data-testid": "drop-arrow", type: "button", id: "autocomplete-drop-icon", ref: dropBtnRef, children: !dropOpen ? (autoDropdown ? ((0, jsx_runtime_1.jsx)(icons_1.AllDropArrow, { type: "down", uniqueId: "all-dropdow-arrow-icon", className: "all-dropdow-arrow-icon" })) : ((0, jsx_runtime_1.jsx)(icons_1.DropArrow, { uniqueDropArrowId: "drop-arrow-icon" }))) : autoDropdown ? ((0, jsx_runtime_1.jsx)(icons_1.AllDropArrow, { type: "up", uniqueId: "all-dropdow-arrow-icon", className: "all-dropdow-arrow-icon" })) : ((0, jsx_runtime_1.jsx)(icons_1.DropArrow, { className: "rotate-180", uniqueDropArrowId: "drop-arrow-icon" })) })), errors && errors[name] && ((0, jsx_runtime_1.jsx)("div", { ref: errorIconRef, className: ` text-error-label  relative cursor-pointer ${generateClassName('message')}`, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: (0, jsx_runtime_1.jsx)(customIcons_1.default, { name: "alert", type: "medium" }) }))] }) }), dropOpen && (!isLoading || (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: insideOpen ? setDropDown() : (0, jsx_runtime_1.jsx)(portal_1.default, { children: setDropDown() }) }))] })] })] }));
 };
 exports.default = ReactAutoCompleteTableView;
 //# sourceMappingURL=ReactAutoCompleteTableView.js.map