react-core-ts 2.0.13 → 2.0.14

package/dist/ReactAutoCompleteTableView.js

@@ -69,36 +69,37 @@ 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.insideOpen, insideOpen = _g === void 0 ? false : _g, _h = _a.isClose, isClose = _h === void 0 ? true : _h, _j = _a.noLocalFilter, noLocalFilter = _j === void 0 ? false : _j, _k = _a.isStaticList, isStaticList = _k === void 0 ? false : _k, _l = _a.isCustomPlaceholder, isCustomPlaceholder = _l === void 0 ? false : _l, checkParams = _a.checkParams, width = _a.width, hasParentError = _a.hasParentError, fromPrefix = _a.fromPrefix, labelTitle = _a.labelTitle, _m = _a.isModern, isModern = _m === void 0 ? true : _m, _o = _a.size, size = _o === void 0 ? "md" : _o, _p = _a.dropdownMinWidth, dropdownMinWidth = _p === void 0 ? 200 : _p, _q = _a.tableView, tableView = _q === void 0 ? false : _q, _r = _a.additionalColumns, additionalColumns = _r === void 0 ? [] : _r;
-    var _s = (0, react_1.useState)((_b = value === null || value === void 0 ? void 0 : value.name) !== null && _b !== void 0 ? _b : ""), inputValue = _s[0], setInputValue = _s[1];
-    var _t = (0, react_1.useState)(false), isHovered = _t[0], setIsHovered = _t[1];
-    var _u = (0, react_1.useState)(false), isLoading = _u[0], setIsLoading = _u[1];
-    var _v = (0, react_1.useState)(false), dropOpen = _v[0], setDropOpen = _v[1];
-    var _w = (0, react_1.useState)(disabled), isDisabled = _w[0], setIsDisabled = _w[1];
-    var _x = (0, react_1.useState)(false), showClose = _x[0], setShowClose = _x[1];
-    var _y = (0, react_1.useState)(false), showToolTip = _y[0], setShowTooltip = _y[1];
-    var _z = (0, react_1.useState)(false), tooltipIsHovered = _z[0], setTooltipIsHovered = _z[1];
-    var _0 = (0, react_1.useState)([]), suggestions = _0[0], setSuggestions = _0[1];
+    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 _1 = (0, react_1.useState)(0), selectedIndex = _1[0], setSelectedIndex = _1[1];
+    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 _2 = (0, react_1.useState)({
+    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 = _2[0], setDropPosition = _2[1];
+    }), 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"
+                typeof mainString === 'string' &&
+                typeof subString === 'string'
                 ? mainString
                     .toString()
                     .toLowerCase()
