react-restyle-components 0.4.39 → 0.4.40

package/lib/src/core-components/src/components/AutoComplete/autocomplete/autocomplete.js

@@ -1,4 +1,273 @@
-"use strict";import{jsx as f,Fragment as Se,jsxs as j}from"react/jsx-runtime";import{useState as R,useRef as D,useEffect as L,useCallback as h}from"react";import{Icon as z}from"../../Icon/Icon";import e from"../../../tc.module.css";import{cn as d}from"../../../utils";const ve=34;export const Autocomplete=({value:i="",onValueChange:O,options:o=[],filterConfig:ne={},displayConfig:ie={},keyboardConfig:le={},uiConfig:se={},hasError:k=!1,disabled:w=!1,name:oe,className:ce,style:ae,inputClassName:fe,onInputValueChange:H,onOpen:y,onClose:u,onSelect:M,autoFocus:G=!1})=>{const{enabled:q=!0,caseSensitive:_=!1,filterFn:K,minCharacters:A=0}=ne,{renderOption:B,renderEmptyState:J,highlightActive:C=!0,activeOptionClassName:ue,optionClassName:de}=ie,{enabled:P=!0,selectKeys:Q=["Enter"],closeKeys:X=["Escape"],enterToSelect:Z=!0,escapeToClose:V=!0}=le,{placeholder:me="Search...",emptyStateMessage:ge="Not Found Result!!",itemHeight:U=ve,maxHeight:he,zIndex:pe=999,showOnFocus:ee=!0,showOnClick:te=!0,autoSelectFirst:re=!0}=se,m=h(t=>typeof t=="string"?t:t.label,[]),T=h(t=>typeof t=="string"?t:String(t.value),[]),Ne=h(()=>{if(!i||o.length===0)return 0;const t=o.findIndex(r=>T(r)===i||m(r)===i);return t!==-1?t:0},[i,o,T,m]),[c,I]=R(()=>{if(!i||o.length===0)return 0;const t=o.findIndex(r=>(typeof r=="string"?r:String(r.value))===i||(typeof r=="string"?r:r.label)===i);return t!==-1?t:0}),[a,S]=R(o),[l,b]=R(!1),[g,v]=R(i),E=D(null),W=D(null),Y=D(null),$=D(!1),N=D(null),p=h(t=>{if(!q||t.length===0&&A===0)return o;if(t.length<A)return A===0?o:[];if(K)return o.filter(n=>K(n,t));const r=_?t.trim():t.trim().toLowerCase();return r.length===0?o:o.filter(n=>{const s=m(n);return(_?s.trim():s.trim().toLowerCase()).includes(r)})},[o,q,_,K,A,m]),xe=h(t=>{const r=t.target.value;$.current=!0,N.current&&clearTimeout(N.current),N.current=setTimeout(()=>{$.current=!1},300),H&&H(r),v(r);const n=p(r);S(n),I((n.length>0,0)),(n.length>0||r.length>0)&&b(!0)},[p,H]),F=h((t,r)=>{const n=m(t);b(!1),I(0),S([]),v(n),O(t),M&&M(t),u&&u()},[O,M,u]),ye=h(t=>{const r=parseInt(t.currentTarget.getAttribute("data-index")||"0",10),n=a[r];n&&F(n,r)},[a,F]),be=h(t=>{if(!P)return;const r=t.key,n=t.keyCode;if(n===38||r==="ArrowUp"){if(t.preventDefault(),c>0){const s=c-1,x=a[s];I(s),v(m(x)),W.current?.scroll({top:U*s,behavior:"smooth"})}return}if(n===40||r==="ArrowDown"){if(t.preventDefault(),c<a.length-1){const s=c+1,x=a[s];I(s),v(m(x)),W.current?.scroll({top:U*s,behavior:"smooth"})}return}if((n===13||r==="Enter")&&Z){if(t.preventDefault(),a.length>0&&c>=0){const s=a[c];F(s,c)}return}if((n===27||r==="Escape")&&V){t.preventDefault(),b(!1),u&&u();return}if(Q.includes(r)&&a.length>0&&c>=0){t.preventDefault();const s=a[c];F(s,c)}X.includes(r)&&(t.preventDefault(),b(!1),u&&u())},[P,c,a,U,Z,V,Q,X,F,u]),we=h(()=>{if(ee&&!l){const t=p(g);S(t),b(!0),y&&y()}},[ee,l,y,p,g]),Ie=h(()=>{if(te&&!l){const t=p(g);S(t),b(!0),y&&y()}},[te,l,y,p,g]),ke=h(()=>{if(!w)if(l)b(!1),u&&u();else{const t=p(g);S(t),b(!0),E.current?.focus(),y&&y()}},[w,l,y,u,p,g]),Te=()=>l?j("div",{className:d(e.absolute,e["w-full"],e["rounded-lg"],e["bg-white"],e.border,e["border-gray-200"],e["shadow-lg"],e["overflow-hidden"]),style:{position:"absolute",top:"calc(100% + 0.5rem)",left:0,right:0,margin:0,padding:0,zIndex:pe,animation:"fadeIn 0.15s ease-out",transformOrigin:"top"},children:[f("style",{children:`
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { Icon } from '../../Icon/Icon';
+import s from '../../../tc.module.css';
+import { cn } from '../../../utils';
+const DEFAULT_ITEM_HEIGHT = 34;
+export const Autocomplete = ({ value = '', onValueChange, options = [], filterConfig = {}, displayConfig = {}, keyboardConfig = {}, uiConfig = {}, hasError = false, disabled = false, name, className, style, inputClassName, onInputValueChange, onOpen, onClose, onSelect, autoFocus = false, }) => {
+    // Merge configs with defaults
+    const { enabled: filterEnabled = true, caseSensitive = false, filterFn, minCharacters = 0, } = filterConfig;
+    const { renderOption, renderEmptyState, highlightActive = true, activeOptionClassName, optionClassName, } = displayConfig;
+    const { enabled: keyboardEnabled = true, selectKeys = ['Enter'], closeKeys = ['Escape'], enterToSelect = true, escapeToClose = true, } = keyboardConfig;
+    const { placeholder = 'Search...', emptyStateMessage = 'Not Found Result!!', itemHeight = DEFAULT_ITEM_HEIGHT, maxHeight, zIndex = 999, showOnFocus = true, showOnClick = true, autoSelectFirst = true, } = uiConfig;
+    // Helper to get option label (moved outside to avoid dependency issues)
+    const getOptionLabel = useCallback((option) => {
+        return typeof option === 'string' ? option : option.label;
+    }, []);
+    // Helper to get option value (moved outside to avoid dependency issues)
+    const getOptionValue = useCallback((option) => {
+        return typeof option === 'string' ? option : String(option.value);
+    }, []);
+    // Find initial active option index
+    const getInitialActiveIndex = useCallback(() => {
+        if (!value || options.length === 0)
+            return 0;
+        const index = options.findIndex((opt) => getOptionValue(opt) === value || getOptionLabel(opt) === value);
+        return index !== -1 ? index : 0;
+    }, [value, options, getOptionValue, getOptionLabel]);
+    const [activeOption, setActiveOption] = useState(() => {
+        if (!value || options.length === 0)
+            return 0;
+        const index = options.findIndex((opt) => (typeof opt === 'string' ? opt : String(opt.value)) === value ||
+            (typeof opt === 'string' ? opt : opt.label) === value);
+        return index !== -1 ? index : 0;
+    });
+    // Initialize filtered options - will be updated by useEffect
+    const [filteredOptions, setFilteredOptions] = useState(options);
+    const [shouldShowList, setShouldShowList] = useState(false);
+    const [searchValue, setSearchValue] = useState(value);
+    const inputRef = useRef(null);
+    const listRef = useRef(null);
+    const wrapperRef = useRef(null);
+    // Track if user is actively typing to prevent value prop from overwriting input
+    const isTypingRef = useRef(false);
+    const typingTimeoutRef = useRef(null);
+    // Filter function
+    const filterOptions = useCallback((searchValue) => {
+        if (!filterEnabled)
+            return options;
+        // If search is empty and minCharacters is 0, show all options
+        if (searchValue.length === 0 && minCharacters === 0)
+            return options;
+        // If search length is less than minCharacters, return empty array or all options
+        if (searchValue.length < minCharacters) {
+            return minCharacters === 0 ? options : [];
+        }
+        // Use custom filter function if provided
+        if (filterFn) {
+            return options.filter((option) => filterFn(option, searchValue));
+        }
+        // Default filtering: case-insensitive substring match
+        const lowerSearch = caseSensitive
+            ? searchValue.trim()
+            : searchValue.trim().toLowerCase();
+        if (lowerSearch.length === 0)
+            return options;
+        return options.filter((option) => {
+            const label = getOptionLabel(option);
+            const matchText = caseSensitive
+                ? label.trim()
+                : label.trim().toLowerCase();
+            return matchText.includes(lowerSearch);
+        });
+    }, [
+        options,
+        filterEnabled,
+        caseSensitive,
+        filterFn,
+        minCharacters,
+        getOptionLabel,
+    ]);
+    const onInputChange = useCallback((event) => {
+        const input = event.target.value;
+        // Mark that user is typing
+        isTypingRef.current = true;
+        // Clear existing timeout
+        if (typingTimeoutRef.current) {
+            clearTimeout(typingTimeoutRef.current);
+        }
+        // Reset typing flag after user stops typing (300ms)
+        typingTimeoutRef.current = setTimeout(() => {
+            isTypingRef.current = false;
+        }, 300);
+        // Call onInputValueChange callback
+        if (onInputValueChange) {
+            onInputValueChange(input);
+        }
+        // Update search value immediately for responsive UI
+        setSearchValue(input);
+        // Filter options
+        const filtered = filterOptions(input);
+        setFilteredOptions(filtered);
+        // Reset active option to first item or 0
+        setActiveOption(filtered.length > 0 ? 0 : 0);
+        // Show list if there are filtered options or if input is not empty
+        if (filtered.length > 0 || input.length > 0) {
+            setShouldShowList(true);
+        }
+        // Don't auto-select when user is typing - only update the input value
+        // Auto-select should only happen on initial load or when dropdown opens
+    }, [filterOptions, onInputValueChange]);
+    const handleOptionSelect = useCallback((option, index) => {
+        const label = getOptionLabel(option);
+        setShouldShowList(false);
+        setActiveOption(0);
+        setFilteredOptions([]);
+        setSearchValue(label);
+        onValueChange(option);
+        if (onSelect) {
+            onSelect(option);
+        }
+        if (onClose) {
+            onClose();
+        }
+    }, [onValueChange, onSelect, onClose]);
+    const onOptionClick = useCallback((event) => {
+        const index = parseInt(event.currentTarget.getAttribute('data-index') || '0', 10);
+        const option = filteredOptions[index];
+        if (option) {
+            handleOptionSelect(option, index);
+        }
+    }, [filteredOptions, handleOptionSelect]);
+    const onKeyDown = useCallback((event) => {
+        if (!keyboardEnabled)
+            return;
+        const key = event.key;
+        const keyCode = event.keyCode;
+        // Arrow Up
+        if (keyCode === 38 || key === 'ArrowUp') {
+            event.preventDefault();
+            if (activeOption > 0) {
+                const newIndex = activeOption - 1;
+                const option = filteredOptions[newIndex];
+                setActiveOption(newIndex);
+                setSearchValue(getOptionLabel(option));
+                listRef.current?.scroll({
+                    top: itemHeight * newIndex,
+                    behavior: 'smooth',
+                });
+            }
+            return;
+        }
+        // Arrow Down
+        if (keyCode === 40 || key === 'ArrowDown') {
+            event.preventDefault();
+            if (activeOption < filteredOptions.length - 1) {
+                const newIndex = activeOption + 1;
+                const option = filteredOptions[newIndex];
+                setActiveOption(newIndex);
+                setSearchValue(getOptionLabel(option));
+                listRef.current?.scroll({
+                    top: itemHeight * newIndex,
+                    behavior: 'smooth',
+                });
+            }
+            return;
+        }
+        // Enter to select
+        if ((keyCode === 13 || key === 'Enter') && enterToSelect) {
+            event.preventDefault();
+            if (filteredOptions.length > 0 && activeOption >= 0) {
+                const option = filteredOptions[activeOption];
+                handleOptionSelect(option, activeOption);
+            }
+            return;
+        }
+        // Escape to close
+        if ((keyCode === 27 || key === 'Escape') && escapeToClose) {
+            event.preventDefault();
+            setShouldShowList(false);
+            if (onClose) {
+                onClose();
+            }
+            return;
+        }
+        // Other select keys
+        if (selectKeys.includes(key) &&
+            filteredOptions.length > 0 &&
+            activeOption >= 0) {
+            event.preventDefault();
+            const option = filteredOptions[activeOption];
+            handleOptionSelect(option, activeOption);
+        }
+        // Close keys
+        if (closeKeys.includes(key)) {
+            event.preventDefault();
+            setShouldShowList(false);
+            if (onClose) {
+                onClose();
+            }
+        }
+    }, [
+        keyboardEnabled,
+        activeOption,
+        filteredOptions,
+        itemHeight,
+        enterToSelect,
+        escapeToClose,
+        selectKeys,
+        closeKeys,
+        handleOptionSelect,
+        onClose,
+    ]);
+    const handleInputFocus = useCallback(() => {
+        if (showOnFocus && !shouldShowList) {
+            // Update filtered options when opening
+            const filtered = filterOptions(searchValue);
+            setFilteredOptions(filtered);
+            setShouldShowList(true);
+            if (onOpen) {
+                onOpen();
+            }
+        }
+    }, [showOnFocus, shouldShowList, onOpen, filterOptions, searchValue]);
+    const handleInputClick = useCallback(() => {
+        if (showOnClick && !shouldShowList) {
+            // Update filtered options when opening
+            const filtered = filterOptions(searchValue);
+            setFilteredOptions(filtered);
+            setShouldShowList(true);
+            if (onOpen) {
+                onOpen();
+            }
+        }
+    }, [showOnClick, shouldShowList, onOpen, filterOptions, searchValue]);
+    const handleIconClick = useCallback(() => {
+        if (disabled)
+            return;
+        if (shouldShowList) {
+            // Close dropdown
+            setShouldShowList(false);
+            if (onClose) {
+                onClose();
+            }
+        }
+        else {
+            // Open dropdown
+            const filtered = filterOptions(searchValue);
+            setFilteredOptions(filtered);
+            setShouldShowList(true);
+            // Focus input when opening via icon
+            inputRef.current?.focus();
+            if (onOpen) {
+                onOpen();
+            }
+        }
+    }, [disabled, shouldShowList, onOpen, onClose, filterOptions, searchValue]);
+    const renderList = () => {
+        if (!shouldShowList)
+            return null;
+        return (_jsxs("div", { className: cn(s['absolute'], s['w-full'], s['rounded-lg'], s['bg-white'], s['border'], s['border-gray-200'], s['shadow-lg'], s['overflow-hidden']), style: {
+                position: 'absolute',
+                top: 'calc(100% + 0.5rem)',
+                left: 0,
+                right: 0,
+                margin: 0,
+                padding: 0,
+                zIndex,
+                animation: 'fadeIn 0.15s ease-out',
+                transformOrigin: 'top',
+            }, children: [_jsx("style", { children: `
           @keyframes fadeIn {
             from {
               opacity: 0;
@@ -9,4 +278,175 @@
               transform: translateY(0) scale(1);
             }
           }
-        `}),a.length>0?f("ul",{role:"listbox",className:d(e.flex,e["flex-col"],e["w-full"],e["overflow-y-auto"],e["overflow-x-hidden"]),id:"autocomplete-list",ref:W,style:{maxHeight:he||"300px",scrollbarWidth:"thin",margin:0,padding:0,listStyle:"none"},children:a.map((t,r)=>{const n=C&&r===c;let s=d(e.flex,e["items-center"],e["px-4"],e["py-3"],e["cursor-pointer"],e["text-sm"],e["transition-all"],e["duration-150"],e["ease-in-out"],de);return n&&C&&(s=d(s,e["bg-blue-50"],e["text-blue-700"],e["font-medium"],ue)),f("li",{className:s,role:"option","aria-selected":n,id:`autocomplete-option-${r}`,"data-index":r,onClick:ye,onMouseEnter:()=>I(r),style:{margin:0,padding:"0.75rem 1rem",listStyle:"none",transition:"background-color 0.15s ease, color 0.15s ease",backgroundColor:n&&C?"rgb(239, 246, 255)":"transparent",color:n&&C?"rgb(29, 78, 216)":"rgb(55, 65, 81)"},onMouseOver:x=>{n||(x.currentTarget.style.backgroundColor="rgb(239, 246, 255)",x.currentTarget.style.color="rgb(29, 78, 216)")},onMouseOut:x=>{n||(x.currentTarget.style.backgroundColor="transparent",x.currentTarget.style.color="rgb(55, 65, 81)")},children:B?B(t,r,n):f("span",{className:d(e["select-none"]),children:m(t)})},r)})}):f("div",{className:d(e.flex,e["flex-col"],e["items-center"],e["justify-center"],e["px-4"],e["py-3"],e["text-center"]),style:{margin:0,padding:0},children:J?J():j(Se,{children:[f(z,{nameIcon:"FaSearch",propsIcon:{size:32,color:"#9ca3af"}}),f("p",{className:d(e["mt-3"],e["text-sm"],e["font-medium"],e["text-gray-500"]),children:ge}),f("p",{className:d(e["mt-1"],e["text-xs"],e["text-gray-400"]),children:"Try adjusting your search"})]})})]}):null;return L(()=>{const t=p(g);if(S(t),t.length>0){const r=t.findIndex(n=>T(n)===i||m(n)===i);r!==-1?I(r):c>=t.length&&I(0)}else t.length===0&&g.length===0&&I(0)},[o,g,p,i,c,T,m]),L(()=>{G&&setTimeout(()=>{E.current?.focus(),E.current?.select()},0),re&&a.length>0&&!i&&O(a[0])},[G,re,a,i,O]),L(()=>{if(!$.current&&i!==g){const t=o.find(r=>T(r)===i||m(r)===i);t?v(m(t)):i&&v(i)}},[i,o,g,T,m]),L(()=>{function t(r){Y.current&&!Y.current.contains(r.target)&&l&&(b(!1),u&&u())}return l&&document.addEventListener("mousedown",t),()=>{document.removeEventListener("mousedown",t)}},[l,u]),L(()=>()=>{N.current&&clearTimeout(N.current)},[]),j("div",{ref:Y,className:d(e.flex,e["flex-col"],e.relative,e["w-full"],ce),style:{...ae,position:"relative",margin:0},children:[f("div",{className:d(e.flex,e["items-center"],e.relative,e["w-full"],e["bg-white"],e.border,e["rounded-lg"],e["shadow-sm"],e["transition-all"],e["duration-200"],e["ease-in-out"],e["overflow-hidden"],{[e["border-red-500"]]:k,[e["border-gray-300"]]:!k&&!l,[e["border-blue-500"]]:!k&&l,[e["ring-2"]]:!k&&l,[e["ring-blue-200"]]:!k&&l,[e["opacity-50"]]:w,[e["cursor-not-allowed"]]:w}),style:{boxShadow:l&&!k?"0 0 0 3px rgba(59, 130, 246, 0.1)":"0 1px 2px 0 rgba(0, 0, 0, 0.05)",overflow:"hidden"},children:j("div",{className:d(e.flex,e["items-center"],e["w-full"],e.relative),style:{padding:"0.5rem 0.75rem",minWidth:0},children:[f("div",{className:d(e["mr-2"],e["flex-shrink-0"]),style:{display:"flex",alignItems:"center"},children:f(z,{nameIcon:"FaSearch",propsIcon:{size:18,color:l?"#3b82f6":"#9ca3af"}})}),f("input",{type:"text",role:"combobox","aria-autocomplete":"list","aria-expanded":l,"aria-controls":"autocomplete-list","aria-activedescendant":l&&c>=0?`autocomplete-option-${c}`:void 0,name:oe||"autocomplete-input",className:d(e["flex-1"],e["bg-transparent"],e["text-sm"],e["text-gray-700"],e["placeholder-gray-400"],e["focus:outline-none"],e["border-none"],e["focus:ring-0"],fe),placeholder:me,onChange:xe,onKeyDown:be,onFocus:we,onClick:Ie,value:g,ref:E,disabled:w,autoComplete:"off",style:{cursor:w?"not-allowed":"text",minWidth:0,flex:"1 1 0%",width:0}}),f("div",{className:d(e["flex-shrink-0"],e.flex,e["items-center"],e["justify-center"],e["cursor-pointer"]),onClick:ke,style:{marginLeft:"0.5rem",transition:"transform 0.2s ease",display:"flex",alignItems:"center",justifyContent:"center",cursor:w?"not-allowed":"pointer"},children:l?f(z,{nameIcon:"FaChevronUp",propsIcon:{size:16,color:w?"#9ca3af":"#3b82f6"}}):f(z,{nameIcon:"FaChevronDown",propsIcon:{size:16,color:"#9ca3af"}})})]})}),Te()]})};
+        ` }), filteredOptions.length > 0 ? (_jsx("ul", { role: "listbox", className: cn(s['flex'], s['flex-col'], s['w-full'], s['overflow-y-auto'], s['overflow-x-hidden']), id: "autocomplete-list", ref: listRef, style: {
+                        maxHeight: maxHeight || '300px',
+                        scrollbarWidth: 'thin',
+                        margin: 0,
+                        padding: 0,
+                        listStyle: 'none',
+                    }, children: filteredOptions.map((option, index) => {
+                        const isActive = highlightActive && index === activeOption;
+                        let itemClassName = cn(s['flex'], s['items-center'], s['px-4'], s['py-3'], s['cursor-pointer'], s['text-sm'], s['transition-all'], s['duration-150'], s['ease-in-out'], optionClassName);
+                        if (isActive && highlightActive) {
+                            itemClassName = cn(itemClassName, s['bg-blue-50'], s['text-blue-700'], s['font-medium'], activeOptionClassName);
+                        }
+                        return (_jsx("li", { className: itemClassName, role: "option", "aria-selected": isActive, id: `autocomplete-option-${index}`, "data-index": index, onClick: onOptionClick, onMouseEnter: () => setActiveOption(index), style: {
+                                margin: 0,
+                                padding: '0.75rem 1rem',
+                                listStyle: 'none',
+                                transition: 'background-color 0.15s ease, color 0.15s ease',
+                                backgroundColor: isActive && highlightActive
+                                    ? 'rgb(239, 246, 255)'
+                                    : 'transparent',
+                                color: isActive && highlightActive
+                                    ? 'rgb(29, 78, 216)'
+                                    : 'rgb(55, 65, 81)',
+                            }, onMouseOver: (e) => {
+                                if (!isActive) {
+                                    e.currentTarget.style.backgroundColor =
+                                        'rgb(239, 246, 255)';
+                                    e.currentTarget.style.color = 'rgb(29, 78, 216)';
+                                }
+                            }, onMouseOut: (e) => {
+                                if (!isActive) {
+                                    e.currentTarget.style.backgroundColor = 'transparent';
+                                    e.currentTarget.style.color = 'rgb(55, 65, 81)';
+                                }
+                            }, children: renderOption ? (renderOption(option, index, isActive)) : (_jsx("span", { className: cn(s['select-none']), children: getOptionLabel(option) })) }, index));
+                    }) })) : (_jsx("div", { className: cn(s['flex'], s['flex-col'], s['items-center'], s['justify-center'], s['px-4'], s['py-3'], s['text-center']), style: {
+                        margin: 0,
+                        padding: 0,
+                    }, children: renderEmptyState ? (renderEmptyState()) : (_jsxs(_Fragment, { children: [_jsx(Icon, { nameIcon: "FaSearch", propsIcon: {
+                                    size: 32,
+                                    color: '#9ca3af',
+                                } }), _jsx("p", { className: cn(s['mt-3'], s['text-sm'], s['font-medium'], s['text-gray-500']), children: emptyStateMessage }), _jsx("p", { className: cn(s['mt-1'], s['text-xs'], s['text-gray-400']), children: "Try adjusting your search" })] })) }))] }));
+    };
+    // Update filtered options when options or search value changes
+    useEffect(() => {
+        const filtered = filterOptions(searchValue);
+        setFilteredOptions(filtered);
+        // Update active option if current value is in filtered options
+        if (filtered.length > 0) {
+            const currentIndex = filtered.findIndex((opt) => getOptionValue(opt) === value || getOptionLabel(opt) === value);
+            if (currentIndex !== -1) {
+                setActiveOption(currentIndex);
+            }
+            else if (activeOption >= filtered.length) {
+                // Reset to first option if current active is out of bounds
+                setActiveOption(0);
+            }
+        }
+        else if (filtered.length === 0 && searchValue.length === 0) {
+            // If no search and no filtered results, reset active option
+            setActiveOption(0);
+        }
+    }, [
+        options,
+        searchValue,
+        filterOptions,
+        value,
+        activeOption,
+        getOptionValue,
+        getOptionLabel,
+    ]);
+    // Auto-focus and auto-select first option on mount
+    useEffect(() => {
+        if (autoFocus) {
+            setTimeout(() => {
+                inputRef.current?.focus();
+                inputRef.current?.select();
+            }, 0);
+        }
+        if (autoSelectFirst && filteredOptions.length > 0 && !value) {
+            onValueChange(filteredOptions[0]);
+        }
+    }, [autoFocus, autoSelectFirst, filteredOptions, value, onValueChange]);
+    // Update search value when value prop changes (but not when user is actively typing)
+    useEffect(() => {
+        // Don't sync if user is currently typing
+        if (isTypingRef.current) {
+            return;
+        }
+        // Only sync if value prop changed and doesn't match current search
+        if (value !== searchValue) {
+            const matchingOption = options.find((opt) => getOptionValue(opt) === value || getOptionLabel(opt) === value);
+            if (matchingOption) {
+                setSearchValue(getOptionLabel(matchingOption));
+            }
+            else if (value) {
+                setSearchValue(value);
+            }
+        }
+    }, [value, options, searchValue, getOptionValue, getOptionLabel]);
+    // Handle click outside to close dropdown
+    useEffect(() => {
+        function handleClickOutside(event) {
+            if (wrapperRef.current &&
+                !wrapperRef.current.contains(event.target) &&
+                shouldShowList) {
+                setShouldShowList(false);
+                if (onClose) {
+                    onClose();
+                }
+            }
+        }
+        if (shouldShowList) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [shouldShowList, onClose]);
+    // Cleanup typing timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (typingTimeoutRef.current) {
+                clearTimeout(typingTimeoutRef.current);
+            }
+        };
+    }, []);
+    return (_jsxs("div", { ref: wrapperRef, className: cn(s['flex'], s['flex-col'], s['relative'], s['w-full'], className), style: {
+            ...style,
+            position: 'relative',
+            margin: 0,
+        }, children: [_jsx("div", { className: cn(s['flex'], s['items-center'], s['relative'], s['w-full'], s['bg-white'], s['border'], s['rounded-lg'], s['shadow-sm'], s['transition-all'], s['duration-200'], s['ease-in-out'], s['overflow-hidden'], {
+                    [s['border-red-500']]: hasError,
+                    [s['border-gray-300']]: !hasError && !shouldShowList,
+                    [s['border-blue-500']]: !hasError && shouldShowList,
+                    [s['ring-2']]: !hasError && shouldShowList,
+                    [s['ring-blue-200']]: !hasError && shouldShowList,
+                    [s['opacity-50']]: disabled,
+                    [s['cursor-not-allowed']]: disabled,
+                }), style: {
+                    boxShadow: shouldShowList && !hasError
+                        ? '0 0 0 3px rgba(59, 130, 246, 0.1)'
+                        : '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+                    overflow: 'hidden',
+                }, children: _jsxs("div", { className: cn(s['flex'], s['items-center'], s['w-full'], s['relative']), style: {
+                        padding: '0.5rem 0.75rem',
+                        minWidth: 0,
+                    }, children: [_jsx("div", { className: cn(s['mr-2'], s['flex-shrink-0']), style: { display: 'flex', alignItems: 'center' }, children: _jsx(Icon, { nameIcon: "FaSearch", propsIcon: {
+                                    size: 18,
+                                    color: shouldShowList ? '#3b82f6' : '#9ca3af',
+                                } }) }), _jsx("input", { type: "text", role: "combobox", "aria-autocomplete": "list", "aria-expanded": shouldShowList, "aria-controls": "autocomplete-list", "aria-activedescendant": shouldShowList && activeOption >= 0
+                                ? `autocomplete-option-${activeOption}`
+                                : undefined, name: name || 'autocomplete-input', className: cn(s['flex-1'], s['bg-transparent'], s['text-sm'], s['text-gray-700'], s['placeholder-gray-400'], s['focus:outline-none'], s['border-none'], s['focus:ring-0'], inputClassName), placeholder: placeholder, onChange: onInputChange, onKeyDown: onKeyDown, onFocus: handleInputFocus, onClick: handleInputClick, value: searchValue, ref: inputRef, disabled: disabled, autoComplete: "off", style: {
+                                cursor: disabled ? 'not-allowed' : 'text',
+                                minWidth: 0,
+                                flex: '1 1 0%',
+                                width: 0,
+                            } }), _jsx("div", { className: cn(s['flex-shrink-0'], s['flex'], s['items-center'], s['justify-center'], s['cursor-pointer']), onClick: handleIconClick, style: {
+                                marginLeft: '0.5rem',
+                                transition: 'transform 0.2s ease',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                cursor: disabled ? 'not-allowed' : 'pointer',
+                            }, children: shouldShowList ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: {
+                                    size: 16,
+                                    color: disabled ? '#9ca3af' : '#3b82f6',
+                                } })) : (_jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: {
+                                    size: 16,
+                                    color: '#9ca3af',
+                                } })) })] }) }), renderList()] }));
+};

