react-core-ts 3.0.0 → 4.0.1

package/dist/ReactAutoCompleteSuggections.js

@@ -1,71 +1,24 @@
 "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 __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");
+const jsx_runtime_1 = require("react/jsx-runtime");
 // NOTE: This file was renamed from ReactAutoCompleteNameCount.tsx
 // The implementation is unchanged; only the filename and exported component name differ.
-var react_1 = require("react");
-var Spinner_1 = __importDefault(require("./components/loader/Spinner"));
-var portal_1 = __importDefault(require("./components/portal"));
-var customIcons_1 = __importDefault(require("./components/customIcons"));
+const react_1 = require("react");
+const Spinner_1 = __importDefault(require("./components/loader/Spinner"));
+const portal_1 = __importDefault(require("./components/portal"));
+const customIcons_1 = __importDefault(require("./components/customIcons"));
+const getPosition_1 = require("./utilities/getPosition");
 /**
  * Simple suggestion item:
  * - No tooltip
  * - No truncation
  * - Text wraps to next line when long
  */
-var SuggestionItem = function (_a) {
-    var name = _a.name, count = _a.count, showCount = _a.showCount;
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "py-0.5 flex items-center justify-between gap-2 group relative" }, { children: [(0, jsx_runtime_1.jsx)("span", __assign({ className: "flex-1 whitespace-normal break-words" }, { children: name })), showCount && ((0, jsx_runtime_1.jsx)("span", __assign({ className: "ml-2 suggection-count flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full bg-orange-500 text-white text-[10px] font-medium flex-shrink-0" }, { children: count })))] })));
+const SuggestionItem = ({ name, count, showCount, }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "py-0.5 flex items-center justify-between gap-2 group relative", children: [(0, jsx_runtime_1.jsx)("span", { className: "flex-1 whitespace-normal break-words suggection-label", children: name }), showCount && ((0, jsx_runtime_1.jsx)("span", { className: "ml-2 suggection-count flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full bg-orange-500 text-white text-[10px] font-medium flex-shrink-0", children: count }))] }));
 };
 /**
  * Read‑only suggestion helper:
@@ -73,101 +26,146 @@ var SuggestionItem = function (_a) {
  * - Below the field we show unique names
  * - If a name is duplicated, show: "Name (count)"
  */
