Add search to dropdown

distribution_fe/components/ui/select.tsx

@@ -5,7 +5,9 @@ import { Select as SelectPrimitive } from "@base-ui/react/select"
 
 import { cn } from "@/lib/utils"
 import { HugeiconsIcon } from "@hugeicons/react"
-import { UnfoldMoreIcon, Tick02Icon, ArrowUp01Icon, ArrowDown01Icon } from "@hugeicons/core-free-icons"
+import { UnfoldMoreIcon, Tick02Icon, ArrowUp01Icon, ArrowDown01Icon, Search01Icon } from "@hugeicons/core-free-icons"
+
+const SEARCH_THRESHOLD = 7
 
 function collectSelectItems(children: React.ReactNode): Array<{ value: unknown; label: string }> {
   const items: Array<{ value: unknown; label: string }> = []
@@ -66,6 +68,57 @@ function getItemLabel(children: React.ReactNode): string | undefined {
   return undefined
 }
 
+function filterSelectChildren(children: React.ReactNode, query: string): React.ReactNode {
+  const normalizedQuery = query.trim().toLowerCase()
+  if (!normalizedQuery) return children
+
+  const filtered = React.Children.map(children, (child) => {
+    if (!React.isValidElement<{ value?: unknown; label?: string; children?: React.ReactNode }>(child)) {
+      return child
+    }
+
+    if ("value" in child.props) {
+      const label = child.props.label ?? getItemLabel(child.props.children) ?? ""
+      return label.toLowerCase().includes(normalizedQuery) ? child : null
+    }
+
+    if (child.props.children) {
+      const filteredChildren = filterSelectChildren(child.props.children, query)
+      if (React.Children.count(filteredChildren) === 0) return null
+      return React.cloneElement(child, undefined, filteredChildren)
+    }
+
+    return child
+  })
+
+  return filtered
+}
+
+function SelectSearchInput({
+  query,
+  onQueryChange,
+}: {
+  query: string
+  onQueryChange: (value: string) => void
+}) {
+  return (
+    <div
+      data-slot="select-search"
+      className="sticky top-0 z-10 flex items-center gap-1.5 rounded-t-2xl border-b border-border/50 bg-popover px-2.5 py-1.5"
+    >
+      <HugeiconsIcon icon={Search01Icon} strokeWidth={2} className="size-3.5 shrink-0 text-muted-foreground" />
+      <input
+        autoFocus
+        value={query}
+        onChange={(event) => onQueryChange(event.target.value)}
+        onKeyDown={(event) => event.stopPropagation()}
+        placeholder="Search..."
+        className="w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+      />
+    </div>
+  )
+}
+
 function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
   return (
     <SelectPrimitive.Group
@@ -129,6 +182,11 @@ function SelectContent({
     SelectPrimitive.Positioner.Props,
     "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger" | "collisionAvoidance"
   >) {
+  const [query, setQuery] = React.useState("")
+  const itemCount = React.useMemo(() => collectSelectItems(children).length, [children])
+  const showSearch = itemCount > SEARCH_THRESHOLD
+  const filteredChildren = showSearch ? filterSelectChildren(children, query) : children
+
   return (
     <SelectPrimitive.Portal>
       <SelectPrimitive.Positioner
@@ -146,8 +204,15 @@ function SelectContent({
           className={cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl bg-popover text-popover-foreground shadow-lg ring-1 ring-foreground/5 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
           {...props}
         >
+          {showSearch && <SelectSearchInput query={query} onQueryChange={setQuery} />}
           <SelectScrollUpButton />
-          <SelectPrimitive.List>{children}</SelectPrimitive.List>
+          <SelectPrimitive.List>
+            {React.Children.count(filteredChildren) === 0 ? (
+              <div className="px-2.5 py-2 text-sm text-muted-foreground">No results found.</div>
+            ) : (
+              filteredChildren
+            )}
+          </SelectPrimitive.List>
           <SelectScrollDownButton />
         </SelectPrimitive.Popup>
       </SelectPrimitive.Positioner>