@@ -108,21 +109,21 @@ var ReactAutoCompleteTableView = function (_a) {
         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") &&
+                ((checkArrayContains(checkParams, 'param1') &&
                     checkIncludesIfExists(param1, subString)) ||
-                    (checkArrayContains(checkParams, "param2") &&
+                    (checkArrayContains(checkParams, 'param2') &&
                         checkIncludesIfExists(param2, subString)) ||
-                    (checkArrayContains(checkParams, "param3") &&
+                    (checkArrayContains(checkParams, 'param3') &&
                         checkIncludesIfExists(param3, subString)) ||
-                    (checkArrayContains(checkParams, "param4") &&
+                    (checkArrayContains(checkParams, 'param4') &&
                         checkIncludesIfExists(param4, subString)))));
     };
     var getHeight = function () {
         switch (size) {
-            case "sm":
-                return " h-[34px] ";
+            case 'sm':
+                return ' h-[34px] ';
             default:
-                return " ";
+                return ' ';
         }
     };
     var handleChange = function (event) {
@@ -131,17 +132,17 @@ var ReactAutoCompleteTableView = function (_a) {
         setInputValue(value);
         handleValChange(value);
         if (!value) {
-            setInputValue("");
-            onChange({ id: undefined, name: "", from: 2 });
+            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") {
+        onChange({ id: undefined, name: '', from: 1 });
+        if (value.trim() === '' && type === 'auto_complete') {
             setSuggestions([]);
             if (autoFilter) {
-                handleDropData("*");
+                handleDropData('*');
             }
             else {
                 setDropOpen(false);
@@ -155,25 +156,26 @@ var ReactAutoCompleteTableView = function (_a) {
         }, 200);
     }, isStaticList ? 0 : 1000), []);
     var handleDropData = function (value) {
-        if (type === "auto_complete") {
+        if (type === 'auto_complete') {
             if (isStaticList) {
                 loadStaticData();
-                var filteredData_1 = value && value !== "*"
+                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
+            else {
                 handlePickSuggestions(value);
+            }
         }
-        else if ((type === "custom_select" || type === "custom_search_select") &&
+        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 !== "*"
+        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);
                 })
@@ -196,6 +198,9 @@ var ReactAutoCompleteTableView = function (_a) {
                     fetchedSuggestions = _a.sent();
                     setSuggestions(fetchedSuggestions);
                     setIsLoading(false);
+                    if (autoDropdown) {
+                        setRefetchData(true);
+                    }
                     return [3 /*break*/, 4];
                 case 3:
                     error_1 = _a.sent();
@@ -209,10 +214,10 @@ var ReactAutoCompleteTableView = function (_a) {
         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("*");
+            if (autoFilter && inputValue === '') {
+                handleValChange('*');
             }
-            else if ((type === "custom_select" || type === "custom_search_select") &&
+            else if ((type === 'custom_select' || type === 'custom_search_select') &&
                 data &&
                 (data === null || data === void 0 ? void 0 : data.length) > 0) {
                 handleDropData();
@@ -238,21 +243,25 @@ var ReactAutoCompleteTableView = function (_a) {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    if (!!data) return [3 /*break*/, 4];
+                    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);
-                    handlePickSuggestions("*");
-                    return [4 /*yield*/, (getData === null || getData === void 0 ? void 0 : getData("*"))];
+                    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();
@@ -263,9 +272,9 @@ var ReactAutoCompleteTableView = function (_a) {
         });
     }); };
     (0, react_1.useEffect)(function () {
-        document.addEventListener("click", handleClickOutside);
+        document.addEventListener('click', handleClickOutside);
         return function () {
-            document.removeEventListener("click", handleClickOutside);
+            document.removeEventListener('click', handleClickOutside);
         };
     }, []);
     (0, react_1.useEffect)(function () {
@@ -275,10 +284,10 @@ var ReactAutoCompleteTableView = function (_a) {
     }, [autoFocus]);
     var onInputFocus = function () {
         if (!isDisabled) {
-            if (autoFilter && inputValue === "") {
-                handleValChange("*");
+            if (autoFilter && inputValue === '') {
+                handleValChange('*');
             }
-            else if ((type === "custom_select" || type === "custom_search_select") &&
+            else if ((type === 'custom_select' || type === 'custom_search_select') &&
                 data &&
                 (data === null || data === void 0 ? void 0 : data.length) > 0) {
                 handleDropData();
@@ -291,20 +300,32 @@ var ReactAutoCompleteTableView = function (_a) {
     }, [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")
+        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) {
+        if (!suggestions || (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) === 0)
             handleDropData();
-            return;
+        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);
-            if (type !== "custom_select")
-                setInputValue("");
         }
     };
     var handleScroll = function () {
@@ -313,43 +334,46 @@ var ReactAutoCompleteTableView = function (_a) {
     (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");
+            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);
+                gridElement.addEventListener('scroll', handleScroll);
             });
-            window.addEventListener("resize", getDropPosition);
+            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");
+                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);
+                    gridElement.removeEventListener('scroll', handleScroll);
                 });
             };
         }
     }, [dropOpen]);
     var handleClear = function () {
         setDropOpen(false);
-        setInputValue("");
-        onChange({ id: undefined, name: "", from: 3 });
+        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 : "");
+        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 = "";
+        var errMsg = '';
         if (err.message) {
             errMsg = err === null || err === void 0 ? void 0 : err.message;
         }
@@ -364,44 +388,44 @@ var ReactAutoCompleteTableView = function (_a) {
     var generateClassName = function (type) {
         var className = propsClassName;
         switch (type) {
-            case "input":
+            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");
+                    ? '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";
+                        ' 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";
+                        ' text-grey-dark border-input-light focus:border-blue-navy  focus:outline-none  focus:ring-0';
                 }
                 className += getHeight();
                 break;
-            case "label":
+            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"
+                    ? '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");
+                        ? '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 ";
+                    className += ' text-error-light ';
                 }
                 else {
-                    className += " text-grey-dark peer-focus:text-blue-navy";
+                    className += ' text-grey-dark peer-focus:text-blue-navy';
                 }
                 break;
-            case "message":
-                className = " text-error-icon ";
+            case 'message':
+                className = ' text-error-icon ';
                 break;
-            case "adorement":
-                className += "  absolute right-0 adorement gap-1 flex items-center ";
+            case 'adorement':
+                className += '  absolute right-0 adorement gap-1 flex items-center ';
                 break;
             default:
                 break;
@@ -425,28 +449,29 @@ var ReactAutoCompleteTableView = function (_a) {
     // const getPosition = () => {
     //   return 'bottom'
     // }
-    var filteredData = inputValue !== "*" &&
-        inputValue !== "" &&
-        type !== "custom_select" &&
+    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 : "");
+            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") {
+        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 : "";
+            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;
@@ -458,18 +483,62 @@ var ReactAutoCompleteTableView = function (_a) {
             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: inputRect.left + window.scrollX,
+                left: left,
                 top: top_1,
                 bottom: bottom,
-                width: inputRect.width + dropdownMinWidth,
+                width: width_1,
             });
         }
         return undefined;
     };
