react-core-ts 2.0.12 → 2.0.14

package/dist/ReactAutoCompleteTableView.js

@@ -0,0 +1,724 @@
+"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;
+    var _t = (0, react_1.useState)((_b = value === null || value === void 0 ? void 0 : value.name) !== null && _b !== void 0 ? _b : ""), inputValue = _t[0], setInputValue = _t[1];
+    var _u = (0, react_1.useState)(false), isHovered = _u[0], setIsHovered = _u[1];
+    var _v = (0, react_1.useState)(false), isLoading = _v[0], setIsLoading = _v[1];
+    var _w = (0, react_1.useState)(false), dropOpen = _w[0], setDropOpen = _w[1];
+    var _x = (0, react_1.useState)(disabled), isDisabled = _x[0], setIsDisabled = _x[1];
+    var _y = (0, react_1.useState)(false), showClose = _y[0], setShowClose = _y[1];
+    var _z = (0, react_1.useState)(false), showToolTip = _z[0], setShowTooltip = _z[1];
+    var _0 = (0, react_1.useState)(false), tooltipIsHovered = _0[0], setTooltipIsHovered = _0[1];
+    var _1 = (0, react_1.useState)([]), suggestions = _1[0], setSuggestions = _1[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 _2 = (0, react_1.useState)(0), selectedIndex = _2[0], setSelectedIndex = _2[1];
+    var itemRefs = (0, react_1.useRef)([]);
+    var scrollContainerRef = (0, react_1.useRef)(null);
+    var _3 = (0, react_1.useState)(false), refetchData = _3[0], setRefetchData = _3[1];
+    var _4 = (0, react_1.useState)({
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+    }), dropPosition = _4[0], setDropPosition = _4[1];
+    var checkIncludes = function (mainString, subString, param1, param2, param3, param4) {
+        var checkIncludesIfExists = function (mainString, substring) {
+            return substring &&
+                mainString &&
+                typeof mainString === 'string' &&
+                typeof subString === 'string'
+                ? mainString
+                    .toString()
+                    .toLowerCase()
+                    .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; };
+        return (checkIncludesIfExists(mainString, subString) ||
+            (!!checkParams &&
+                ((checkArrayContains(checkParams, 'param1') &&
+                    checkIncludesIfExists(param1, subString)) ||
+                    (checkArrayContains(checkParams, 'param2') &&
+                        checkIncludesIfExists(param2, subString)) ||
+                    (checkArrayContains(checkParams, 'param3') &&
+                        checkIncludesIfExists(param3, subString)) ||
+                    (checkArrayContains(checkParams, 'param4') &&
+                        checkIncludesIfExists(param4, subString)))));
+    };
+    var getHeight = function () {
+        switch (size) {
+            case 'sm':
+                return ' h-[34px] ';
+            default:
+                return ' ';
+        }
+    };
+    var handleChange = function (event) {
+        var value = event.target.value;
+        timerRef.current = 0;
+        setInputValue(value);
+        handleValChange(value);
+        if (!value) {
+            setInputValue('');
+            onChange({ id: undefined, name: '', from: 2 });
+        }
+    };
+    var handleValChange = (0, react_1.useCallback)((0, debounce_1.debounce)(function (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(function () {
+            timerRef.current = 1;
+        }, 200);
+    }, isStaticList ? 0 : 1000), []);
+    var handleDropData = function (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);
+                    })
+                    : data;
+                setSuggestions(filteredData_1);
+            }
+            else {
+                handlePickSuggestions(value);
+            }
+        }
+        else if ((type === 'custom_select' || type === 'custom_search_select') &&
+            (!data || (data === null || data === void 0 ? void 0 : data.length) === 0)) {
+            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);
+                })
+                : data;
+            setSuggestions(filteredData_2);
+        }
+    };
+    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*/];
+            }
+        });
+    }); };
+    var onLabelClick = function () {
+        var _a;
+        if (!isDisabled) {
+            (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            if (autoFilter && inputValue === '') {
+                handleValChange('*');
+            }
+            else if ((type === 'custom_select' || type === 'custom_search_select') &&
+                data &&
+                (data === null || data === void 0 ? void 0 : data.length) > 0) {
+                handleDropData();
+                setDropOpen(true);
+            }
+        }
+    };
+    var handleClickOutside = function (event) {
+        if (dropdownref.current &&
+            !dropdownref.current.contains(event.target)) {
+            setDropOpen(false);
+        }
+    };
+    var checkIsEmptyField = function () {
+        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]);
+                    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) {
+                        data === null || data === void 0 ? void 0 : data.push(element);
+                    });
+                    setSuggestions(fetchedSuggestions);
+                    setIsLoading(false);
+                    if (autoDropdown) {
+                        setRefetchData(false);
+                        timerRef.current = 1;
+                    }
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_2 = _a.sent();
+                    setIsLoading(false);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    (0, react_1.useEffect)(function () {
+        document.addEventListener('click', handleClickOutside);
+        return function () {
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (autoFocus) {
+            onLabelClick();
+        }
+    }, [autoFocus]);
+    var onInputFocus = function () {
+        if (!isDisabled) {
+            if (autoFilter && inputValue === '') {
+                handleValChange('*');
+            }
+            else if ((type === 'custom_select' || type === 'custom_search_select') &&
+                data &&
+                (data === null || data === void 0 ? void 0 : data.length) > 0) {
+                handleDropData();
+                //if (insideOpen) setDropOpen(true) // commeted this code bcoz added onclick function inside
+            }
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        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 } : {})));
+        if (type !== 'custom_select')
+            setInputValue(suggestion.name);
+        setDropOpen(false);
+        setSelectedIndex(index);
+    };
+    var handleOpen = function (e) {
+        if (!suggestions || (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) === 0)
+            handleDropData();
+        if (!isLoading) {
+            setDropOpen(!dropOpen);
+            if (type !== 'custom_select')
+                setInputValue('');
+        }
+    };
+    var handleOpenDropdown = function (e) {
+        if (!suggestions || (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) === 0 || refetchData) {
+            if (autoDropdown && (inputValue === '' || inputValue.trim() === '')) {
+                setSuggestions([]);
+                loadStaticData();
+            }
+            else if (!refetchData) {
+                handleDropData();
+            }
+        }
+        if (!isLoading) {
+            setDropOpen(!dropOpen);
+        }
+    };
+    var handleScroll = function () {
+        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);
+                });
+            };
+        }
+    }, [dropOpen]);
+    var handleClear = function () {
+        setDropOpen(false);
+        setInputValue('');
+        onChange({ id: undefined, name: '', from: 3 });
+        onLabelClick();
+        if (autoDropdown) {
+            setRefetchData(true);
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        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 () {
+        setSuggestions(data);
+    }, [data]);
+    var getErrors = function (err) {
+        var _a, _b, _c, _d;
+        var errMsg = '';
+        if (err.message) {
+            errMsg = err === null || err === void 0 ? void 0 : err.message;
+        }
+        else if ((_a = err === null || err === void 0 ? void 0 : err.id) === null || _a === void 0 ? void 0 : _a.message) {
+            errMsg = (_b = err === null || err === void 0 ? void 0 : err.id) === null || _b === void 0 ? void 0 : _b.message;
+        }
+        else if ((_c = err === null || err === void 0 ? void 0 : err.name) === null || _c === void 0 ? void 0 : _c.message) {
+            errMsg = (_d = err === null || err === void 0 ? void 0 : err.name) === null || _d === void 0 ? void 0 : _d.message;
+        }
+        return errMsg;
+    };
+    var generateClassName = function (type) {
+        var 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
+                    ? 'placeholder-transparent'
+                    : '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';
+                }
+                else {
+                    className +=
+                        ' text-grey-dark border-input-light focus:border-blue-navy  focus:outline-none  focus:ring-0';
+                }
+                className += getHeight();
+                break;
+            case 'label':
+                className += " flex modern-input-label-truncate  peer-focus:modern-input-peer-focus-label-size \n          ".concat(isDisabled
+                    ? 'cursor-pointer'
+                    : 'cursor-text peer-focus:cursor-pointer', " ").concat(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
+                    ? 'cursor-pointer'
+                    : 'cursor-text peer-focus:cursor-pointer', "\n           ").concat(checkIsEmptyField()
+                    ? 'modern-input-label-size'
+                    : 'modern-input-peer-focus-label-size');
+                if (errors && errors[name]) {
+                    className += ' text-error-light ';
+                }
+                else {
+                    className += ' text-grey-dark peer-focus:text-blue-navy';
+                }
+                break;
+            case 'message':
+                className = ' text-error-icon ';
+                break;
+            case 'adorement':
+                className += '  absolute right-0 adorement gap-1 flex items-center ';
+                break;
+            default:
+                break;
+        }
+        return className;
+    };
+    var handleClose = function () {
+        setTimeout(function () {
+            setDropOpen(false);
+        }, 500);
+    };
+    var handleClearInputValue = function () {
+        // setInputValue(value?.name ?? '')
+    };
+    var getInnerWidth = function () {
+        var innerwidth = adorementRef.current
+            ? adorementRef.current.offsetWidth
+            : 0;
+        return innerwidth;
+    };
+    // const getPosition = () => {
+    //   return 'bottom'
+    // }
+    var 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;
+    var handleError = function (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]));
+        }
+        else {
+            return (_a = getErrors(data[name])) !== null && _a !== void 0 ? _a : '';
+        }
+    };
+    var getDropPosition = function () {
+        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;
+            }
+            else {
+                top_1 = 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;
+            // Check if dropdown would overflow on the right side
+            var dropdownRight = left + width_1;
+            var 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;
+                // Ensure dropdown doesn't go off the left edge
+                var 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);
+                }
+            }
+            // 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;
+                // Use the smaller of: calculated width or max mobile width
+                width_1 = Math.min(width_1, maxWidth);
+                // Adjust left position to prevent overflow
+                var rightEdge = left + width_1;
+                var mobileViewportRight = window.scrollX + viewportWidth - mobilePadding / 2;
+                if (rightEdge > mobileViewportRight) {
+                    // Align to right edge with padding
+                    left = mobileViewportRight - width_1;
+                }
+                // Ensure dropdown doesn't go off the left edge
+                var viewportLeft = window.scrollX + mobilePadding / 2;
+                if (left < viewportLeft) {
+                    left = viewportLeft;
+                    // Adjust width if needed to fit
+                    width_1 = Math.min(width_1, mobileViewportRight - left);
+                }
+            }
+            setDropPosition({
+                left: left,
+                top: top_1,
+                bottom: bottom,
+                width: width_1,
+            });
+        }
+        return undefined;
+    };
+    var _5 = (0, react_1.useState)(false), showNoResults = _5[0], setShowNoResults = _5[1];
+    (0, react_1.useEffect)(function () {
+        if ((inputValue || autoDropdown) &&
+            (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) === 0 &&
+            !isLoading &&
+            timerRef.current === 1) {
+            var timer_1 = setTimeout(function () {
+                setShowNoResults(true);
+            }, 500); // Delay in milliseconds
+            return function () { return clearTimeout(timer_1); };
+        }
+        else {
+            setShowNoResults(false);
+        }
+        // Handle keyboard navigation
+        var handleKeyDown = function (e) {
+            if (!dropOpen)
+                return;
+            var nextIndex = e.key === 'ArrowDown'
+                ? (selectedIndex + 1) % filteredData.length
+                : e.key === 'ArrowUp'
+                    ? (selectedIndex - 1 + filteredData.length) % filteredData.length
+                    : selectedIndex;
+            switch (e.key) {
+                case 'ArrowDown':
+                case 'ArrowUp':
+                    e.preventDefault();
+                    // Update index first
+                    setSelectedIndex(nextIndex);
+                    // Wait for DOM update before scrolling
+                    requestAnimationFrame(function () {
+                        var el = itemRefs.current[nextIndex];
+                        var container = scrollContainerRef.current;
+                        if (el && container) {
+                            var elTop = el.offsetTop;
+                            var elBottom = elTop + el.offsetHeight;
+                            var containerTop = container.scrollTop;
+                            var containerBottom = containerTop + container.clientHeight;
+                            if (elBottom > containerBottom) {
+                                container.scrollTop = elBottom - container.clientHeight;
+                            }
+                            else if (elTop < containerTop) {
+                                container.scrollTop = elTop;
+                            }
+                        }
+                    });
+                    break;
+                case 'Enter':
+                    e.preventDefault();
+                    handleSuggestionClick(filteredData[selectedIndex], selectedIndex);
+                    break;
+                case 'Escape':
+                    e.preventDefault();
+                    setDropOpen(false);
+                    break;
+                default:
+                    break;
+            }
+        };
+        if ((filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 && !isLoading) {
+            window.addEventListener('keydown', handleKeyDown);
+            return function () {
+                window.removeEventListener('keydown', handleKeyDown);
+            };
+        }
+    }, [
+        inputValue,
+        filteredData,
+        isLoading,
+        timerRef.current,
+        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.jsx)(jsx_runtime_1.Fragment, { children: 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 &&
+                    !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" })))) })) }))));
+    };
+    var getBorderRight = function () {
+        if (fromPrefix) {
+            if ((hasParentError && Boolean(errors && errors[name])) ||
+                hasParentError) {
+                return 0;
+            }
+            else if (errors && errors[name]) {
+                return undefined;
+            }
+        }
+        return 0;
+    };
+    (0, react_1.useEffect)(function () {
+        (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) &&
+            ((value === null || value === void 0 ? void 0 : value.id) || String(value === null || value === void 0 ? void 0 : value.id) === '0') &&
+            !disabled &&
+            !readOnly &&
+            isClose;
+        if (showClose !== shouldShowClose) {
+            setShowClose(shouldShowClose);
+        }
+    }, [value, disabled, readOnly]);
+    (0, react_1.useEffect)(function () {
+        // Check if input content overflows
+        var checkOverflow = function () {
+            if (inputRef.current) {
+                var _a = inputRef.current, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth, value_1 = _a.value;
+                // Check for overflow only when there's content
+                if (value_1.trim() !== '') {
+                    setShowTooltip(scrollWidth > clientWidth + 2);
+                }
+                else {
+                    setShowTooltip(false); // No tooltip for empty input
+                }
+            }
+        };
+        if (inputRef.current) {
+            inputRef.current.addEventListener('input', checkOverflow);
+            checkOverflow(); // Initial check
+        }
+        return function () {
+            if (inputRef.current) {
+                inputRef.current.removeEventListener('input', checkOverflow);
+            }
+        };
+    }, [inputValue]);
+    var handleMouseEnter = function () {
+        setTooltipIsHovered(true);
+    };
+    var handleMouseLeave = function () {
+        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
+                                            ? {
+                                                borderRight: getBorderRight(),
+                                                borderTopRightRadius: 0,
+                                                borderBottomRightRadius: 0,
+                                            }
+                                            : {})), className: " ".concat(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) {
+                                            if (type === 'custom_select') {
+                                                setDropOpen(!dropOpen);
+                                                handleOpen(e);
+                                            }
+                                            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) &&
+                                            !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() }) }))] }))] }))] })));
+};
+exports.default = ReactAutoCompleteTableView;
+//# sourceMappingURL=ReactAutoCompleteTableView.js.map