@flamingo-stack/openframe-frontend-core 0.0.486-snapshot.20260727163255 → 0.0.486

package/src/components/ui/assignee-dropdown.tsx

@@ -1,10 +1,11 @@
 'use client'
 
+import * as PopoverPrimitive from '@radix-ui/react-popover'
 import * as React from 'react'
-import { PenEditIcon, UserIcon, UserPlusIcon } from '../icons-v2-generated'
+import { CheckIcon, PenEditIcon, SearchIcon, UserIcon, UserPlusIcon } from '../icons-v2-generated'
 import { cn } from '../../utils/cn'
 import { Autocomplete, type AutocompleteOption } from './autocomplete'
-import { SearchableSelect, type SearchableSelectOption } from './searchable-select'
+import { Input } from './input'
 import { SquareAvatar } from './square-avatar'
 
 export interface TicketAssigneeOption {
@@ -41,33 +42,31 @@ function CompactAssigneeDropdown({
   onAssign,
   className,
 }: AssigneeDropdownProps) {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const [search, setSearch] = React.useState('')
   const hasAssignee = !!currentAssignee
 
-  // Current assignee first; SearchableSelect filters but never reorders.
-  const orderedOptions = React.useMemo<SearchableSelectOption[]>(() => {
-    const withAvatars = options.map(o => ({
-      value: o.value,
-      label: o.label,
-      icon: (
-        <SquareAvatar
-          src={o.imageUrl}
-          alt={o.label}
-          fallback={o.label}
-          size="sm"
-          variant="round"
-          className="h-6 w-6 shrink-0"
-        />
-      ),
-    }))
-    if (!currentAssignee) return withAvatars
-    const current = withAvatars.find(o => o.value === currentAssignee.id)
-    if (!current) return withAvatars
-    return [current, ...withAvatars.filter(o => o.value !== currentAssignee.id)]
-  }, [options, currentAssignee])
+  React.useEffect(() => {
+    if (!isOpen) setSearch('')
+  }, [isOpen])
+
+  const filtered = React.useMemo(() => {
+    const q = search.trim().toLowerCase()
+    if (!q) return options
+    return options.filter(o => o.label.toLowerCase().includes(q))
+  }, [options, search])
+
+  const orderedOptions = React.useMemo(() => {
+    if (!currentAssignee) return filtered
+    const current = filtered.find(o => o.value === currentAssignee.id)
+    if (!current) return filtered
+    return [current, ...filtered.filter(o => o.value !== currentAssignee.id)]
+  }, [filtered, currentAssignee])
 
   const handleSelect = (userId: string) => {
-    // Selecting the current assignee again unassigns.
-    onAssign(currentAssignee?.id === userId ? null : userId)
+    const next = currentAssignee?.id === userId ? null : userId
+    onAssign(next)
+    setIsOpen(false)
   }
 
   const trigger = hasAssignee ? (
@@ -103,17 +102,73 @@ function CompactAssigneeDropdown({
   )
 
   return (
-    <SearchableSelect
-      options={orderedOptions}
-      value={currentAssignee?.id ?? null}
-      onValueChange={handleSelect}
-      searchPlaceholder="Search users..."
-      emptyText="No users found"
-      isLoading={isLoading}
-      trigger={trigger}
-      align="end"
-      contentClassName="w-72"
-    />
+    <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen} modal={false}>
+      <PopoverPrimitive.Trigger asChild>{trigger}</PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+          align="end"
+          sideOffset={6}
+          className={cn(
+            'z-50 w-72 bg-ods-card border border-ods-border rounded-[6px] shadow-lg overflow-hidden',
+            'data-[state=open]:animate-in data-[state=closed]:animate-out',
+            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+            'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2',
+          )}
+        >
+          <div className="border-b border-ods-border">
+            <Input
+              autoFocus
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+              placeholder="Search users..."
+              startAdornment={<SearchIcon className="size-4 text-ods-text-secondary" />}
+              className="rounded-none border-0"
+            />
+          </div>
+          <div className="max-h-80 overflow-y-auto py-[var(--spacing-system-xs)]" role="listbox">
+            {isLoading ? (
+              <div className="px-[var(--spacing-system-sf)] py-[var(--spacing-system-s)] text-h5 text-ods-text-secondary">
+                Loading…
+              </div>
+            ) : orderedOptions.length === 0 ? (
+              <div className="px-[var(--spacing-system-sf)] py-[var(--spacing-system-s)] text-h5 text-ods-text-secondary">
+                No users found
+              </div>
+            ) : (
+              orderedOptions.map(opt => {
+                const isCurrent = currentAssignee?.id === opt.value
+                return (
+                  <button
+                    key={opt.value}
+                    type="button"
+                    role="option"
+                    aria-selected={isCurrent}
+                    onClick={() => handleSelect(opt.value)}
+                    className={cn(
+                      'flex items-center gap-[var(--spacing-system-xs)] w-full px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs)] text-left',
+                      'hover:bg-ods-bg-hover transition-colors',
+                      isCurrent && 'bg-ods-bg-hover',
+                    )}
+                  >
+                    <SquareAvatar
+                      src={opt.imageUrl}
+                      alt={opt.label}
+                      fallback={opt.label}
+                      size="sm"
+                      variant="round"
+                      className="h-6 w-6 shrink-0"
+                    />
+                    <span className="flex-1 truncate text-h4 text-ods-text-primary" title={opt.label}>{opt.label}</span>
+                    {isCurrent && <CheckIcon className="size-4 shrink-0 text-ods-accent" />}
+                  </button>
+                )
+              })
+            )}
+          </div>
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
   )
 }
 

package/src/components/ui/index.ts

@@ -167,8 +167,6 @@ export * from './ticket-status-tag'
 export * from './ticket-status-config-row'
 export * from './color-swatch'
 export * from './color-preset-select'
-export * from './searchable-select'
-export * from './test-run'
 export * from './assignee-dropdown'
 export * from './ticket-info-section'
 export * from './ticket-detail-section'