improve: logic improvements and new animation

src/components/combobox/SearchComboBox.tsx

@@ -1,5 +1,7 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect, useRef } from 'react';
 import ArrowDownIcon from '../icons/ArrowDownIcon';
+import { motion, Variants } from 'framer-motion';
+import { SearchNormal } from 'iconsax-react';
 
 export interface DropdownOption {
     id: string;
@@ -18,77 +20,131 @@ type Props = {
 function SearchComboBox({ title, options, expanded, selectedId, onSelectionChange, ...props }: Props) {
     const [expand, setExpand] = useState(expanded);
     const [searchValue, setSearchValue] = useState('');
+    const boxRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (boxRef.current && !boxRef.current.contains(event.target as Node)) {
+                setExpand(false);
+            }
+        };
+
+        if (expand) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [expand]);
+
     const toggleExpand = () => {
-        setExpand((state) => !state);
+        setExpand((prev) => !prev);
-        setSearchValue(() => '');
+        setSearchValue('');
-    }
+    };
-    const searchChanged = (e: React.ChangeEvent<HTMLInputElement> | undefined) => {
+
-        setSearchValue((state) => e?.target.value ?? state);
+    const searchChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
-    }
+        setSearchValue(e.target.value);
+    };
+
     const setSelection = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => {
-        onSelectionChange(e, index)
+        e.stopPropagation(); // prevent toggle
-        setExpand(() => false);
+        onSelectionChange(e, index);
-    }
+        setExpand(false);
+    };
+
+    const variants: Variants = {
+        collapse: {
+            opacity: 0,
+            scale: 0.95,
+            pointerEvents: 'none',     // disable clicks
+            transition: {
+                duration: 0.1,
+                ease: 'easeInOut'
+            }
+        },
+        expand: {
+            opacity: 1,
+            scale: 1,
+            pointerEvents: 'auto',     // re-enable clicks
+            transition: {
+                duration: 0.1,
+                ease: 'easeInOut'
+            }
+        }
+    };
+
 
     return (
-        <div className={`relative ${props.className ?? ''}`} {...props}>
+        <div ref={boxRef} className={`relative ${props.className ?? ''}`} {...props}>
             <div
-                
+                className="flex w-full h-11 items-center justify-end gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 cursor-pointer"
-                className="flex group w-full h-11 items-center justify-end gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-black"
                 tabIndex={0}
                 onClick={toggleExpand}
-                role='combobox'
+                role="combobox"
-                aria-expanded={expand}
-                aria-haspopup='listbox'
                 aria-controls=''
-                aria-label={title}>
+                aria-expanded={expand}
+                aria-haspopup="listbox"
+                aria-label={title}
+            >
                 <label
-                    htmlFor='content-select'
+                    htmlFor="content-select"
-                    className='pointer-events-none inline-flex flex-col items-end justify-center px-1 py-0 absolute -top-6 right-0 z-[2]'>
+                    className="pointer-events-none inline-flex flex-col items-end justify-center px-1 py-0 absolute -top-6 right-0 z-[2]"
-                    <span className='relative w-fit mt-[-1px] text-xs tracking-[0] leading-4 whitespace-nowrap'>
+                >
+                    <span className="relative w-fit mt-[-1px] text-xs tracking-[0] leading-4 whitespace-nowrap">
                         {title}
                     </span>
                 </label>
 
-                <div className='w-full text-sm2'>
+                <div className="w-full text-sm2">
-                    {options.filter(x => x.id === selectedId)[0]?.title ?? ''}
+                    {options.find((x) => x.id === selectedId)?.title ?? ''}
                 </div>
 
-                <ArrowDownIcon data-expand={expand} className='transition-all duration-200 group-focus-within:rotate-x-180' />
+                <ArrowDownIcon data-expand={expand} className="transition-all duration-200 data-[expand=true]:rotate-x-180" />
-
-                <div
-                    data-expand={expand}
-                    className='group-focus-within:block hidden absolute top-full left-0 w-full mt-1 bg-white rounded-xl border border-solid border-neutral-200 shadow-lg z-10'
-                    role='listbox'
-                    aria-label={`${title} options`}>
-                    <div className='w-full p-2'>
-                        <input placeholder='جستجو ...' className='w-full outline-none text-sm2' onChange={searchChanged} value={searchValue} />
-                    </div>
-                    <hr className="text-white/40" />
-                    {options
-                        .filter((v) => v.title?.includes(searchValue))
-                        .map((v, i) => {
-                            return (
-                                <div
-                                    onClick={(e) => {setSelection(e, i)}}
-                                    key={v.id}
-                                    data-selected={v.id === selectedId}
-                                    className='flex items-center justify-end px-3 py-3 cursor-pointer hover:bg-gray-50 first:rounded-t-xl last:rounded-b-xl'
-                                    tabIndex={0}
-                                    role='option'
-                                    aria-selected>
-                                    <span
-                                        className='text-sm2 tracking-[0.13px] leading-5 w-full'
-                                    >
-                                        {v.title}
-                                    </span>
-                                </div>
-                            )
-                        })}
-                </div>
             </div>
+
+            <motion.div
+                data-expand={expand}
+                aria-hidden={!expand}
+                className="absolute top-full left-0 w-full mt-1 bg-white rounded-xl outline outline-solid outline-neutral-200 shadow-lg z-10"
+                role="listbox"
+                aria-label={`${title} options`}
+                onClick={(e) => e.stopPropagation()}
+                initial="collapse"
+                animate={expand ? "expand" : "collapse"}
+                variants={variants}
+            >
+
+                <div className="w-full flex gap-2 border-b px-3 items-center">
+                    <SearchNormal size={16} className='stroke-gray-400' />
+                    <input
+                        placeholder="جستجو ..."
+                        className="w-full outline-none text-sm2 pb-2 pt-3"
+                        onChange={searchChanged}
+                        value={searchValue}
+                    />
+                </div>
+                <div className='p-1'>
+                    {options
+                    .filter((v) => v.title?.includes(searchValue))
+                    .map((v, i) => (
+                        <div
+                            onClick={(e) => setSelection(e, i)}
+                            key={v.id}
+                            data-selected={v.id === selectedId}
+                            className="flex items-center justify-end px-2 py-1.5 cursor-pointer hover:bg-gray-50 rounded-md last:rounded-b-xl"
+                            tabIndex={0}
+                            role="option"
+                            aria-selected
+                        >
+                            <span className="text-sm2 tracking-[0.13px] leading-5 w-full">{v.title}</span>
+                        </div>
+                    ))}
+                </div>
+            </motion.div>
         </div>
-    )
+    );
 }
 
+
 export default SearchComboBox