react-restyle-components 0.4.46 → 0.4.47

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

@@ -1,273 +1,4 @@
-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: `
+"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:`
           @keyframes fadeIn {
             from {
               opacity: 0;
@@ -278,175 +9,4 @@ export const Autocomplete = ({ value = '', onValueChange, options = [], filterCo
               transform: translateY(0) scale(1);
             }
           }
-        ` }), 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()] }));
-};
+        `}),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()]})};

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

@@ -1,8 +1 @@
-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';
+"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";