-var ModernAutoCompleteSuggections = function (_a) {
-    var name = _a.name, label = _a.label, id = _a.id, placeholder = _a.placeholder, data = _a.data, getData = _a.getData, value = _a.value, onChange = _a.onChange, _b = _a.countField, countField = _b === void 0 ? 'count' : _b, _c = _a.countProvided, countProvided = _c === void 0 ? false : _c, _d = _a.isModern, isModern = _d === void 0 ? true : _d, _e = _a.required, required = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? 'md' : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, propsClassName = _a.className, _h = _a.insideOpen, insideOpen = _h === void 0 ? false : _h, errors = _a.errors, labelTitle = _a.labelTitle, _j = _a.desc, desc = _j === void 0 ? 'name' : _j, _k = _a.descId, descId = _k === void 0 ? 'id' : _k;
-    var _l = (0, react_1.useState)(value !== null && value !== void 0 ? value : ''), inputValue = _l[0], setInputValue = _l[1];
-    var _m = (0, react_1.useState)(data !== null && data !== void 0 ? data : []), items = _m[0], setItems = _m[1];
-    var _o = (0, react_1.useState)(false), isLoading = _o[0], setIsLoading = _o[1];
-    var _p = (0, react_1.useState)(false), showDropdown = _p[0], setShowDropdown = _p[1];
-    var _q = (0, react_1.useState)(false), isHovered = _q[0], setIsHovered = _q[1];
-    var _r = (0, react_1.useState)({
+const ModernAutoCompleteSuggections = ({ name, label, id, placeholder, data, getData, value, onChange, countField = 'count', countProvided = false, isModern = true, required = false, size = 'md', disabled = false, className: propsClassName, insideOpen = false, errors, labelTitle, desc = 'name', descId = 'id', showWarningIcon = true, }) => {
+    const [inputValue, setInputValue] = (0, react_1.useState)(value !== null && value !== void 0 ? value : '');
+    const [debouncedInputValue, setDebouncedInputValue] = (0, react_1.useState)('');
+    const [items, setItems] = (0, react_1.useState)(data !== null && data !== void 0 ? data : []);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [showDropdown, setShowDropdown] = (0, react_1.useState)(false);
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const [dropPosition, setDropPosition] = (0, react_1.useState)({
         top: 0,
         left: 0,
         bottom: 0,
         right: 0,
-    }), dropPosition = _r[0], setDropPosition = _r[1];
-    var getDataRef = (0, react_1.useRef)(getData);
-    var _s = (0, react_1.useState)(false), hasTyped = _s[0], setHasTyped = _s[1];
-    var inputRef = (0, react_1.useRef)(null);
-    var adorementRef = (0, react_1.useRef)(null);
-    var containerRef = (0, react_1.useRef)(null);
+    });
+    const getDataRef = (0, react_1.useRef)(getData);
+    const [hasTyped, setHasTyped] = (0, react_1.useState)(false);
+    const inputRef = (0, react_1.useRef)(null);
+    const adorementRef = (0, react_1.useRef)(null);
+    const containerRef = (0, react_1.useRef)(null);
+    const dropdownContentRef = (0, react_1.useRef)(null);
+    const isExternalUpdateRef = (0, react_1.useRef)(false);
+    const previousDebouncedValueRef = (0, react_1.useRef)('');
     // keep latest getData in a ref so we don't re-trigger effects on every render
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         getDataRef.current = getData;
     }, [getData]);
-    // Keep internal state in sync when used as a controlled component
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (value !== undefined) {
-            setInputValue(value);
+            const valueStr = String(value !== null && value !== void 0 ? value : '');
+            const inputValueStr = String(inputValue !== null && inputValue !== void 0 ? inputValue : '');
+            if (valueStr !== inputValueStr) {
+                if (hasTyped) {
+                    const isExternalUpdate = !inputValueStr ||
+                        (!valueStr.startsWith(inputValueStr) && !inputValueStr.startsWith(valueStr));
+                    if (isExternalUpdate) {
+                        isExternalUpdateRef.current = true;
+                        setInputValue(valueStr);
+                        setDebouncedInputValue(valueStr);
+                        setHasTyped(false);
+                    }
+                }
+                else {
+                    // User hasn't typed yet, safe to sync from prop
+                    isExternalUpdateRef.current = true;
+                    setInputValue(valueStr);
+                    setDebouncedInputValue(valueStr);
+                }
+            }
         }
     }, [value]);
     // Sync external data prop
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (data) {
             setItems(data);
         }
     }, [data]);
