4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T3c2f,/** biome-ignore-all lint/a11y/useSemanticElements: hand crafted interactions */ /** biome-ignore-all lint/a11y/useFocusableInteractive: hand crafted interactions */ /** biome-ignore-all lint/suspicious/noExplicitAny: too ambiguous */ /** biome-ignore-all lint/a11y/noStaticElementInteractions: hand crafted interactions */ /** biome-ignore-all lint/a11y/useKeyWithClickEvents: hand crafted interactions */ /* eslint-disable @typescript-eslint/no-explicit-any */ import * as Popover from "@radix-ui/react-popover"; import { liteClient as algoliasearch } from "algoliasearch/lite"; import type { BaseHit, Hit } from "instantsearch.js"; import { SearchIcon } from "lucide-react"; import type React from "react"; import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"; import { Configure, Highlight, InstantSearch, useHits, useSearchBox, } from "react-instantsearch"; import { Input } from "@/components/ui/input"; import { cn } from "@/lib/utils"; import { useKeyboardNavigation } from "@/registry/experiences/dropdown-search/hooks/use-keyboard-navigation"; export interface DropdownSearchConfig { /** Algolia Application ID (required) */ applicationId: string; /** Algolia API Key (required) */ apiKey: string; /** Algolia Index Name (required) */ indexName: string; /** Placeholder text for search input (optional, defaults to "Search...") */ placeholder?: string; /** Number of hits per page (optional, defaults to 5) */ hitsPerPage?: number; /** Map which hit attributes to render (supports dotted paths) */ attributes?: HitsAttributesMapping; /** Custom className for the root container */ className?: string; /** Max height for dropdown (optional, defaults to "300px") */ maxHeight?: string; /** Enable Algolia Insights (optional, defaults to true) */ insights?: boolean; /** Additional Algolia search parameters (optional) - e.g., analytics, filters, distinct, etc. */ searchParameters?: Record; } // ========================================================================= // Attribute Mapping // ========================================================================= type HitsAttributesMapping = { primaryText: string; secondaryText?: string; tertiaryText?: string; url?: string; image?: string; }; function toAttributePath(attribute?: string): string | string[] | undefined { if (!attribute) return undefined; return attribute.includes(".") ? attribute.split(".") : attribute; } function getByPath(obj: unknown, path?: string): T | undefined { if (!obj || !path) return undefined; const parts = path.split("."); let current: unknown = obj; for (const part of parts) { if (current == null || typeof current !== "object") return undefined; current = (current as Record)[part]; } return current as T | undefined; } // ============================================================================ // Internal Components // ============================================================================ interface HitsListProps { hits: Hit[]; query: string; selectedIndex: number; attributes?: HitsAttributesMapping; onItemClick?: () => void; onHoverIndex?: (index: number) => void; hoverEnabled?: boolean; sendEvent?: ( eventType: "click", hit: Hit, eventName: string, ) => void; } const HitsList = memo(function HitsList({ hits, selectedIndex, attributes, onItemClick, onHoverIndex, hoverEnabled, sendEvent, }: HitsListProps) { const [failedImages, setFailedImages] = useState>({}); const mapping = useMemo( () => ({ primaryText: attributes?.primaryText, secondaryText: attributes?.secondaryText, tertiaryText: attributes?.tertiaryText, url: attributes?.url, image: attributes?.image, }), [attributes], ); if (!attributes || !mapping.primaryText) { throw new Error("At least a primaryText is required to display results"); } return ( <> {hits.map((hit: any, idx: number) => { const isSel = selectedIndex === idx; const imageUrl = getByPath(hit, mapping.image); const url = getByPath(hit, mapping.url); const hasImage = Boolean(imageUrl); const isImageFailed = failedImages[hit.objectID] || !hasImage; const primaryVal = getByPath(hit, mapping.primaryText); return ( { sendEvent?.("click", hit, "Hit Clicked"); onItemClick?.(); }} className="flex flex-row items-center gap-3 cursor-pointer text-decoration-none text-foreground bg-background rounded-sm p-3 aria-selected:bg-accent transition-colors" role="option" aria-selected={isSel} onMouseEnter={() => { if (!hoverEnabled) return; onHoverIndex?.(idx); }} onMouseMove={() => { if (!hoverEnabled) return; onHoverIndex?.(idx); }} > {hasImage ? (