-    var _3 = (0, react_1.useState)(false), showNoResults = _3[0], setShowNoResults = _3[1];
+    var _5 = (0, react_1.useState)(false), showNoResults = _5[0], setShowNoResults = _5[1];
     (0, react_1.useEffect)(function () {
-        if (inputValue &&
+        if ((inputValue || autoDropdown) &&
             (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) === 0 &&
             !isLoading &&
             timerRef.current === 1) {
@@ -485,14 +554,14 @@ var ReactAutoCompleteTableView = function (_a) {
         var handleKeyDown = function (e) {
             if (!dropOpen)
                 return;
-            var nextIndex = e.key === "ArrowDown"
+            var nextIndex = e.key === 'ArrowDown'
                 ? (selectedIndex + 1) % filteredData.length
-                : e.key === "ArrowUp"
+                : e.key === 'ArrowUp'
                     ? (selectedIndex - 1 + filteredData.length) % filteredData.length
                     : selectedIndex;
             switch (e.key) {
-                case "ArrowDown":
-                case "ArrowUp":
+                case 'ArrowDown':
+                case 'ArrowUp':
                     e.preventDefault();
                     // Update index first
                     setSelectedIndex(nextIndex);
@@ -514,11 +583,11 @@ var ReactAutoCompleteTableView = function (_a) {
                         }
                     });
                     break;
-                case "Enter":
+                case 'Enter':
                     e.preventDefault();
                     handleSuggestionClick(filteredData[selectedIndex], selectedIndex);
                     break;
-                case "Escape":
+                case 'Escape':
                     e.preventDefault();
                     setDropOpen(false);
                     break;
@@ -527,9 +596,9 @@ var ReactAutoCompleteTableView = function (_a) {
             }
         };
         if ((filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 && !isLoading) {
-            window.addEventListener("keydown", handleKeyDown);
+            window.addEventListener('keydown', handleKeyDown);
             return function () {
-                window.removeEventListener("keydown", handleKeyDown);
+                window.removeEventListener('keydown', handleKeyDown);
             };
         }
     }, [
@@ -541,9 +610,9 @@ var ReactAutoCompleteTableView = function (_a) {
         dropOpen,
     ]);
     var setDropDown = function () {
-        return (((filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 || showNoResults) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "autocomplete-suggections absolute bg-white shadow-gray-300 shadow-md border border-grey-light z-50 mt-9", style: dropPosition }, { 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
+        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
@@ -559,10 +628,9 @@ var ReactAutoCompleteTableView = function (_a) {
                                 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;
-                                var hasColumnsBefore = columnsBefore.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 = colIndex === columnsBefore.length - 1 && !hasColumnsAfter;
+                                            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];
@@ -591,7 +659,7 @@ var ReactAutoCompleteTableView = function (_a) {
     }, [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") &&
+            ((value === null || value === void 0 ? void 0 : value.id) || String(value === null || value === void 0 ? void 0 : value.id) === '0') &&
             !disabled &&
             !readOnly &&
             isClose;
@@ -605,7 +673,7 @@ var ReactAutoCompleteTableView = function (_a) {
             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() !== "") {
+                if (value_1.trim() !== '') {
                     setShowTooltip(scrollWidth > clientWidth + 2);
                 }
                 else {
@@ -614,12 +682,12 @@ var ReactAutoCompleteTableView = function (_a) {
             }
         };
         if (inputRef.current) {
-            inputRef.current.addEventListener("input", checkOverflow);
+            inputRef.current.addEventListener('input', checkOverflow);
             checkOverflow(); // Initial check
         }
         return function () {
             if (inputRef.current) {
-                inputRef.current.removeEventListener("input", checkOverflow);
+                inputRef.current.removeEventListener('input', checkOverflow);
             }
         };
     }, [inputValue]);
@@ -629,25 +697,28 @@ var ReactAutoCompleteTableView = function (_a) {
     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
+    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"
+                                            : {})), 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") {
+                                                : 'Type to search'
+                                            : placeholder !== null && placeholder !== void 0 ? placeholder : '--Select--', onFocus: onInputFocus, onClick: function (e) {
+                                            if (type === 'custom_select') {
                                                 setDropOpen(!dropOpen);
                                                 handleOpen(e);
                                             }
                                             else {
-                                                setDropOpen(!dropOpen);
+                                                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   " }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ ref: adorementRef, className: "".concat(generateClassName("adorement"), " qbs-autocomplete-adorement custom-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" && !disabled && !readOnly && ((0, jsx_runtime_1.jsx)("button", __assign({ disabled: disabled !== null && disabled !== void 0 ? disabled : readOnly, onClick: function (e) { return handleOpen(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 ? ((0, jsx_runtime_1.jsx)(icons_1.DropArrow, { uniqueDropArrowId: "drop-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() }) }))] }))] }))] })));
+                                        } }), 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