-    // Load from getData only when user types some text (no initial preload)
-    (0, react_1.useEffect)(function () {
+    // Debounce inputValue so we don't call API on every keystroke
+    (0, react_1.useEffect)(() => {
+        if (!hasTyped)
+            return;
+        const handle = window.setTimeout(() => {
+            setDebouncedInputValue(inputValue);
+        }, 500); // 500ms debounce
+        return () => {
+            window.clearTimeout(handle);
+        };
+    }, [inputValue, hasTyped]);
+    // Load from getData only when user types some text (no initial preload),
+    // and only after debounce delay.
+    (0, react_1.useEffect)(() => {
         // Do not call API until the user has actually typed at least once
         if (!hasTyped)
             return;
-        var cancelled = false;
-        var query = inputValue.trim();
-        if (!getDataRef.current || query === '') {
-            // Clear items when input is cleared so dropdown also clears
+        let cancelled = false;
+        const query = debouncedInputValue.trim();
+        // Only call API when there is a source function AND the user has typed at least 2 chars.
+        // For shorter queries or no API, just fall back to local/static data.
+        if (!getDataRef.current || query === '' || query.length < 2) {
+            // Clear items when input is cleared or below threshold so dropdown also clears
             if (!cancelled) {
                 setItems(data !== null && data !== void 0 ? data : []);
                 setIsLoading(false);
             }
             return;
         }
-        var run = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var res, error_1;
+        const run = async () => {
             var _a;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        setIsLoading(true);
-                        _b.label = 1;
-                    case 1:
-                        _b.trys.push([1, 3, 4, 5]);
-                        return [4 /*yield*/, ((_a = getDataRef.current) === null || _a === void 0 ? void 0 : _a.call(getDataRef, query))];
-                    case 2:
-                        res = _b.sent();
-                        if (!cancelled && Array.isArray(res)) {
-                            setItems(res);
-                        }
-                        return [3 /*break*/, 5];
-                    case 3:
-                        error_1 = _b.sent();
-                        return [3 /*break*/, 5];
-                    case 4:
-                        if (!cancelled) {
-                            setIsLoading(false);
-                        }
-                        return [7 /*endfinally*/];
-                    case 5: return [2 /*return*/];
+            setIsLoading(true);
+            try {
+                const res = await ((_a = getDataRef.current) === null || _a === void 0 ? void 0 : _a.call(getDataRef, query));
+                if (!cancelled && Array.isArray(res)) {
+                    setItems(res);
                 }
-            });
-        }); };
+            }
+            catch (error) {
+                // Optionally log error
+            }
+            finally {
+                if (!cancelled) {
+                    setIsLoading(false);
+                }
+            }
+        };
         run();
-        return function () {
+        return () => {
             cancelled = true;
         };
-    }, [inputValue, hasTyped, data]);
+    }, [debouncedInputValue, data]);
+    // Notify parent via onChange when debounced value changes (only from user input)
+    (0, react_1.useEffect)(() => {
+        if (!hasTyped)
+            return;
+        if (!onChange)
+            return;
+        // Don't call onChange if the change came from external value prop update
+        if (isExternalUpdateRef.current) {
+            isExternalUpdateRef.current = false;
+            previousDebouncedValueRef.current = debouncedInputValue;
+            return;
+        }
+        const currentValue = debouncedInputValue.trim();
+        const previousValue = previousDebouncedValueRef.current.trim();
+        if (currentValue !== '' || previousValue !== '') {
+            onChange(debouncedInputValue);
+        }
+        // Update previous value ref
+        previousDebouncedValueRef.current = debouncedInputValue;
+    }, [debouncedInputValue, onChange, hasTyped]);
     // Group by desc field and compute counts