setFailedImages((prev) => ({ ...prev, [hit.objectID]: true, })) } /> ) : ( )}

) : null}

{mapping.secondaryText ? (

) : null} {mapping.tertiaryText ? (

) : null}

); })} ); }); interface SearchInputProps { placeholder?: string; className?: string; inputRef: React.RefObject; onArrowDown?: () => void; onEnter?: () => void; onArrowUp?: () => void; } const SearchInput = memo(function SearchInput(props: SearchInputProps) { const { query, refine } = useSearchBox(); const [inputValue, setInputValue] = useState(query || ""); function setQuery(newQuery: string) { setInputValue(newQuery); refine(newQuery); } return (

{ setQuery(event.currentTarget.value); }} onKeyDown={(e) => { if (e.key === "ArrowDown") { e.preventDefault(); props.onArrowDown?.(); return; } if (e.key === "ArrowUp") { e.preventDefault(); props.onArrowUp?.(); return; } if (e.key === "Enter") { e.preventDefault(); props.onEnter?.(); } }} />

); }); interface DropdownContentProps { query: string; selectedIndex: number; config: DropdownSearchConfig; onItemClick?: () => void; onHoverIndex?: (index: number) => void; scrollOnSelectionChange?: boolean; sendEvent?: ( eventType: "click", hit: Hit, eventName: string, ) => void; } const DropdownContent = memo(function DropdownContent({ query, selectedIndex, config, onItemClick, onHoverIndex, scrollOnSelectionChange = true, sendEvent, }: DropdownContentProps) { const { items } = useHits(); const containerRef = useRef(null); const noResults = items.length === 0; const [hoverEnabled, setHoverEnabled] = useState(false); // Enable hover selection only after the user moves the pointer inside the list useEffect(() => { const container = containerRef.current; if (!container) return; setHoverEnabled(false); const enable = () => setHoverEnabled(true); container.addEventListener("pointermove", enable, { once: true } as any); return () => { container.removeEventListener("pointermove", enable as any); }; }, []); // Scroll selected item into view // biome-ignore lint/correctness/useExhaustiveDependencies: expected useEffect(() => { if (!scrollOnSelectionChange) return; const container = containerRef.current; if (!container) return; const selectedEl = container.querySelector( '[aria-selected="true"]', ) as HTMLElement | null; if (!selectedEl) return; const padding = 8; const cRect = container.getBoundingClientRect(); const iRect = selectedEl.getBoundingClientRect(); if (iRect.top < cRect.top + padding) { container.scrollTop -= cRect.top + padding - iRect.top; } else if (iRect.bottom > cRect.bottom - padding) { container.scrollTop += iRect.bottom - (cRect.bottom - padding); } }, [selectedIndex, items.length, scrollOnSelectionChange]); const maxHeight = config.maxHeight || "300px"; if (noResults) { return (

No results for "{query}"

); } return ( ); }); interface DropdownSearchInnerProps { config: DropdownSearchConfig; } function DropdownSearchInner({ config }: DropdownSearchInnerProps) { const { query, refine } = useSearchBox(); const inputRef = useRef(null); const { items, sendEvent } = useHits(); const [open, setOpen] = useState(false); const { selectedIndex, moveDown, moveUp, activateSelection, hoverIndex, selectionOrigin, } = useKeyboardNavigation(items, query); // Control popover open state based on query useEffect(() => { setOpen(!!query && query.length > 0); }, [query]); const handleActivateSelection = useCallback((): boolean => { // Send click event for keyboard navigation before activating if (selectedIndex >= 0 && selectedIndex < items.length) { const hit = items[selectedIndex]; if (hit) { sendEvent?.("click", hit, "Hit Clicked"); } } if (activateSelection()) { setOpen(false); refine(""); return true; } return false; }, [activateSelection, refine, selectedIndex, items, sendEvent]); const handleItemClick = useCallback(() => { setOpen(false); refine(""); }, [refine]); return ( <>

{ // Prevent auto-focusing the popover content, keep focus on input e.preventDefault(); }} > {query ? ( ) : (

Start typing to search

)}

); } export default function DropdownSearchExperience(config: DropdownSearchConfig) { const searchClient = algoliasearch(config.applicationId, config.apiKey); searchClient.addAlgoliaAgent("algolia-sitesearch"); return (

); } 53:T72b,import type { BaseHit, Hit } from "instantsearch.js"; import { useCallback, useEffect, useMemo, useState } from "react"; interface UseKeyboardNavigationReturn { selectedIndex: number; moveDown: () => void; moveUp: () => void; activateSelection: () => boolean; hoverIndex: (index: number) => void; selectionOrigin: "keyboard" | "pointer" | "init"; } export function useKeyboardNavigation( hits: Hit[], query: string, ): UseKeyboardNavigationReturn { const [selectedIndex, setSelectedIndex] = useState(0); const [selectionOrigin, setSelectionOrigin] = useState< "keyboard" | "pointer" | "init" >("init"); const totalItems = useMemo(() => hits.length, [hits.length]); const moveDown = useCallback(() => { setSelectedIndex((prev) => (prev + 1) % totalItems); setSelectionOrigin("keyboard"); }, [totalItems]); const moveUp = useCallback(() => { setSelectedIndex((prev) => (prev - 1 + totalItems) % totalItems); setSelectionOrigin("keyboard"); }, [totalItems]); const hoverIndex = useCallback( (index: number) => { if (index < 0 || index >= totalItems) return; setSelectedIndex(index); setSelectionOrigin("pointer"); }, [totalItems], ); const activateSelection = useCallback((): boolean => { const hit = hits[selectedIndex]; const url = typeof hit?.url === "string" ? hit.url : undefined; if (url) { window.open(url, "_blank", "noopener,noreferrer"); return true; } return false; }, [selectedIndex, hits]); // biome-ignore lint/correctness/useExhaustiveDependencies: expected useEffect(() => { setSelectedIndex(0); setSelectionOrigin("init"); }, [query]); return { selectedIndex, moveDown, moveUp, activateSelection, hoverIndex, selectionOrigin, }; } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","algoliasearch@^5",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/algoliasearch","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"algoliasearch@^5"}]]}]}],["$","li","react-instantsearch@^7.16.2",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/react-instantsearch","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"react-instantsearch@^7.16.2"}]]}]}],["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","@radix-ui/react-popover",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-popover","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@radix-ui/react-popover"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":["input"]}]]}],["$","$L50",null,{"sourceUrl":"https://sitesearch.algolia.com/r/dropdown-search.json","proxyUrl":"https://shadcnregistry.com/r/algolia/dropdown-search","itemId":"@algolia/dropdown-search"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"src/registry/experiences/dropdown-search/components/dropdown-search.tsx","content":"$52","type":"registry:component"},{"path":"src/registry/experiences/dropdown-search/hooks/use-keyboard-navigation.ts","content":"$53","type":"registry:hook"},{"path":"src/registry/experiences/dropdown-search/page.tsx","content":"\"use client\";\n\nimport DropdownSearch from \"@/registry/experiences/dropdown-search/components/dropdown-search\";\n\nexport default function Page() {\n return (\n

\n \n

\n );\n}\n","type":"registry:page","target":"app/dropdown-search/page.tsx"}]}]]}],"$L54"]}]

Algolia Dropdown Search Experience

Installation

Files

components

hooks

app

Styles