A presentation-layer wrapper that connects `` with `` to deliver a consistent RAG-search dropdown across all doc-search surfaces (data-room sidebar, onboarding guide catalog, etc.). ## Key Components ### `DocSearchBar` (default export) A controlled, stateless component that delegates data-fetching entirely to the caller's hook (`useDocSearch`, hub-side). Renders `` pre-wired with the standard `` so the dropdown UI stays identical across every consumer. ### `DocSearchBarProps` | Prop | Type | Default | Description | |---|---|---|---| | `placeholder` | `string` | — | Input placeholder text | | `query` | `string` | — | Controlled query value | | `onQueryChange` | `(value: string) => void` | — | Query change handler | | `results` | `SearchResult[]` | — | Hook-fetched results | | `isLoading` | `boolean` | — | Loading state | | `onResultSelect` | `(result, modifiers?) => void` | — | Selection handler; preserves `cmd/ctrl/shift/alt` click modifiers for new-tab behavior | | `showDropdown` | `boolean \| undefined` | `undefined` | Force dropdown open after internal navigation | | `minQueryLength` | `number` | `2` | Minimum chars before search fires | | `debounceMs` | `number` | `0` | Debounce delay (consumers typically debounce in the hook) | | `className` | `string` | `"w-full"` | Root element class | | `renderResult` | `(result, isHighlighted) => ReactNode` | `` | Custom row renderer override | ## Usage Example ```typescript // Minimal usage — hub hook provides data, component handles display function DocSidebarSearch() { const { query, setQuery, results, isLoading, handleSelect } = useDocSearch() return ( ) } // With custom row renderer override ( )} /> ``` ## Design Notes The hook (`useDocSearch`) intentionally lives hub-side — it depends on hub-only context (`useDocNavigation`, the RAG-table-config registry, `decideNewTab`). This component accepts hook output as plain props, keeping both consumers to ~5 lines while the dropdown chrome stays canonical. **Source:** [`flamingo-stack/openframe-oss-lib`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/doc-search-bar.tsx)