\n
\n
\n {selectedUsers.map(user => (\n setSelectedUsers(prev => prev.filter(u => u.uid !== user.uid))}\n />\n ))}\n \n
setSearch(e.target.value)}\n className=\"rounded-lg outline-none flex-1 p-1 bg-transparent placeholder:text-atherGray-400\"\n onFocus={() => setIsFocused(true)}\n placeholder=\"Enter name or email\"\n onBlur={() => setIsFocused(false)}\n ref={inputRef}\n onKeyDown={e => {\n if (e.key === \"ArrowDown\" && isFocused && index < mappedUser.length - 1) {\n e.preventDefault()\n setIndex(prev => prev + 1)\n }\n if (e.key === \"ArrowUp\" && isFocused && index > 0) {\n e.preventDefault()\n setIndex(prev => prev - 1)\n }\n if (e.key === \"Enter\" && isFocused && index >= 0) {\n e.preventDefault()\n\n handleAddUser(mappedUser[index])\n setIndex(0)\n }\n }}\n />\n
\n {selectedUsers.length > 0 && (\n
\n {\n googleAnalytics.event({\n action: \"click\",\n category: \"modal\",\n label: `selected_role_${v.id}_${typeShare}_${shareId}`,\n value: 1,\n })\n setSelectedRole(v.id as SharingRole)\n }}\n options={roleOptions.map(r => ({ id: capitalize(r.value), name: capitalize(r.label) }))}\n value={\n roleOptions\n .map(r => ({ id: capitalize(r.value), name: capitalize(r.label) }))\n .find(r => r.id === selectedRole)?.name ?? capitalize(roleOptions[1].label)\n }\n />\n
\n )}\n
\n {isOpen && debouncedSearch && mappedUser.length > 0 && (\n \n \n
scrollRef.current}\n useWindow={false}\n loadMore={() => fetchNextPage()}\n hasMore={!!hasNextPage}\n style={{ display: \"flex\", flexDirection: \"column\" }}\n loader={\n \n Loading...\n
\n }\n >\n \n {mappedUser.map((user, idx) => (\n {\n handleAddUser(user)\n }}\n className={cn(\"hover:bg-atherGray-800 cursor-pointer p-2\", {\n \"bg-atherGray-800\": index === idx,\n })}\n />\n ))}\n
\n \n
\n \n )}\n \n