feat(web): ReUI Autocomplete для страны/города и вертикальная раскладка локации

Co-authored-by: Cursor <[email protected]>

apps/web/src/components/auto-complete-input.tsx

@@ -1,26 +1,22 @@
+'use client'
+
 import * as React from 'react'
-import { CheckIcon, ChevronsUpDownIcon, SearchIcon } from 'lucide-react'
+import { CheckIcon } from 'lucide-react'
 
-import { Button } from '@cfdm/ui/components/button'
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@cfdm/ui/components/command'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@cfdm/ui/components/popover'
 import { cn } from '@cfdm/ui/lib/utils'
+import {
+  Autocomplete,
+  AutocompleteContent,
+  AutocompleteEmpty,
+  AutocompleteInput,
+  AutocompleteItem,
+  AutocompleteList,
+} from '@/components/reui/autocomplete'
 
 export interface AutoCompleteOption {
   value: string
   label: string
-  /** Левый префикс (например эмодзи-флаг). */
+  /** Левый префикс (например флаг страны). */
   leading?: React.ReactNode
 }
 
@@ -33,7 +29,7 @@ interface AutoCompleteInputProps {
   searchPlaceholder?: string
   emptyText?: string
   className?: string
-  /** Показывать ли выбранный leading в триггере (например флаг). */
+  /** Показывать ли выбранный leading в поле (например флаг). */
   showLeadingInInput?: boolean
   /** Разрешать ли произвольный ввод (не только из списка). По умолчанию true. */
   allowFreeText?: boolean
@@ -45,107 +41,88 @@ export function AutoCompleteInput({
   onChange,
   options,
   placeholder = 'Выбрать…',
-  searchPlaceholder = 'Поиск…',
+  searchPlaceholder,
   emptyText = 'Ничего не найдено',
   className,
   showLeadingInInput = true,
   allowFreeText = true,
 }: AutoCompleteInputProps) {
-  const [open, setOpen] = React.useState(false)
+  const trimmedValue = value.trim()
-  const [query, setQuery] = React.useState('')
 
-  const filtered = React.useMemo(() => {
+  const selected = React.useMemo(
-    const q = query.trim().toLowerCase()
+    () => options.find((o) => o.value.toLowerCase() === trimmedValue.toLowerCase()),
-    if (!q) return options
+    [options, trimmedValue],
-    return options.filter(
-      (o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q),
   )
-  }, [options, query])
-
-  const selected = options.find(
-    (o) => o.value.toLowerCase() === value.trim().toLowerCase(),
-  )
-  const displayLabel = selected?.label ?? value
   const leading = showLeadingInInput ? selected?.leading : undefined
 
-  const handleSelect = (next: string) => {
+  const inputPlaceholder = searchPlaceholder ?? placeholder
-    onChange(next)
+
-    setQuery('')
+  const handleValueChange = React.useCallback(
-    setOpen(false)
+    (inputVal: string) => {
+      const q = inputVal.trim()
+      const match = options.find(
+        (o) =>
+          o.label.toLowerCase() === q.toLowerCase() ||
+          o.value.toLowerCase() === q.toLowerCase(),
+      )
+      if (match) {
+        onChange(match.value)
+        return
       }
+      if (allowFreeText) {
+        onChange(inputVal)
+      }
+    },
+    [options, onChange, allowFreeText],
+  )
 
   return (
-    <Popover open={open} onOpenChange={(o) => {
+    <Autocomplete
-      setOpen(o)
+      items={options}
-      if (!o) setQuery('')
+      value={value}
-    }}>
+      onValueChange={handleValueChange}
-      <PopoverTrigger
+      itemToStringValue={(item) => item.label}
-        render={
+      mode="list"
-          <Button
+      autoHighlight
+      openOnInputClick
+    >
+      <div className="relative w-full">
+        {leading ? (
+          <span className="pointer-events-none absolute start-2.5 top-1/2 z-10 size-4 -translate-y-1/2 [&_svg]:size-full">
+            {leading}
+          </span>
+        ) : null}
+        <AutocompleteInput
           id={id}
-            variant="outline"
+          placeholder={trimmedValue ? undefined : inputPlaceholder}
-            role="combobox"
+          showTrigger
-            aria-expanded={open}
+          showClear={Boolean(trimmedValue)}
-            className={cn('w-full justify-between font-normal', className)}
+          className={cn(leading && 'ps-8', className)}
-          >
-            <span className="flex min-w-0 items-center gap-2">
-              {leading ? <span className="size-4 shrink-0 leading-none">{leading}</span> : null}
-              <span className={cn('truncate', !value && 'text-muted-foreground')}>
-                {value ? displayLabel : placeholder}
-              </span>
-            </span>
-            <ChevronsUpDownIcon className="size-4 shrink-0 opacity-50" />
-          </Button>
-        }
         />
-      <PopoverContent align="start" className="w-[--anchor-width] min-w-[220px] p-0">
+      </div>
-        <Command shouldFilter={false} loop>
+      <AutocompleteContent>
-          <CommandInput
+        <AutocompleteEmpty>{emptyText}</AutocompleteEmpty>
-            placeholder={searchPlaceholder}
+        <AutocompleteList>
-            value={query}
+          {(item) => {
-            onValueChange={setQuery}
+            const isSelected = item.value.toLowerCase() === trimmedValue.toLowerCase()
-            autoComplete="off"
-            autoCorrect="off"
-            spellCheck={false}
-          />
-          <CommandList className="py-1">
-            <CommandEmpty>{emptyText}</CommandEmpty>
-            <CommandGroup>
-              {allowFreeText && query.trim() && !filtered.some(
-                (o) => o.label.toLowerCase() === query.trim().toLowerCase(),
-              ) ? (
-                <CommandItem
-                  value={`__free__:${query.trim()}`}
-                  onSelect={() => handleSelect(query.trim())}
-                  className="gap-2.5"
-                >
-                  <SearchIcon className="size-4 opacity-50" />
-                  <span className="flex-1 truncate">
-                    Использовать: <b>{query.trim()}</b>
-                  </span>
-                </CommandItem>
-              ) : null}
-              {filtered.map((opt) => {
-                const isSelected = opt.value.toLowerCase() === value.trim().toLowerCase()
             return (
-                  <CommandItem
+              <AutocompleteItem
-                    key={opt.value}
+                key={item.value}
-                    value={opt.value}
+                value={item}
-                    onSelect={() => handleSelect(opt.value)}
+                className="gap-2.5 px-2 py-1.5"
-                    className="gap-2.5"
               >
-                    {opt.leading ? (
+                {item.leading ? (
-                      <span className="size-4 shrink-0 leading-none">{opt.leading}</span>
+                  <span className="relative z-1 size-4 shrink-0">{item.leading}</span>
                 ) : null}
-                    <span className="flex-1">{opt.label}</span>
+                <span className="relative z-1 min-w-0 flex-1 truncate">{item.label}</span>
-                    {isSelected ? <CheckIcon className="size-4 opacity-60" /> : null}
+                {isSelected ? (
-                  </CommandItem>
+                  <CheckIcon className="relative z-1 size-4 shrink-0 opacity-60" />
+                ) : null}
+              </AutocompleteItem>
             )
-              })}
+          }}
-            </CommandGroup>
+        </AutocompleteList>
-          </CommandList>
+      </AutocompleteContent>
-        </Command>
+    </Autocomplete>
-      </PopoverContent>
-    </Popover>
   )
 }

apps/web/src/routes/_auth/vps.tsx

@@ -421,7 +421,6 @@ function VpsPage() {
               <FormField label="Проект" htmlFor="vps-project">
                 <Input id="vps-project" {...register('project')} />
               </FormField>
-              <div className="grid grid-cols-3 gap-3">
               <FormField label="Страна" htmlFor="vps-country">
                 <AutoCompleteInput
                   id="vps-country"
@@ -448,7 +447,6 @@ function VpsPage() {
               <FormField label="Дата-центр" htmlFor="vps-dc">
                 <Input id="vps-dc" {...register('datacenter')} />
               </FormField>
-              </div>
               <div className="grid grid-cols-3 gap-3">
                 <FormField label="vCPU" htmlFor="vps-vcpu" error={errors.vcpu?.message}>
                   <Controller