-    var grouped = (0, react_1.useMemo)(function () {
-        var map = new Map();
-        items.forEach(function (item) {
-            var n = item === null || item === void 0 ? void 0 : item[desc];
+    const grouped = (0, react_1.useMemo)(() => {
+        const map = new Map();
+        items.forEach((item) => {
+            const n = item === null || item === void 0 ? void 0 : item[desc];
             if (!n)
                 return;
             if (countProvided) {
                 // API provides count - use it directly
-                var apiCount = item === null || item === void 0 ? void 0 : item[countField];
-                var countValue = typeof apiCount === 'number' ? apiCount : typeof apiCount === 'string' ? Number(apiCount) : 0;
-                var existing = map.get(n);
+                const apiCount = item === null || item === void 0 ? void 0 : item[countField];
+                const countValue = typeof apiCount === 'number' ? apiCount : typeof apiCount === 'string' ? Number(apiCount) : 0;
+                const existing = map.get(n);
                 if (existing) {
                     // Sum counts for items with same name
                     existing.count += countValue;
@@ -178,7 +176,7 @@ var ModernAutoCompleteSuggections = function (_a) {
             }
             else {
                 // API doesn't provide count - group and count duplicates
-                var existing = map.get(n);
+                const existing = map.get(n);
                 if (existing) {
                     existing.count += 1;
                 }
@@ -189,57 +187,94 @@ var ModernAutoCompleteSuggections = function (_a) {
         });
         return Array.from(map.values());
     }, [items, countField, desc, countProvided]);
+    const hasExactMatch = (0, react_1.useMemo)(() => {
+        const term = inputValue.trim().toLowerCase();
+        if (!term)
+            return false;
+        return grouped.some((g) => g.name.trim().toLowerCase() === term);
+    }, [grouped, inputValue]);
+    const showTick = (0, react_1.useMemo)(() => {
+        return hasTyped && !isFocused && inputValue.trim() !== '' && !hasExactMatch;
+    }, [hasTyped, isFocused, inputValue, hasExactMatch]);
     // Filter based on what user typed
-    var visible = (0, react_1.useMemo)(function () {
-        var term = inputValue.trim().toLowerCase();
+    const visible = (0, react_1.useMemo)(() => {
+        const term = inputValue.trim().toLowerCase();
         if (!term || !hasTyped)
             return [];
-        return grouped.filter(function (g) { return g.name.toLowerCase().includes(term); });
+        return grouped.filter((g) => g.name.toLowerCase().includes(term));
     }, [grouped, inputValue, hasTyped]);
-    // Update dropdown visibility based on visible items
-    (0, react_1.useEffect)(function () {
-        setShowDropdown(visible.length > 0);
-    }, [visible.length]);
+    const effectiveVisible = (0, react_1.useMemo)(() => {
+        if (!hasTyped && items.length > 0) {
+            return grouped;
+        }
+        return visible;
+    }, [hasTyped, items.length, grouped, visible]);
+    // Update dropdown visibility based on visible items from typing
+    // Only auto-update when user has typed; otherwise let onFocus handle it
+    (0, react_1.useEffect)(() => {
+        if (hasTyped) {
+            setShowDropdown(visible.length > 0);
+        }
+    }, [visible.length, hasTyped]);
+    // Show dropdown when data loads and input is focused (prevents flicker)
+    (0, react_1.useEffect)(() => {
+        if (isFocused && !hasTyped && effectiveVisible.length > 0) {
+            // Calculate position before showing dropdown to prevent flicker
+            if (!insideOpen && (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current)) {
+                getDropPosition();
+            }
+            setShowDropdown(true);
+        }
+    }, [isFocused, hasTyped, effectiveVisible.length, insideOpen]);
     // Handle click outside to close dropdown
-    var handleClickOutside = function (event) {
+    const handleClickOutside = (event) => {
         if (containerRef.current &&
             !containerRef.current.contains(event.target)) {
             setShowDropdown(false);
         }
     };
-    // Handle scroll to close dropdown
-    var handleScroll = function () {
+    // Handle scroll to close dropdown (only for scrolls outside the component/dropdown)
+    const handleScroll = (event) => {
+        const scrollTarget = event.target;
+        if (scrollTarget &&
+            ((containerRef.current &&
+                containerRef.current.contains(scrollTarget)) ||
+                (dropdownContentRef.current &&
+                    dropdownContentRef.current.contains(scrollTarget)))) {
+            // Ignore scrolls inside the autocomplete container or the dropdown content
+            return;
+        }
         setShowDropdown(false);
     };
     // Attach event listeners for click outside and scroll
-    (0, react_1.useEffect)(function () {
-        if (showDropdown) {
-            document.addEventListener('click', handleClickOutside);
-            window.addEventListener('scroll', handleScroll);
-            var mainElement_1 = document.querySelector('main');
-            mainElement_1 === null || mainElement_1 === void 0 ? void 0 : mainElement_1.addEventListener('scroll', handleScroll);
-            var gridElements_1 = document.querySelectorAll('.k-grid-content, .overflow-auto, .overflow-y-auto, .overflow-x-auto');
-            gridElements_1.forEach(function (gridElement) {
-                gridElement.addEventListener('scroll', handleScroll);
-            });
-            return function () {
-                document.removeEventListener('click', handleClickOutside);
-                window.removeEventListener('scroll', handleScroll);
-                mainElement_1 === null || mainElement_1 === void 0 ? void 0 : mainElement_1.removeEventListener('scroll', handleScroll);
-                gridElements_1.forEach(function (gridElement) {
-                    gridElement.removeEventListener('scroll', handleScroll);
-                });
-            };
+    (0, react_1.useEffect)(() => {
+        if (!showDropdown) {
+            return;
         }
+        document.addEventListener('click', handleClickOutside);
+        const scrollableDivs = document.querySelectorAll('div[style*="overflow"], .overflow-auto, .overflow-y-auto, .overflow-x-auto');
+        window.addEventListener('scroll', handleScroll);
+        document.addEventListener('scroll', handleScroll, true);
+        scrollableDivs.forEach((div) => {
+            div.addEventListener('scroll', handleScroll);
+        });
+        return () => {
+            document.removeEventListener('click', handleClickOutside);
+            window.removeEventListener('scroll', handleScroll);
+            document.removeEventListener('scroll', handleScroll, true);
+            scrollableDivs.forEach((div) => {
+                div.removeEventListener('scroll', handleScroll);
+            });
+        };
     }, [showDropdown]);
-    var checkIsEmptyField = function () {
+    const checkIsEmptyField = () => {
         var _a;
         if (inputValue === undefined)
             return true;
         else
             return ((_a = inputValue === null || inputValue === void 0 ? void 0 : inputValue.toString().length) !== null && _a !== void 0 ? _a : 0) <= 0 ? true : false;
     };
-    var getHeight = function () {
+    const getHeight = () => {
         switch (size) {
             case 'sm':
                 return ' h-[34px] ';
@@ -247,9 +282,9 @@ var ModernAutoCompleteSuggections = function (_a) {
                 return ' ';
         }
     };
-    var getErrors = function (err) {
+    const getErrors = (err) => {
         var _a, _b, _c, _d;
-        var errMsg = '';
+        let errMsg = '';
         if (err.message) {
             errMsg = err === null || err === void 0 ? void 0 : err.message;
         }
@@ -261,23 +296,23 @@ var ModernAutoCompleteSuggections = function (_a) {
         }
         return errMsg;
     };
-    var handleError = function (data) {
+    const handleError = (data) => {
         var _a;
         if (getErrors(data[name]) === 'required' ||
             getErrors(data[name]) === 'Required') {
-            return "".concat(label !== null && label !== void 0 ? label : labelTitle, " is ").concat(getErrors(data[name]));
+            return `${label !== null && label !== void 0 ? label : labelTitle} is ${getErrors(data[name])}`;
         }
         else {
             return (_a = getErrors(data[name])) !== null && _a !== void 0 ? _a : '';
         }
     };
-    var generateClassName = function (type) {
-        var className = propsClassName || '';
+    const generateClassName = (type) => {
+        let className = propsClassName || '';
         switch (type) {
             case 'input':
-                className += " block text-common text-input-text font-normal px-3.5 w-full text-sm text-gray-900 bg-transparent  border  appearance-none    peer h-10 rounded-[4px] disabled:text-input-disabled bg-white disabled:bg-disabled ".concat(label && isModern
+                className += ` block text-common text-input-text font-normal px-3.5 w-full text-sm text-gray-900 bg-transparent  border  appearance-none    peer h-10 rounded-[4px] disabled:text-input-disabled bg-white disabled:bg-disabled ${label && isModern
                     ? 'placeholder-transparent'
-                    : 'focus:placeholder-grey-secondary placeholder-input-label', " focus:placeholder-grey-secondary");
+                    : 'focus:placeholder-grey-secondary placeholder-input-label'} focus:placeholder-grey-secondary`;
                 if (errors && errors[name]) {
                     className +=
                         ' border-[#FDA29B] focus:border-error-[#FDA29B] focus:ring-[#FDA29B] focus:ring-3 focus:outline-[#FDA29B] input-outline';
@@ -289,17 +324,19 @@ var ModernAutoCompleteSuggections = function (_a) {
                 className += getHeight();
                 break;
             case 'label':
-                className += " flex modern-input-label-truncate  peer-focus:modern-input-peer-focus-label-size \n          ".concat(disabled
+                className += ` flex modern-input-label-truncate  peer-focus:modern-input-peer-focus-label-size 
+          ${disabled
                     ? 'cursor-pointer'
-                    : 'cursor-text peer-focus:cursor-pointer', " ").concat(disabled && !checkIsEmptyField()
+                    : 'cursor-text peer-focus:cursor-pointer'} ${disabled && !checkIsEmptyField()
                     ? 'disabled-input-label-bg'
                     : !disabled || !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(disabled
+                        : ''} 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 ${disabled
                     ? 'cursor-pointer'
-                    : 'cursor-text peer-focus:cursor-pointer', "\n           ").concat(checkIsEmptyField()
+                    : 'cursor-text peer-focus:cursor-pointer'}
+           ${checkIsEmptyField()
                     ? 'modern-input-label-size'
-                    : 'modern-input-peer-focus-label-size');
+                    : 'modern-input-peer-focus-label-size'}`;
                 if (errors && errors[name]) {
                     className += ' text-error-light ';
                 }
@@ -310,6 +347,9 @@ var ModernAutoCompleteSuggections = function (_a) {
             case 'message':
                 className = ' text-error-icon ';
                 break;
+            case 'warning':
+                className = ' text-warning-icon ';
+                break;
             case 'adorement':
                 className += '  absolute right-0 adorement gap-1 flex items-center ';
                 break;
@@ -318,62 +358,86 @@ var ModernAutoCompleteSuggections = function (_a) {
         }
         return className;
     };
-    var getInnerWidth = function () {
-        var innerwidth = adorementRef.current
+    const getInnerWidth = () => {
+        const innerwidth = adorementRef.current
             ? adorementRef.current.offsetWidth
             : 0;
         return innerwidth;
     };
-    var onLabelClick = function () {
+    const onLabelClick = () => {
         var _a;
         if (!disabled) {
             (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     };
-    var getDropPosition = function () {
+    const getDropPosition = () => {
         if (!insideOpen && (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current)) {
-            var dropdownHeight = 200; // Assume the height of the dropdown is 200px, adjust as needed
-            var inputRect = inputRef.current.getBoundingClientRect();
-            var spaceBelow = window.innerHeight - inputRect.bottom;
-            var spaceAbove = inputRect.top;
-            var top_1;
-            var bottom = void 0;
+            const dropdownHeight = 200; // Assume the height of the dropdown is 200px, adjust as needed
+            const inputRect = inputRef.current.getBoundingClientRect();
+            const spaceBelow = window.innerHeight - inputRect.bottom;
+            const spaceAbove = inputRect.top;
+            let top;
+            let bottom;
             if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
                 // Show above if not enough space below
                 bottom = window.innerHeight - inputRect.top + 2;
             }
             else {
                 // Show below (default)
-                top_1 = inputRect.bottom + 2;
+                top = inputRect.bottom + 2;
             }
             setDropPosition({
                 position: 'fixed',
                 left: inputRect.left,
-                top: top_1,
-                bottom: bottom,
+                top,
+                bottom,
                 width: inputRect.width,
             });
         }
         return undefined;
     };
     // Calculate dropdown position when it opens
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (showDropdown && !insideOpen) {
             window.addEventListener('resize', getDropPosition);
             getDropPosition();
-            return function () {
+            return () => {
                 window.removeEventListener('resize', getDropPosition);
             };
         }
     }, [showDropdown, insideOpen]);
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ ref: containerRef, className: "flex flex-col gap-1 autocomplete-with-suggection ".concat(propsClassName || '') }, { 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), " "] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "flex relative w-full" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "relative w-full", onMouseEnter: function () { }, onMouseLeave: function () { } }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "text", id: id ? "custom-autocomplete-".concat(id) : "custom-autocomplete-".concat(name), name: name, value: inputValue ? inputValue : '', ref: inputRef, disabled: disabled, onChange: function (e) {
-                                            var val = e.target.value;
+    (0, react_1.useEffect)(() => {
+        (0, getPosition_1.applyPositionClass)(containerRef, isHovered);
+        setShowDropdown(false);
+    }, [isHovered]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: `flex flex-col gap-1 autocomplete-with-suggection ${propsClassName || ''} ${effectiveVisible.length > 0 ? 'suggection-warning-container' : ''} ${showTick && !isLoading ? 'suggection-okey-container' : ''}`, children: [label && !isModern && ((0, jsx_runtime_1.jsx)("div", { className: "mb-3", children: (0, jsx_runtime_1.jsxs)("label", { className: `text-xs font-medium`, children: [label, required ? (0, jsx_runtime_1.jsx)("span", { className: "text-error", children: " *" }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] }) })), (0, jsx_runtime_1.jsxs)("div", { className: "tooltip-container", children: [isHovered && errors && errors[name] && ((0, jsx_runtime_1.jsxs)("span", { className: "tooltip", children: [handleError(errors), " "] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex relative w-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative w-full", onMouseEnter: () => { }, onMouseLeave: () => { }, children: [(0, jsx_runtime_1.jsx)("input", { type: "text", id: id ? `custom-autocomplete-${id}` : `custom-autocomplete-${name}`, name: name, value: inputValue ? inputValue : '', ref: inputRef, disabled: disabled, onFocus: () => {
+                                            setIsFocused(true);
+                                            // Calculate position before showing dropdown to prevent flicker
+                                            if (!insideOpen && (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current)) {
+                                                getDropPosition();
+                                            }
+                                            // show suggestions when the field gains focus.
+                                            if (!disabled && effectiveVisible.length > 0) {
+                                                setShowDropdown(true);
+                                            }
+                                        }, onBlur: () => {
+                                            setIsFocused(false);
+                                        }, onChange: (e) => {
+                                            const val = e.target.value;
+                                            isExternalUpdateRef.current = false;
                                             setInputValue(val);
-                                            setHasTyped(true);
-                                            onChange === null || onChange === void 0 ? void 0 : onChange(val);
-                                        }, onBlur: function () { }, placeholder: placeholder, autoComplete: "off", "data-testid": "custom-autocomplete-suggestions", "aria-describedby": id, style: {
+                                            const isEmpty = val.trim() === '';
+                                            setHasTyped(!isEmpty);
+                                            if (isEmpty) {
+                                                // Handle "select all + backspace" consistently as a reset state.
+                                                setDebouncedInputValue('');
+                                                previousDebouncedValueRef.current = '';
+                                                setItems(data !== null && data !== void 0 ? data : []);
+                                                onChange === null || onChange === void 0 ? void 0 : onChange('');
+                                            }
+                                        }, placeholder: placeholder, autoComplete: "off", "data-testid": "custom-autocomplete-suggestions", "aria-describedby": id, style: {
                                             paddingRight: getInnerWidth(),
-                                        }, className: " ".concat(generateClassName('input')) }), isModern && ((0, jsx_runtime_1.jsxs)("label", __assign({ htmlFor: id !== null && id !== void 0 ? id : name, 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: [isLoading && (0, jsx_runtime_1.jsx)(Spinner_1.default, {}), 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" }) })))] })) }))] }))] })), showDropdown && visible.length > 0 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: insideOpen ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "suggection-list" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "bg-white border border-grey-light shadow-gray-300 shadow-md rounded-sm max-h-40 overflow-auto text-[11px] text-gray-700 px-3.5 py-1.5" }, { children: visible.map(function (g) { return ((0, jsx_runtime_1.jsx)(SuggestionItem, { name: g.name, count: g.count, showCount: g.count > 0 }, g.name)); }) })) }))) : ((0, jsx_runtime_1.jsx)(portal_1.default, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "autocomplete-suggections suggection-list bg-white shadow-gray-300 shadow-md border border-grey-light z-50", style: dropPosition }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "h-auto max-h-40 overflow-auto w-full py-1.5" }, { children: visible.map(function (g) { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "px-3.5 text-[11px] text-gray-700" }, { children: (0, jsx_runtime_1.jsx)(SuggestionItem, { name: g.name, count: g.count, showCount: g.count > -1 }) }), g.name)); }) })) })) })) }))] })));
+                                        }, className: ` ${generateClassName('input')}` }), isModern && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: id !== null && id !== void 0 ? id : name, onClick: () => onLabelClick(), className: generateClassName('label'), children: [label ? (0, jsx_runtime_1.jsx)("span", { className: "truncate", children: label }) : '', required ? (0, jsx_runtime_1.jsx)("span", { className: "text-error", children: " *" }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center", children: (0, jsx_runtime_1.jsxs)("div", { ref: adorementRef, className: `${generateClassName('adorement')} qbs-autocomplete-adorement custom-dorpdown-adorement mr-[1px] ${isLoading ? 'bg-white' : ''}`, children: [isLoading && (0, jsx_runtime_1.jsx)(Spinner_1.default, {}), errors && errors[name] && ((0, jsx_runtime_1.jsx)("div", { className: ` text-error-label relative cursor-pointer ${generateClassName('message')}`, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: (0, jsx_runtime_1.jsx)(customIcons_1.default, { name: "alert", type: "medium" }) })), showWarningIcon && effectiveVisible.length > 0 && !showTick && !isLoading && ((0, jsx_runtime_1.jsx)("div", { className: `text-warning-label relative  mr-1 ${generateClassName('warning')}`, children: (0, jsx_runtime_1.jsx)(customIcons_1.default, { name: "alert", type: "medium" }) })), showTick && !isLoading && ((0, jsx_runtime_1.jsx)("div", { className: "text-tick-label relative mr-1", children: (0, jsx_runtime_1.jsx)(customIcons_1.default, { name: "check_mark", type: "medium", className: "text-green-500" }) }))] }) })] })] }), showDropdown && effectiveVisible.length > 0 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: insideOpen ? ((0, jsx_runtime_1.jsx)("div", { className: "suggection-list", children: (0, jsx_runtime_1.jsx)("div", { ref: dropdownContentRef, className: "bg-white border border-grey-light shadow-gray-300 shadow-md rounded-sm max-h-40 overflow-auto text-[11px] text-gray-700 px-3.5 py-1.5", children: effectiveVisible.map((g) => ((0, jsx_runtime_1.jsx)(SuggestionItem, { name: g.name, count: g.count, showCount: g.count > 0 }, g.name))) }) })) : ((0, jsx_runtime_1.jsx)(portal_1.default, { children: (0, jsx_runtime_1.jsx)("div", { ref: dropdownContentRef, className: "autocomplete-suggections autosuggection-list suggection-list bg-white shadow-gray-300 shadow-md border border-grey-light z-50", style: dropPosition, children: (0, jsx_runtime_1.jsx)("div", { className: "h-auto max-h-40 overflow-auto w-full py-1.5", children: effectiveVisible.map((g) => ((0, jsx_runtime_1.jsx)("div", { className: "px-3.5 text-gray-700 suggection-item", children: (0, jsx_runtime_1.jsx)(SuggestionItem, { name: g.name, count: g.count, showCount: g.count > 0 }) }, g.name))) }) }) })) }))] }));
 };
 exports.default = ModernAutoCompleteSuggections;
 //# sourceMappingURL=ReactAutoCompleteSuggections.js.map