"use client"; import { forwardRef, memo, useRef, useEffect, useLayoutEffect, useState, useCallback, useMemo, createContext, useContext, type ReactNode, type HTMLAttributes, type InputHTMLAttributes, } from "react"; import { motion, AnimatePresence, animate, useMotionValue } from "motion/react"; import { cva, type VariantProps } from "class-variance-authority"; import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox"; import { useIcons, type IconComponent } from "@/lib/icon-context"; import { cn } from "@/lib/utils"; import { spring, exitFallbackMs } from "@/lib/springs"; import { useFluidHover, useFluidHoverSelect, useRegisterFluidHoverItem, type FluidHoverActiveStore, type ItemRect, } from "@/hooks/use-fluid-hover"; import { useMergeSplitBlocks, useSelectionRuns, SelectionBackgrounds, } from "@/hooks/use-merge-split"; import { useShape, usePopupShape } from "@/lib/shape-context"; import { SizeProvider, useSize, typeClass, type SizeVariant } from "@/lib/size-context"; import { Elevated } from "@/lib/elevated"; import { popupMotionClass, popupScrollAreaClass, popupViewportClass, isDisabledRow, } from "@/lib/popup"; import { ScrollArea } from "@/components/ui/scroll-area"; import { FluidHoverHighlight } from "@/components/ui/fluid-hover-highlight"; // --------------------------------------------------------------------------- // Combobox // // A text field that filters a list as you type. Built on Base UI's Combobox // primitive, which owns the filtering, the combobox/listbox ARIA wiring // (aria-activedescendant — the input keeps focus while arrows move a // highlight through the rows), positioning, dismissal, and the hidden form // input. This layer keeps the fluid-hover overlays, the spring open/ // close animation (every close calls preventUnmountOnClose, and the content // releases the unmount through actionsRef once the exit spring ends), and // the animated checkmark — the same visuals as Select. // // Items are data: pass `items` to the root and render rows from the // ComboboxList function child. String items are their own value and label; // object items carry `{ value, label }` plus anything else you need. // --------------------------------------------------------------------------- const useIsoLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect; type ComboboxItemData = string | { value: string; label: string }; function itemValue(item: ComboboxItemData): string { return typeof item === "string" ? item : item.value; } function itemLabel(item: ComboboxItemData): string { return typeof item === "string" ? item : item.label; } // The create row is one more item in the list the primitive filters and // highlights, so Enter and the arrows reach it like any row. Its value can't // collide with a consumer's; its label is the query it would create. const CREATE_VALUE = "\u0000create"; function isCreateItem(item: ComboboxItemData): boolean { return itemValue(item) === CREATE_VALUE; } function defaultCreateLabel(query: string): ReactNode { return `Create “${query}”`; } type ComboboxValue = Multiple extends true ? string[] : string; interface ComboboxContextValue { /** Selected values — one entry in single mode, any number in multiple. */ values: string[]; multiple: boolean; inputValue: string; open: boolean; actionsRef: React.RefObject<{ unmount: () => void; close: () => void } | null>; /** The field (input group or chips container) the popup anchors to. */ anchorRef: React.RefObject; disabled: boolean; itemsByValue: Map; /** The create row's label for the current query; null while no row is * offered. */ createRow: ReactNode | null; /** `hideSelected` has emptied the list with nothing typed: every item is * a chip already. */ allSelected: boolean; } const ComboboxContext = createContext(null); /** Highlighted row (the primitive's active index over the rendered rows) * and whether a keyboard/auto highlight put it there — pointer highlights * are left to fluid hover. Its own context so a per-pointer highlight * re-renders the list, not the field and every row. */ interface Highlight { index: number; keyboard: boolean; } const ComboboxHighlightContext = createContext(null); function useComboboxContext() { const ctx = useContext(ComboboxContext); if (!ctx) throw new Error("Combobox compound components must be inside "); return ctx; } // Content context for fluid hover interface ComboboxContentContextValue { registerItem: (index: number, element: HTMLElement | null) => void; activeStore: FluidHoverActiveStore; } const ComboboxContentContext = createContext(null); // Each rendered row learns its index from the list, so consumers never // number rows by hand. const ComboboxItemIndexContext = createContext(0); // --------------------------------------------------------------------------- // Combobox (root) // --------------------------------------------------------------------------- interface ComboboxProps< T extends ComboboxItemData = ComboboxItemData, Multiple extends boolean = false, > { children: ReactNode; /** The options. Strings, or `{ value, label, … }` objects. */ items: readonly T[]; /** Select any number of items; pair with ComboboxChips for the field. * Values become `string[]`. @default false */ multiple?: Multiple; /** Selected value(s): a string ("" = none), or an array when `multiple`. */ value?: ComboboxValue; defaultValue?: ComboboxValue; onValueChange?: (value: ComboboxValue) => void; /** Match an item against the typed query. Defaults to a case-insensitive * "contains" on the label. */ filter?: (item: T, query: string) => boolean; /** Offer a last row that creates what was typed, whenever the query * matches no item's label exactly. Called with the trimmed query. Add the * new item to `items` and return it to select it. */ onCreate?: (query: string) => T | void; /** The create row's label. @default (query) => `Create “${query}”` */ createLabel?: (query: string) => ReactNode; /** Multiple only: selected items leave the list, so it reads as what is * left to add. The chips are then the only way to deselect. * @default false */ hideSelected?: boolean; disabled?: boolean; name?: string; required?: boolean; /** Pins field and popup to one step of the size ladder (default 36px, * compact 28px — see /docs/sizes). Omitted, both follow the surrounding * SizeProvider. */ size?: SizeVariant; } function toValues(v: string | readonly string[] | undefined): string[] { if (v === undefined) return []; if (Array.isArray(v)) return v as string[]; return v === "" ? [] : [v as string]; } function Combobox< T extends ComboboxItemData = ComboboxItemData, Multiple extends boolean = false, >({ children, items, multiple, value, defaultValue, onValueChange, filter, onCreate, createLabel = defaultCreateLabel, hideSelected = false, disabled = false, name, required, size, }: ComboboxProps) { const isMultiple = !!multiple; const [internalValues, setInternalValues] = useState(() => toValues(defaultValue) ); const [inputValue, setInputValue] = useState(""); const [open, setOpen] = useState(false); const [highlight, setHighlight] = useState(null); const actionsRef = useRef<{ unmount: () => void; close: () => void } | null>(null); const anchorRef = useRef(null); // Memoized on the prop identity: a string value is stable by nature and a // consumer's array is state, so the derived array (and everything keyed on // it) only changes when the selection does. const controlledValues = useMemo(() => toValues(value), [value]); const values = value !== undefined ? controlledValues : internalValues; // The query the primitive filters on: the trimmed input. In single mode // the field shows the selected label on open, which is an exact match, so // no create row appears until the user types past it. const query = inputValue.trim(); const createItem = useMemo(() => { if (!onCreate || query === "") return null; const lower = query.toLocaleLowerCase(); const exists = items.some((item) => itemLabel(item).toLocaleLowerCase() === lower); return exists ? null : { value: CREATE_VALUE, label: query }; }, [onCreate, query, items]); const itemsByValue = useMemo(() => { const map = new Map(); for (const item of items) map.set(itemValue(item), item); // Rows hand the primitive the item they were rendered from; the create // row's carries the query it stands for. if (createItem) map.set(CREATE_VALUE, createItem); return map; }, [items, createItem]); const selectedItems = useMemo( () => values.map((v) => itemsByValue.get(v)).filter(Boolean) as T[], [values, itemsByValue] ); // What the list shows: the items less the chips when `hideSelected`, plus // the create row last, so Enter picks a real match while one exists and // only creates once nothing matches. const hideChecked = hideSelected && isMultiple; const listItems = useMemo(() => { const visible = hideChecked ? items.filter((item) => !values.includes(itemValue(item))) : items; return createItem ? [...visible, createItem] : visible; }, [items, hideChecked, values, createItem]); const allSelected = hideChecked && query === "" && items.length > 0 && listItems.length === 0; // Base UI hands back the item(s); the public API speaks in values. A pick // on the create row is not a selection: it asks the consumer for the item, // and selects whatever comes back. const onCreateRef = useRef(onCreate); useIsoLayoutEffect(() => { onCreateRef.current = onCreate; }); const handleValueChange = useCallback( (next: T[] | T | null) => { const picked = Array.isArray(next) ? next : next == null ? [] : [next]; const created = picked.find(isCreateItem); let nextValues = picked.filter((item) => !isCreateItem(item)).map(itemValue); if (created) { const made = onCreateRef.current?.(itemLabel(created)); if (made == null) { // Nothing to select: a single field keeps its pick. if (!isMultiple) return; } else { nextValues = [...nextValues, itemValue(made)]; } } if (isMultiple) { // The primitive only knows the values that have an item. A value // whose item isn't loaded stays selected, in its place; new picks // go last. const pickedSet = new Set(nextValues); const kept = values.filter((v) => !itemsByValue.has(v) || pickedSet.has(v)); const keptSet = new Set(kept); nextValues = [...kept, ...nextValues.filter((v) => !keptSet.has(v))]; } if (value === undefined) setInternalValues(nextValues); onValueChange?.( (isMultiple ? nextValues : (nextValues[0] ?? "")) as ComboboxValue ); }, [value, onValueChange, isMultiple, values, itemsByValue] ); // The create row must survive the filter that hides every other miss. // Without a consumer filter the primitive's own collator match is kept. const { contains } = ComboboxPrimitive.useFilter(); const filterFn = useMemo(() => { if (!filter && !createItem) return undefined; const match = filter ? (item: ComboboxItemData, q: string) => filter(item as T, q) : (item: ComboboxItemData, q: string) => contains(item, q, itemLabel); return (item: ComboboxItemData, q: string) => isCreateItem(item) || match(item, q); }, [filter, createItem, contains]); const createRow = createItem ? createLabel(query) : null; const ctx = useMemo( () => ({ values, multiple: isMultiple, inputValue, open, actionsRef, anchorRef, disabled, itemsByValue, createRow, allSelected, }), [values, isMultiple, inputValue, open, disabled, itemsByValue, createRow, allSelected] ); // A size prop pins the whole compound (field + portalled popup — React // context crosses portals) to one step of the ladder. const root = ( itemValue(a) === itemValue(b)} itemToStringLabel={itemLabel} itemToStringValue={itemValue} filter={filterFn} open={open} onOpenChange={(next, details) => { // Hold the unmount for the exit spring; the content releases it. if (!next) details.preventUnmountOnClose(); setOpen(next); }} onInputValueChange={(next) => setInputValue(next)} actionsRef={actionsRef} autoHighlight={ALWAYS_HIGHLIGHT} onItemHighlighted={(item, details) => setHighlight( item === undefined ? null : { index: details.index, keyboard: details.reason !== "pointer" } ) } disabled={disabled} name={name} required={required} // Non-modal: the page keeps scrolling and the Positioner tracks the // anchor, so the popup follows its field instead of detaching. modal={false} > {children} ); return size ? {root} : root; } Combobox.displayName = "Combobox"; // --------------------------------------------------------------------------- // ComboboxInput — the field: leading icon, text input, clear ✕, chevron. // --------------------------------------------------------------------------- // The first row is highlighted the moment the list opens and follows the // query as it filters, so Enter always has a target. AriaCombobox accepts // "always" for this; ComboboxRoot's prop type still says boolean. const ALWAYS_HIGHLIGHT = "always" as unknown as boolean; const fieldVariants = cva( [ "group flex items-center ring-1 cursor-text", // Listed, never `all`: the chips field springs its height, and size or // padding changes must snap instead of easing against that spring. "transition-[color,background-color,border-radius,box-shadow,opacity] duration-80", "data-[disabled]:opacity-50 data-[disabled]:pointer-events-none", ], { variants: { variant: { // Framed at rest; the fills step up on hover and focus like an // input field. bordered: "ring-border bg-transparent hover:bg-muted/50 focus-within:bg-card", // Invisible at rest — the InputGroup field ladder: muted fill + // ring on hover, card fill when focused. borderless: "ring-transparent bg-transparent hover:bg-muted/50 hover:ring-border focus-within:bg-card focus-within:ring-border", }, }, defaultVariants: { variant: "bordered", }, } ); // The clear and chevron buttons share one quiet style; they sit inside the // field's ring so they need no frame of their own. // Chips and the small buttons inside the field follow the shape: round for // pill, 1px for sharp. Rounded keeps each class's own radius. const chipRadius = { pill: "rounded-full", rounded: "rounded-md", sharp: "rounded-[1px]" }; const fieldButtonRadius = { pill: "rounded-full", rounded: "", sharp: "rounded-[1px]" }; const fieldButtonClass = "flex shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors duration-80 hover:text-foreground focus-visible:ring-1 focus-visible:ring-[color:var(--focus-ring,#6B97FF)] data-[disabled]:pointer-events-none"; // The clear ✕ is a real icon button: the hover fill says "press me", where // the chevron beside it only decorates the field it belongs to. const clearButtonClass = cn( fieldButtonClass, "hover:bg-hover active:bg-active transition-[color,background-color]" ); // The clear target grows to the field's full height, and only 2px sideways so // it never reaches the chevron across the gap. const clearHitArea = (compact: boolean) => cn("relative before:absolute before:-inset-x-0.5", compact ? "before:-inset-y-1" : "before:-inset-y-1.5"); // A chip's ✕ sits on the chip's own hover-tinted fill, so it steps up a notch. // The 16/20px × grows by the chip's own 2px edge (a pseudo-element), so the // target reaches the chip's full height without overlapping the next chip. const chipRemoveClass = cn( fieldButtonClass, "relative rounded hover:bg-active before:absolute before:-inset-0.5" ); interface ComboboxFieldProps extends Omit< InputHTMLAttributes, "size" | "value" | "defaultValue" | "onChange" >, VariantProps { icon?: IconComponent; placeholder?: string; error?: string; /** Render a ✕ that clears the selection and query. Its slot is always * reserved so the field never changes width. @default false */ clearable?: boolean; /** Size override for the field alone. Prefer the `size` prop on * (or a surrounding SizeProvider) so the popup matches. */ size?: SizeVariant; } type ComboboxInputProps = ComboboxFieldProps; /** The trailing clear ✕ and chevron, shared by both fields. */ function FieldControls({ clearable, compact, iconSize, }: { clearable: boolean; compact: boolean; iconSize: number; }) { const icons = useIcons(); const XIcon = icons.x; const shape = useShape(); return ( <> {clearable && ( // The primitive hides the button while there is nothing to clear; a // fixed slot keeps the field's width steady either way. )} {/* Not a tab stop: the field itself opens on ArrowDown or typing. */} ); } const ComboboxInput = forwardRef( ( { className, variant, icon: Icon, placeholder = "Search…", error, clearable = false, size, ...props }, ref ) => { const shape = useShape(); const sizeClasses = useSize(size); const compact = sizeClasses.variant === "compact"; const { anchorRef } = useComboboxContext(); return (

{/* The group is the popup's anchor, so the list spans the whole field (icon to chevron), not just the text input. */} {Icon && ( )} {error && ( {error} )}

); } ); ComboboxInput.displayName = "ComboboxInput"; // --------------------------------------------------------------------------- // ComboboxChips — the multiple-selection field: one chip per selected item // ahead of the text input, wrapping onto new lines as they accumulate. // Backspace in an empty input removes the last chip; ArrowLeft walks into // the chips, where Backspace/Delete removes the focused one. // --------------------------------------------------------------------------- type ComboboxChipsProps = ComboboxFieldProps; /** Springs the chips field's height to the measured chip row stack (plus * `padY`, the field's vertical padding) as chips wrap and unwrap. The * height lives in a MotionValue driving an inline style, and for a reason: * the field must stay pinned at its old height through the reflow that * wraps a chip, or its auto height lands on the new row before any spring * can start and the growth snaps. First measure sets the pin; every later * one springs it. Measured (offsetHeight + ResizeObserver), never * `height: "auto"`: framer resolves "auto" from the element's *visual* * (transformed) size, so under a scaled ancestor (the /demo card) the * spring would overshoot. Layout metrics are transform-immune. */ function useChipRowHeight(padY: number) { const height = useMotionValue("auto"); const roRef = useRef(null); const padRef = useRef(padY); useIsoLayoutEffect(() => { padRef.current = padY; }); const measure = useCallback( (el: HTMLDivElement | null) => { roRef.current?.disconnect(); roRef.current = null; if (!el) return; const measure = () => { if (el.offsetHeight <= 0) return; const target = el.offsetHeight + padRef.current; if (height.get() === "auto") height.set(target); else if (height.get() !== target) animate(height, target, spring.fast); }; measure(); const ro = new ResizeObserver(measure); ro.observe(el); roRef.current = ro; }, [height] ); return { measure, height }; } const ComboboxChips = forwardRef( ( { className, variant, icon: Icon, placeholder = "Search…", error, clearable = false, size, ...props }, ref ) => { const icons = useIcons(); const XIcon = icons.x; const shape = useShape(); const sizeClasses = useSize(size); const compact = sizeClasses.variant === "compact"; const { anchorRef, open, disabled, inputValue, values } = useComboboxContext(); const { measure: measureChipRows, height: chipRowsHeight } = useChipRowHeight( compact ? 8 : 12 ); return (

} // Chips stamps no state attributes of its own (InputGroup does); // the field ladder and the chevron read these. data-disabled={disabled || undefined} data-popup-open={open || undefined} className={cn( fieldVariants({ variant }), // Grows with its chips. Rows top-align (`items-start`) so the // icon and controls hold the first line while chips wrap; the // vertical padding is exactly what centers one 24px (20px // compact) row inside the ladder height. "!items-start", compact ? "min-h-7 py-1" : "min-h-9 py-1.5", sizeClasses.gap, compact ? "px-2" : "px-2.5", compact ? "min-w-[128px]" : "min-w-[160px]", shape.input, error && "ring-destructive/50 hover:ring-destructive/50 focus-within:ring-destructive/50", className )} > {Icon && ( // A row-height box keeps the icon centered on the first line. )}