package/lib/src/core-components/src/components/AutoComplete/index.js

@@ -1 +1,8 @@
-"use strict";export*from"./auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component";export*from"./auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component";export*from"./autocomplete/autocomplete";export*from"./auto-complete-group-by/auto-complete-group-by.component";export*from"./auto-complete-filter-single-select/auto-complete-filter-single-select.component";export*from"./auto-complete-filter-multi-select-selected-top-display/auto-complete-filter-multi-select-selected-top-display.component";export*from"./auto-complete-filter-multi-select-multi-fields-display-drag-drop/auto-complete-filter-multi-select-multi-fields-display-drag-drop.component";export*from"./auto-complete-filter-group-by-multiple-select-multiple-fields-display/auto-complete-filter-group-by-multiple-select-multiple-fields-display.component";
+export * from './auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component';
+export * from './auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component';
+export * from './autocomplete/autocomplete';
+export * from './auto-complete-group-by/auto-complete-group-by.component';
+export * from './auto-complete-filter-single-select/auto-complete-filter-single-select.component';
+export * from './auto-complete-filter-multi-select-selected-top-display/auto-complete-filter-multi-select-selected-top-display.component';
+export * from './auto-complete-filter-multi-select-multi-fields-display-drag-drop/auto-complete-filter-multi-select-multi-fields-display-drag-drop.component';
+export * from './auto-complete-filter-group-by-multiple-select-multiple-fields-display/auto-complete-filter-group-by-multiple-select-multiple-fields-display.component';