search-input

1'use client';
2 
3import { Search } from 'lucide-react';
4import * as React from 'react';
5import { Input } from '@/components/ui/input';
6import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
7import { cn } from '@/lib/utils';
8 
9function isEditableTarget(target: EventTarget | null): boolean {
10  if (!(target instanceof HTMLElement)) return false;
11  const tag = target.tagName;
12  return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || target.isContentEditable;
13}
14 
15export interface SearchInputProps extends Omit<React.ComponentProps<'input'>, 'onChange'> {
16  onChange: (value: string) => void;
17  debounceMs?: number;
18  hotkey?: string | false;
19  hotkeyTooltip?: string;
20}
21 
22export function SearchInput({
23  value,
24  onChange,
25  placeholder = 'Search…',
26  debounceMs = 250,
27  hotkey = '/',
28  hotkeyTooltip,
29  autoFocus,
30  className,
31  ...props
32}: SearchInputProps) {
33  const inputRef = React.useRef<HTMLInputElement>(null);
34  const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
35  const [text, setText] = React.useState(typeof value === 'string' ? value : '');
36  const [prevValue, setPrevValue] = React.useState(value);
37  const [focused, setFocused] = React.useState(false);
38  const [hintOpen, setHintOpen] = React.useState(false);
39 
40  if (prevValue !== value) {
41    setPrevValue(value);
42    if (typeof value === 'string') setText(value);
43  }
44 
45  const resolvedTooltip = hotkeyTooltip ?? (hotkey ? `Press ${hotkey} to search` : undefined);
46 
47  React.useEffect(
48    () => () => {
49      if (timer.current) clearTimeout(timer.current);
50    },
51    [],
52  );
53 
54  React.useEffect(() => {
55    if (!hotkey) return;
56    function onKey(e: KeyboardEvent) {
57      if (e.key !== hotkey || e.metaKey || e.ctrlKey || e.altKey) return;
58      if (isEditableTarget(e.target)) return;
59      e.preventDefault();
60      inputRef.current?.focus();
61    }
62    document.addEventListener('keydown', onKey);
63    return () => document.removeEventListener('keydown', onKey);
64  }, [hotkey]);
65 
66  function handleChange(next: string) {
67    setText(next);
68    if (timer.current) clearTimeout(timer.current);
69    if (debounceMs <= 0) {
70      onChange(next);
71      return;
72    }
73    timer.current = setTimeout(() => onChange(next), debounceMs);
74  }
75 
76  const showHotkeyBadge = Boolean(hotkey) && !focused && text.length === 0;
77 
78  return (
79    <div className={cn('relative', className)}>
80// … truncated