0 && "-ml-1" )} > {(selected: ComboboxItemData[] | null) => ( <> {/* Chips pop in and out on the fast tier and slide into their new slots; an exiting chip is inert while it fades, since the primitive has already dropped it. popLayout lifts the exiting chip out of the flow at once, so the field reflows immediately rather than after the fade. */} {(selected ?? []).map((item) => { const label = itemLabel(item); return ( {label} ); })} {/* The field sizes to what is typed (`size` is the intrinsic width; flex-auto grows it across the rest of its row) so it stays beside the chips while it fits and wraps only once the text no longer does. It never animates: chips slide, the field snaps. Animating it read as the placeholder sliding in from the right when the last chip went. */} )}

{error && ( {error} )}

); } ); ComboboxChips.displayName = "ComboboxChips"; // --------------------------------------------------------------------------- // ComboboxContent — the popup surface. Holds ComboboxEmpty and ComboboxList. // --------------------------------------------------------------------------- type PositionerProps = React.ComponentProps; interface ComboboxContentProps { className?: string; children: ReactNode; side?: PositionerProps["side"]; align?: PositionerProps["align"]; sideOffset?: number; /** Keeps the popup inside this element's box rather than the window's * (a table's, a panel's): it shifts or flips to stay within. */ collisionBoundary?: Element | null; /** Space kept from the boundary's edges, in px. @default 0 */ collisionPadding?: number; } const ComboboxContent = forwardRef( ({ className, children, side = "bottom", align = "start", sideOffset = 6, collisionBoundary, collisionPadding }, ref) => { const { open, actionsRef, anchorRef } = useComboboxContext(); const shape = usePopupShape(); // Release Base UI's deferred unmount once the exit tween has played. // onAnimationComplete on the motion.div is the primary signal; this // timeout is a fallback for throttled/background tabs where rAF-driven // animation callbacks can stall. The popup exits with spring.fast, so the // fallback tracks that tier's exit duration plus a safety buffer. useEffect(() => { if (open) return; const id = setTimeout( () => actionsRef.current?.unmount(), exitFallbackMs(spring.fast) ); return () => clearTimeout(id); }, [open, actionsRef]); return ( { if (!open) actionsRef.current?.unmount(); }} > } className={cn( // min-w tracks the field via the Positioner's --anchor-width // var; the list inside owns padding and scrolling. `flex flex-col min-w-[var(--anchor-width)] max-h-[min(300px,var(--available-height))] overflow-hidden ${shape.container} select-none outline-none`, className )} > {children} ); } ); ComboboxContent.displayName = "ComboboxContent"; // --------------------------------------------------------------------------- // ComboboxList — renders a row per matching item, carrying the fluid hover // hover overlays and the animated selected background / focus ring. // --------------------------------------------------------------------------- interface ComboboxListProps { className?: string; /** Render one row per matching item: `(item, index) => `. */ children: (item: ComboboxItemData, index: number) => ReactNode; } const ComboboxList = forwardRef( ({ className, children }, ref) => { const { open, values, multiple, inputValue, createRow } = useComboboxContext(); const highlight = useContext(ComboboxHighlightContext); const icons = useIcons(); const PlusIcon = icons.plus; const shape = usePopupShape(); const containerRef = useRef(null); const hover = useFluidHover(containerRef, { isItemDisabled: isDisabledRow }); const { activeStore, setActiveIndex, itemRects, isMeasured, handlers, registerItem, remeasure, } = hover; // Checked rows by index — one in single mode, any number in multiple. const [checkedIndices, setCheckedIndices] = useState([]); // Fresh rects once per open — the popup keeps its rows registered while // it sits hidden between opens, so registration alone never triggers a // pass on reopen. Filtering re-registers rows, which the hook coalesces // into its own measurement. useEffect(() => { if (!open) return; remeasure(); }, [open, remeasure]); // Typing re-filters the rows underneath the overlays, and those frames // must snap, not glide — an overlay springing to wherever its row LANDED // reads as the list smearing on every keystroke. The primitive filters // internally, so the query is the reflow signal (picks don't change it, // keeping multiple mode's merge/split glide). The flag arms on the // query's render and holds until the rects measured from the new row // set land — measurement coalesces on a rAF, one render behind. // `armedRects` holds the rects of the old row set while armed; the flag // clears a frame after rects from the new row set have rendered. const [reflow, setReflow] = useState<{ query: string; armedRects: ItemRect[] | null; }>(() => ({ query: inputValue, armedRects: null })); if (reflow.query !== inputValue) { setReflow({ query: inputValue, armedRects: itemRects }); } const reflowSnap = reflow.armedRects !== null; const reflowLanded = reflow.armedRects !== null && itemRects !== reflow.armedRects; useEffect(() => { if (!reflowLanded) return; const armed = reflow.armedRects; const frame = requestAnimationFrame(() => setReflow((r) => (r.armedRects === armed ? { ...r, armedRects: null } : r)) ); return () => cancelAnimationFrame(frame); }, [reflowLanded, reflow.armedRects]); // Detect the checked rows. Their indices shift as the query filters the // list, so the typed value is a dependency too. useEffect(() => { if (!open) return; // Double rAF: first waits for React commit, second for layout let inner: number; const outer = requestAnimationFrame(() => { inner = requestAnimationFrame(() => { const container = containerRef.current; if (container) { const rows = Array.from( container.querySelectorAll("[data-fluid-hover-index]") ) as HTMLElement[]; const next: number[] = []; rows.forEach((el, i) => { if (values.includes(el.getAttribute("data-value") ?? "")) next.push(i); }); setCheckedIndices(next); } }); }); return () => { cancelAnimationFrame(outer); cancelAnimationFrame(inner); }; }, [open, values, inputValue]); // A keyboard (or auto) highlight drives the hover background — the only // indicator: the row Enter would pick reads like the row the pointer // would pick, with no ring. useEffect(() => { // A dropped highlight (the input is the stop again) takes the hover // background with it — otherwise it would linger on the last row. if (!highlight) setActiveIndex(null); else if (highlight.keyboard) setActiveIndex(highlight.index); }, [highlight, setActiveIndex]); // Reset every overlay index as the close begins (during the render that // closes it), so the reopen doesn't spring an overlay from a stale row. const [overlaysOpen, setOverlaysOpen] = useState(open); if (overlaysOpen !== open) { setOverlaysOpen(open); if (!open) { setCheckedIndices([]); setActiveIndex(null); } } // Overlays read rects only once the hook reports the row set fully // measured — positioning one from an incomplete pass mounts it at the // wrong row, and the correcting pass then springs it across the list. // Single mode glides ONE marker between rows (a value change springs it // to the picked row). Multiple mode paints one block per contiguous run // of checked rows — merging and splitting like CheckboxGroup as picks // bridge or break a run. const checkedRect = isMeasured && !multiple && checkedIndices.length > 0 ? itemRects[checkedIndices[0]] : null; const runs = useSelectionRuns(multiple ? checkedIndices : []); const blocks = useMergeSplitBlocks( runs, isMeasured && open ? itemRects : [], shape.bgRadius ); const contentCtx = useMemo( () => ({ registerItem, activeStore }), [registerItem, activeStore] ); // No matches keeps the popup at the height the last matches gave it, so // ComboboxEmpty sits where the rows were and the popup doesn't jump on // each keystroke into and out of an empty query. Watching the rows // themselves catches every filter pass; the observer fires before paint. useIsoLayoutEffect(() => { const list = containerRef.current; const surface = list?.closest('[data-slot="scroll-area"]')?.parentElement; if (!list || !surface) return; let shownHeight = 0; const sync = () => { if (list.querySelector('[role="option"]')) { surface.style.minHeight = ""; shownHeight = surface.offsetHeight; } else if (shownHeight) { surface.style.minHeight = `${shownHeight}px`; } }; sync(); const observer = new MutationObserver(sync); observer.observe(list, { childList: true, subtree: true }); return () => { observer.disconnect(); surface.style.minHeight = ""; }; }, []); return ( {/* With no options the list gives up its flex-1, so the free height the floor holds goes to ComboboxEmpty's my-auto and centers it. */} { (containerRef as React.MutableRefObject).current = node; if (typeof ref === "function") ref(node); else if (ref) (ref as React.MutableRefObject).current = node; }} onMouseEnter={handlers.onMouseEnter} onMouseMove={handlers.onMouseMove} onMouseLeave={handlers.onMouseLeave} onClick={handlers.onClick} className={cn( // The list is the overlays' offsetParent, so rows and overlays // scroll together inside the ScrollArea. Padding collapses when // the list is empty (ComboboxEmpty takes over). "relative flex flex-col p-1 outline-none data-[empty]:p-0", className )} > {/* The three overlays are torn down as the close begins rather than exit-animated: an overlay still mounted when the popup reopens is one AnimatePresence re-adopts under its old key and animates from the row it had before. */} {/* Selected background */} {open && multiple && ( ({ ...b, instant: true })) : blocks} /> )} {open && !multiple && ( {checkedRect && ( )} )} {/* Hover background. Snaps (no travel) while a filter reflow is moving the rows underneath. */} {open && ( )} {/* The overlays above are plain children, so the rows come from an explicit Collection (a function child on List would have to be its only child). */} {(item: ComboboxItemData, index: number) => ( {/* The create row is the list's, not the consumer's: it reads the label from the root and picks like any row. */} {isCreateItem(item) ? ( {createRow} ) : ( children(item, index) )} )} ); } ); ComboboxList.displayName = "ComboboxList"; // --------------------------------------------------------------------------- // ComboboxItem // --------------------------------------------------------------------------- interface ComboboxItemProps extends HTMLAttributes { icon?: IconComponent; /** The item's value — a string item itself, or an object item's `value`. */ value: string; disabled?: boolean; } // Memoized: the list re-renders on every highlight change (it reads the // highlight context) and builds its rows inline, so without memo every row // would render again per pointer move. Rows read their own lit state from // the fluid hover store. const ComboboxItem = memo(forwardRef( ({ className, children, icon: Icon, value, disabled = false, ...props }, ref) => { const comboboxCtx = useComboboxContext(); const contentCtx = useContext(ComboboxContentContext); const index = useContext(ComboboxItemIndexContext); const internalRef = useRef(null); const shape = usePopupShape(); const sizeClasses = useSize(); const compact = sizeClasses.variant === "compact"; // Register with fluid hover. Depends on the (stable) registerItem // rather than the content context, which is rebuilt on every activeIndex // change. const registerItem = contentCtx?.registerItem; useRegisterFluidHoverItem(registerItem, index, internalRef); const isActive = useFluidHoverSelect(contentCtx?.activeStore, (i) => i === index); const isChecked = comboboxCtx.values.includes(value); // Base UI matches rows to `items` by value, so the row hands back the // item it was rendered from. const item = comboboxCtx.itemsByValue.get(value) ?? value; return ( { (internalRef as React.MutableRefObject).current = node; if (typeof ref === "function") ref(node); else if (ref) (ref as React.MutableRefObject).current = node; }} data-fluid-hover-index={index} data-value={value} className={cn( // Fixed height so the text-box trim on the label doesn't // shrink the row; shrink-0 because the list is a max-height // flex column. `relative z-10 flex ${sizeClasses.control} shrink-0 items-center ${sizeClasses.gap} ${shape.item} ${sizeClasses.itemPx} ${sizeClasses.text} cursor-pointer outline-none select-none`, "transition-[color] duration-80", isActive || isChecked ? "text-foreground" : "text-muted-foreground", disabled && "opacity-50 pointer-events-none", className )} {...props} /> } > {Icon && ( )} {/* py-1/-my-1 keeps truncate's overflow:hidden from clipping ascenders/descenders outside the trimmed box. */} {children} {/* Always-rendered fixed slot so the check appearing/disappearing never changes the row's intrinsic width. */} {/* initial={false}: a row checked at mount shows the finished check instead of drawing it, so default selections don't animate on page load. */} {isChecked && ( )} ); } )); ComboboxItem.displayName = "ComboboxItem"; // --------------------------------------------------------------------------- // ComboboxEmpty — shown in place of the list when nothing matches. // --------------------------------------------------------------------------- interface ComboboxEmptyProps extends HTMLAttributes { /** Shown instead of the children when `hideSelected` has emptied the * list with nothing typed: every item is a chip already. */ allSelected?: ReactNode; } const ComboboxEmpty = forwardRef( ({ className, children, allSelected, ...props }, ref) => { const sizeClasses = useSize(); const ctx = useComboboxContext(); return ( // Base UI keeps this element mounted (it is a live region) and only // renders the children while the list is empty — so the padding is // gated on having content. {ctx.allSelected && allSelected !== undefined ? allSelected : children} ); } ); ComboboxEmpty.displayName = "ComboboxEmpty"; // --------------------------------------------------------------------------- // Exports // --------------------------------------------------------------------------- export { Combobox, ComboboxInput, ComboboxChips, ComboboxContent, ComboboxList, ComboboxItem, ComboboxEmpty, fieldVariants as comboboxFieldVariants, }; export type { ComboboxItemData, ComboboxValue, ComboboxProps, ComboboxInputProps, ComboboxChipsProps, ComboboxContentProps, ComboboxListProps, ComboboxItemProps, ComboboxEmptyProps, };